refactor(list-group): input signals, host bindings

Author: xidedix

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

@@ -11,22 +11,22 @@ export class ButtonGroupComponent {
    * Size the component small or large.
    * @type { 'sm' | 'lg' }
    */
-  size: InputSignal<'sm' | 'lg' | undefined> = input();
+  readonly 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
    */
-  vertical: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
+  readonly vertical: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Default role attr for ButtonGroup. [docs]
    * @type InputSignal<string>
    * @default 'group'
    */
-  role: InputSignal<string> = input('group');
+  readonly role: InputSignal<string> = input('group');
 
-  hostClasses = computed(() => {
+  readonly hostClasses = computed(() => {
     return {
       'btn-group': !this.vertical(),
       'btn-group-vertical': this.vertical(),

projects/coreui-angular/src/lib/list-group/list-group-item.directive.spec.ts

@@ -1,7 +1,6 @@
-import { Component, DebugElement, ElementRef } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ListGroupItemDirective } from './list-group-item.directive';
-import { By } from '@angular/platform-browser';
 
 class MockElementRef extends ElementRef {}
 
@@ -11,10 +10,8 @@ class MockElementRef extends ElementRef {}
 class TestComponent {}
 
 describe('ListGroupItemDirective', () => {
-
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
-  let liEl: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -24,13 +21,14 @@ describe('ListGroupItemDirective', () => {
     });
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
-    liEl = fixture.debugElement.query(By.css('li'));
 
     fixture.detectChanges(); // initial binding
   });
 
   it('should create an instance', () => {
-    const directive = new ListGroupItemDirective(liEl);
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new ListGroupItemDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 });

projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts

@@ -1,64 +1,74 @@
-import { booleanAttribute, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  InputSignal,
+  InputSignalWithTransform
+} from '@angular/core';
 import { Colors } from '../coreui.types';
 
 @Directive({
   selector: '[cListGroupItem], c-list-group-item',
   exportAs: 'cListGroupItem',
-  standalone: true
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.aria-disabled]': 'ariaDisabled()',
+    '[attr.aria-current]': 'ariaCurrent()',
+    '[attr.disabled]': 'attrDisabled()',
+    '[attr.tabindex]': 'tabIndex()'
+  }
 })
 export class ListGroupItemDirective {
-
-  constructor(
-    private hostElement: ElementRef
-  ) { }
+  readonly hostElement = inject(ElementRef);
 
   /**
    * Toggle the active state for the component.
-   * @type boolean
+   * @type InputSignal<boolean | undefined>
    */
-  @Input() active?: boolean;
+  readonly active: InputSignal<boolean | undefined> = input();
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
-   * @type Colors
+   * @type InputSignal<boolean | undefined>
    */
-  @Input() color?: Colors;
+  readonly color: InputSignal<Colors | undefined> = input();
 
   /**
    * Set disabled attr for the host element. [docs]
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) disabled: string | boolean = false;
-
-  @HostBinding('attr.aria-disabled')
-  get isDisabled(): boolean | null {
-    return <boolean>this.disabled || null;
-  }
-
-  @HostBinding('attr.disabled')
-  get attrDisabled() {
-    return this.disabled ? '' : null;
-  };
-
-  @HostBinding('attr.tabindex')
-  get getTabindex(): string | null {
-    return this.disabled ? '-1' : null;
-  }
+  readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
-  @HostBinding('attr.aria-current') get ariaCurrent(): boolean {
-    return !!this.active;
-  }
-
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     const host: HTMLElement = this.hostElement.nativeElement;
     return {
       'list-group-item': true,
       'list-group-item-action': host.nodeName === 'A' || host.nodeName === 'BUTTON',
-      active: !!this.active,
-      disabled: this.isDisabled,
-      [`list-group-item-${this.color}`]: !!this.color
+      active: !!this.active(),
+      disabled: this._disabled(),
+      [`list-group-item-${this.color()}`]: !!this.color()
     };
-  }
+  });
+
+  readonly _disabled = computed(() => this.disabled());
+
+  readonly ariaDisabled = computed(() => {
+    return this._disabled() ? true : null;
+  });
+
+  readonly attrDisabled = computed(() => {
+    return this._disabled() ? '' : null;
+  });
+
+  readonly tabIndex = computed(() => {
+    return this._disabled() ? '-1' : null;
+  });
 
+  readonly ariaCurrent = computed(() => {
+    return <boolean>this.active() || null;
+  });
 }

projects/coreui-angular/src/lib/list-group/list-group.directive.spec.ts

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

projects/coreui-angular/src/lib/list-group/list-group.directive.ts

@@ -1,30 +1,33 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core';
 import { Sizes } from '../coreui.types';
 
 @Directive({
   selector: '[cListGroup]',
   standalone: true,
-  host: { class: 'list-group' }
+  host: {
+    class: 'list-group',
+    '[class]': 'hostClasses()'
+  }
 })
 export class ListGroupDirective {
   /**
    * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`).
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) flush: string | boolean = false;
+  readonly flush: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Specify horizontal layout type.
    */
-  @Input() horizontal?: boolean | Sizes;
+  readonly horizontal = input<boolean | Sizes>();
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const horizontal = this.horizontal();
     return {
       'list-group': true,
-      'list-group-horizontal': this.horizontal === true || this.horizontal === '',
-      [`list-group-horizontal-${this.horizontal}`]: !!this.horizontal && typeof this.horizontal !== 'boolean',
-      'list-group-flush': this.flush
-    };
-  }
+      'list-group-horizontal': horizontal === true || horizontal === '',
+      [`list-group-horizontal-${horizontal}`]: !!horizontal && typeof horizontal !== 'boolean',
+      'list-group-flush': this.flush()
+    } as Record<string, boolean>;
+  });
 }