refactor(PlaceholderDirective): extract cPlaceholderAnimation, remove cPlaceholderColor prop

Author: xidedix

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

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

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

@@ -0,0 +1,31 @@
+import { AfterContentInit, ContentChild, Directive, HostBinding, Input } from '@angular/core';
+import { PlaceholderDirective } from './placeholder.directive';
+
+@Directive({
+  selector: '[cPlaceholderAnimation]'
+})
+export class PlaceholderAnimationDirective implements AfterContentInit {
+
+  constructor() { }
+
+  /**
+   * Animation type for placeholder
+   * @type 'glow' | 'wave'
+   * @default undefined
+   */
+  @Input('cPlaceholderAnimation') animation?: 'glow' | 'wave';
+
+  @HostBinding('class')
+  get hostClasses(): any {
+    return {
+      [`placeholder-${this.animation}`]: this.animate && !!this.animation
+    };
+  }
+
+  @ContentChild(PlaceholderDirective) placeholder!: PlaceholderDirective;
+  private animate: boolean = false;
+
+  ngAfterContentInit() {
+    this.animate = this.placeholder?.visible;
+  }
+}

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

@@ -1,40 +1,45 @@
 import { Directive, HostBinding, Input } from '@angular/core';
-import { Colors } from '../coreui.types';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Directive({
-  selector: '[cPlaceholder]'
+  selector: '[cPlaceholder]',
+  exportAs: 'cPlaceholder'
 })
 export class PlaceholderDirective {
 
-  constructor() { }
+  static ngAcceptInputType_visible: BooleanInput;
 
-  /**
-   * Animation type for placeholder
-   * @type 'glow' | 'wave'
-   * @default undefined
-   */
-  @Input() animation?: 'glow' | 'wave';
+  constructor() { }
 
   /**
-   * Custom color for placeholder
-   * @type Colors
-   * @default undefined
+   * placeholder toggler
+   * @type boolean
+   * @default true
    */
-  @Input('cPlaceholderColor') color?: Colors;
+  @Input('cPlaceholder')
+  set visible(value: boolean) {
+    this._visible = coerceBooleanProperty(value);
+  }
+  get visible() {
+    return this._visible;
+  }
+  private _visible: boolean = false;
 
   /**
    * Size the placeholder extra small, small, large.
    */
   @Input('cPlaceholderSize') size?: 'xs' | 'sm' | 'lg';
 
+  @HostBinding('attr.aria-hidden')
+  get ariaHidden(): boolean | null {
+    return this.visible ? null : true;
+  };
+
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'placeholder': true,
-      [`placeholder-${this.animation}`]: !!this.animation,
-      [`placeholder-${this.size}`]: !!this.size,
-      [`bg-${this.color}`]: !!this.color
+      'placeholder': this.visible,
+      [`placeholder-${this.size}`]: !!this.size
     };
   }
-
 }

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

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

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

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