refactor(accordion): input signals, host bindings

Author: xidedix

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

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

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

@@ -1,35 +1,30 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 
 @Directive({
   selector: '[cAccordionButton]',
   standalone: true,
-  host: { class: 'accordion-button' }
+  host: { '[class]': 'hostClasses()', '[attr.type]': 'type()', '[attr.aria-expanded]': 'ariaExpanded()' }
 })
 export class AccordionButtonDirective {
   /**
    * Toggles an accordion button collapsed state. Use in accordionHeaderTemplate. [docs]
    * @type boolean
    */
-  @Input() collapsed!: boolean;
+  readonly collapsed = input<boolean | undefined>(undefined);
 
   /**
    * Default type for cAccordionButton. [docs]
    * @type string
    * @default 'button'
    */
-  @HostBinding('attr.type')
-  @Input()
-  type: string = 'button';
+  readonly type = input('button');
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     return {
       'accordion-button': true,
-      collapsed: this.collapsed
+      collapsed: this.collapsed()
     };
-  }
+  });
 
-  @HostBinding('attr.aria-expanded') get ariaExpanded(): boolean {
-    return !this.collapsed;
-  }
+  readonly ariaExpanded = computed(() => !this.collapsed());
 }

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.html

@@ -1,16 +1,17 @@
+@let tmpl = templates();
 <ng-container>
   <div class="accordion-header">
-    <ng-container *ngTemplateOutlet="templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext" />
+    <ng-container *ngTemplateOutlet="tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext" />
   </div>
   <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="visible" [id]="contentId">
-    <ng-container *ngTemplateOutlet="templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext" />
+    <ng-container *ngTemplateOutlet="tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext" />
   </div>
 </ng-container>
 
 <ng-template #defaultAccordionHeaderTemplate>
   <button cAccordionButton [collapsed]="!visible" [attr.aria-controls]="contentId" (click)="toggleItem()">
     <ng-container
-      *ngTemplateOutlet="templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext">
+      *ngTemplateOutlet="tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext">
     </ng-container>
   </button>
 </ng-template>
@@ -22,7 +23,7 @@
 <ng-template #defaultAccordionBodyTemplate>
   <div class="accordion-body">
     <ng-container
-      *ngTemplateOutlet="templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext">
+      *ngTemplateOutlet="tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext">
     </ng-container>
   </div>
 </ng-template>

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts

@@ -1,12 +1,13 @@
 import {
-  AfterContentInit,
   booleanAttribute,
   Component,
-  ContentChildren,
+  computed,
+  contentChildren,
+  inject,
   Input,
   OnDestroy,
   OnInit,
-  QueryList
+  TemplateRef
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
@@ -26,15 +27,15 @@ let nextId = 0;
   imports: [AccordionButtonDirective, NgTemplateOutlet, CollapseDirective],
   host: { class: 'accordion-item' }
 })
-export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentInit {
-  constructor(private accordionService: AccordionService) {}
+export class AccordionItemComponent implements OnInit, OnDestroy {
+  readonly #accordionService = inject(AccordionService);
 
   /**
    * Toggle an accordion item programmatically
    * @type boolean
    * @default false
    */
-  @Input({ transform: booleanAttribute }) visible: string | boolean = false;
+  @Input({ transform: booleanAttribute }) visible: boolean = false;
 
   @Input()
   set open(value: boolean) {
@@ -47,25 +48,32 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
   }
 
   contentId = `accordion-item-${nextId++}`;
-  itemContext = { $implicit: <boolean>this.visible };
-  templates: any = {};
-  @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
+
+  get itemContext() {
+    return { $implicit: <boolean>this.visible };
+  }
+
+  readonly contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
+
+  readonly templates = computed(() => {
+    return this.contentTemplates().reduce(
+      (acc, child) => {
+        acc[child.id] = child.templateRef;
+        return acc;
+      },
+      {} as Record<string, TemplateRef<any>>
+    );
+  });
 
   ngOnInit(): void {
-    this.accordionService.addItem(this);
+    this.#accordionService.addItem(this);
   }
 
   ngOnDestroy(): void {
-    this.accordionService.removeItem(this);
+    this.#accordionService.removeItem(this);
   }
 
   toggleItem(): void {
-    this.accordionService.toggleItem(this);
-  }
-
-  ngAfterContentInit(): void {
-    this.contentTemplates.forEach((child: TemplateIdDirective) => {
-      this.templates[child.id] = child.templateRef;
-    });
+    this.#accordionService.toggleItem(this);
   }
 }

projects/coreui-angular/src/lib/accordion/accordion.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { AccordionItemComponent } from './accordion-item/accordion-item.component';
+import type { AccordionItemComponent } from './accordion-item/accordion-item.component';
 
 @Injectable()
 export class AccordionService {

projects/coreui-angular/src/lib/accordion/accordion/accordion.component.ts

@@ -1,4 +1,4 @@
-import { booleanAttribute, Component, HostBinding, inject, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, effect, inject, input } from '@angular/core';
 
 import { AccordionService } from '../accordion.service';
 
@@ -9,35 +9,29 @@ import { AccordionService } from '../accordion.service';
   exportAs: 'cAccordionItem',
   providers: [AccordionService],
   standalone: true,
-  host: { class: 'accordion' }
+  host: { '[class]': 'hostClasses()' }
 })
 export class AccordionComponent {
-  #accordionService = inject(AccordionService);
+  readonly #accordionService = inject(AccordionService);
 
   /**
    * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) flush: boolean = false;
+  readonly flush = input(false, { transform: booleanAttribute });
 
   /**
    * Make accordion items stay open when another item is opened
    * @type boolean
    */
-  @Input({ transform: booleanAttribute })
-  set alwaysOpen(value: boolean) {
-    this.#accordionService.alwaysOpen = value;
-  }
+  readonly alwaysOpen = input(false, { transform: booleanAttribute });
 
-  get alwaysOpen(): boolean {
-    return this.#accordionService.alwaysOpen;
-  }
+  readonly #alwaysOpenEffect = effect(() => {
+    this.#accordionService.alwaysOpen = this.alwaysOpen();
+  });
 
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      accordion: true,
-      'accordion-flush': this.flush
-    };
-  }
+  readonly hostClasses = computed<Record<string, boolean>>(() => ({
+    accordion: true,
+    'accordion-flush': this.flush()
+  }));
 }