feat(design): convert @daffodil/design/button to use signals (#4542)

Author: xelaint

libs/design/button/src/button/basic/button.component.spec.ts

@@ -73,7 +73,7 @@ describe('@daffodil/design/button | DaffButtonComponent', () => {
 
     describe('the elevated property', () => {
       it('should be able to take `elevated` as an input', () => {
-        expect(component.elevated).toEqual(wrapper.elevated());
+        expect(component.elevated()).toEqual(wrapper.elevated());
       });
 
       it('should add a class of `.elevated` to the host element if elevated is true', () => {

libs/design/button/src/button/basic/button.component.ts

@@ -2,7 +2,7 @@ import {
   Component,
   ViewEncapsulation,
   ChangeDetectionStrategy,
-  Input,
+  input,
 } from '@angular/core';
 
 import { DaffSpinnerComponent } from '@daffodil/design/spinner';
@@ -34,7 +34,7 @@ import { DaffButtonBaseDirective } from '../button-base.directive';
   styleUrl: './button.component.scss',
   host: {
     'class': 'daff-button',
-    '[class.elevated]': 'elevated',
+    '[class.elevated]': 'elevated()',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -46,5 +46,5 @@ export class DaffButtonComponent extends DaffButtonBaseDirective {
   /**
    * Whether or not the button displays a shadow.
    */
-  @Input() elevated = false;
+  elevated = input(false);
 }

libs/design/button/src/button/button-base.directive.spec.ts

@@ -102,7 +102,7 @@ describe('@daffodil/design/button | DaffButtonBaseDirective', () => {
 
   describe('using the tabindex property of a button', () => {
     it('should be able to take `tabindex` as an input', () => {
-      expect(directive.tabindex).toEqual(wrapper.tabindex);
+      expect(directive.tabindex()).toEqual(wrapper.tabindex);
     });
   });
 

libs/design/button/src/button/button-base.directive.ts

@@ -1,8 +1,7 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
-  Input,
   Directive,
   ContentChild,
+  input,
 } from '@angular/core';
 
 import {
@@ -46,7 +45,7 @@ import { DaffButtonSizableDirective } from './button-sizable.directive';
   host: {
     '[attr.disabled]': 'disabled ? true : null',
     '[attr.aria-disabled]': 'disabled ? true : null',
-    '[attr.tabindex]': 'disabled ? -1 : this.tabindex',
+    '[attr.tabindex]': 'disabled ? -1 : tabindex()',
   },
 })
 export class DaffButtonBaseDirective implements DaffDisableable {
@@ -75,17 +74,14 @@ export class DaffButtonBaseDirective implements DaffDisableable {
   /**
    * Sets the tabindex.
    */
-  @Input() tabindex = 0;
+  tabindex = input(0);
 
   /**
    * The disabled state of the button.
    */
-  @Input() get disabled() {
+  get disabled() {
     return this.disabledDirective.disabled;
   }
-  set disabled(value: any) {
-    this.disabledDirective.disabled = coerceBooleanProperty(value);
-  }
 
   /**
    * @docs-private

libs/design/button/src/button/stroked/stroked.component.spec.ts

@@ -74,7 +74,7 @@ describe('@daffodil/design/button | DaffStrokedButtonComponent', () => {
 
   describe('the elevated property', () => {
     it('should be able to take `elevated` as an input', () => {
-      expect(component.elevated).toEqual(wrapper.elevated());
+      expect(component.elevated()).toEqual(wrapper.elevated());
     });
 
     it('should add a class of `.elevated` to the host element if elevated is true', () => {

libs/design/button/src/button/stroked/stroked.component.ts

@@ -2,7 +2,7 @@ import {
   Component,
   ViewEncapsulation,
   ChangeDetectionStrategy,
-  Input,
+  input,
 } from '@angular/core';
 
 import { DaffSpinnerComponent } from '@daffodil/design/spinner';
@@ -47,5 +47,5 @@ export class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
   /**
    * Whether or not the button displays a shadow.
    */
-  @Input() elevated = false;
+  elevated = input(false);
 }