first commit

src/app/content/cards/bootstrap/bootstrap.component.css

@@ -0,0 +1,11 @@
+:host ::ng-deep .block-ui-wrapper {
+  background: rgba(255, 249, 249, 0.5) !important;
+}
+
+:host ::ng-deep .list-group-item {
+  border: 1px solid #E4E7ED !important;
+}
+
+:host ::ng-deep .carousel-item-next:not(.carousel-item-left){
+  transform: unset !important;
+}

src/app/content/cards/bootstrap/bootstrap.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { BootstrapComponent } from './bootstrap.component';
+
+describe('BootstrapComponent', () => {
+  let component: BootstrapComponent;
+  let fixture: ComponentFixture<BootstrapComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BootstrapComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BootstrapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/cards/bootstrap/bootstrap.component.ts

@@ -0,0 +1,110 @@
+import { Component, OnInit } from '@angular/core';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NgBlockUI, BlockUI } from 'ng-block-ui';
+
+@Component({
+  selector: 'app-bootstrap',
+  templateUrl: './bootstrap.component.html',
+  styleUrls: ['./bootstrap.component.css']
+})
+export class BootstrapComponent implements OnInit {
+  @BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
+  @BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
+
+  public breadcrumb: any;
+  options = {
+    close: true,
+    expand: true,
+    minimize: true,
+    reload: true
+  };
+
+  contactForm: FormGroup;
+  projectInfo: FormGroup;
+  userProfile: FormGroup;
+
+  interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
+  budget = [
+    'less than 500$',
+    '500$ - 1000$',
+    '1000$ - 2000$',
+    'more than 20000$'
+  ];
+
+  carouselOne = [
+    '../../../assets/images/carousel/02.jpg',
+    '../../../assets/images/carousel/03.jpg',
+    '../../../assets/images/carousel/01.jpg'
+  ];
+
+  carouselTwo = [
+    '../../../assets/images/carousel/08.jpg',
+    '../../../assets/images/carousel/03.jpg',
+    '../../../assets/images/carousel/01.jpg'
+  ];
+
+  constructor(private formBuilder: FormBuilder, config: NgbCarouselConfig) {
+    config.interval = 3000;
+    config.keyboard = false;
+  }
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: 'Bootstrap Cards',
+      links: [
+        {
+          name: 'Home',
+          isLink: true,
+          link: '/dashboard/sales'
+        },
+        {
+          name: 'Cards',
+          isLink: true,
+          link: '#'
+        }
+      ]
+    };
+
+    this.contactForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      email: ['', Validators.required],
+      message: ['', Validators.required]
+    });
+
+    this.projectInfo = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      phone: ['', Validators.required],
+      company: ['', Validators.required],
+      interestedIn: ['', Validators.required],
+      budget: ['', Validators.required],
+      aboutProject: ['', Validators.required]
+    });
+
+    this.userProfile = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      userName: ['', Validators.required],
+      nickName: ['', Validators.required],
+      email: ['', Validators.required],
+      website: ['', Validators.required],
+      bio: ['', Validators.required]
+    });
+  }
+  reloadProjectInfo() {
+    this.blockUIProjectInfo.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIProjectInfo.stop();
+    }, 2500);
+  }
+  reloadUserProfile() {
+    this.blockUIUserProfile.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIUserProfile.stop();
+    }, 2500);
+  }
+}

src/app/content/cards/cards.module.spec.ts

@@ -0,0 +1,13 @@
+import { CardsModule } from './cards.module';
+
+describe('CardsModule', () => {
+  let cardsModule: CardsModule;
+
+  beforeEach(() => {
+    cardsModule = new CardsModule();
+  });
+
+  it('should create an instance', () => {
+    expect(cardsModule).toBeTruthy();
+  });
+});

src/app/content/cards/cards.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { BootstrapComponent } from './bootstrap/bootstrap.component';
+import { CardModule } from '../partials/general/card/card.module';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
+import { BlockUIModule } from 'ng-block-ui';
+import { MatchHeightModule } from '../partials/general/match-height/match-height.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CardModule,
+    NgbModule,
+    MatchHeightModule,
+    BreadcrumbModule,
+    ReactiveFormsModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([{
+        path: 'bootstrap',
+        component: BootstrapComponent
+      },
+    ])
+  ],
+  declarations: [BootstrapComponent],
+  exports: [RouterModule]
+})
+export class CardsModule { }