@ethlete/cdk 4.28.0 → 4.28.1

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

@@ -1,173 +0,0 @@
-/* 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 { Directive, inject, Injectable, InjectionToken, isDevMode, NgZone, OnDestroy } from '@angular/core';
-import { fromEvent, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
-import { throwMissingMenuReference, throwMissingPointerFocusTracker } from './menu-errors';
-import { Menu } from './menu-interface';
-import { FocusableElement, PointerFocusTracker } from './pointer-focus-tracker';
-
-export interface MenuAim {
-  initialize(menu: Menu, pointerTracker: PointerFocusTracker<FocusableElement & Toggler>): void;
-
-  toggle(doToggle: () => void): void;
-}
-
-export const MENU_AIM = new InjectionToken<MenuAim>('cdk-menu-aim');
-
-const MOUSE_MOVE_SAMPLE_FREQUENCY = 3;
-
-const NUM_POINTS = 5;
-
-const CLOSE_DELAY = 300;
-
-export interface Toggler {
-  getMenu(): Menu | undefined;
-}
-
-function getSlope(a: Point, b: Point) {
-  return (b.y - a.y) / (b.x - a.x);
-}
-
-function getYIntercept(point: Point, slope: number) {
-  return point.y - slope * point.x;
-}
-
-type Point = { x: number; y: number };
-
-function isWithinSubmenu(submenuPoints: DOMRect, m: number, b: number) {
-  const { left, right, top, bottom } = submenuPoints;
-
-  return (
-    (m * left + b >= top && m * left + b <= bottom) ||
-    (m * right + b >= top && m * right + b <= bottom) ||
-    ((top - b) / m >= left && (top - b) / m <= right) ||
-    ((bottom - b) / m >= left && (bottom - b) / m <= right)
-  );
-}
-
-@Injectable()
-export class TargetMenuAim implements MenuAim, OnDestroy {
-  private readonly _ngZone = inject(NgZone);
-
-  private readonly _points: Point[] = [];
-
-  private _menu: Menu | null = null;
-
-  private _pointerTracker: PointerFocusTracker<Toggler & FocusableElement> | null = null;
-
-  private _timeoutId: number | null = null;
-
-  private readonly _destroyed: Subject<void> = new Subject();
-
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
-  initialize(menu: Menu, pointerTracker: PointerFocusTracker<FocusableElement & Toggler>) {
-    this._menu = menu;
-    this._pointerTracker = pointerTracker;
-    this._subscribeToMouseMoves();
-  }
-
-  toggle(doToggle: () => void) {
-    if (!this._menu) return;
-
-    if (this._menu.orientation === 'horizontal') {
-      doToggle();
-    }
-
-    this._checkConfigured();
-
-    const siblingItemIsWaiting = !!this._timeoutId;
-    const hasPoints = this._points.length > 1;
-
-    if (hasPoints && !siblingItemIsWaiting) {
-      if (this._isMovingToSubmenu()) {
-        this._startTimeout(doToggle);
-      } else {
-        doToggle();
-      }
-    } else if (!siblingItemIsWaiting) {
-      doToggle();
-    }
-  }
-
-  private _startTimeout(doToggle: () => void) {
-    const timeoutId = window.setTimeout(() => {
-      if (!this._pointerTracker) return;
-
-      if (this._pointerTracker.activeElement && timeoutId === this._timeoutId) {
-        doToggle();
-      }
-      this._timeoutId = null;
-    }, CLOSE_DELAY);
-
-    this._timeoutId = timeoutId;
-  }
-
-  private _isMovingToSubmenu() {
-    const submenuPoints = this._getSubmenuBounds();
-    if (!submenuPoints) {
-      return false;
-    }
-
-    let numMoving = 0;
-    const currPoint = this._points[this._points.length - 1];
-
-    for (let i = this._points.length - 2; i >= 0; i--) {
-      const previous = this._points[i];
-      const slope = getSlope(currPoint!, previous!);
-      if (isWithinSubmenu(submenuPoints, slope, getYIntercept(currPoint!, slope))) {
-        numMoving++;
-      }
-    }
-    return numMoving >= Math.floor(NUM_POINTS / 2);
-  }
-
-  private _getSubmenuBounds(): DOMRect | undefined {
-    return this._pointerTracker?.previousElement?.getMenu()?.nativeElement.getBoundingClientRect();
-  }
-
-  private _checkConfigured() {
-    if (isDevMode()) {
-      if (!this._pointerTracker) {
-        throwMissingPointerFocusTracker();
-      }
-      if (!this._menu) {
-        throwMissingMenuReference();
-      }
-    }
-  }
-
-  private _subscribeToMouseMoves() {
-    this._ngZone.runOutsideAngular(() => {
-      if (!this._menu) return;
-
-      fromEvent<MouseEvent>(this._menu.nativeElement, 'mousemove')
-        .pipe(
-          filter((_: MouseEvent, index: number) => index % MOUSE_MOVE_SAMPLE_FREQUENCY === 0),
-          takeUntil(this._destroyed),
-        )
-        .subscribe((event: MouseEvent) => {
-          this._points.push({ x: event.clientX, y: event.clientY });
-          if (this._points.length > NUM_POINTS) {
-            this._points.shift();
-          }
-        });
-    });
-  }
-}
-
-@Directive({
-  selector: '[cdkTargetMenuAim]',
-  exportAs: 'cdkTargetMenuAim',
-  standalone: true,
-  providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }],
-})
-export class CdkTargetMenuAim {}

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

@@ -1,119 +0,0 @@
-/* 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 { DOWN_ARROW, ESCAPE, LEFT_ARROW, RIGHT_ARROW, TAB, UP_ARROW, hasModifierKey } from '@angular/cdk/keycodes';
-import { AfterContentInit, Directive } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { CdkMenuBase } from './menu-base';
-import { CdkMenuGroup } from './menu-group';
-import { CDK_MENU } from './menu-interface';
-import { FocusNext, MENU_STACK, MenuStack } from './menu-stack';
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  selector: '[cdkMenuBar]',
-  exportAs: 'cdkMenuBar',
-  standalone: true,
-  host: {
-    role: 'menubar',
-    class: 'cdk-menu-bar',
-    '(keydown)': '_handleKeyEvent($event)',
-  },
-  providers: [
-    { provide: CdkMenuGroup, useExisting: CdkMenuBar },
-    { provide: CDK_MENU, useExisting: CdkMenuBar },
-    { provide: MENU_STACK, useFactory: () => MenuStack.inline('horizontal') },
-  ],
-})
-export class CdkMenuBar extends CdkMenuBase implements AfterContentInit {
-  override readonly orientation = 'horizontal';
-
-  override readonly isInline = true;
-
-  override ngAfterContentInit() {
-    super.ngAfterContentInit();
-    this._subscribeToMenuStackEmptied();
-  }
-
-  _handleKeyEvent(event: KeyboardEvent) {
-    const keyManager = this.keyManager;
-
-    if (!keyManager) return;
-
-    switch (event.keyCode) {
-      case UP_ARROW:
-      case DOWN_ARROW:
-      case LEFT_ARROW:
-      case RIGHT_ARROW:
-        if (!hasModifierKey(event)) {
-          const horizontalArrows = event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW;
-
-          if (horizontalArrows) {
-            event.preventDefault();
-
-            const prevIsOpen = keyManager.activeItem?.isMenuOpen();
-            keyManager.activeItem?.getMenuTrigger()?.close();
-
-            keyManager.setFocusOrigin('keyboard');
-            keyManager.onKeydown(event);
-            if (prevIsOpen) {
-              keyManager.activeItem?.getMenuTrigger()?.open();
-            }
-          }
-        }
-        break;
-
-      case ESCAPE:
-        if (!hasModifierKey(event)) {
-          event.preventDefault();
-          keyManager.activeItem?.getMenuTrigger()?.close();
-        }
-        break;
-
-      case TAB:
-        if (!hasModifierKey(event, 'altKey', 'metaKey', 'ctrlKey')) {
-          keyManager.activeItem?.getMenuTrigger()?.close();
-        }
-        break;
-
-      default:
-        keyManager.onKeydown(event);
-    }
-  }
-
-  private _toggleOpenMenu(focusNext: FocusNext | undefined) {
-    const keyManager = this.keyManager;
-
-    if (!keyManager) return;
-
-    switch (focusNext) {
-      case FocusNext.nextItem:
-        keyManager.setFocusOrigin('keyboard');
-        keyManager.setNextItemActive();
-        keyManager.activeItem?.getMenuTrigger()?.open();
-        break;
-
-      case FocusNext.previousItem:
-        keyManager.setFocusOrigin('keyboard');
-        keyManager.setPreviousItemActive();
-        keyManager.activeItem?.getMenuTrigger()?.open();
-        break;
-
-      case FocusNext.currentItem:
-        if (keyManager.activeItem) {
-          keyManager.setFocusOrigin('keyboard');
-          keyManager.setActiveItem(keyManager.activeItem);
-        }
-        break;
-    }
-  }
-
-  private _subscribeToMenuStackEmptied() {
-    this.menuStack?.emptied.pipe(takeUntil(this.destroyed)).subscribe((event) => this._toggleOpenMenu(event));
-  }
-}

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

@@ -1,212 +0,0 @@
-/* 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 { FocusKeyManager, FocusOrigin } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import {
-  AfterContentInit,
-  ContentChildren,
-  Directive,
-  ElementRef,
-  Input,
-  NgZone,
-  OnDestroy,
-  QueryList,
-  inject,
-} from '@angular/core';
-import { Subject, merge } from 'rxjs';
-import { mapTo, mergeAll, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators';
-import { MENU_AIM } from './menu-aim';
-import { CdkMenuGroup } from './menu-group';
-import { Menu } from './menu-interface';
-import { CdkMenuItem } from './menu-item';
-import { MENU_STACK, MenuStack, MenuStackItem } from './menu-stack';
-import { PointerFocusTracker } from './pointer-focus-tracker';
-
-let nextId = 0;
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  host: {
-    role: 'menu',
-    class: '',
-    '[tabindex]': '_getTabIndex()',
-    '[id]': 'id',
-    '[attr.aria-orientation]': 'orientation',
-    '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
-    '(focus)': 'focusFirstItem()',
-    '(focusin)': 'menuStack.setHasFocus(true)',
-    '(focusout)': 'menuStack.setHasFocus(false)',
-  },
-})
-export abstract class CdkMenuBase extends CdkMenuGroup implements Menu, AfterContentInit, OnDestroy {
-  readonly nativeElement: HTMLElement = inject(ElementRef).nativeElement;
-
-  protected ngZone = inject(NgZone);
-
-  readonly menuStack: MenuStack = inject(MENU_STACK);
-
-  protected readonly menuAim = inject(MENU_AIM, { optional: true, self: true });
-
-  protected readonly dir = inject(Directionality, { optional: true });
-
-  @Input() id = `cdk-menu-${nextId++}`;
-
-  @ContentChildren(CdkMenuItem, { descendants: true })
-  readonly items: QueryList<CdkMenuItem> | null = null;
-
-  orientation: 'horizontal' | 'vertical' = 'vertical';
-
-  isInline = false;
-
-  protected keyManager: FocusKeyManager<CdkMenuItem> | null = null;
-
-  protected readonly destroyed: Subject<void> = new Subject();
-
-  protected triggerItem?: CdkMenuItem;
-
-  protected pointerTracker?: PointerFocusTracker<CdkMenuItem>;
-
-  private _menuStackHasFocus = false;
-
-  ngAfterContentInit() {
-    if (!this.isInline) {
-      this.menuStack.push(this);
-    }
-    this._setKeyManager();
-    this._subscribeToMenuStackHasFocus();
-    this._subscribeToMenuOpen();
-    this._subscribeToMenuStackClosed();
-    this._setUpPointerTracker();
-  }
-
-  ngOnDestroy() {
-    this.keyManager?.destroy();
-    this.destroyed.next();
-    this.destroyed.complete();
-    this.pointerTracker?.destroy();
-  }
-
-  focusFirstItem(focusOrigin: FocusOrigin = 'program') {
-    if (!this.keyManager) return;
-
-    this.keyManager.setFocusOrigin(focusOrigin);
-    this.keyManager.setFirstItemActive();
-  }
-
-  focusLastItem(focusOrigin: FocusOrigin = 'program') {
-    if (!this.keyManager) return;
-
-    this.keyManager.setFocusOrigin(focusOrigin);
-    this.keyManager.setLastItemActive();
-  }
-
-  focusItem(item: CdkMenuItem, focusOrigin: FocusOrigin = 'program') {
-    const doFocus = () => {
-      if (!this.keyManager) return;
-
-      const index = this.items?.toArray().indexOf(item);
-
-      if (index !== undefined && index !== -1) {
-        this.keyManager.setFocusOrigin(focusOrigin);
-        this.keyManager.setActiveItem(index);
-      }
-    };
-
-    if (!this.items) {
-      setTimeout(() => {
-        doFocus();
-      }, 0);
-    } else {
-      doFocus();
-    }
-  }
-
-  _getTabIndex() {
-    const tabindexIfInline = this._menuStackHasFocus ? -1 : 0;
-    return this.isInline ? tabindexIfInline : null;
-  }
-
-  protected closeOpenMenu(menu: MenuStackItem, options?: { focusParentTrigger?: boolean }) {
-    const { focusParentTrigger } = { ...options };
-    const keyManager = this.keyManager;
-    const trigger = this.triggerItem;
-    if (menu === trigger?.getMenuTrigger()?.getMenu()) {
-      trigger?.getMenuTrigger()?.close();
-
-      if (focusParentTrigger) {
-        if (!keyManager) return;
-
-        if (trigger) {
-          keyManager.setActiveItem(trigger);
-        } else {
-          keyManager.setFirstItemActive();
-        }
-      }
-    }
-  }
-
-  private _setKeyManager() {
-    if (!this.items) return;
-
-    this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();
-
-    if (this.orientation === 'horizontal') {
-      this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
-    } else {
-      this.keyManager.withVerticalOrientation();
-    }
-  }
-
-  private _subscribeToMenuOpen() {
-    if (!this.items) return;
-
-    const exitCondition = merge(this.items.changes, this.destroyed);
-    this.items.changes
-      .pipe(
-        startWith(this.items),
-        mergeMap((list: QueryList<CdkMenuItem>) =>
-          list
-            .filter((item) => item.hasMenu)
-            .map((item) => item.getMenuTrigger()!.opened.pipe(mapTo(item), takeUntil(exitCondition))),
-        ),
-        mergeAll(),
-        switchMap((item: CdkMenuItem) => {
-          this.triggerItem = item;
-          return item.getMenuTrigger()!.closed;
-        }),
-        takeUntil(this.destroyed),
-      )
-      .subscribe(() => (this.triggerItem = undefined));
-  }
-
-  private _subscribeToMenuStackClosed() {
-    this.menuStack.closed
-      .pipe(takeUntil(this.destroyed))
-      .subscribe(({ item, focusParentTrigger }) => this.closeOpenMenu(item, { focusParentTrigger }));
-  }
-
-  private _subscribeToMenuStackHasFocus() {
-    if (this.isInline) {
-      this.menuStack.hasFocus.pipe(takeUntil(this.destroyed)).subscribe((hasFocus) => {
-        this._menuStackHasFocus = hasFocus;
-      });
-    }
-  }
-
-  private _setUpPointerTracker() {
-    if (this.menuAim) {
-      this.ngZone.runOutsideAngular(() => {
-        if (!this.items) return;
-
-        this.pointerTracker = new PointerFocusTracker(this.items);
-      });
-      this.menuAim.initialize(this, this.pointerTracker!);
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-export function throwMissingPointerFocusTracker() {
-  throw Error('expected an instance of PointerFocusTracker to be provided');
-}
-
-export function throwMissingMenuReference() {
-  throw Error('expected a reference to the parent menu');
-}

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

@@ -1,23 +0,0 @@
-/* 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 { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import { Directive } from '@angular/core';
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  selector: '[cdkMenuGroup]',
-  exportAs: 'cdkMenuGroup',
-  standalone: true,
-  host: {
-    role: 'group',
-    class: 'cdk-menu-group',
-  },
-  providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }],
-})
-export class CdkMenuGroup {}

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

@@ -1,19 +0,0 @@
-import { FocusOrigin } from '@angular/cdk/a11y';
-import { InjectionToken } from '@angular/core';
-import { MenuStackItem } from './menu-stack';
-
-export const CDK_MENU = new InjectionToken<Menu>('cdk-menu');
-
-export interface Menu extends MenuStackItem {
-  id: string;
-
-  nativeElement: HTMLElement;
-
-  readonly orientation: 'horizontal' | 'vertical';
-
-  focusFirstItem(focusOrigin: FocusOrigin): void;
-
-  focusLastItem(focusOrigin: FocusOrigin): void;
-
-  focusItem(item: unknown, focusOrigin?: FocusOrigin): void;
-}

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

@@ -1,35 +0,0 @@
-/* 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 { Directive } from '@angular/core';
-import { CdkMenuItem } from './menu-item';
-import { CdkMenuItemSelectable } from './menu-item-selectable';
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  selector: '[cdkMenuItemCheckbox]',
-  exportAs: 'cdkMenuItemCheckbox',
-  standalone: true,
-  host: {
-    role: 'menuitemcheckbox',
-    '[class.cdk-menu-item-checkbox]': 'true',
-  },
-  providers: [
-    { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
-    { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
-  ],
-})
-export class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
-  override trigger(options?: { keepOpen: boolean }) {
-    super.trigger(options);
-
-    if (!this.disabled) {
-      this.checked = !this.checked;
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-/* 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 { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import { Directive, inject, OnDestroy } from '@angular/core';
-import { CdkMenuItem } from './menu-item';
-import { CdkMenuItemSelectable } from './menu-item-selectable';
-
-let nextId = 0;
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  selector: '[cdkMenuItemRadio]',
-  exportAs: 'cdkMenuItemRadio',
-  standalone: true,
-  host: {
-    role: 'menuitemradio',
-    '[class.cdk-menu-item-radio]': 'true',
-  },
-  providers: [
-    { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
-    { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
-  ],
-})
-export class CdkMenuItemRadio extends CdkMenuItemSelectable implements OnDestroy {
-  private readonly _selectionDispatcher = inject(UniqueSelectionDispatcher);
-
-  private _id = `${nextId++}`;
-
-  private _removeDispatcherListener?: () => void;
-
-  constructor() {
-    super();
-    this._registerDispatcherListener();
-  }
-
-  override ngOnDestroy() {
-    super.ngOnDestroy();
-
-    this._removeDispatcherListener?.();
-  }
-
-  override trigger(options?: { keepOpen: boolean }) {
-    super.trigger(options);
-
-    if (!this.disabled) {
-      this._selectionDispatcher.notify(this._id, '');
-    }
-  }
-
-  private _registerDispatcherListener() {
-    this._removeDispatcherListener = this._selectionDispatcher.listen((id: string) => {
-      this.checked = this._id === id;
-    });
-  }
-}

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

@@ -1,29 +0,0 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Directive, Input } from '@angular/core';
-import { CdkMenuItem } from './menu-item';
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  host: {
-    '[attr.aria-checked]': '!!checked',
-    '[attr.aria-disabled]': 'disabled || null',
-  },
-})
-export abstract class CdkMenuItemSelectable extends CdkMenuItem {
-  @Input('cdkMenuItemChecked')
-  get checked(): boolean {
-    return this._checked;
-  }
-  set checked(value: BooleanInput) {
-    this._checked = coerceBooleanProperty(value);
-
-    if (this._checked) {
-      this.getParentMenu()?.focusItem(this);
-    }
-  }
-  private _checked = false;
-
-  protected override closeOnSpacebarTrigger = false;
-}