@ethlete/cdk 2.8.1 → 2.9.0

package/fesm2022/ethlete-cdk.mjs

@@ -1,16 +1,16 @@
 import * as i1 from '@angular/cdk/portal';
-import { CdkPortal, PortalModule, ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, JsonPipe, NgFor, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, numberAttribute, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, ChangeDetectorRef, Renderer2, Attribute, NgZone } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, numberAttribute, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, NgZone, NgModule, ChangeDetectorRef, Renderer2, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
 import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, ViewportService, scrollToElement, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
-import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, debounceTime, filter, distinctUntilChanged, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, fromEvent, merge, take, timer, skipUntil, defer, Subscription, Observable } from 'rxjs';
+import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, debounceTime, filter, distinctUntilChanged, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, fromEvent, merge, take, timer, skipUntil, defer, partition, Subscription, Observable } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
 import { extractQuery, isQueryStateLoading, isQueryStateSuccess, isQueryStateFailure, QueryDirective } from '@ethlete/query';
 import * as i1$2 from '@angular/cdk/a11y';
-import { FocusMonitor, LiveAnnouncer, AriaDescriber, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import { FocusMonitor, LiveAnnouncer, InputModalityDetector, FocusKeyManager, AriaDescriber, A11yModule } from '@angular/cdk/a11y';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { FormControl, NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ENTER, ESCAPE, TAB as TAB$1, A, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, PAGE_DOWN, PAGE_UP, END, HOME } from '@angular/cdk/keycodes';
@@ -18,17 +18,18 @@ import * as i1$4 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkDialogContainer, Dialog, DialogConfig, DIALOG_SCROLL_STRATEGY_PROVIDER as DIALOG_SCROLL_STRATEGY_PROVIDER$1 } from '@angular/cdk/dialog';
 import * as i2 from '@angular/cdk/overlay';
-import { ViewportRuler } from '@angular/cdk/overlay';
+import { ViewportRuler, STANDARD_DROPDOWN_BELOW_POSITIONS, Overlay, OverlayConfig, STANDARD_DROPDOWN_ADJACENT_POSITIONS, OverlayModule } from '@angular/cdk/overlay';
+import { coerceBooleanProperty, _isNumberValue } from '@angular/cdk/coercion';
+import * as i2$1 from '@angular/cdk/platform';
+import { _getEventTarget } from '@angular/cdk/platform';
+import { startWith as startWith$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, skip as skip$1, filter as filter$1, mergeMap, mapTo, mergeAll, switchMap as switchMap$1, take as take$1 } from 'rxjs/operators';
+import { UniqueSelectionDispatcher, _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
 import { Meta, Title } from '@angular/platform-browser';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
-import { _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/cdk/platform';
 import * as i3 from '@angular/cdk/scrolling';
 import { CdkScrollableModule, ViewportRuler as ViewportRuler$1 } from '@angular/cdk/scrolling';
 import * as i1$3 from '@angular/cdk/table';
 import { CdkCell, CdkCellDef, CdkColumnDef, CDK_TABLE, CdkFooterCell, CdkFooterCellDef, CdkHeaderCell, CdkHeaderCellDef, CdkTextColumn, TEXT_COLUMN_OPTIONS, CdkFooterRow, CdkTableModule, CDK_ROW_TEMPLATE, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable, _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER, _CoalescedStyleScheduler } from '@angular/cdk/table';
-import { _isNumberValue } from '@angular/cdk/coercion';
-import { takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
 
 class ChevronIconComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ChevronIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -6718,187 +6719,1590 @@ const provideDialog = () => {
     return [DialogService, DIALOG_SCROLL_STRATEGY_PROVIDER, Dialog, DIALOG_SCROLL_STRATEGY_PROVIDER$1];
 };
 
-const TOGGLETIP_CONFIG = new InjectionToken('ToggletipConfig');
-const TOGGLETIP_TEXT = new InjectionToken('ToggletipText');
-const TOGGLETIP_TEMPLATE = new InjectionToken('ToggletipTemplate');
-const TOGGLETIP_DEFAULT_CONFIG = {
-    placement: 'auto',
-    offset: [0, 8],
-    arrowPadding: 4,
-    customAnimated: false,
+/* eslint-disable @angular-eslint/directive-class-suffix */
+const MENU_STACK = new InjectionToken('cdk-menu-stack');
+const PARENT_OR_NEW_MENU_STACK_PROVIDER = {
+    provide: MENU_STACK,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+    useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
 };
-
-const createToggletipConfig = (config = {}) => ({
-    ...TOGGLETIP_DEFAULT_CONFIG,
-    ...(config || {}),
+const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER = (orientation) => ({
+    provide: MENU_STACK,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+    useFactory: (parentMenuStack) => parentMenuStack || MenuStack.inline(orientation),
 });
+let nextId$3 = 0;
+class MenuStack {
+    constructor() {
+        this.id = `${nextId$3++}`;
+        this._elements = [];
+        this._close = new Subject();
+        this._empty = new Subject();
+        this._hasFocus = new Subject();
+        this.closed = this._close;
+        this.hasFocus = this._hasFocus.pipe(startWith$1(false), debounceTime$1(0), distinctUntilChanged$1());
+        this.emptied = this._empty;
+        this._inlineMenuOrientation = null;
+    }
+    static inline(orientation) {
+        const stack = new MenuStack();
+        stack._inlineMenuOrientation = orientation;
+        return stack;
+    }
+    push(menu) {
+        this._elements.push(menu);
+    }
+    close(lastItem, options) {
+        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) {
+        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) {
+        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() {
+        return this._elements[this._elements.length - 1];
+    }
+    hasInlineMenu() {
+        return this._inlineMenuOrientation != null;
+    }
+    inlineMenuOrientation() {
+        return this._inlineMenuOrientation;
+    }
+    setHasFocus(hasFocus) {
+        this._hasFocus.next(hasFocus);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MenuStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MenuStack }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MenuStack, decorators: [{
+            type: Injectable
+        }] });
 
-const provideToggletipConfig = (config = {}) => {
-    return { provide: TOGGLETIP_CONFIG, useValue: createToggletipConfig(config) };
-};
-
-const TOGGLETIP_DIRECTIVE = new InjectionToken('TOGGLETIP_DIRECTIVE');
-class ToggletipDirective {
-    get toggletip() {
-        return this._toggletip;
+const MENU_TRIGGER = new InjectionToken('cdk-menu-trigger');
+class CdkMenuTriggerBase {
+    constructor() {
+        this.injector = inject(Injector);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.menuStack = inject(MENU_STACK);
+        this.menuPosition = null;
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.menuTemplateRef = null;
+        this.overlayRef = null;
+        this.destroyed = new Subject();
+        this.stopOutsideClicksListener = merge(this.closed, this.destroyed);
+        this._menuPortal = null;
     }
-    set toggletip(v) {
-        this._toggletip = v;
+    ngOnDestroy() {
+        this._destroyOverlay();
+        this.destroyed.next();
+        this.destroyed.complete();
     }
-    get showToggletip() {
-        return this._showToggletip;
+    isOpen() {
+        return !!this.overlayRef?.hasAttached();
     }
-    set showToggletip(value) {
-        this._showToggletip = booleanAttribute(value);
-        if (this._showToggletip && !this._animatedOverlay.isMounted) {
-            nextFrame(() => {
-                this._mountToggletip();
-                this._addListeners();
-            });
+    registerChildMenu(child) {
+        this.childMenu = child;
+    }
+    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());
         }
-        else if (!this._showToggletip && this._animatedOverlay.isMounted) {
-            this._animatedOverlay.unmount();
-            this._removeListeners();
+        return this._menuPortal;
+    }
+    isElementInsideMenuStack(element) {
+        for (let el = element; el; el = el?.parentElement ?? null) {
+            if (el.getAttribute('data-cdk-menu-stack-id') === this.menuStack.id) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    _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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuTriggerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuTriggerBase, host: { properties: { "attr.aria-controls": "childMenu?.id", "attr.data-cdk-menu-stack-id": "menuStack.id" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuTriggerBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.aria-controls]': 'childMenu?.id',
+                        '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
+                    },
+                }]
+        }] });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+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 };
+});
+class ContextMenuTracker {
+    update(trigger) {
+        if (ContextMenuTracker._openContextMenuTrigger !== trigger) {
+            ContextMenuTracker._openContextMenuTrigger?.close();
+            ContextMenuTracker._openContextMenuTrigger = trigger;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuTracker, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class CdkContextMenuTrigger extends CdkMenuTriggerBase {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
     constructor() {
-        this._destroy$ = createDestroy();
-        this._defaultConfig = inject(TOGGLETIP_CONFIG, { optional: true }) ?? createToggletipConfig();
-        this._animatedOverlay = inject(AnimatedOverlayDirective);
-        this._toggletip = null;
-        this._showToggletip = false;
-        this.toggletipClose = new EventEmitter();
-        this._clickObserverService = inject(ClickObserverService);
-        this._listenerSubscriptions = [];
-        this._animatedOverlay.placement = this._defaultConfig.placement;
-        this._animatedOverlay.offset = this._defaultConfig.offset;
-        this._animatedOverlay.arrowPadding = this._defaultConfig.arrowPadding;
+        super();
+        this._overlay = inject(Overlay);
+        this._directionality = inject(Directionality, { optional: true });
+        this._contextMenuTracker = inject(ContextMenuTracker);
+        this._disabled = false;
+        this._setMenuStackCloseListener();
     }
-    ngOnInit() {
-        this._animatedOverlay
-            .afterClosed()
-            .pipe(tap(() => {
-            this._removeListeners();
-            this.toggletipClose.emit();
-        }), takeUntil(this._destroy$))
-            .subscribe();
+    open(coordinates) {
+        this._open(coordinates, false);
     }
-    ngOnDestroy() {
-        this._animatedOverlay._destroy();
-        this._removeListeners();
+    close() {
+        this.menuStack.closeAll();
     }
-    _addListeners() {
-        const keyupEscSub = fromEvent(document, 'keyup')
-            .pipe(filter((e) => e.key === 'Escape'), tap(() => this._animatedOverlay.unmount()))
-            .subscribe();
-        const clickOutsideSub = this._clickObserverService
-            .observe(this._animatedOverlay.componentRef?.location.nativeElement)
-            .subscribe((e) => {
-            const targetElement = e.target;
-            const isInside = this._animatedOverlay.componentRef?.location.nativeElement.contains(targetElement);
-            if (!isInside) {
-                this._animatedOverlay.unmount();
+    _openOnContextMenu(event) {
+        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');
+            }
+        }
+    }
+    _getOverlayConfig(coordinates) {
+        return new OverlayConfig({
+            positionStrategy: this._getOverlayPositionStrategy(coordinates),
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            direction: this._directionality || undefined,
         });
-        this._listenerSubscriptions.push(keyupEscSub, clickOutsideSub);
     }
-    _removeListeners() {
-        this._listenerSubscriptions.forEach((s) => s.unsubscribe());
-        this._listenerSubscriptions.length = 0;
+    _getOverlayPositionStrategy(coordinates) {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(coordinates)
+            .withLockedPosition()
+            .withGrowAfterOpen()
+            .withPositions(this.menuPosition ?? CONTEXT_MENU_POSITIONS);
     }
-    _mountToggletip() {
-        this._animatedOverlay.mount({
-            component: ToggletipComponent,
-            providers: [
-                {
-                    provide: TOGGLETIP_CONFIG,
-                    useValue: this._defaultConfig,
-                },
-                ...[
-                    typeof this.toggletip === 'string'
-                        ? {
-                            provide: TOGGLETIP_TEXT,
-                            useValue: this.toggletip,
-                        }
-                        : {
-                            provide: TOGGLETIP_TEMPLATE,
-                            useValue: this.toggletip,
-                        },
-                ],
-            ],
+    _setMenuStackCloseListener() {
+        this.menuStack.closed.pipe(takeUntil$1(this.destroyed)).subscribe(({ item }) => {
+            if (item === this.childMenu && this.isOpen()) {
+                this.closed.next();
+                this.overlayRef.detach();
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: ToggletipDirective, isStandalone: true, selector: "[etToggletip]", inputs: { toggletip: ["etToggletip", "toggletip"], showToggletip: "showToggletip" }, outputs: { toggletipClose: "toggletipClose" }, providers: [
-            {
-                provide: TOGGLETIP_DIRECTIVE,
-                useExisting: ToggletipDirective,
-            },
-        ], hostDirectives: [{ directive: i1$1.AnimatedOverlayDirective, inputs: ["placement", "placement"] }], ngImport: i0 }); }
+    _subscribeToOutsideClicks(ignoreFirstAuxClick) {
+        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(1)));
+            }
+            outsideClicks.pipe(takeUntil$1(this.stopOutsideClicksListener)).subscribe((event) => {
+                if (!this.isElementInsideMenuStack(_getEventTarget(event))) {
+                    this.menuStack.closeAll();
+                }
+            });
+        }
+    }
+    _open(coordinates, ignoreFirstOutsideAuxClick) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.menuStack.closeSubMenuOf(this.childMenu);
+            this.overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
+            this.overlayRef.updatePosition();
+        }
+        else {
+            this.opened.next();
+            if (this.overlayRef) {
+                this.overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
+                this.overlayRef.updatePosition();
+            }
+            else {
+                this.overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
+            }
+            this.overlayRef.attach(this.getMenuContentPortal());
+            this._subscribeToOutsideClicks(ignoreFirstOutsideAuxClick);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkContextMenuTrigger, isStandalone: true, selector: "[cdkContextMenuTriggerFor]", inputs: { menuTemplateRef: ["cdkContextMenuTriggerFor", "menuTemplateRef"], menuPosition: ["cdkContextMenuPosition", "menuPosition"], menuData: ["cdkContextMenuTriggerData", "menuData"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" }, properties: { "attr.data-cdk-menu-stack-id": "null" } }, providers: [
+            { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
+            { provide: MENU_STACK, useClass: MenuStack },
+        ], exportAs: ["cdkContextMenuTriggerFor"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[etToggletip]',
+                    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: TOGGLETIP_DIRECTIVE,
-                            useExisting: ToggletipDirective,
-                        },
+                        { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
+                        { provide: MENU_STACK, useClass: MenuStack },
                     ],
-                    hostDirectives: [{ directive: AnimatedOverlayDirective, inputs: ['placement'] }],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toggletip: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
                 type: Input,
-                args: ['etToggletip']
-            }], showToggletip: [{
-                type: Input
-            }], toggletipClose: [{
-                type: Output
+                args: ['cdkContextMenuDisabled']
             }] } });
 
-const TOGGLETIP = new InjectionToken('Toggletip');
-// TODO(TRB): The focus should get trapped inside the toggletip.
-// The toggletip trigger should get a aria-haspopup="true" and aria-expanded="true" attribute.
-class ToggletipComponent {
+function throwMissingPointerFocusTracker() {
+    throw Error('expected an instance of PointerFocusTracker to be provided');
+}
+function throwMissingMenuReference() {
+    throw Error('expected a reference to the parent menu');
+}
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+const MENU_AIM = new InjectionToken('cdk-menu-aim');
+const MOUSE_MOVE_SAMPLE_FREQUENCY = 3;
+const NUM_POINTS = 5;
+const CLOSE_DELAY = 300;
+function getSlope(a, b) {
+    return (b.y - a.y) / (b.x - a.x);
+}
+function getYIntercept(point, slope) {
+    return point.y - slope * point.x;
+}
+function isWithinSubmenu(submenuPoints, m, b) {
+    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));
+}
+class TargetMenuAim {
     constructor() {
-        this._config = inject(TOGGLETIP_CONFIG);
-        this.toggletipText = inject(TOGGLETIP_TEXT, { optional: true });
-        this.toggletipTemplate = inject(TOGGLETIP_TEMPLATE, { optional: true });
-        this.injector = inject(Injector);
-        this._cdr = inject(ChangeDetectorRef);
-        this._trigger = inject(TOGGLETIP_DIRECTIVE);
+        this._ngZone = inject(NgZone);
+        this._points = [];
+        this._menu = null;
+        this._pointerTracker = null;
+        this._timeoutId = null;
+        this._destroyed = new Subject();
     }
-    get attrAriaHidden() {
-        return true;
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
     }
-    get usesDefaultAnimation() {
-        return !this._config.customAnimated;
+    initialize(menu, pointerTracker) {
+        this._menu = menu;
+        this._pointerTracker = pointerTracker;
+        this._subscribeToMouseMoves();
     }
-    get containerClass() {
-        return this._config.containerClass;
+    toggle(doToggle) {
+        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();
+        }
     }
-    _markForCheck() {
-        this._cdr.markForCheck();
+    _startTimeout(doToggle) {
+        const timeoutId = window.setTimeout(() => {
+            if (!this._pointerTracker)
+                return;
+            if (this._pointerTracker.activeElement && timeoutId === this._timeoutId) {
+                doToggle();
+            }
+            this._timeoutId = null;
+        }, CLOSE_DELAY);
+        this._timeoutId = timeoutId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ToggletipComponent, isStandalone: true, selector: "et-toggletip", host: { properties: { "attr.aria-hidden": "this.attrAriaHidden", "class.et-with-default-animation": "this.usesDefaultAnimation", "class": "this.containerClass" }, classAttribute: "et-toggletip" }, providers: [
-            {
-                provide: TOGGLETIP,
-                useExisting: ToggletipComponent,
-            },
-        ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"toggletipText\">\n    {{ toggletipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"toggletipTemplate\">\n    <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"toggletip-arrow\" data-popper-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip[data-popper-placement^=top] .toggletip-arrow{bottom:-4px}.et-toggletip[data-popper-placement^=right] .toggletip-arrow{left:-4px}.et-toggletip[data-popper-placement^=bottom] .toggletip-arrow{top:-4px}.et-toggletip[data-popper-placement^=left] .toggletip-arrow{right:-4px}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color)}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:-1}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[data-popper-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _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);
+    }
+    _getSubmenuBounds() {
+        return this._pointerTracker?.previousElement?.getMenu()?.nativeElement.getBoundingClientRect();
+    }
+    _checkConfigured() {
+        if (isDevMode()) {
+            if (!this._pointerTracker) {
+                throwMissingPointerFocusTracker();
+            }
+            if (!this._menu) {
+                throwMissingMenuReference();
+            }
+        }
+    }
+    _subscribeToMouseMoves() {
+        this._ngZone.runOutsideAngular(() => {
+            if (!this._menu)
+                return;
+            fromEvent(this._menu.nativeElement, 'mousemove')
+                .pipe(filter$1((_, index) => index % MOUSE_MOVE_SAMPLE_FREQUENCY === 0), takeUntil$1(this._destroyed))
+                .subscribe((event) => {
+                this._points.push({ x: event.clientX, y: event.clientY });
+                if (this._points.length > NUM_POINTS) {
+                    this._points.shift();
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TargetMenuAim }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-toggletip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], host: {
-                        class: 'et-toggletip',
-                    }, providers: [
-                        {
-                            provide: TOGGLETIP,
-                            useExisting: ToggletipComponent,
-                        },
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TargetMenuAim, decorators: [{
+            type: Injectable
+        }] });
+class CdkTargetMenuAim {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkTargetMenuAim, isStandalone: true, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkTargetMenuAim]',
+                    exportAs: 'cdkTargetMenuAim',
+                    standalone: true,
+                    providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }],
+                }]
+        }] });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+class CdkMenuGroup {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuGroup, isStandalone: true, selector: "[cdkMenuGroup]", host: { attributes: { "role": "group" }, classAttribute: "cdk-menu-group" }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], exportAs: ["cdkMenuGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuGroup]',
+                    exportAs: 'cdkMenuGroup',
+                    standalone: true,
+                    host: {
+                        role: 'group',
+                        class: 'cdk-menu-group',
+                    },
+                    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }],
+                }]
+        }] });
+
+const CDK_MENU = new InjectionToken('cdk-menu');
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+class CdkMenuTrigger extends CdkMenuTriggerBase {
+    constructor() {
+        super();
+        this._elementRef = inject(ElementRef);
+        this._overlay = inject(Overlay);
+        this._ngZone = inject(NgZone);
+        this._directionality = inject(Directionality, { optional: true });
+        this._inputModalityDetector = inject(InputModalityDetector);
+        this._parentMenu = inject(CDK_MENU, { optional: true });
+        this._menuAim = inject(MENU_AIM, { optional: true });
+        this._setRole();
+        this._registerCloseHandler();
+        this._subscribeToMenuStackClosed();
+        this._subscribeToMouseEnter();
+        this._subscribeToMenuStackHasFocus();
+        this._setType();
+    }
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    open() {
+        if (!this.isOpen() && this.menuTemplateRef != null) {
+            this.opened.next();
+            this.overlayRef = this.overlayRef || this._overlay.create(this._getOverlayConfig());
+            this.overlayRef.attach(this.getMenuContentPortal());
+            this._subscribeToOutsideClicks();
+        }
+    }
+    close() {
+        if (this.isOpen()) {
+            this.closed.next();
+            this.overlayRef.detach();
+        }
+        this._closeSiblingTriggers();
+    }
+    getMenu() {
+        return this.childMenu;
+    }
+    _toggleOnKeydown(event) {
+        const isParentVertical = this._parentMenu?.orientation === 'vertical';
+        switch (event.keyCode) {
+            case SPACE:
+            case ENTER:
+                if (!hasModifierKey(event)) {
+                    this.toggle();
+                    this.childMenu?.focusFirstItem('keyboard');
+                }
+                break;
+            case RIGHT_ARROW:
+                if (!hasModifierKey(event)) {
+                    if (this._parentMenu && isParentVertical && this._directionality?.value !== 'rtl') {
+                        event.preventDefault();
+                        this.open();
+                        this.childMenu?.focusFirstItem('keyboard');
+                    }
+                }
+                break;
+            case LEFT_ARROW:
+                if (!hasModifierKey(event)) {
+                    if (this._parentMenu && isParentVertical && this._directionality?.value === 'rtl') {
+                        event.preventDefault();
+                        this.open();
+                        this.childMenu?.focusFirstItem('keyboard');
+                    }
+                }
+                break;
+            case DOWN_ARROW:
+            case UP_ARROW:
+                if (!hasModifierKey(event)) {
+                    if (!isParentVertical) {
+                        event.preventDefault();
+                        this.open();
+                        event.keyCode === DOWN_ARROW
+                            ? this.childMenu?.focusFirstItem('keyboard')
+                            : this.childMenu?.focusLastItem('keyboard');
+                    }
+                }
+                break;
+        }
+    }
+    _handleClick() {
+        if (this._inputModalityDetector.mostRecentModality !== 'keyboard') {
+            this.toggle();
+            this.childMenu?.focusFirstItem('mouse');
+        }
+    }
+    _setHasFocus(hasFocus) {
+        if (!this._parentMenu) {
+            this.menuStack.setHasFocus(hasFocus);
+        }
+    }
+    _subscribeToMouseEnter() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'mouseenter')
+                .pipe(filter$1(() => !this.menuStack.isEmpty() && !this.isOpen()), takeUntil$1(this.destroyed))
+                .subscribe(() => {
+                const toggleMenus = () => this._ngZone.run(() => {
+                    this._closeSiblingTriggers();
+                    this.open();
+                });
+                if (this._menuAim) {
+                    this._menuAim.toggle(toggleMenus);
+                }
+                else {
+                    toggleMenus();
+                }
+            });
+        });
+    }
+    _closeSiblingTriggers() {
+        if (this._parentMenu) {
+            const isParentMenuBar = !this.menuStack.closeSubMenuOf(this._parentMenu) && this.menuStack.peek() !== this._parentMenu;
+            if (isParentMenuBar) {
+                this.menuStack.closeAll();
+            }
+        }
+        else {
+            this.menuStack.closeAll();
+        }
+    }
+    _getOverlayConfig() {
+        return new OverlayConfig({
+            positionStrategy: this._getOverlayPositionStrategy(),
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            direction: this._directionality || undefined,
+        });
+    }
+    _getOverlayPositionStrategy() {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(this._elementRef)
+            .withLockedPosition()
+            .withGrowAfterOpen()
+            .withPositions(this._getOverlayPositions());
+    }
+    _getOverlayPositions() {
+        return (this.menuPosition ??
+            (!this._parentMenu || this._parentMenu.orientation === 'horizontal'
+                ? STANDARD_DROPDOWN_BELOW_POSITIONS
+                : STANDARD_DROPDOWN_ADJACENT_POSITIONS));
+    }
+    _registerCloseHandler() {
+        if (!this._parentMenu) {
+            this.menuStack.closed.pipe(takeUntil$1(this.destroyed)).subscribe(({ item }) => {
+                if (item === this.childMenu) {
+                    this.close();
+                }
+            });
+        }
+    }
+    _subscribeToOutsideClicks() {
+        if (this.overlayRef) {
+            this.overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil$1(this.stopOutsideClicksListener))
+                .subscribe((event) => {
+                const target = _getEventTarget(event);
+                const element = this._elementRef.nativeElement;
+                if (target !== element && !element.contains(target)) {
+                    if (!this.isElementInsideMenuStack(target)) {
+                        this.menuStack.closeAll();
+                    }
+                    else {
+                        this._closeSiblingTriggers();
+                    }
+                }
+            });
+        }
+    }
+    _subscribeToMenuStackHasFocus() {
+        if (!this._parentMenu) {
+            this.menuStack.hasFocus.pipe(takeUntil$1(this.destroyed)).subscribe((hasFocus) => {
+                if (!hasFocus) {
+                    this.menuStack.closeAll();
+                }
+            });
+        }
+    }
+    _subscribeToMenuStackClosed() {
+        if (!this._parentMenu) {
+            this.menuStack.closed.subscribe(({ focusParentTrigger }) => {
+                if (focusParentTrigger && !this.menuStack.length()) {
+                    this._elementRef.nativeElement.focus();
+                }
+            });
+        }
+    }
+    _setRole() {
+        if (!this._parentMenu) {
+            this._elementRef.nativeElement.setAttribute('role', 'button');
+        }
+    }
+    _setType() {
+        const element = this._elementRef.nativeElement;
+        if (element.nodeName === 'BUTTON' && !element.getAttribute('type')) {
+            element.setAttribute('type', 'button');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuTrigger, isStandalone: true, selector: "[cdkMenuTriggerFor]", inputs: { menuTemplateRef: ["cdkMenuTriggerFor", "menuTemplateRef"], menuPosition: ["cdkMenuPosition", "menuPosition"], menuData: ["cdkMenuTriggerData", "menuData"] }, outputs: { opened: "cdkMenuOpened", closed: "cdkMenuClosed" }, host: { listeners: { "focusin": "_setHasFocus(true)", "focusout": "_setHasFocus(false)", "keydown": "_toggleOnKeydown($event)", "click": "_handleClick()" }, properties: { "attr.aria-haspopup": "menuTemplateRef ? \"menu\" : null", "attr.aria-expanded": "menuTemplateRef == null ? null : isOpen()" }, classAttribute: "cdk-menu-trigger" }, providers: [{ provide: MENU_TRIGGER, useExisting: CdkMenuTrigger }, PARENT_OR_NEW_MENU_STACK_PROVIDER], exportAs: ["cdkMenuTriggerFor"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuTriggerFor]',
+                    exportAs: 'cdkMenuTriggerFor',
+                    standalone: true,
+                    host: {
+                        class: 'cdk-menu-trigger',
+                        '[attr.aria-haspopup]': 'menuTemplateRef ? "menu" : null',
+                        '[attr.aria-expanded]': 'menuTemplateRef == null ? null : isOpen()',
+                        '(focusin)': '_setHasFocus(true)',
+                        '(focusout)': '_setHasFocus(false)',
+                        '(keydown)': '_toggleOnKeydown($event)',
+                        '(click)': '_handleClick()',
+                    },
+                    inputs: ['menuTemplateRef: cdkMenuTriggerFor', 'menuPosition: cdkMenuPosition', 'menuData: cdkMenuTriggerData'],
+                    outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'],
+                    providers: [{ provide: MENU_TRIGGER, useExisting: CdkMenuTrigger }, PARENT_OR_NEW_MENU_STACK_PROVIDER],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+class CdkMenuItem {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get hasMenu() {
+        return this._menuTrigger?.menuTemplateRef != null;
+    }
+    constructor() {
+        this._dir = inject(Directionality, { optional: true });
+        this._inputModalityDetector = inject(InputModalityDetector);
+        this._elementRef = inject(ElementRef);
+        this._ngZone = inject(NgZone);
+        this._menuAim = inject(MENU_AIM, { optional: true });
+        this._menuStack = inject(MENU_STACK);
+        this._parentMenu = inject(CDK_MENU, { optional: true });
+        this._menuTrigger = inject(CdkMenuTrigger, { optional: true, self: true });
+        this._disabled = false;
+        this.typeaheadLabel = null;
+        this.triggered = new EventEmitter();
+        this._tabindex = -1;
+        this.closeOnSpacebarTrigger = true;
+        this.destroyed = new Subject();
+        this._setupMouseEnter();
+        this._setType();
+        if (this._isStandaloneItem()) {
+            this._tabindex = 0;
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    trigger(options) {
+        const { keepOpen } = { ...options };
+        if (!this.disabled && !this.hasMenu) {
+            this.triggered.next();
+            if (!keepOpen) {
+                this._menuStack.closeAll({ focusParentTrigger: true });
+            }
+        }
+    }
+    isMenuOpen() {
+        return !!this._menuTrigger?.isOpen();
+    }
+    getMenu() {
+        return this._menuTrigger?.getMenu();
+    }
+    getMenuTrigger() {
+        return this._menuTrigger;
+    }
+    getLabel() {
+        return this.typeaheadLabel || this._elementRef.nativeElement.textContent?.trim() || '';
+    }
+    _resetTabIndex() {
+        if (!this._isStandaloneItem()) {
+            this._tabindex = -1;
+        }
+    }
+    _setTabIndex(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (!event || !this._menuStack.isEmpty()) {
+            this._tabindex = 0;
+        }
+    }
+    _onKeydown(event) {
+        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) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    _isStandaloneItem() {
+        return !this._parentMenu;
+    }
+    _backArrowPressed(event) {
+        const parentMenu = this._parentMenu;
+        if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
+            event.preventDefault();
+            this._menuStack.close(parentMenu, {
+                focusNextOnEmpty: this._menuStack.inlineMenuOrientation() === 'horizontal' ? 1 /* FocusNext.previousItem */ : 2 /* FocusNext.currentItem */,
+                focusParentTrigger: true,
+            });
+        }
+    }
+    _forwardArrowPressed(event) {
+        if (!this.hasMenu && this._menuStack.inlineMenuOrientation() === 'horizontal') {
+            event.preventDefault();
+            this._menuStack.closeAll({
+                focusNextOnEmpty: 0 /* FocusNext.nextItem */,
+                focusParentTrigger: true,
+            });
+        }
+    }
+    _setupMouseEnter() {
+        if (!this._isStandaloneItem()) {
+            const closeOpenSiblings = () => this._ngZone.run(() => this._menuStack.closeSubMenuOf(this._parentMenu));
+            this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
+                .pipe(filter$1(() => !this._menuStack.isEmpty() && !this.hasMenu), takeUntil$1(this.destroyed))
+                .subscribe(() => {
+                if (this._menuAim) {
+                    this._menuAim.toggle(closeOpenSiblings);
+                }
+                else {
+                    closeOpenSiblings();
+                }
+            }));
+        }
+    }
+    _isParentVertical() {
+        return this._parentMenu?.orientation === 'vertical';
+    }
+    _setType() {
+        const element = this._elementRef.nativeElement;
+        if (element.nodeName === 'BUTTON' && !element.getAttribute('type')) {
+            element.setAttribute('type', 'button');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuItem, isStandalone: true, selector: "[cdkMenuItem]", inputs: { disabled: ["cdkMenuItemDisabled", "disabled"], typeaheadLabel: ["cdkMenuitemTypeaheadLabel", "typeaheadLabel"] }, outputs: { triggered: "cdkMenuItemTriggered" }, host: { attributes: { "role": "menuitem" }, listeners: { "blur": "_resetTabIndex()", "focus": "_setTabIndex()", "click": "_handleClick()", "mousedown": "_handleMousedown($event)", "keydown": "_onKeydown($event)" }, properties: { "tabindex": "_tabindex", "attr.aria-disabled": "disabled || null" }, classAttribute: "cdk-menu-item" }, exportAs: ["cdkMenuItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    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)',
+                    },
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input,
+                args: ['cdkMenuItemDisabled']
+            }], typeaheadLabel: [{
+                type: Input,
+                args: ['cdkMenuitemTypeaheadLabel']
+            }], triggered: [{
+                type: Output,
+                args: ['cdkMenuItemTriggered']
+            }] } });
+
+class PointerFocusTracker {
+    constructor(_items) {
+        this._items = _items;
+        this.entered = this._getItemPointerEntries();
+        this.exited = this._getItemPointerExits();
+        this._destroyed = new Subject();
+        this.entered.subscribe((element) => (this.activeElement = element));
+        this.exited.subscribe(() => {
+            this.previousElement = this.activeElement;
+            this.activeElement = undefined;
+        });
+    }
+    destroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    _getItemPointerEntries() {
+        return defer(() => this._items.changes.pipe(startWith$1(this._items), mergeMap((list) => list.map((element) => fromEvent(element._elementRef.nativeElement, 'mouseenter').pipe(mapTo(element), takeUntil$1(this._items.changes)))), mergeAll()));
+    }
+    _getItemPointerExits() {
+        return defer(() => this._items.changes.pipe(startWith$1(this._items), mergeMap((list) => list.map((element) => fromEvent(element._elementRef.nativeElement, 'mouseout').pipe(mapTo(element), takeUntil$1(this._items.changes)))), mergeAll()));
+    }
+}
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+let nextId$2 = 0;
+class CdkMenuBase extends CdkMenuGroup {
+    constructor() {
+        super(...arguments);
+        this.nativeElement = inject(ElementRef).nativeElement;
+        this.ngZone = inject(NgZone);
+        this.menuStack = inject(MENU_STACK);
+        this.menuAim = inject(MENU_AIM, { optional: true, self: true });
+        this.dir = inject(Directionality, { optional: true });
+        this.id = `cdk-menu-${nextId$2++}`;
+        this.items = null;
+        this.orientation = 'vertical';
+        this.isInline = false;
+        this.keyManager = null;
+        this.destroyed = new Subject();
+        this._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 = 'program') {
+        if (!this.keyManager)
+            return;
+        this.keyManager.setFocusOrigin(focusOrigin);
+        this.keyManager.setFirstItemActive();
+    }
+    focusLastItem(focusOrigin = 'program') {
+        if (!this.keyManager)
+            return;
+        this.keyManager.setFocusOrigin(focusOrigin);
+        this.keyManager.setLastItemActive();
+    }
+    _getTabIndex() {
+        const tabindexIfInline = this._menuStackHasFocus ? -1 : 0;
+        return this.isInline ? tabindexIfInline : null;
+    }
+    closeOpenMenu(menu, options) {
+        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();
+                }
+            }
+        }
+    }
+    _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();
+        }
+    }
+    _subscribeToMenuOpen() {
+        if (!this.items)
+            return;
+        const exitCondition = merge(this.items.changes, this.destroyed);
+        this.items.changes
+            .pipe(startWith$1(this.items), mergeMap((list) => list
+            .filter((item) => item.hasMenu)
+            .map((item) => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil$1(exitCondition)))), mergeAll(), switchMap$1((item) => {
+            this.triggerItem = item;
+            return item.getMenuTrigger().closed;
+        }), takeUntil$1(this.destroyed))
+            .subscribe(() => (this.triggerItem = undefined));
+    }
+    _subscribeToMenuStackClosed() {
+        this.menuStack.closed
+            .pipe(takeUntil$1(this.destroyed))
+            .subscribe(({ item, focusParentTrigger }) => this.closeOpenMenu(item, { focusParentTrigger }));
+    }
+    _subscribeToMenuStackHasFocus() {
+        if (this.isInline) {
+            this.menuStack.hasFocus.pipe(takeUntil$1(this.destroyed)).subscribe((hasFocus) => {
+                this._menuStackHasFocus = hasFocus;
+            });
+        }
+    }
+    _setUpPointerTracker() {
+        if (this.menuAim) {
+            this.ngZone.runOutsideAngular(() => {
+                if (!this.items)
+                    return;
+                this.pointerTracker = new PointerFocusTracker(this.items);
+            });
+            this.menuAim.initialize(this, this.pointerTracker);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuBase, inputs: { id: "id" }, host: { attributes: { "role": "menu" }, listeners: { "focus": "focusFirstItem()", "focusin": "menuStack.setHasFocus(true)", "focusout": "menuStack.setHasFocus(false)" }, properties: { "tabindex": "_getTabIndex()", "id": "id", "attr.aria-orientation": "orientation", "attr.data-cdk-menu-stack-id": "menuStack.id" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuBase, decorators: [{
+            type: Directive,
+            args: [{
+                    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)',
+                    },
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], items: [{
+                type: ContentChildren,
+                args: [CdkMenuItem, { descendants: true }]
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+class CdkMenu extends CdkMenuBase {
+    constructor() {
+        super();
+        this._parentTrigger = inject(MENU_TRIGGER, { optional: true });
+        this.closed = new EventEmitter();
+        this.orientation = 'vertical';
+        this.isInline = !this._parentTrigger;
+        this.destroyed.subscribe(this.closed);
+        this._parentTrigger?.registerChildMenu(this);
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._subscribeToMenuStackEmptied();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.closed.complete();
+    }
+    _handleKeyEvent(event) {
+        const keyManager = this.keyManager;
+        if (!keyManager)
+            return;
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+            case RIGHT_ARROW:
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.onKeydown(event);
+                }
+                break;
+            case ESCAPE:
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    this.menuStack.close(this, {
+                        focusNextOnEmpty: 2 /* FocusNext.currentItem */,
+                        focusParentTrigger: true,
+                    });
+                }
+                break;
+            case TAB$1:
+                if (!hasModifierKey(event, 'altKey', 'metaKey', 'ctrlKey')) {
+                    this.menuStack.closeAll({ focusParentTrigger: true });
+                }
+                break;
+            default:
+                keyManager.onKeydown(event);
+        }
+    }
+    _toggleMenuFocus(focusNext) {
+        const keyManager = this.keyManager;
+        if (!keyManager)
+            return;
+        switch (focusNext) {
+            case 0 /* FocusNext.nextItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setNextItemActive();
+                break;
+            case 1 /* FocusNext.previousItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setPreviousItemActive();
+                break;
+            case 2 /* FocusNext.currentItem */:
+                if (keyManager.activeItem) {
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.setActiveItem(keyManager.activeItem);
+                }
+                break;
+        }
+    }
+    _subscribeToMenuStackEmptied() {
+        this.menuStack.emptied.pipe(takeUntil$1(this.destroyed)).subscribe((event) => this._toggleMenuFocus(event));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenu, isStandalone: true, selector: "[cdkMenu]", outputs: { closed: "closed" }, host: { attributes: { "role": "menu" }, listeners: { "keydown": "_handleKeyEvent($event)" }, properties: { "class.cdk-menu-inline": "isInline" }, classAttribute: "cdk-menu" }, providers: [
+            { provide: CdkMenuGroup, useExisting: CdkMenu },
+            { provide: CDK_MENU, useExisting: CdkMenu },
+            PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER('vertical'),
+        ], exportAs: ["cdkMenu"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenu]',
+                    exportAs: 'cdkMenu',
+                    standalone: true,
+                    host: {
+                        role: 'menu',
+                        class: 'cdk-menu',
+                        '[class.cdk-menu-inline]': 'isInline',
+                        '(keydown)': '_handleKeyEvent($event)',
+                    },
+                    providers: [
+                        { provide: CdkMenuGroup, useExisting: CdkMenu },
+                        { provide: CDK_MENU, useExisting: CdkMenu },
+                        PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER('vertical'),
+                    ],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { closed: [{
+                type: Output
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+class CdkMenuBar extends CdkMenuBase {
+    constructor() {
+        super(...arguments);
+        this.orientation = 'horizontal';
+        this.isInline = true;
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._subscribeToMenuStackEmptied();
+    }
+    _handleKeyEvent(event) {
+        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$1:
+                if (!hasModifierKey(event, 'altKey', 'metaKey', 'ctrlKey')) {
+                    keyManager.activeItem?.getMenuTrigger()?.close();
+                }
+                break;
+            default:
+                keyManager.onKeydown(event);
+        }
+    }
+    _toggleOpenMenu(focusNext) {
+        const keyManager = this.keyManager;
+        if (!keyManager)
+            return;
+        switch (focusNext) {
+            case 0 /* FocusNext.nextItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setNextItemActive();
+                keyManager.activeItem?.getMenuTrigger()?.open();
+                break;
+            case 1 /* FocusNext.previousItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setPreviousItemActive();
+                keyManager.activeItem?.getMenuTrigger()?.open();
+                break;
+            case 2 /* FocusNext.currentItem */:
+                if (keyManager.activeItem) {
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.setActiveItem(keyManager.activeItem);
+                }
+                break;
+        }
+    }
+    _subscribeToMenuStackEmptied() {
+        this.menuStack?.emptied.pipe(takeUntil$1(this.destroyed)).subscribe((event) => this._toggleOpenMenu(event));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuBar, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuBar, isStandalone: true, selector: "[cdkMenuBar]", host: { attributes: { "role": "menubar" }, listeners: { "keydown": "_handleKeyEvent($event)" }, classAttribute: "cdk-menu-bar" }, providers: [
+            { provide: CdkMenuGroup, useExisting: CdkMenuBar },
+            { provide: CDK_MENU, useExisting: CdkMenuBar },
+            { provide: MENU_STACK, useFactory: () => MenuStack.inline('horizontal') },
+        ], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuBar, decorators: [{
+            type: Directive,
+            args: [{
+                    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') },
+                    ],
+                }]
+        }] });
+
+class CdkMenuItemSelectable extends CdkMenuItem {
+    constructor() {
+        super(...arguments);
+        this._checked = false;
+        this.closeOnSpacebarTrigger = false;
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        this._checked = coerceBooleanProperty(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuItemSelectable, inputs: { checked: ["cdkMenuItemChecked", "checked"] }, host: { properties: { "attr.aria-checked": "!!checked", "attr.aria-disabled": "disabled || null" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.aria-checked]': '!!checked',
+                        '[attr.aria-disabled]': 'disabled || null',
+                    },
+                }]
+        }], propDecorators: { checked: [{
+                type: Input,
+                args: ['cdkMenuItemChecked']
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
+    trigger(options) {
+        super.trigger(options);
+        if (!this.disabled) {
+            this.checked = !this.checked;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuItemCheckbox, isStandalone: true, selector: "[cdkMenuItemCheckbox]", host: { attributes: { "role": "menuitemcheckbox" }, properties: { "class.cdk-menu-item-checkbox": "true" } }, providers: [
+            { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
+            { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+        ], exportAs: ["cdkMenuItemCheckbox"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuItemCheckbox]',
+                    exportAs: 'cdkMenuItemCheckbox',
+                    standalone: true,
+                    host: {
+                        role: 'menuitemcheckbox',
+                        '[class.cdk-menu-item-checkbox]': 'true',
+                    },
+                    providers: [
+                        { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
+                        { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+                    ],
+                }]
+        }] });
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+let nextId$1 = 0;
+class CdkMenuItemRadio extends CdkMenuItemSelectable {
+    constructor() {
+        super();
+        this._selectionDispatcher = inject(UniqueSelectionDispatcher);
+        this._id = `${nextId$1++}`;
+        this._registerDispatcherListener();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._removeDispatcherListener?.();
+    }
+    trigger(options) {
+        super.trigger(options);
+        if (!this.disabled) {
+            this._selectionDispatcher.notify(this._id, '');
+        }
+    }
+    _registerDispatcherListener() {
+        this._removeDispatcherListener = this._selectionDispatcher.listen((id) => {
+            this.checked = this._id === id;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItemRadio, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkMenuItemRadio, isStandalone: true, selector: "[cdkMenuItemRadio]", host: { attributes: { "role": "menuitemradio" }, properties: { "class.cdk-menu-item-radio": "true" } }, providers: [
+            { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
+            { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+        ], exportAs: ["cdkMenuItemRadio"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuItemRadio]',
+                    exportAs: 'cdkMenuItemRadio',
+                    standalone: true,
+                    host: {
+                        role: 'menuitemradio',
+                        '[class.cdk-menu-item-radio]': 'true',
+                    },
+                    providers: [
+                        { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
+                        { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const MENU_DIRECTIVES = [
+    CdkMenuBar,
+    CdkMenu,
+    CdkMenuItem,
+    CdkMenuItemRadio,
+    CdkMenuItemCheckbox,
+    CdkMenuTrigger,
+    CdkMenuGroup,
+    CdkContextMenuTrigger,
+    CdkTargetMenuAim,
+];
+class CdkMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuModule, imports: [OverlayModule, CdkMenuBar,
+            CdkMenu,
+            CdkMenuItem,
+            CdkMenuItemRadio,
+            CdkMenuItemCheckbox,
+            CdkMenuTrigger,
+            CdkMenuGroup,
+            CdkContextMenuTrigger,
+            CdkTargetMenuAim], exports: [CdkMenuBar,
+            CdkMenu,
+            CdkMenuItem,
+            CdkMenuItemRadio,
+            CdkMenuItemCheckbox,
+            CdkMenuTrigger,
+            CdkMenuGroup,
+            CdkContextMenuTrigger,
+            CdkTargetMenuAim] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuModule, imports: [OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [OverlayModule, ...MENU_DIRECTIVES],
+                    exports: MENU_DIRECTIVES,
+                }]
+        }] });
+
+const TOGGLETIP_CONFIG = new InjectionToken('ToggletipConfig');
+const TOGGLETIP_TEXT = new InjectionToken('ToggletipText');
+const TOGGLETIP_TEMPLATE = new InjectionToken('ToggletipTemplate');
+const TOGGLETIP_DEFAULT_CONFIG = {
+    placement: 'auto',
+    offset: [0, 8],
+    arrowPadding: 4,
+    customAnimated: false,
+};
+
+const createToggletipConfig = (config = {}) => ({
+    ...TOGGLETIP_DEFAULT_CONFIG,
+    ...(config || {}),
+});
+
+const provideToggletipConfig = (config = {}) => {
+    return { provide: TOGGLETIP_CONFIG, useValue: createToggletipConfig(config) };
+};
+
+const TOGGLETIP_DIRECTIVE = new InjectionToken('TOGGLETIP_DIRECTIVE');
+class ToggletipDirective {
+    get toggletip() {
+        return this._toggletip;
+    }
+    set toggletip(v) {
+        this._toggletip = v;
+    }
+    get showToggletip() {
+        return this._showToggletip;
+    }
+    set showToggletip(value) {
+        this._showToggletip = booleanAttribute(value);
+        if (this._showToggletip && !this._animatedOverlay.isMounted) {
+            nextFrame(() => {
+                this._mountToggletip();
+                this._addListeners();
+            });
+        }
+        else if (!this._showToggletip && this._animatedOverlay.isMounted) {
+            this._animatedOverlay.unmount();
+            this._removeListeners();
+        }
+    }
+    constructor() {
+        this._destroy$ = createDestroy();
+        this._defaultConfig = inject(TOGGLETIP_CONFIG, { optional: true }) ?? createToggletipConfig();
+        this._animatedOverlay = inject(AnimatedOverlayDirective);
+        this._toggletip = null;
+        this._showToggletip = false;
+        this.toggletipClose = new EventEmitter();
+        this._clickObserverService = inject(ClickObserverService);
+        this._listenerSubscriptions = [];
+        this._animatedOverlay.placement = this._defaultConfig.placement;
+        this._animatedOverlay.offset = this._defaultConfig.offset;
+        this._animatedOverlay.arrowPadding = this._defaultConfig.arrowPadding;
+    }
+    ngOnInit() {
+        this._animatedOverlay
+            .afterClosed()
+            .pipe(tap(() => {
+            this._removeListeners();
+            this.toggletipClose.emit();
+        }), takeUntil(this._destroy$))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this._animatedOverlay._destroy();
+        this._removeListeners();
+    }
+    _addListeners() {
+        const keyupEscSub = fromEvent(document, 'keyup')
+            .pipe(filter((e) => e.key === 'Escape'), tap(() => this._animatedOverlay.unmount()))
+            .subscribe();
+        const clickOutsideSub = this._clickObserverService
+            .observe(this._animatedOverlay.componentRef?.location.nativeElement)
+            .subscribe((e) => {
+            const targetElement = e.target;
+            const isInside = this._animatedOverlay.componentRef?.location.nativeElement.contains(targetElement);
+            if (!isInside) {
+                this._animatedOverlay.unmount();
+            }
+        });
+        this._listenerSubscriptions.push(keyupEscSub, clickOutsideSub);
+    }
+    _removeListeners() {
+        this._listenerSubscriptions.forEach((s) => s.unsubscribe());
+        this._listenerSubscriptions.length = 0;
+    }
+    _mountToggletip() {
+        this._animatedOverlay.mount({
+            component: ToggletipComponent,
+            providers: [
+                {
+                    provide: TOGGLETIP_CONFIG,
+                    useValue: this._defaultConfig,
+                },
+                ...[
+                    typeof this.toggletip === 'string'
+                        ? {
+                            provide: TOGGLETIP_TEXT,
+                            useValue: this.toggletip,
+                        }
+                        : {
+                            provide: TOGGLETIP_TEMPLATE,
+                            useValue: this.toggletip,
+                        },
+                ],
+            ],
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: ToggletipDirective, isStandalone: true, selector: "[etToggletip]", inputs: { toggletip: ["etToggletip", "toggletip"], showToggletip: "showToggletip" }, outputs: { toggletipClose: "toggletipClose" }, providers: [
+            {
+                provide: TOGGLETIP_DIRECTIVE,
+                useExisting: ToggletipDirective,
+            },
+        ], hostDirectives: [{ directive: i1$1.AnimatedOverlayDirective, inputs: ["placement", "placement"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etToggletip]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: TOGGLETIP_DIRECTIVE,
+                            useExisting: ToggletipDirective,
+                        },
+                    ],
+                    hostDirectives: [{ directive: AnimatedOverlayDirective, inputs: ['placement'] }],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { toggletip: [{
+                type: Input,
+                args: ['etToggletip']
+            }], showToggletip: [{
+                type: Input
+            }], toggletipClose: [{
+                type: Output
+            }] } });
+
+const TOGGLETIP = new InjectionToken('Toggletip');
+// TODO(TRB): The focus should get trapped inside the toggletip.
+// The toggletip trigger should get a aria-haspopup="true" and aria-expanded="true" attribute.
+class ToggletipComponent {
+    constructor() {
+        this._config = inject(TOGGLETIP_CONFIG);
+        this.toggletipText = inject(TOGGLETIP_TEXT, { optional: true });
+        this.toggletipTemplate = inject(TOGGLETIP_TEMPLATE, { optional: true });
+        this.injector = inject(Injector);
+        this._cdr = inject(ChangeDetectorRef);
+        this._trigger = inject(TOGGLETIP_DIRECTIVE);
+    }
+    get attrAriaHidden() {
+        return true;
+    }
+    get usesDefaultAnimation() {
+        return !this._config.customAnimated;
+    }
+    get containerClass() {
+        return this._config.containerClass;
+    }
+    _markForCheck() {
+        this._cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ToggletipComponent, isStandalone: true, selector: "et-toggletip", host: { properties: { "attr.aria-hidden": "this.attrAriaHidden", "class.et-with-default-animation": "this.usesDefaultAnimation", "class": "this.containerClass" }, classAttribute: "et-toggletip" }, providers: [
+            {
+                provide: TOGGLETIP,
+                useExisting: ToggletipComponent,
+            },
+        ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"toggletipText\">\n    {{ toggletipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"toggletipTemplate\">\n    <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"toggletip-arrow\" data-popper-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip[data-popper-placement^=top] .toggletip-arrow{bottom:-4px}.et-toggletip[data-popper-placement^=right] .toggletip-arrow{left:-4px}.et-toggletip[data-popper-placement^=bottom] .toggletip-arrow{top:-4px}.et-toggletip[data-popper-placement^=left] .toggletip-arrow{right:-4px}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color)}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:-1}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[data-popper-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggletipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-toggletip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], host: {
+                        class: 'et-toggletip',
+                    }, providers: [
+                        {
+                            provide: TOGGLETIP,
+                            useExisting: ToggletipComponent,
+                        },
                     ], template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"toggletipText\">\n    {{ toggletipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"toggletipTemplate\">\n    <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"toggletip-arrow\" data-popper-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip[data-popper-placement^=top] .toggletip-arrow{bottom:-4px}.et-toggletip[data-popper-placement^=right] .toggletip-arrow{left:-4px}.et-toggletip[data-popper-placement^=bottom] .toggletip-arrow{top:-4px}.et-toggletip[data-popper-placement^=left] .toggletip-arrow{right:-4px}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color)}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:-1}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[data-popper-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[data-popper-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[data-popper-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"] }]
         }], propDecorators: { _animatedLifecycle: [{
                 type: ViewChild,
@@ -7687,7 +9091,6 @@ class ScrollableComponent {
             this._renderer.setAttribute(element, 'can-scroll', state.canScroll.toString());
         }), takeUntil(this._destroy$))
             .subscribe();
-        this._setupScrollListening();
     }
     ngAfterContentInit() {
         if (!this.activeElements || !this.elements) {
@@ -7713,6 +9116,7 @@ class ScrollableComponent {
             });
         }), takeUntil(this._destroy$))
             .subscribe();
+        this._setupScrollListening();
     }
     scrollOneContainerSize(direction) {
         const scrollElement = this.scrollable.nativeElement;
@@ -7809,7 +9213,7 @@ class ScrollableComponent {
             isSnapping = false;
         }))
             .subscribe();
-        merge(fromEvent(scrollElement, 'scroll'), this._isCursorDragging$, of(true))
+        merge(fromEvent(scrollElement, 'scroll'), this._isCursorDragging$, this.elements?.changes.pipe(startWith(this.elements)) ?? of(null))
             .pipe(debounceTime(300), takeUntil(this._destroy$), tap(() => {
             const elements = this.elements
                 ?.toArray()
@@ -10290,5 +11694,5 @@ const TABS_CONFIG = new InjectionToken('TABS_CONFIG');
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, ButtonComponent, ButtonDirective, ButtonImports, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_DIR_TOKEN, COMBOBOX_TOKEN, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, EMAIL_INPUT_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconImports, IfInputEmptyDirective, IfInputFilledDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MasonryComponent, MasonryImports, MasonryItemComponent, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationImports, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PictureDataDirective, ProgressSpinnerComponent, QueryButtonComponent, QueryButtonDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RecycleRowsDirective, RowComponent, RowDefDirective, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableImports, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, accordionAnimations, createBottomSheetConfig, createBracketConfig, createDialogConfig, createToggletipConfig, createTooltipConfig, getClosestBottomSheet, getClosestDialog, isOptionDisabled, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
+export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, ButtonComponent, ButtonDirective, ButtonImports, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_DIR_TOKEN, COMBOBOX_TOKEN, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ContextMenuTracker, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, EMAIL_INPUT_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconImports, IfInputEmptyDirective, IfInputFilledDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MENU_AIM, MENU_STACK, MENU_TRIGGER, MasonryComponent, MasonryImports, MasonryItemComponent, MenuStack, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationImports, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PictureDataDirective, PointerFocusTracker, ProgressSpinnerComponent, QueryButtonComponent, QueryButtonDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RecycleRowsDirective, RowComponent, RowDefDirective, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableImports, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TargetMenuAim, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, accordionAnimations, createBottomSheetConfig, createBracketConfig, createDialogConfig, createToggletipConfig, createTooltipConfig, getClosestBottomSheet, getClosestDialog, isOptionDisabled, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
 //# sourceMappingURL=ethlete-cdk.mjs.map