refactor(placeholder): input signals, host bindings

Author: xidedix

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

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

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

@@ -1,31 +1,28 @@
-import { AfterContentInit, ContentChild, Directive, HostBinding, Input } from '@angular/core';
+import { computed, contentChild, Directive, input, InputSignal } from '@angular/core';
 import { PlaceholderDirective } from './placeholder.directive';
 
 @Directive({
   selector: '[cPlaceholderAnimation]',
-  standalone: true
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()'
+  }
 })
-export class PlaceholderAnimationDirective implements AfterContentInit {
-
+export class PlaceholderAnimationDirective {
   /**
    * Animation type for placeholder
    * @type 'glow' | 'wave'
    * @default undefined
    */
-  @Input('cPlaceholderAnimation') animation?: 'glow' | 'wave';
-
-  @ContentChild(PlaceholderDirective) placeholder!: PlaceholderDirective;
+  readonly animation: InputSignal<'glow' | 'wave' | undefined> = input<'glow' | 'wave' | undefined>(undefined, {
+    alias: 'cPlaceholderAnimation'
+  });
 
-  #animate: boolean = false;
+  readonly placeholder = contentChild(PlaceholderDirective);
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     return {
-      [`placeholder-${this.animation}`]: this.#animate && !!this.animation
+      [`placeholder-${this.animation()}`]: this.placeholder()?.visible() && !!this.animation()
     };
-  }
-
-  ngAfterContentInit() {
-    this.#animate = this.placeholder?.visible;
-  }
+  });
 }

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

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

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

@@ -1,34 +1,38 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core';
 
 @Directive({
   selector: '[cPlaceholder]',
   exportAs: 'cPlaceholder',
-  standalone: true
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.aria-hidden]': 'ariaHidden()'
+  }
 })
 export class PlaceholderDirective {
-
   /**
    * placeholder toggler
    * @type boolean
    * @default false
    */
-  @Input({ alias: 'cPlaceholder', transform: booleanAttribute }) visible: boolean = false;
+  readonly visible: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {
+    transform: booleanAttribute,
+    alias: 'cPlaceholder'
+  });
 
   /**
    * Size the placeholder xs, small, large.
    */
-  @Input('cPlaceholderSize') size?: 'xs' | 'sm' | 'lg';
+  readonly size = input<'xs' | 'sm' | 'lg' | undefined>(undefined, { alias: 'cPlaceholderSize' });
 
-  @HostBinding('attr.aria-hidden')
-  get ariaHidden(): boolean | null {
-    return this.visible ? null : true;
-  };
+  readonly ariaHidden = computed(() => {
+    return this.visible() ? null : true;
+  });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     return {
-      'placeholder': this.visible,
-      [`placeholder-${this.size}`]: !!this.size
+      placeholder: this.visible(),
+      [`placeholder-${this.size()}`]: !!this.size()
     };
-  }
+  });
 }