@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/overlay/components/dialog/utils/dialog-ref.ts

@@ -0,0 +1,171 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { DialogRef as CdkDialogRef } from '@angular/cdk/dialog';
+import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { Observable, Subject, filter, merge, skipUntil, take } from 'rxjs';
+import { DialogContainerBaseComponent } from '../partials/dialog-container-base';
+import { DialogConfig, DialogPosition, DialogState } from '../types';
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class DialogRef<T = any, R = any> {
+  componentInstance: T | null = null;
+  disableClose: boolean | undefined;
+  id: string;
+
+  private readonly _afterOpened = new Subject<void>();
+  private readonly _beforeClosed = new Subject<R | undefined>();
+
+  private _result: R | undefined;
+  private _state = DialogState.OPEN;
+  private _closeInteractionType: FocusOrigin | undefined;
+
+  constructor(
+    private _ref: CdkDialogRef<R, T>,
+    config: DialogConfig,
+    public _containerInstance: DialogContainerBaseComponent,
+  ) {
+    this.disableClose = config.disableClose;
+    this.id = _ref.id;
+
+    _containerInstance._animatedLifecycle.state$
+      .pipe(
+        filter((event) => event === 'entered'),
+        take(1),
+      )
+      .subscribe(() => {
+        this._afterOpened.next();
+        this._afterOpened.complete();
+      });
+
+    _containerInstance._animatedLifecycle.state$
+      .pipe(
+        filter((event) => event === 'left'),
+        take(1),
+      )
+      .subscribe(() => {
+        this._finishDialogClose();
+      });
+
+    _ref.overlayRef.detachments().subscribe(() => {
+      this._beforeClosed.next(this._result);
+      this._beforeClosed.complete();
+      this._finishDialogClose();
+    });
+
+    merge(
+      this.backdropClick(),
+      this.keydownEvents().pipe(
+        filter((event) => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)),
+      ),
+    )
+      .pipe(skipUntil(_containerInstance._animatedLifecycle.state$.pipe(filter((e) => e === 'entering'))))
+      .subscribe((event) => {
+        if (!this.disableClose) {
+          event.preventDefault();
+          this._closeDialogVia(this, event.type === 'keydown' ? 'keyboard' : 'mouse');
+        }
+      });
+  }
+
+  close(dialogResult?: R): void {
+    if (this._state === DialogState.CLOSING || this._state === DialogState.CLOSED) {
+      return;
+    }
+
+    this._result = dialogResult;
+
+    this._containerInstance._animatedLifecycle.state$
+      .pipe(
+        filter((event) => event === 'leaving'),
+        take(1),
+      )
+      .subscribe(() => {
+        this._beforeClosed.next(dialogResult);
+        this._beforeClosed.complete();
+        this._ref.overlayRef.detachBackdrop();
+      });
+
+    this._containerInstance._animatedLifecycle.state$
+      .pipe(
+        filter((event) => event === 'left'),
+        take(1),
+      )
+      .subscribe(() => this._finishDialogClose());
+
+    this._state = DialogState.CLOSING;
+    this._containerInstance._animatedLifecycle.leave();
+  }
+
+  afterOpened(): Observable<void> {
+    return this._afterOpened;
+  }
+
+  afterClosed(): Observable<R | undefined> {
+    return this._ref.closed;
+  }
+
+  beforeClosed(): Observable<R | undefined> {
+    return this._beforeClosed;
+  }
+
+  backdropClick(): Observable<MouseEvent> {
+    return this._ref.backdropClick;
+  }
+
+  keydownEvents(): Observable<KeyboardEvent> {
+    return this._ref.keydownEvents;
+  }
+
+  updatePosition(position?: DialogPosition): this {
+    const strategy = this._ref.config.positionStrategy as GlobalPositionStrategy;
+
+    if (position && (position.left || position.right)) {
+      position.left ? strategy.left(position.left) : strategy.right(position.right);
+    } else {
+      strategy.centerHorizontally();
+    }
+
+    if (position && (position.top || position.bottom)) {
+      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+    } else {
+      strategy.centerVertically();
+    }
+
+    this._ref.updatePosition();
+
+    return this;
+  }
+
+  updateSize(width = '', height = ''): this {
+    this._ref.updateSize(width, height);
+    return this;
+  }
+
+  addPanelClass(classes: string | string[]): this {
+    this._ref.addPanelClass(classes);
+    return this;
+  }
+
+  removePanelClass(classes: string | string[]): this {
+    this._ref.removePanelClass(classes);
+    return this;
+  }
+
+  getState(): DialogState {
+    return this._state;
+  }
+
+  private _finishDialogClose() {
+    this._state = DialogState.CLOSED;
+    this._ref.close(this._result, { focusOrigin: this._closeInteractionType });
+    this.componentInstance = null;
+  }
+
+  _closeDialogVia<R>(ref: DialogRef<R>, interactionType: FocusOrigin, result?: R) {
+    (ref as unknown as { _closeInteractionType: FocusOrigin })._closeInteractionType = interactionType;
+    return ref.close(result);
+  }
+}

package/src/lib/components/overlay/components/dialog/utils/dialog.utils.ts

@@ -0,0 +1,28 @@
+import { ElementRef } from '@angular/core';
+import { DIALOG_DEFAULT_OPTIONS } from '../constants';
+import { DialogConfig } from '../types';
+import { createDialogConfig } from './dialog-config';
+import { DialogRef } from './dialog-ref';
+
+/**
+ * Finds the closest DialogRef to an element by looking at the DOM.
+ * @param element Element relative to which to look for a dialog.
+ * @param openDialogs References to the currently-open dialogs.
+ * @deprecated Will be removed in v5.
+ */
+export function getClosestDialog(element: ElementRef<HTMLElement>, openDialogs: DialogRef<unknown>[]) {
+  let parent: HTMLElement | null = element.nativeElement.parentElement;
+
+  while (parent && !parent.classList.contains('et-dialog')) {
+    parent = parent.parentElement;
+  }
+
+  return parent ? openDialogs.find((dialog) => dialog.id === parent?.id) : null;
+}
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const provideDialogDefaultConfig = (config: Partial<DialogConfig> | null | undefined = {}) => {
+  return { provide: DIALOG_DEFAULT_OPTIONS, useValue: createDialogConfig(config) };
+};

package/src/lib/components/overlay/components/menu/components/menu/menu.component.html

@@ -0,0 +1,16 @@
+@if (menuSearchTemplate(); as tpl) {
+  <div class="et-menu-search-container">
+    <ng-container *ngTemplateOutlet="tpl.templateRef" />
+  </div>
+}
+
+<et-scrollable
+  [direction]="orientation()"
+  [renderButtons]="renderScrollableButtons()"
+  [renderMasks]="renderScrollableMasks()"
+  [cursorDragScroll]="orientation() === 'horizontal'"
+  [scrollableClass]="scrollableClass()"
+  renderScrollbars
+>
+  <ng-content />
+</et-scrollable>

package/src/lib/components/overlay/components/menu/components/menu/menu.component.scss

@@ -0,0 +1,20 @@
+.et-menu {
+  --et-menu-max-inline-size: 300px;
+  --et-menu-max-block-size: 200px;
+  --et-menu-background-color: #b3b3b3;
+  --et-menu-border-radius: 10px;
+
+  max-inline-size: var(--et-menu-max-inline-size);
+  max-block-size: min(var(--et-menu-max-block-size), var(--et-floating-max-height, var(--et-menu-max-block-size)));
+  background-color: var(--et-menu-background-color);
+  border-radius: var(--et-menu-border-radius);
+
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+
+  &.et-menu--has-search {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+}

package/src/lib/components/overlay/components/menu/components/menu/menu.component.ts

@@ -0,0 +1,248 @@
+import { DOWN_ARROW, END, HOME, LEFT_ARROW, RIGHT_ARROW, TAB, UP_ARROW } from '@angular/cdk/keycodes';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  InjectionToken,
+  Input,
+  OnDestroy,
+  ViewEncapsulation,
+  booleanAttribute,
+  contentChild,
+  effect,
+  inject,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgClassType, TypedQueryList, signalHostAttributes, signalHostClasses } from '@ethlete/core';
+import { fromEvent, tap } from 'rxjs';
+import { INPUT_TOKEN } from '../../../../../forms/directives/input';
+import { ScrollableComponent } from '../../../../../scrollable/components/scrollable';
+import { MENU_ITEM_TOKEN, MenuItemDirective } from '../../directives/menu-item';
+import { MENU_SEARCH_TEMPLATE_TOKEN } from '../../directives/menu-search-template';
+import { MENU_TRIGGER_TOKEN } from '../../directives/menu-trigger';
+
+export const MENU = new InjectionToken<MenuComponent>('ET_MENU');
+
+let uniqueId = 0;
+
+@Component({
+  selector: 'et-menu',
+  templateUrl: './menu.component.html',
+  styleUrl: './menu.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-menu',
+    role: 'menu',
+    '[id]': 'id',
+    '[attr.aria-labelledby]': '_trigger.id',
+  },
+  imports: [ScrollableComponent, NgTemplateOutlet],
+  providers: [
+    {
+      provide: MENU,
+      useExisting: MenuComponent,
+    },
+  ],
+})
+export class MenuComponent implements OnDestroy {
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  readonly _trigger = inject(MENU_TRIGGER_TOKEN);
+
+  @Input({ alias: 'id' })
+  private set __id(value: string) {
+    this.id.set(value);
+  }
+  readonly id = signal<string>(`et-menu-${uniqueId++}`);
+
+  @Input({ transform: booleanAttribute, alias: 'renderScrollableMasks' })
+  private set __renderScrollableMasks(v: boolean) {
+    this.renderScrollableMasks.set(v);
+  }
+  readonly renderScrollableMasks = signal(false);
+
+  @Input({ transform: booleanAttribute, alias: 'renderScrollableButtons' })
+  private set __renderScrollableButtons(v: boolean) {
+    this.renderScrollableButtons.set(v);
+  }
+  readonly renderScrollableButtons = signal(false);
+
+  @Input({ alias: 'scrollableClass' })
+  set _scrollableClass(v: NgClassType | null) {
+    this.scrollableClass.set(v);
+  }
+  readonly scrollableClass = signal<NgClassType | null>(null);
+
+  @ContentChildren(MENU_ITEM_TOKEN, { descendants: true })
+  private set __menuItemList(value: TypedQueryList<MenuItemDirective>) {
+    this._menuItemList.set(value);
+  }
+  private readonly _menuItemList = signal<TypedQueryList<MenuItemDirective> | null>(null);
+
+  @Input({ alias: 'orientation' })
+  private set __orientation(value: 'horizontal' | 'vertical') {
+    this.orientation.set(value);
+  }
+  readonly orientation = signal<'horizontal' | 'vertical'>('vertical');
+
+  menuSearchTemplate = contentChild(MENU_SEARCH_TEMPLATE_TOKEN);
+  searchInput = contentChild(INPUT_TOKEN);
+
+  hostClassBindings = signalHostClasses({
+    'et-menu--has-search': this.menuSearchTemplate,
+  });
+
+  readonly hostAttributeBindings = signalHostAttributes({
+    id: this.id,
+    'aria-orientation': this.orientation,
+  });
+
+  constructor() {
+    this._trigger._connectWithMenu(this);
+
+    fromEvent(this._elementRef.nativeElement, 'focus')
+      .pipe(
+        takeUntilDestroyed(),
+        tap(() => this.focusFirstItem()),
+      )
+      .subscribe();
+
+    fromEvent<KeyboardEvent>(this._elementRef.nativeElement, 'keydown')
+      .pipe(
+        takeUntilDestroyed(),
+        tap((e) => this._handleKeydown(e)),
+      )
+      .subscribe();
+
+    const initialFocusEffectRef = effect(
+      () => {
+        const items = this._menuItemList();
+        const searchInput = this.searchInput();
+        const firstItem = items?.first;
+
+        if (searchInput) {
+          searchInput.focusInputVia();
+          initialFocusEffectRef.destroy();
+        } else if (firstItem) {
+          firstItem.focus();
+          initialFocusEffectRef.destroy();
+        }
+      },
+      { allowSignalWrites: true },
+    );
+  }
+
+  ngOnDestroy(): void {
+    this._trigger._clearMenuConnection();
+  }
+
+  focusFirstItem() {
+    this._menuItemList()?.first?.focus();
+  }
+
+  focusLastItem() {
+    this._menuItemList()?.last?.focus();
+  }
+
+  focusNextItem() {
+    const items = this._menuItemList()?.toArray();
+
+    if (!items) return;
+
+    const activeItem = items.findIndex((item) => item.isFocused());
+
+    if (activeItem === -1) {
+      this.focusFirstItem();
+      return;
+    }
+
+    const nextItem = items[activeItem + 1];
+
+    if (nextItem) {
+      nextItem.focus();
+    } else {
+      const searchInput = this.searchInput();
+
+      if (searchInput) {
+        if (searchInput.isFocusedVia) {
+          this._menuItemList()?.first?.focus();
+        } else {
+          this.searchInput()?.focusInputVia();
+        }
+
+        return;
+      }
+
+      this.focusFirstItem();
+    }
+  }
+
+  focusPreviousItem() {
+    const items = this._menuItemList()?.toArray();
+
+    if (!items) return;
+
+    const activeItem = items.findIndex((item) => item.isFocused());
+
+    if (activeItem === -1) {
+      this.focusLastItem();
+      return;
+    }
+
+    const previousItem = items[activeItem - 1];
+
+    if (previousItem) {
+      previousItem.focus();
+    } else {
+      const searchInput = this.searchInput();
+
+      if (searchInput) {
+        if (searchInput.isFocusedVia) {
+          this.focusLastItem();
+        } else {
+          this.searchInput()?.focusInputVia();
+        }
+
+        return;
+      }
+
+      this.focusLastItem();
+    }
+  }
+
+  _handleKeydown(event: KeyboardEvent) {
+    const keyCode = event.keyCode;
+
+    switch (keyCode) {
+      case DOWN_ARROW:
+      case RIGHT_ARROW:
+        this.focusNextItem();
+        event.preventDefault();
+        break;
+
+      case UP_ARROW:
+      case LEFT_ARROW:
+        this.focusPreviousItem();
+        event.preventDefault();
+        break;
+
+      case HOME:
+        this.focusFirstItem();
+        event.preventDefault();
+        break;
+
+      case END:
+        this.focusLastItem();
+        event.preventDefault();
+        break;
+
+      case TAB:
+        this._trigger.unmount(false);
+        break;
+    }
+  }
+}

package/src/lib/components/overlay/components/menu/components/menu-checkbox-item/menu-checkbox-item.component.html

@@ -0,0 +1,9 @@
+<div class="et-menu-checkbox">
+  <div [ngClass]="{ 'et-menu-checkbox-check--active': checkbox.checked$ | async }" class="et-menu-checkbox-check"></div>
+  <div
+    [ngClass]="{ 'et-menu-checkbox-indeterminate--active': checkbox.indeterminate$ | async }"
+    class="et-menu-checkbox-indeterminate"
+  ></div>
+</div>
+
+<ng-content />

package/src/lib/components/overlay/components/menu/components/menu-checkbox-item/menu-checkbox-item.component.scss

@@ -0,0 +1,47 @@
+:where(.et-menu-checkbox) {
+  --et-menu-checkbox-size: 25px;
+  --et-menu-checkbox-check-size: 10px;
+  --et-menu-checkbox-border-color: #e5e5e5;
+  --et-menu-checkbox-state-color: #e5e5e5;
+  --et-menu-checkbox-indeterminate-width: 10px;
+  --et-menu-checkbox-indeterminate-height: 2px;
+
+  inline-size: var(--et-menu-checkbox-size);
+  block-size: var(--et-menu-checkbox-size);
+  border: 1px solid var(--et-menu-checkbox-border-color);
+  display: inline-grid;
+}
+
+:where(.et-menu-checkbox-check) {
+  inline-size: var(--et-menu-checkbox-check-size);
+  block-size: var(--et-menu-checkbox-check-size);
+
+  &.et-menu-checkbox-check--active {
+    background-color: var(--et-menu-checkbox-state-color);
+  }
+}
+
+:where(.et-menu-checkbox-indeterminate) {
+  inline-size: var(--et-menu-checkbox-indeterminate-width);
+  block-size: var(--et-menu-checkbox-indeterminate-height);
+
+  &.et-menu-checkbox-indeterminate--active {
+    background-color: var(--et-menu-checkbox-state-color);
+  }
+}
+
+.et-menu-checkbox-item {
+  display: block;
+}
+
+.et-menu-checkbox {
+  position: relative;
+
+  align-items: center;
+  justify-items: center;
+}
+
+.et-menu-checkbox-check,
+.et-menu-checkbox-indeterminate {
+  grid-area: 1 / 1 / 2 / 2;
+}

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

@@ -0,0 +1,113 @@
+import { ENTER, SPACE } from '@angular/cdk/keycodes';
+import { AsyncPipe, NgClass } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Type,
+  ViewEncapsulation,
+  booleanAttribute,
+  effect,
+  forwardRef,
+  inject,
+  input,
+  untracked,
+} from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { signalHostAttributes } from '@ethlete/core';
+import { combineLatest, filter, fromEvent, map, merge } from 'rxjs';
+import { CHECKBOX_TOKEN, CheckboxDirective } from '../../../../../forms/components/checkbox/directives/checkbox';
+import { DynamicFormFieldDirective } from '../../../../../forms/directives/dynamic-form-field';
+import { InputDirective } from '../../../../../forms/directives/input';
+import { NativeInputRefDirective } from '../../../../../forms/directives/native-input-ref';
+import { StaticFormFieldDirective } from '../../../../../forms/directives/static-form-field';
+import { WriteableInputDirective } from '../../../../../forms/directives/writeable-input';
+import { InputBase } from '../../../../../forms/utils';
+import { MENU_ITEM_TOKEN, MenuItemDirective } from '../../directives/menu-item';
+import { MENU_TRIGGER_TOKEN } from '../../directives/menu-trigger';
+
+@Component({
+  selector: 'et-menu-checkbox-item',
+  templateUrl: './menu-checkbox-item.component.html',
+  styleUrl: './menu-checkbox-item.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-menu-checkbox-item',
+    role: 'menuitemcheckbox',
+    '[id]': 'input.id',
+  },
+  imports: [NgClass, AsyncPipe],
+  hostDirectives: [
+    NativeInputRefDirective,
+    StaticFormFieldDirective,
+    WriteableInputDirective,
+    MenuItemDirective,
+    {
+      directive: forwardRef(() => DynamicFormFieldDirective) as Type<DynamicFormFieldDirective>,
+      inputs: ['hideErrorMessage'],
+    },
+    CheckboxDirective,
+    { directive: InputDirective, inputs: ['autocomplete'] },
+  ],
+})
+export class MenuCheckboxItemComponent extends InputBase {
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _trigger = inject(MENU_TRIGGER_TOKEN);
+
+  protected readonly checkbox = inject(CHECKBOX_TOKEN);
+  protected readonly menuItem = inject(MENU_ITEM_TOKEN);
+
+  closeOnInteraction = input(false, { transform: booleanAttribute });
+
+  readonly hostAttributeBindings = signalHostAttributes({
+    'aria-checked': toSignal(
+      combineLatest([this.checkbox.checked$, this.checkbox.indeterminate$]).pipe(
+        map(([checked, indeterminate]) => (checked ? true : indeterminate ? 'mixed' : false)),
+      ),
+    ),
+    'aria-required': toSignal(this.input.required$),
+    'aria-disabled': toSignal(this.input.disabled$),
+    'aria-describedby': toSignal(this.input.describedBy$),
+  });
+
+  constructor() {
+    super();
+
+    merge(
+      fromEvent(this._elementRef.nativeElement, 'click'),
+      fromEvent<KeyboardEvent>(this._elementRef.nativeElement, 'keydown').pipe(
+        filter((e) => e.keyCode === SPACE || e.keyCode === ENTER),
+      ),
+    )
+      .pipe(takeUntilDestroyed())
+      .subscribe((e) => {
+        if ('keyCode' in e) {
+          e.preventDefault();
+
+          if (e.keyCode === ENTER) {
+            this._trigger.unmount();
+          }
+        }
+
+        this.checkbox._onInputInteraction(e);
+      });
+
+    fromEvent(this._elementRef.nativeElement, 'blur')
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.checkbox._controlTouched());
+
+    effect(() => {
+      const closeOnInteraction = this.closeOnInteraction();
+
+      untracked(() => {
+        if (closeOnInteraction) {
+          this.menuItem._enableCloseOnInteraction();
+        } else {
+          this.menuItem._disableCloseOnInteraction();
+        }
+      });
+    });
+  }
+}

package/src/lib/components/overlay/components/menu/components/menu-container/menu-container.component.html

@@ -0,0 +1,3 @@
+<div class="et-menu-body" etAnimatedLifecycle>
+  <ng-container *ngTemplateOutlet="_menuTemplate; injector: injector" />
+</div>