@ethlete/cdk 4.28.0 → 4.28.2

package/src/lib/components/overlay/components/menu/directives/menu-trigger/menu-trigger.directive.ts

@@ -1,213 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  Input,
-  OnDestroy,
-  TemplateRef,
-  computed,
-  inject,
-  signal,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { AnimatedOverlayDirective, ClickObserverService, signalHostAttributes, signalHostClasses } from '@ethlete/core';
-import { THEME_PROVIDER } from '@ethlete/theming';
-import { Subscription, filter, fromEvent, take, tap } from 'rxjs';
-import { OverlayCloseBlockerDirective } from '../../../../directives/overlay-close-auto-blocker';
-import { MenuComponent } from '../../components/menu';
-import { MENU_TEMPLATE, MenuContainerComponent } from '../../components/menu-container';
-
-export const MENU_TRIGGER_TOKEN = new InjectionToken<MenuTriggerDirective>('ET_MENU_TRIGGER_TOKEN');
-
-let uniqueId = 0;
-
-@Directive({
-  selector: '[etMenuTrigger]',
-  standalone: true,
-  providers: [
-    {
-      provide: MENU_TRIGGER_TOKEN,
-      useExisting: MenuTriggerDirective,
-    },
-  ],
-  hostDirectives: [
-    { directive: AnimatedOverlayDirective, inputs: ['placement', 'offset', 'viewportPadding', 'fallbackPlacements'] },
-    OverlayCloseBlockerDirective,
-  ],
-  host: {
-    'aria-haspopup': 'menu',
-    class: 'et-menu-trigger',
-    '[id]': 'id',
-  },
-})
-export class MenuTriggerDirective implements OnDestroy {
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  readonly _animatedOverlay = inject<AnimatedOverlayDirective<MenuContainerComponent>>(AnimatedOverlayDirective);
-  private readonly _themeProvider = inject(THEME_PROVIDER, { optional: true });
-  private readonly _clickObserverService = inject(ClickObserverService);
-
-  readonly id = `et-menu-trigger-${uniqueId++}`;
-
-  protected readonly isOpen = signal<boolean>(false);
-
-  private readonly _listenerSubscriptions: Subscription[] = [];
-
-  private readonly _currentMenu = signal<MenuComponent | null>(null);
-
-  private readonly _currentMenuId = computed(() => {
-    const menu = this._currentMenu();
-    return menu ? menu.id() : null;
-  });
-
-  readonly currentMenu = this._currentMenu.asReadonly();
-
-  @Input({ alias: 'etMenuTrigger', required: true })
-  set __menuTemplate(value: TemplateRef<unknown>) {
-    this.menuTemplate.set(value);
-  }
-  protected readonly menuTemplate = signal<TemplateRef<unknown> | null>(null);
-
-  readonly hostClassBindings = signalHostClasses({
-    'et-menu-trigger--open': this.isOpen,
-  });
-
-  readonly hostAttributeBindings = signalHostAttributes({
-    'aria-controls': this._currentMenuId,
-    'aria-expanded': this.isOpen,
-  });
-
-  constructor() {
-    this._animatedOverlay.autoHide = true;
-    this._animatedOverlay.shift = false;
-    this._animatedOverlay.autoResize = true;
-
-    if (!this._animatedOverlay.placement) {
-      this._animatedOverlay.placement = 'bottom';
-    }
-
-    if (!this._animatedOverlay.fallbackPlacements) {
-      this._animatedOverlay.fallbackPlacements = [
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'top',
-        'top-start',
-        'top-end',
-      ];
-    }
-
-    fromEvent<MouseEvent>(this._elementRef.nativeElement, 'click')
-      .pipe(
-        tap(() => this.mount()),
-        takeUntilDestroyed(),
-      )
-      .subscribe();
-
-    this._animatedOverlay
-      .afterClosed()
-      .pipe(
-        tap(() => this._removeListeners()),
-        takeUntilDestroyed(),
-      )
-      .subscribe();
-  }
-
-  ngOnDestroy(): void {
-    this._animatedOverlay._destroy();
-    this._removeListeners();
-  }
-
-  mount() {
-    const menuTemplate = this.menuTemplate();
-
-    if (!menuTemplate) {
-      throw new Error('No menu template provided');
-    }
-
-    if (!this._animatedOverlay.canMount) return;
-
-    const menuRef = this._animatedOverlay.mount({
-      component: MenuContainerComponent,
-      themeProvider: this._themeProvider,
-      providers: [
-        {
-          provide: MENU_TEMPLATE,
-          useValue: menuTemplate,
-        },
-      ],
-    });
-
-    if (menuRef) {
-      this.isOpen.set(true);
-      this._addListeners();
-    }
-  }
-
-  unmount(restoreFocus = true) {
-    if (!this._animatedOverlay.canUnmount) return;
-
-    this._animatedOverlay.unmount();
-    this.isOpen.set(false);
-
-    if (restoreFocus) {
-      this._animatedOverlay
-        .afterClosed()
-        .pipe(
-          tap(() => this._elementRef.nativeElement.focus()),
-          take(1),
-        )
-        .subscribe();
-    }
-  }
-
-  _connectWithMenu(menu: MenuComponent) {
-    this._currentMenu.set(menu);
-  }
-
-  _clearMenuConnection() {
-    this._currentMenu.set(null);
-  }
-
-  private _addListeners() {
-    const keyupEscSub = fromEvent<KeyboardEvent>(document, 'keydown')
-      .pipe(
-        filter((e) => e.key === 'Escape'),
-        tap(() => {
-          const menu = this.currentMenu();
-          const searchInput = menu?.searchInput();
-
-          if (!menu || !searchInput) {
-            this.unmount();
-            return;
-          }
-
-          if (searchInput.isFocusedVia) {
-            if (searchInput.value) {
-              return;
-            }
-          }
-
-          this.unmount();
-        }),
-      )
-      .subscribe();
-
-    const clickOutsideSub = this._clickObserverService
-      .observe(this._animatedOverlay.componentRef?.location.nativeElement)
-      .subscribe((e) => {
-        const targetElement = e.target as HTMLElement;
-        const isInside = this._animatedOverlay.componentRef?.location.nativeElement.contains(targetElement);
-
-        if (!isInside) {
-          this.unmount();
-        }
-      });
-
-    this._listenerSubscriptions.push(keyupEscSub, clickOutsideSub);
-  }
-
-  private _removeListeners() {
-    this._listenerSubscriptions.forEach((s) => s.unsubscribe());
-    this._listenerSubscriptions.length = 0;
-  }
-}

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

@@ -1,23 +0,0 @@
-import { MenuComponent } from './components/menu';
-import { MenuCheckboxItemComponent } from './components/menu-checkbox-item';
-import { MenuRadioItemComponent } from './components/menu-radio-item';
-import { MenuCheckboxGroupDirective } from './directives/menu-checkbox-group';
-import { MenuGroupDirective } from './directives/menu-group';
-import { MenuGroupTitleDirective } from './directives/menu-group-title';
-import { MenuItemDirective } from './directives/menu-item';
-import { MenuRadioGroupDirective } from './directives/menu-radio-group';
-import { MenuSearchTemplateDirective } from './directives/menu-search-template';
-import { MenuTriggerDirective } from './directives/menu-trigger';
-
-export const MenuImports = [
-  MenuGroupDirective,
-  MenuCheckboxItemComponent,
-  MenuRadioItemComponent,
-  MenuGroupTitleDirective,
-  MenuItemDirective,
-  MenuTriggerDirective,
-  MenuCheckboxGroupDirective,
-  MenuRadioGroupDirective,
-  MenuComponent,
-  MenuSearchTemplateDirective,
-] as const;

package/src/lib/components/overlay/components/menu/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './menu-storybook.component';

package/src/lib/components/overlay/components/menu/stories/components/menu-storybook.component.ts

@@ -1,107 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { ChangeDetectionStrategy, Component, Injectable, ViewEncapsulation, inject } from '@angular/core';
-import { CheckboxImports } from '../../../../../forms/components/checkbox/checkbox.imports';
-import { InputImports } from '../../../../../forms/components/input/input.imports';
-import { provideValidatorErrorsService } from '../../../../../forms/services';
-import { MENU } from '../../components/menu';
-import { MenuImports } from '../../menu.imports';
-
-@Injectable()
-export class TestService {}
-
-@Component({
-  selector: 'et-sb-menu-item',
-  standalone: true,
-  template: `<p>Menu</p>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class MenuItemStorybookComponent {
-  x = inject(MENU);
-  testService = inject(TestService);
-}
-
-@Component({
-  selector: 'et-sb-menu',
-  template: `
-    <div class="row">
-      <button [etMenuTrigger]="menuTpl">Menu</button>
-      <button [etMenuTrigger]="menuTpl">Menu</button>
-      <button [etMenuTrigger]="menuTpl">Menu</button>
-    </div>
-
-    <div class="row">
-      <button [etMenuTrigger]="menuTpl">Menu</button>
-      <button [etMenuTrigger]="menuTpl">Menu</button>
-      <button [etMenuTrigger]="menuTpl">Menu</button>
-    </div>
-
-    <ng-template #menuTpl>
-      <et-menu>
-        <ng-template etMenuSearchTemplate>
-          <et-input-field>
-            <et-label>Search</et-label>
-            <et-search-input />
-          </et-input-field>
-        </ng-template>
-
-        <p etMenuItem>Lorem, ipsum dolor.</p>
-        <p etMenuItem>Lorem, ipsum dolor.</p>
-        <p etMenuItem>Lorem, ipsum dolor.</p>
-
-        <div etMenuGroup>
-          <span etMenuGroupTitle>Group Title</span>
-          <p etMenuItem>Lorem, ipsum dolor.</p>
-          <p etMenuItem>Lorem, ipsum dolor.</p>
-          <p etMenuItem>Lorem, ipsum dolor.</p>
-        </div>
-
-        <div etMenuCheckboxGroup>
-          <span etMenuGroupTitle>Checkbox group Title</span>
-          <et-menu-checkbox-item etCheckboxGroupControl>All </et-menu-checkbox-item>
-          <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-          <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-          <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-        </div>
-
-        <div etMenuRadioGroup>
-          <span etMenuGroupTitle>Radio group Title</span>
-          <et-menu-radio-item value="1">Radio item</et-menu-radio-item>
-          <et-menu-radio-item value="2">Radio item</et-menu-radio-item>
-          <et-menu-radio-item value="3">Radio item</et-menu-radio-item>
-        </div>
-      </et-menu>
-    </ng-template>
-  `,
-  styles: [
-    `
-      et-sb-menu {
-        height: 120vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        margin-bottom: 700px;
-        .row {
-          display: flex;
-          justify-content: space-between;
-        }
-      }
-
-      .et-scrollable-container {
-        padding-inline: 10px;
-        padding-block-end: 10px;
-      }
-
-      .et-menu-search-container {
-        border-bottom: 1px solid #000;
-        padding: 10px;
-      }
-    `,
-  ],
-  standalone: true,
-  imports: [OverlayModule, MenuItemStorybookComponent, CheckboxImports, MenuImports, InputImports],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [TestService, provideValidatorErrorsService()],
-})
-export class MenuStorybookComponent {}

package/src/lib/components/overlay/components/menu/stories/menu.docs.mdx

@@ -1,91 +0,0 @@
-# Menu
-
-A menu is a type of overlay that can contain one or more menu items. When a menu item is pressed, the menu closes.
-
-## Menu items grouped and ungrouped
-
-```html
-<button [etMenuTrigger]="menuTpl">Menu</button>
-
-<ng-template #menuTpl>
-  <et-menu>
-    <p etMenuItem>Lorem, ipsum dolor.</p>
-    <p etMenuItem>Lorem, ipsum dolor.</p>
-
-    <div etMenuGroup>
-      <span etMenuGroupTitle>Group Title</span>
-      <p etMenuItem>Lorem, ipsum dolor.</p>
-      <p etMenuItem>Lorem, ipsum dolor.</p>
-      <p etMenuItem>Lorem, ipsum dolor.</p>
-    </div>
-  </et-menu>
-</ng-template>
-```
-
-## Checkbox items grouped and ungrouped
-
-A `formControl` binding is supported for the `<et-menu-checkbox-item>`
-
-```html
-<button [etMenuTrigger]="menuTpl">Menu</button>
-
-<ng-template #menuTpl>
-  <et-menu>
-    <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-    <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-
-    <div etMenuCheckboxGroup>
-      <span etMenuGroupTitle>Checkbox group Title</span>
-      <et-menu-checkbox-item etCheckboxGroupControl>All </et-menu-checkbox-item>
-      <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-      <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-      <et-menu-checkbox-item>Checkbox item</et-menu-checkbox-item>
-    </div>
-  </et-menu>
-</ng-template>
-```
-
-## Radio items
-
-For radios a group is required. A `formControl` binding is supported for the `etMenuRadioGroup`
-
-```html
-<button [etMenuTrigger]="menuTpl">Menu</button>
-
-<ng-template #menuTpl>
-  <et-menu>
-    <div etMenuRadioGroup>
-      <span etMenuGroupTitle>Radio group Title</span>
-      <et-menu-radio-item value="1">Radio item</et-menu-radio-item>
-      <et-menu-radio-item value="2">Radio item</et-menu-radio-item>
-      <et-menu-radio-item value="3">Radio item</et-menu-radio-item>
-    </div>
-  </et-menu>
-</ng-template>
-```
-
-## Adding a search input
-
-To add a search input to the menu, use the `etMenuSearchTemplate` directive.
-
-```html
-<button [etMenuTrigger]="menuTpl">Menu</button>
-
-<ng-template #menuTpl>
-  <et-menu>
-    <ng-template etMenuSearchTemplate>
-      <et-input-field>
-        <et-label>Search</et-label>
-        <et-search-input />
-      </et-input-field>
-    </ng-template>
-
-    <div etMenuRadioGroup>
-      <span etMenuGroupTitle>Radio group Title</span>
-      <et-menu-radio-item value="1">Radio item</et-menu-radio-item>
-      <et-menu-radio-item value="2">Radio item</et-menu-radio-item>
-      <et-menu-radio-item value="3">Radio item</et-menu-radio-item>
-    </div>
-  </et-menu>
-</ng-template>
-```

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

@@ -1,23 +0,0 @@
-import { Meta, StoryFn } from '@storybook/angular';
-import { MenuStorybookComponent } from './components';
-import CustomMDXDocumentation from './menu.docs.mdx';
-
-export default {
-  title: 'CDK/Overlay/Menu',
-  component: MenuStorybookComponent,
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-  argTypes: {},
-} as Meta<MenuStorybookComponent>;
-
-const Template: StoryFn<MenuStorybookComponent> = (args) => ({
-  props: args,
-});
-
-export const Default = {
-  render: Template,
-  args: {},
-};

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

@@ -1,177 +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 { Directionality } from '@angular/cdk/bidi';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import {
-  FlexibleConnectedPositionStrategy,
-  Overlay,
-  OverlayConfig,
-  STANDARD_DROPDOWN_BELOW_POSITIONS,
-} from '@angular/cdk/overlay';
-import { _getEventTarget } from '@angular/cdk/platform';
-import { Directive, Injectable, Input, OnDestroy, inject } from '@angular/core';
-import { merge, partition } from 'rxjs';
-import { skip, takeUntil } from 'rxjs/operators';
-import { MENU_STACK, MenuStack } from './menu-stack';
-import { CdkMenuTriggerBase, MENU_TRIGGER } from './menu-trigger-base';
-
-const CONTEXT_MENU_POSITIONS = STANDARD_DROPDOWN_BELOW_POSITIONS.map((position) => {
-  const offsetX = position.overlayX === 'start' ? 2 : -2;
-  const offsetY = position.overlayY === 'top' ? 2 : -2;
-  return { ...position, offsetX, offsetY };
-});
-
-@Injectable({ providedIn: 'root' })
-export class ContextMenuTracker {
-  private static _openContextMenuTrigger?: CdkContextMenuTrigger;
-
-  update(trigger: CdkContextMenuTrigger) {
-    if (ContextMenuTracker._openContextMenuTrigger !== trigger) {
-      ContextMenuTracker._openContextMenuTrigger?.close();
-      ContextMenuTracker._openContextMenuTrigger = trigger;
-    }
-  }
-}
-
-export type ContextMenuCoordinates = { x: number; y: number };
-
-/**
- * @deprecated Use the new menu instead
- */
-@Directive({
-  selector: '[cdkContextMenuTriggerFor]',
-  exportAs: 'cdkContextMenuTriggerFor',
-  standalone: true,
-  host: {
-    '[attr.data-cdk-menu-stack-id]': 'null',
-    '(contextmenu)': '_openOnContextMenu($event)',
-  },
-  inputs: [
-    'menuTemplateRef: cdkContextMenuTriggerFor',
-    'menuPosition: cdkContextMenuPosition',
-    'menuData: cdkContextMenuTriggerData',
-  ],
-  outputs: ['opened: cdkContextMenuOpened', 'closed: cdkContextMenuClosed'],
-  providers: [
-    { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
-    { provide: MENU_STACK, useClass: MenuStack },
-  ],
-})
-export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
-  private readonly _overlay = inject(Overlay);
-
-  private readonly _directionality = inject(Directionality, { optional: true });
-
-  private readonly _contextMenuTracker = inject(ContextMenuTracker);
-
-  @Input('cdkContextMenuDisabled')
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-  }
-  private _disabled = false;
-
-  constructor() {
-    super();
-    this._setMenuStackCloseListener();
-  }
-
-  open(coordinates: ContextMenuCoordinates) {
-    this._open(coordinates, false);
-  }
-
-  close() {
-    this.menuStack.closeAll();
-  }
-
-  _openOnContextMenu(event: MouseEvent) {
-    if (!this.disabled) {
-      event.preventDefault();
-
-      event.stopPropagation();
-
-      this._contextMenuTracker.update(this);
-      this._open({ x: event.clientX, y: event.clientY }, true);
-
-      if (event.button === 2) {
-        this.childMenu?.focusFirstItem('mouse');
-      } else if (event.button === 0) {
-        this.childMenu?.focusFirstItem('keyboard');
-      } else {
-        this.childMenu?.focusFirstItem('program');
-      }
-    }
-  }
-
-  private _getOverlayConfig(coordinates: ContextMenuCoordinates) {
-    return new OverlayConfig({
-      positionStrategy: this._getOverlayPositionStrategy(coordinates),
-      scrollStrategy: this._overlay.scrollStrategies.reposition(),
-      direction: this._directionality || undefined,
-    });
-  }
-
-  private _getOverlayPositionStrategy(coordinates: ContextMenuCoordinates): FlexibleConnectedPositionStrategy {
-    return this._overlay
-      .position()
-      .flexibleConnectedTo(coordinates)
-      .withLockedPosition()
-      .withGrowAfterOpen()
-      .withPositions(this.menuPosition ?? CONTEXT_MENU_POSITIONS);
-  }
-
-  private _setMenuStackCloseListener() {
-    this.menuStack.closed.pipe(takeUntil(this.destroyed)).subscribe(({ item }) => {
-      if (item === this.childMenu && this.isOpen()) {
-        this.closed.next();
-        this.overlayRef!.detach();
-      }
-    });
-  }
-
-  private _subscribeToOutsideClicks(ignoreFirstAuxClick: boolean) {
-    if (this.overlayRef) {
-      let outsideClicks = this.overlayRef.outsidePointerEvents();
-
-      if (ignoreFirstAuxClick) {
-        const [auxClicks, nonAuxClicks] = partition(outsideClicks, ({ type }) => type === 'auxclick');
-        outsideClicks = merge(nonAuxClicks, auxClicks.pipe(skip(1)));
-      }
-      outsideClicks.pipe(takeUntil(this.stopOutsideClicksListener)).subscribe((event) => {
-        if (!this.isElementInsideMenuStack(_getEventTarget(event)!)) {
-          this.menuStack.closeAll();
-        }
-      });
-    }
-  }
-
-  private _open(coordinates: ContextMenuCoordinates, ignoreFirstOutsideAuxClick: boolean) {
-    if (this.disabled) {
-      return;
-    }
-    if (this.isOpen()) {
-      this.menuStack.closeSubMenuOf(this.childMenu!);
-
-      (this.overlayRef!.getConfig().positionStrategy as FlexibleConnectedPositionStrategy).setOrigin(coordinates);
-      this.overlayRef!.updatePosition();
-    } else {
-      this.opened.next();
-
-      if (this.overlayRef) {
-        (this.overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy).setOrigin(coordinates);
-        this.overlayRef.updatePosition();
-      } else {
-        this.overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
-      }
-
-      this.overlayRef.attach(this.getMenuContentPortal());
-      this._subscribeToOutsideClicks(ignoreFirstOutsideAuxClick);
-    }
-  }
-}