feat: placeholders

Author: xidedix

src/app/containers/default-layout/_nav.ts

@@ -66,6 +66,10 @@ export const navItems: INavData[] = [
         name: 'Pagination',
         url: '/base/pagination'
       },
+      {
+        name: 'Placeholder',
+        url: '/base/placeholder'
+      },
       {
         name: 'Popovers',
         url: '/base/popovers'

src/app/views/base/base-routing.module.ts

@@ -15,6 +15,7 @@ import { SpinnersComponent } from './spinners/spinners.component';
 import { TablesComponent } from './tables/tables.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
 import { TabsComponent } from './tabs/tabs.component';
+import { PlaceholdersComponent } from './placeholders/placeholders.component';
 
 const routes: Routes = [
   {
@@ -83,6 +84,13 @@ const routes: Routes = [
           title: 'Pagination',
         },
       },
+      {
+        path: 'placeholder',
+        component: PlaceholdersComponent,
+        data: {
+          title: 'Placeholder',
+        },
+      },
       {
         path: 'popovers',
         component: PopoversComponent,

src/app/views/base/base.module.ts

@@ -17,14 +17,15 @@ import {
   ListGroupModule,
   NavModule,
   PaginationModule,
+  PlaceholderModule,
   PopoverModule,
   ProgressModule,
   SharedModule,
   SpinnerModule,
   TableModule,
   TabsModule,
   TooltipModule,
-  UtilitiesModule,
+  UtilitiesModule
 } from '@coreui/angular';
 
 import { IconModule } from '@coreui/icons-angular';
@@ -41,6 +42,7 @@ import { CollapsesComponent } from './collapses/collapses.component';
 import { ListGroupsComponent } from './list-groups/list-groups.component';
 import { NavsComponent } from './navs/navs.component';
 import { PaginationsComponent } from './paginations/paginations.component';
+import { PlaceholdersComponent } from './placeholders/placeholders.component';
 import { PopoversComponent } from './popovers/popovers.component';
 import { ProgressComponent } from './progress/progress.component';
 import { SpinnersComponent } from './spinners/spinners.component';
@@ -67,6 +69,7 @@ import { BaseRoutingModule } from './base-routing.module';
     ListGroupModule,
     IconModule,
     ListGroupModule,
+    PlaceholderModule,
     ProgressModule,
     SpinnerModule,
     TabsModule,
@@ -96,6 +99,7 @@ import { BaseRoutingModule } from './base-routing.module';
     TablesComponent,
     TooltipsComponent,
     TabsComponent,
+    PlaceholdersComponent,
   ],
 })
 export class BaseModule {}

src/app/views/base/placeholders/placeholders.component.html

@@ -0,0 +1,4 @@
+<p cPlaceholder cPlaceholderColor="danger" cPlaceholderSize="lg" cCol xs="6">placeholders works!</p>
+<p cPlaceholder animation="glow">
+  <span cPlaceholder cPlaceholderColor="success" cPlaceholderSize="lg" cCol xs="6" ></span>
+</p>

src/app/views/base/placeholders/placeholders.component.scss

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

src/app/views/base/placeholders/placeholders.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-placeholders',
+  templateUrl: './placeholders.component.html',
+  styleUrls: ['./placeholders.component.scss']
+})
+export class PlaceholdersComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}