@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/overlay/components/menu-deprecated/menu-item.ts

@@ -0,0 +1,244 @@
+/* eslint-disable @angular-eslint/directive-class-suffix */
+/* eslint-disable @angular-eslint/no-output-rename */
+/* eslint-disable @angular-eslint/no-outputs-metadata-property */
+/* eslint-disable @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+
+import { FocusableOption, InputModalityDetector } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
+import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Output, inject } from '@angular/core';
+import { Subject, fromEvent } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { MENU_AIM, Toggler } from './menu-aim';
+import { CDK_MENU, Menu } from './menu-interface';
+import { FocusNext, MENU_STACK } from './menu-stack';
+import { CdkMenuTrigger } from './menu-trigger';
+import { FocusableElement } from './pointer-focus-tracker';
+
+/**
+ * @deprecated Use the new menu instead
+ */
+@Directive({
+  selector: '[cdkMenuItem]',
+  exportAs: 'cdkMenuItem',
+  standalone: true,
+  host: {
+    role: 'menuitem',
+    class: 'cdk-menu-item',
+    '[tabindex]': '_tabindex',
+    '[attr.aria-disabled]': 'disabled || null',
+    '(blur)': '_resetTabIndex()',
+    '(focus)': '_setTabIndex()',
+    '(click)': '_handleClick()',
+    '(mousedown)': '_handleMousedown($event)',
+    '(keydown)': '_onKeydown($event)',
+  },
+})
+export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler, OnDestroy {
+  protected readonly _dir = inject(Directionality, { optional: true });
+  private readonly _inputModalityDetector = inject(InputModalityDetector);
+  readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);
+  protected _ngZone = inject(NgZone);
+
+  private readonly _menuAim = inject(MENU_AIM, { optional: true });
+
+  private readonly _menuStack = inject(MENU_STACK);
+
+  private readonly _parentMenu = inject(CDK_MENU, { optional: true });
+
+  private readonly _menuTrigger = inject(CdkMenuTrigger, { optional: true, self: true });
+
+  @Input('cdkMenuItemDisabled')
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
+  @Input('cdkMenuitemTypeaheadLabel') typeaheadLabel: string | null = null;
+
+  @Output('cdkMenuItemTriggered') readonly triggered: EventEmitter<void> = new EventEmitter();
+
+  get hasMenu() {
+    return this._menuTrigger?.menuTemplateRef != null;
+  }
+
+  _tabindex: 0 | -1 = -1;
+
+  protected closeOnSpacebarTrigger = true;
+
+  protected readonly destroyed = new Subject<void>();
+
+  constructor() {
+    this._setupMouseEnter();
+    this._setType();
+
+    if (this._isStandaloneItem()) {
+      this._tabindex = 0;
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
+  focus() {
+    this._elementRef.nativeElement.focus();
+  }
+
+  trigger(options?: { keepOpen: boolean }) {
+    const { keepOpen } = { ...options };
+    if (!this.disabled && !this.hasMenu) {
+      this.triggered.next();
+      if (!keepOpen) {
+        this._menuStack.closeAll({ focusParentTrigger: true });
+      }
+    }
+  }
+
+  isMenuOpen() {
+    return !!this._menuTrigger?.isOpen();
+  }
+
+  getMenu(): Menu | undefined {
+    return this._menuTrigger?.getMenu();
+  }
+
+  getMenuTrigger(): CdkMenuTrigger | null {
+    return this._menuTrigger;
+  }
+
+  getLabel(): string {
+    return this.typeaheadLabel || this._elementRef.nativeElement.textContent?.trim() || '';
+  }
+
+  getParentMenu() {
+    return this._parentMenu;
+  }
+
+  _resetTabIndex() {
+    if (!this._isStandaloneItem()) {
+      this._tabindex = -1;
+    }
+  }
+
+  _setTabIndex(event?: MouseEvent) {
+    if (this.disabled) {
+      return;
+    }
+
+    if (!event || !this._menuStack.isEmpty()) {
+      this._tabindex = 0;
+    }
+  }
+
+  _onKeydown(event: KeyboardEvent) {
+    switch (event.keyCode) {
+      case SPACE:
+      case ENTER:
+        if (!hasModifierKey(event)) {
+          this.trigger({ keepOpen: event.keyCode === SPACE && !this.closeOnSpacebarTrigger });
+        }
+        break;
+
+      case RIGHT_ARROW:
+        if (!hasModifierKey(event)) {
+          if (this._parentMenu && this._isParentVertical()) {
+            if (this._dir?.value !== 'rtl') {
+              this._forwardArrowPressed(event);
+            } else {
+              this._backArrowPressed(event);
+            }
+          }
+        }
+        break;
+
+      case LEFT_ARROW:
+        if (!hasModifierKey(event)) {
+          if (this._parentMenu && this._isParentVertical()) {
+            if (this._dir?.value !== 'rtl') {
+              this._backArrowPressed(event);
+            } else {
+              this._forwardArrowPressed(event);
+            }
+          }
+        }
+        break;
+    }
+  }
+
+  _handleClick() {
+    if (this._inputModalityDetector.mostRecentModality !== 'keyboard') {
+      this.trigger();
+    }
+  }
+
+  _handleMousedown(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  private _isStandaloneItem() {
+    return !this._parentMenu;
+  }
+
+  private _backArrowPressed(event: KeyboardEvent) {
+    const parentMenu = this._parentMenu!;
+    if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
+      event.preventDefault();
+      this._menuStack.close(parentMenu, {
+        focusNextOnEmpty:
+          this._menuStack.inlineMenuOrientation() === 'horizontal' ? FocusNext.previousItem : FocusNext.currentItem,
+        focusParentTrigger: true,
+      });
+    }
+  }
+
+  private _forwardArrowPressed(event: KeyboardEvent) {
+    if (!this.hasMenu && this._menuStack.inlineMenuOrientation() === 'horizontal') {
+      event.preventDefault();
+      this._menuStack.closeAll({
+        focusNextOnEmpty: FocusNext.nextItem,
+        focusParentTrigger: true,
+      });
+    }
+  }
+
+  private _setupMouseEnter() {
+    if (!this._isStandaloneItem()) {
+      const closeOpenSiblings = () => this._ngZone.run(() => this._menuStack.closeSubMenuOf(this._parentMenu!));
+
+      this._ngZone.runOutsideAngular(() =>
+        fromEvent(this._elementRef.nativeElement, 'mouseenter')
+          .pipe(
+            filter(() => !this._menuStack.isEmpty() && !this.hasMenu),
+            takeUntil(this.destroyed),
+          )
+          .subscribe(() => {
+            if (this._menuAim) {
+              this._menuAim.toggle(closeOpenSiblings);
+            } else {
+              closeOpenSiblings();
+            }
+          }),
+      );
+    }
+  }
+
+  private _isParentVertical() {
+    return this._parentMenu?.orientation === 'vertical';
+  }
+
+  private _setType() {
+    const element = this._elementRef.nativeElement;
+
+    if (element.nodeName === 'BUTTON' && !element.getAttribute('type')) {
+      element.setAttribute('type', 'button');
+    }
+  }
+}

package/src/lib/components/overlay/components/menu-deprecated/menu-module.ts

@@ -0,0 +1,35 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { NgModule } from '@angular/core';
+import { CdkContextMenuTrigger } from './context-menu-trigger';
+import { CdkMenu } from './menu';
+import { CdkTargetMenuAim } from './menu-aim';
+import { CdkMenuBar } from './menu-bar';
+import { CdkMenuGroup } from './menu-group';
+import { CdkMenuItem } from './menu-item';
+import { CdkMenuItemCheckbox } from './menu-item-checkbox';
+import { CdkMenuItemRadio } from './menu-item-radio';
+import { CdkMenuTrigger } from './menu-trigger';
+
+/**
+ * @deprecated Use the new menu instead
+ */
+const MENU_DIRECTIVES = [
+  CdkMenuBar,
+  CdkMenu,
+  CdkMenuItem,
+  CdkMenuItemRadio,
+  CdkMenuItemCheckbox,
+  CdkMenuTrigger,
+  CdkMenuGroup,
+  CdkContextMenuTrigger,
+  CdkTargetMenuAim,
+];
+
+/**
+ * @deprecated Use the new menu instead
+ */
+@NgModule({
+  imports: [OverlayModule, ...MENU_DIRECTIVES],
+  exports: MENU_DIRECTIVES,
+})
+export class CdkMenuModule {}

package/src/lib/components/overlay/components/menu-deprecated/menu-stack.ts

@@ -0,0 +1,146 @@
+/* eslint-disable @angular-eslint/directive-class-suffix */
+/* eslint-disable @angular-eslint/no-output-rename */
+/* eslint-disable @angular-eslint/no-outputs-metadata-property */
+/* eslint-disable @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+
+import { Inject, Injectable, InjectionToken, Optional, SkipSelf } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
+
+export const enum FocusNext {
+  nextItem,
+  previousItem,
+  currentItem,
+}
+
+export interface MenuStackItem {
+  menuStack?: MenuStack;
+}
+
+export const MENU_STACK = new InjectionToken<MenuStack>('cdk-menu-stack');
+
+export const PARENT_OR_NEW_MENU_STACK_PROVIDER = {
+  provide: MENU_STACK,
+  deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+  useFactory: (parentMenuStack?: MenuStack) => parentMenuStack || new MenuStack(),
+};
+
+export const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER = (orientation: 'vertical' | 'horizontal') => ({
+  provide: MENU_STACK,
+  deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+  useFactory: (parentMenuStack?: MenuStack) => parentMenuStack || MenuStack.inline(orientation),
+});
+
+export interface CloseOptions {
+  focusNextOnEmpty?: FocusNext;
+  focusParentTrigger?: boolean;
+}
+
+export interface MenuStackCloseEvent {
+  item: MenuStackItem;
+  focusParentTrigger?: boolean;
+}
+
+let nextId = 0;
+
+/**
+ * @deprecated Use the new menu instead
+ */
+@Injectable()
+export class MenuStack {
+  readonly id = `${nextId++}`;
+
+  private readonly _elements: MenuStackItem[] = [];
+
+  private readonly _close = new Subject<MenuStackCloseEvent>();
+
+  private readonly _empty = new Subject<FocusNext | undefined>();
+
+  private readonly _hasFocus = new Subject<boolean>();
+
+  readonly closed: Observable<MenuStackCloseEvent> = this._close;
+
+  readonly hasFocus: Observable<boolean> = this._hasFocus.pipe(
+    startWith(false),
+    debounceTime(0),
+    distinctUntilChanged(),
+  );
+
+  readonly emptied: Observable<FocusNext | undefined> = this._empty;
+
+  private _inlineMenuOrientation: 'vertical' | 'horizontal' | null = null;
+
+  static inline(orientation: 'vertical' | 'horizontal') {
+    const stack = new MenuStack();
+    stack._inlineMenuOrientation = orientation;
+    return stack;
+  }
+
+  push(menu: MenuStackItem) {
+    this._elements.push(menu);
+  }
+
+  close(lastItem: MenuStackItem, options?: CloseOptions) {
+    const { focusNextOnEmpty, focusParentTrigger } = { ...options };
+    if (this._elements.indexOf(lastItem) >= 0) {
+      let poppedElement;
+      do {
+        poppedElement = this._elements.pop()!;
+        this._close.next({ item: poppedElement, focusParentTrigger });
+      } while (poppedElement !== lastItem);
+
+      if (this.isEmpty()) {
+        this._empty.next(focusNextOnEmpty);
+      }
+    }
+  }
+
+  closeSubMenuOf(lastItem: MenuStackItem) {
+    let removed = false;
+    if (this._elements.indexOf(lastItem) >= 0) {
+      removed = this.peek() !== lastItem;
+      while (this.peek() !== lastItem) {
+        this._close.next({ item: this._elements.pop()! });
+      }
+    }
+    return removed;
+  }
+
+  closeAll(options?: CloseOptions) {
+    const { focusNextOnEmpty, focusParentTrigger } = { ...options };
+    if (!this.isEmpty()) {
+      while (!this.isEmpty()) {
+        const menuStackItem = this._elements.pop();
+        if (menuStackItem) {
+          this._close.next({ item: menuStackItem, focusParentTrigger });
+        }
+      }
+      this._empty.next(focusNextOnEmpty);
+    }
+  }
+
+  isEmpty() {
+    return !this._elements.length;
+  }
+
+  length() {
+    return this._elements.length;
+  }
+
+  peek(): MenuStackItem | undefined {
+    return this._elements[this._elements.length - 1];
+  }
+
+  hasInlineMenu() {
+    return this._inlineMenuOrientation != null;
+  }
+
+  inlineMenuOrientation() {
+    return this._inlineMenuOrientation;
+  }
+
+  setHasFocus(hasFocus: boolean) {
+    this._hasFocus.next(hasFocus);
+  }
+}

package/src/lib/components/overlay/components/menu-deprecated/menu-trigger-base.ts

@@ -0,0 +1,120 @@
+/* eslint-disable @angular-eslint/directive-class-suffix */
+/* eslint-disable @angular-eslint/no-output-rename */
+/* eslint-disable @angular-eslint/no-outputs-metadata-property */
+/* eslint-disable @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+
+import { ConnectedPosition, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import {
+  Directive,
+  EventEmitter,
+  InjectionToken,
+  Injector,
+  OnDestroy,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+} from '@angular/core';
+import { Subject, merge } from 'rxjs';
+import { Menu } from './menu-interface';
+import { MENU_STACK, MenuStack } from './menu-stack';
+
+export const MENU_TRIGGER = new InjectionToken<CdkMenuTriggerBase>('cdk-menu-trigger');
+
+/**
+ * @deprecated Use the new menu instead
+ */
+@Directive({
+  host: {
+    '[attr.aria-controls]': 'childMenu?.id',
+    '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
+  },
+})
+export abstract class CdkMenuTriggerBase implements OnDestroy {
+  readonly injector = inject(Injector);
+
+  protected readonly viewContainerRef = inject(ViewContainerRef);
+
+  protected readonly menuStack: MenuStack = inject(MENU_STACK);
+
+  menuPosition: ConnectedPosition[] | null = null;
+
+  readonly opened: EventEmitter<void> = new EventEmitter();
+
+  readonly closed: EventEmitter<void> = new EventEmitter();
+
+  menuTemplateRef: TemplateRef<unknown> | null = null;
+
+  menuData: unknown;
+
+  protected overlayRef: OverlayRef | null = null;
+
+  protected readonly destroyed: Subject<void> = new Subject();
+
+  protected readonly stopOutsideClicksListener = merge(this.closed, this.destroyed);
+
+  protected childMenu?: Menu;
+
+  private _menuPortal: TemplatePortal | null = null;
+
+  private _childMenuInjector?: Injector;
+
+  ngOnDestroy() {
+    this._destroyOverlay();
+
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
+  isOpen() {
+    return !!this.overlayRef?.hasAttached();
+  }
+
+  registerChildMenu(child: Menu) {
+    this.childMenu = child;
+  }
+
+  protected getMenuContentPortal() {
+    const hasMenuContentChanged = this.menuTemplateRef !== this._menuPortal?.templateRef;
+    if (this.menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
+      this._menuPortal = new TemplatePortal(
+        this.menuTemplateRef,
+        this.viewContainerRef,
+        this.menuData,
+        this._getChildMenuInjector(),
+      );
+    }
+
+    return this._menuPortal;
+  }
+
+  protected isElementInsideMenuStack(element: Element) {
+    for (let el: Element | null = element; el; el = el?.parentElement ?? null) {
+      if (el.getAttribute('data-cdk-menu-stack-id') === this.menuStack.id) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private _destroyOverlay() {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+  }
+
+  private _getChildMenuInjector() {
+    this._childMenuInjector =
+      this._childMenuInjector ||
+      Injector.create({
+        providers: [
+          { provide: MENU_TRIGGER, useValue: this },
+          { provide: MENU_STACK, useValue: this.menuStack },
+        ],
+        parent: this.injector,
+      });
+    return this._childMenuInjector;
+  }
+}