@ethlete/cdk 4.28.0 → 4.28.2

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

@@ -1,171 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,16 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-.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

@@ -1,248 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-: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

@@ -1,113 +0,0 @@
-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

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