refactor(button): input signals

Author: xidedix

projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts

@@ -1,37 +1,36 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core';
 
 @Component({
   selector: 'c-button-group',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' }
 })
 export class ButtonGroupComponent {
-
   /**
    * Size the component small or large.
    * @type { 'sm' | 'lg' }
    */
-  @Input() size?: 'sm' | 'lg';
+  size: InputSignal<'sm' | 'lg' | undefined> = input();
+
   /**
    * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
    * @type boolean
    */
-  @Input() vertical?: boolean;
+  vertical: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
+
   /**
    * Default role attr for ButtonGroup. [docs]
-   * @type string
+   * @type InputSignal<string>
    * @default 'group'
    */
-  @HostBinding('attr.role')
-  @Input() role = 'group';
+  role: InputSignal<string> = input('group');
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  hostClasses = computed(() => {
     return {
-      'btn-group': !this.vertical,
-      'btn-group-vertical': this.vertical,
-      [`btn-group-${this.size}`]: !!this.size
+      'btn-group': !this.vertical(),
+      'btn-group-vertical': this.vertical(),
+      [`btn-group-${this.size()}`]: !!this.size()
     };
-  }
-
+  });
 }

projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts

@@ -1,18 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, input, InputSignal } from '@angular/core';
 
 @Component({
   selector: 'c-button-toolbar',
   template: '<ng-content />',
   standalone: true,
-  host: { class: 'btn-toolbar' }
+  host: { class: 'btn-toolbar', '[attr.role]': 'role()' }
 })
 export class ButtonToolbarComponent {
   /**
    * Default role attr for ButtonToolbar. [docs]
-   * @type string
+   * @type InputSignal<string>
    * @default 'toolbar'
    */
-  @HostBinding('attr.role')
-  @Input()
-  role = 'toolbar';
+  role: InputSignal<string> = input('toolbar');
 }

projects/coreui-angular/src/lib/button/button-close.directive.spec.ts

@@ -13,7 +13,6 @@ class MockElementRef extends ElementRef {}
 class TestComponent {}
 
 describe('ButtonCloseDirective', () => {
-
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
   let elementRef: DebugElement;
@@ -32,8 +31,10 @@ describe('ButtonCloseDirective', () => {
   });
 
   it('should create an instance', () => {
-    const directive = new ButtonCloseDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new ButtonCloseDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 
   it('should have css classes', () => {

projects/coreui-angular/src/lib/button/button-close.directive.ts

@@ -1,30 +1,29 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core';
 import { ThemeDirective } from '../shared/theme.directive';
 import { ButtonDirective } from './button.directive';
 
 @Directive({
   selector: '[cButtonClose]',
   standalone: true,
   hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
-  host: { class: 'btn btn-close' }
+  host: { class: 'btn btn-close', '[class]': 'hostClasses()', '[attr.type]': 'type()' }
 })
 export class ButtonCloseDirective extends ButtonDirective {
   /**
    * Change the default color to white.
    * @type boolean
    * @deprecated 5.0.0. Use `cButtonClose.dark` instead.
    */
-  @Input({ transform: booleanAttribute }) white: string | boolean = false;
+  white: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
-  @HostBinding('class')
-  override get hostClasses(): any {
+  override hostClasses = computed(() => {
     return {
       btn: true,
       'btn-close': true,
-      'btn-close-white': this.white,
-      [`btn-${this.size}`]: !!this.size,
-      disabled: this.disabled,
-      active: this.active
-    };
-  }
+      'btn-close-white': this.white(),
+      [`btn-${this.size()}`]: !!this.size(),
+      disabled: this.disabled(),
+      active: this.active()
+    } as Record<string, boolean>;
+  });
 }

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

@@ -13,7 +13,6 @@ class MockElementRef extends ElementRef {}
 class TestComponent {}
 
 describe('ButtonDirective', () => {
-
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
   let elementRef: DebugElement;
@@ -32,14 +31,15 @@ describe('ButtonDirective', () => {
   });
 
   it('should create an instance', () => {
-    const directive = new ButtonDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new ButtonDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 
   it('should have css classes', () => {
     expect(elementRef.nativeElement).toHaveClass('btn');
     expect(elementRef.nativeElement).toHaveClass('btn-lg');
     expect(elementRef.nativeElement).toHaveClass('btn-info');
   });
-
 });

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

@@ -1,88 +1,96 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  HostBinding,
+  input,
+  InputSignal,
+  InputSignalWithTransform
+} from '@angular/core';
 
 import { ButtonType, Colors, Shapes } from '../coreui.types';
 
 @Directive({
   selector: '[cButton]',
   exportAs: 'cButton',
   standalone: true,
-  host: { class: 'btn' }
+  host: { class: 'btn', '[class]': 'hostClasses()', '[attr.type]': 'type()' }
 })
 export class ButtonDirective {
   /**
    * Toggle the active state for the component. [docs]
-   * @type boolean
+   * @type InputSignalWithTransform<boolean, unknown>
    */
-  @Input({ transform: booleanAttribute }) active: string | boolean = false;
+  active: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
-   * @type Colors
+   * @type InputSignal<Colors>
    */
-  @Input() color?: Colors = 'primary';
+  color: InputSignal<Colors> = input<Colors>('primary');
+
   /**
    * Toggle the disabled state for the component.
-   * @type boolean
+   * @type InputSignalWithTransform<boolean, unknown>
    */
-  @Input({ transform: booleanAttribute }) disabled: string | boolean = false;
+  disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Select the shape of the component.
-   * @type { 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string }
+   * @type InputSignal<Shapes>
    */
-  @Input() shape?: Shapes;
+  shape: InputSignal<Shapes | undefined> = input<Shapes>();
 
   /**
    * Size the component small or large.
-   * @type {'sm' | 'lg'}
+   * @type InputSignal<'sm' | 'lg' | ''>
    */
-  @Input() size?: 'sm' | 'lg' | '' = '';
+  size: InputSignal<'' | 'sm' | 'lg'> = input<'' | 'sm' | 'lg'>('');
 
   /**
    * Specifies the type of button. Always specify the type attribute for the `<button>` element.
    * Different browsers may use different default types for the `<button>` element.
+   * @type InputSignal<ButtonType>
+   * @default 'button'
    */
-  @HostBinding('attr.type')
-  @Input()
-  type: ButtonType = 'button';
+  type: InputSignal<ButtonType> = input<ButtonType>('button');
 
   /**
    * Set the button variant to an outlined button or a ghost button.
-   * @type {'ghost' | 'outline'}
+   * @type InputSignal<'ghost' | 'outline' | undefined>
    */
-  @Input() variant?: 'ghost' | 'outline';
+  variant: InputSignal<'ghost' | 'outline' | undefined> = input<'ghost' | 'outline'>();
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  hostClasses = computed(() => {
     return {
       btn: true,
-      [`btn-${this.color}`]: !!this.color && !this.variant,
-      [`btn-${this.variant}`]: !!this.variant && !this.color,
-      [`btn-${this.variant}-${this.color}`]: !!this.variant && !!this.color,
-      [`btn-${this.size}`]: !!this.size,
-      [`${this.shape}`]: !!this.shape,
-      disabled: this.disabled,
-      active: this.active
-    };
-  }
+      [`btn-${this.color()}`]: !!this.color() && !this.variant(),
+      [`btn-${this.variant()}`]: !!this.variant() && !this.color(),
+      [`btn-${this.variant()}-${this.color()}`]: !!this.variant() && !!this.color(),
+      [`btn-${this.size()}`]: !!this.size(),
+      [`${this.shape()}`]: !!this.shape(),
+      disabled: this.disabled(),
+      active: this.active()
+    } as Record<string, boolean>;
+  });
 
   @HostBinding('attr.aria-disabled')
   get ariaDisabled() {
-    return this.disabled || null;
+    return this.disabled() || null;
   }
 
   @HostBinding('attr.aria-pressed')
   get isActive(): boolean | null {
-    return <boolean>this.active || null;
+    return <boolean>this.active() || null;
   }
 
   @HostBinding('attr.disabled')
   get attrDisabled() {
-    return this.disabled ? '' : null;
+    return this.disabled() ? '' : null;
   }
 
   @HostBinding('attr.tabindex')
   get tabIndex(): string | null {
-    return this.disabled ? '-1' : null;
+    return this.disabled() ? '-1' : null;
   }
 }