feat: placeholder

Author: xidedix

projects/coreui-angular/src/lib/placeholder/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

projects/coreui-angular/src/lib/placeholder/placeholder.directive.spec.ts

@@ -0,0 +1,8 @@
+import { PlaceholderDirective } from './placeholder.directive';
+
+describe('PlaceholderDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PlaceholderDirective();
+    expect(directive).toBeTruthy();
+  });
+});

projects/coreui-angular/src/lib/placeholder/placeholder.directive.ts

@@ -0,0 +1,40 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+import { Colors } from '../coreui.types';
+
+@Directive({
+  selector: '[cPlaceholder]'
+})
+export class PlaceholderDirective {
+
+  constructor() { }
+
+  /**
+   * Animation type for placeholder
+   * @type 'glow' | 'wave'
+   * @default undefined
+   */
+  @Input() animation?: 'glow' | 'wave';
+
+  /**
+   * Custom color for placeholder
+   * @type Colors
+   * @default undefined
+   */
+  @Input('cPlaceholderColor') color?: Colors;
+
+  /**
+   * Size the placeholder extra small, small, large.
+   */
+  @Input('cPlaceholderSize') size?: 'xs' | 'sm' | 'lg';
+
+  @HostBinding('class')
+  get hostClasses(): any {
+    return {
+      'placeholder': true,
+      [`placeholder-${this.animation}`]: !!this.animation,
+      [`placeholder-${this.size}`]: !!this.size,
+      [`bg-${this.color}`]: !!this.color
+    };
+  }
+
+}

projects/coreui-angular/src/lib/placeholder/placeholder.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlaceholderDirective } from './placeholder.directive';
+
+@NgModule({
+  declarations: [
+    PlaceholderDirective
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    PlaceholderDirective
+  ]
+})
+export class PlaceholderModule {
+}

projects/coreui-angular/src/lib/placeholder/public_api.ts

@@ -0,0 +1,2 @@
+export { PlaceholderDirective } from './placeholder.directive';
+export { PlaceholderModule } from './placeholder.module';

projects/coreui-angular/src/public-api.ts

@@ -27,6 +27,7 @@ export * from './lib/navbar';
 export * from './lib/modal';
 export * from './lib/offcanvas';
 export * from './lib/pagination';
+export * from './lib/placeholder';
 export * from './lib/popover';
 export * from './lib/progress';
 export * from './lib/services';