refactor(dropdown): use ThemeDirective composition for dark prop, implement FocusableOption interface for items, allow to select a dropdown-item with up/down arrows, testing update, use @input() transform

Author: xidedix

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

@@ -1,11 +1,23 @@
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { DropdownService } from '../dropdown.service';
 import { DropdownItemDirective } from './dropdown-item.directive';
 
+class MockElementRef extends ElementRef {}
+
 describe('DropdownItemDirective', () => {
 
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: ElementRef, useClass: MockElementRef }]
+    });
+  });
+
   it('should create an instance', () => {
-    const dropdownService = new DropdownService();
-    const directive = new DropdownItemDirective(dropdownService);
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const dropdownService = new DropdownService();
+      const directive = new DropdownItemDirective(dropdownService);
+      expect(directive).toBeTruthy();
+    });
   });
 });

projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.ts

@@ -1,4 +1,5 @@
-import { Directive, HostBinding, HostListener, Input, Optional } from '@angular/core';
+import { Directive, ElementRef, HostBinding, HostListener, inject, Input, Optional } from '@angular/core';
+import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
 import { DropdownService } from '../dropdown.service';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 
@@ -7,7 +8,7 @@ import { DropdownComponent } from '../dropdown/dropdown.component';
   exportAs: 'cDropdownItem',
   standalone: true
 })
-export class DropdownItemDirective {
+export class DropdownItemDirective implements FocusableOption {
   /**
    * Set active state to a dropdown-item.
    * @type boolean
@@ -27,12 +28,22 @@ export class DropdownItemDirective {
    */
   @Input() disabled?: boolean;
 
+  #elementRef: ElementRef = inject(ElementRef);
+
   constructor(
     private dropdownService: DropdownService,
     @Optional() public dropdown?: DropdownComponent
   ) {
   }
 
+  focus(origin?: FocusOrigin | undefined): void {
+    this.#elementRef?.nativeElement?.focus();
+  }
+
+  getLabel?(): string {
+    return this.#elementRef?.nativeElement?.textContent.trim();
+  }
+
   @HostBinding('attr.aria-current')
   get ariaCurrent(): string | null {
     return this.active ? 'true' : null;
@@ -52,9 +63,11 @@ export class DropdownItemDirective {
   set tabIndex(value: string | number | null) {
     this._tabIndex = value;
   }
+
   get tabIndex() {
     return this.disabled ? '-1' : this._tabIndex;
   }
+
   private _tabIndex: string | number | null = null;
 
   @HostBinding('attr.aria-disabled')

projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.spec.ts

@@ -1,12 +1,23 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, Renderer2 } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { DropdownService } from '../dropdown.service';
 import { DropdownMenuDirective } from './dropdown-menu.directive';
 
+class MockElementRef extends ElementRef {}
+
 describe('DropdownMenuDirective', () => {
-  let elementRef: ElementRef;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: ElementRef, useClass: MockElementRef }, Renderer2, DropdownService]
+    });
+  });
+
   it('should create an instance', () => {
-    const dropdownService = new DropdownService();
-    const directive = new DropdownMenuDirective(elementRef, dropdownService);
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new DropdownMenuDirective();
+      expect(directive).toBeTruthy();
+    });
+
   });
 });

projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts

@@ -1,18 +1,37 @@
-import { booleanAttribute, Directive, ElementRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import {
+  AfterContentInit,
+  ContentChildren,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  inject,
+  Input,
+  OnInit,
+  QueryList
+} from '@angular/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { tap } from 'rxjs/operators';
+
+import { ThemeDirective } from '../../shared/theme.directive';
 import { DropdownService } from '../dropdown.service';
+import { DropdownItemDirective } from '../dropdown-item/dropdown-item.directive';
 
 @Directive({
   selector: '[cDropdownMenu]',
   exportAs: 'cDropdownMenu',
-  standalone: true
+  standalone: true,
+  hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }]
 })
-export class DropdownMenuDirective implements OnInit, OnDestroy {
+export class DropdownMenuDirective implements OnInit, AfterContentInit {
 
-  constructor(
-    public elementRef: ElementRef,
-    private dropdownService: DropdownService
-  ) {}
+  readonly #destroyRef: DestroyRef = inject(DestroyRef);
+  public readonly elementRef: ElementRef = inject(ElementRef);
+  readonly #dropdownService: DropdownService = inject(DropdownService);
+  #focusKeyManager!: FocusKeyManager<DropdownItemDirective>;
 
   /**
    * Set alignment of dropdown menu.
@@ -22,55 +41,81 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
 
   /**
    * Toggle the visibility of dropdown menu component.
-   */
-  @Input() visible = false;
-
-  /**
-   * Sets a darker color scheme to match a dark navbar.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) dark: string | boolean = false;
-
-  private dropdownStateSubscription!: Subscription;
+  @Input() visible: boolean = false;
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  @HostBinding('class') get hostClasses(): any {
     return {
-      'dropdown-menu': true,
-      'dropdown-menu-dark': this.dark,
-      [`dropdown-menu-${this.alignment}`]: !!this.alignment,
-      show: this.visible
+      'dropdown-menu': true, [`dropdown-menu-${this.alignment}`]: !!this.alignment, show: this.visible
     };
   }
 
-  @HostBinding('style')
-  get hostStyles() {
+  @HostBinding('style') get hostStyles() {
     // workaround for popper position calculate (see also: dropdown.component)
     return {
-      visibility: this.visible ? null : '',
-      display: this.visible ? null : ''
+      visibility: this.visible ? null : '', display: this.visible ? null : ''
     };
   }
 
-  ngOnInit(): void {
-    this.dropdownStateSubscribe();
+  @HostListener('keydown', ['$event']) onKeyDown($event: KeyboardEvent): void {
+    if (!this.visible) {
+      return;
+    }
+    if (['Space', 'ArrowDown'].includes($event.code)) {
+      $event.preventDefault();
+    }
+    this.#focusKeyManager.onKeydown($event);
   }
 
-  ngOnDestroy(): void {
-    this.dropdownStateSubscribe(false);
+  @HostListener('keyup', ['$event']) onKeyUp($event: KeyboardEvent): void {
+    if (!this.visible) {
+      return;
+    }
+    if (['Tab'].includes($event.key)) {
+      if (this.#focusKeyManager.activeItem) {
+        $event.shiftKey ? this.#focusKeyManager.setPreviousItemActive() : this.#focusKeyManager.setNextItemActive();
+      } else {
+        this.#focusKeyManager.setFirstItemActive();
+      }
+    }
   }
 
-  private dropdownStateSubscribe(subscribe: boolean = true): void {
-    if (subscribe) {
-      this.dropdownStateSubscription =
-        this.dropdownService.dropdownState$.subscribe((state) => {
+  @ContentChildren(forwardRef(() => DropdownItemDirective), { descendants: true }) dropdownItemsContent!: QueryList<DropdownItemDirective>;
+
+  ngAfterContentInit(): void {
+    this.focusKeyManagerInit();
+
+    this.dropdownItemsContent.changes
+      .pipe(
+        tap((change) => {
+          this.focusKeyManagerInit();
+        }),
+        takeUntilDestroyed(this.#destroyRef)
+      ).subscribe();
+  }
+
+  ngOnInit(): void {
+    this.#dropdownService.dropdownState$
+      .pipe(
+        tap((state) => {
           if ('visible' in state) {
-            this.visible =
-              state.visible === 'toggle' ? !this.visible : state.visible;
+            this.visible = state.visible === 'toggle' ? !this.visible : state.visible;
+            if (!this.visible) {
+              this.#focusKeyManager?.setActiveItem(-1);
+            }
           }
-        });
-    } else {
-      this.dropdownStateSubscription?.unsubscribe();
-    }
+        }),
+        takeUntilDestroyed(this.#destroyRef)
+      ).subscribe();
+  }
+
+  private focusKeyManagerInit(): void {
+    this.#focusKeyManager = new FocusKeyManager(this.dropdownItemsContent)
+      .withHomeAndEnd()
+      .withPageUpDown()
+      .withWrap()
+      .skipPredicate((dropdownItem) => (dropdownItem.disabled === true));
   }
+
 }

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

@@ -12,9 +12,6 @@ export class DropdownService {
   private dropdownState = new BehaviorSubject<any>({});
   dropdownState$ = this.dropdownState.asObservable();
 
-  constructor() {
-  }
-
   toggle(state: IDropdownState): void {
     this.dropdownState.next(state);
   }

projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.scss

@@ -2,7 +2,6 @@
 
 :host-context(.dropdown, .dropup):not(.btn-group) {
   display: block;
-  min-width: fit-content;
 }
 
 :host-context(.dropstart, .dropend):not(.btn-group) {