refactor(tabs-2): host bindings, host listeners, cleanup

Author: xidedix

projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts

@@ -2,8 +2,6 @@ import { animate, animateChild, AnimationEvent, query, state, style, transition,
 import {
   Component,
   computed,
-  HostBinding,
-  HostListener,
   inject,
   input,
   InputSignal,
@@ -27,7 +25,10 @@ type VisibleChangeEvent = { itemKey: string | number; visible: boolean };
     '[tabindex]': 'visible() ? tabindex(): -1',
     '[attr.aria-labelledby]': 'attrAriaLabelledBy()',
     '[id]': 'propId()',
-    role: 'tabpanel'
+    '[attr.role]': 'role()',
+    '[@.disabled]': '!transition()',
+    '[@fadeInOut]': 'visible() ? "show" : "hide"',
+    '(@fadeInOut.done)': 'onAnimationDone($event)'
   },
   animations: [
     trigger('fadeInOut', [
@@ -64,6 +65,13 @@ export class TabPanelComponent {
    */
   readonly itemKey: InputSignal<string | number> = input.required();
 
+  /**
+   * Element role.
+   * @type string
+   * @default 'tabpanel'
+   */
+  readonly role: InputSignal<string> = input('tabpanel');
+
   /**
    * tabindex attribute.
    * @type number
@@ -98,25 +106,17 @@ export class TabPanelComponent {
     () => this.ariaLabelledBy() ?? `${this.tabsService.id()}-tab-${this.itemKey()}`
   );
 
-  readonly hostClasses = computed(() => ({
-    'tab-pane': true,
-    active: this.show(),
-    fade: this.transition(),
-    show: this.show(),
-    invisible: this.tabsService.activeItem()?.disabled
-  }) as Record<string, boolean>);
-
-  @HostBinding('@.disabled')
-  get animationDisabled(): boolean {
-    return !this.transition();
-  }
-
-  @HostBinding('@fadeInOut')
-  get animateType(): AnimateType {
-    return this.visible() ? 'show' : 'hide';
-  }
+  readonly hostClasses = computed(
+    () =>
+      ({
+        'tab-pane': true,
+        active: this.show(),
+        fade: this.transition(),
+        show: this.show(),
+        invisible: this.tabsService.activeItem()?.disabled
+      }) as Record<string, boolean>
+  );
 
-  @HostListener('@fadeInOut.done', ['$event'])
   onAnimationDone($event: AnimationEvent): void {
     this.show.set(this.visible());
   }

projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts

@@ -5,7 +5,6 @@ import {
   contentChildren,
   DestroyRef,
   effect,
-  HostListener,
   inject,
   input,
   InputSignal,
@@ -19,11 +18,11 @@ import { TabsService } from '../tabs.service';
 @Component({
   exportAs: 'cTabsList',
   selector: 'c-tabs-list',
-  imports: [],
   template: '<ng-content />',
   host: {
     '[attr.role]': 'role()',
-    '[class]': 'hostClasses()'
+    '[class]': 'hostClasses()',
+    '(keydown)': 'onKeyDown($event)'
   }
 })
 export class TabsListComponent {
@@ -50,11 +49,14 @@ export class TabsListComponent {
    */
   readonly role = input('tablist');
 
-  readonly hostClasses = computed(() => ({
-    nav: true,
-    [`nav-${this.layout()}`]: this.layout(),
-    [`nav-${this.variant()}`]: this.variant()
-  }) as Record<string, boolean>);
+  readonly hostClasses = computed(
+    () =>
+      ({
+        nav: true,
+        [`nav-${this.layout()}`]: this.layout(),
+        [`nav-${this.variant()}`]: this.variant()
+      }) as Record<string, boolean>
+  );
 
   readonly tabs = contentChildren(TabDirective);
   #focusKeyManager!: FocusKeyManager<TabDirective>;
@@ -98,8 +100,7 @@ export class TabsListComponent {
     this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
   });
 
-  @HostListener('keydown', ['$event'])
-  onKeydown($event: any) {
+  onKeyDown($event: any) {
     if (['ArrowLeft', 'ArrowRight'].includes($event.key)) {
       this.#focusKeyManager.onKeydown($event);
       return;