@raintonic/formaui 0.3.1 → 0.9.0

package/fesm2022/raintonic-formaui-components-menu.mjs

@@ -1,896 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, signal, computed, inject, ElementRef, Renderer2, HostListener, Component, NgZone, contentChildren, effect, ViewChild, Directive } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { Subscription, fromEvent } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
-
-const MENU_ITEM_VARIANTS = ['default', 'danger'];
-/**
- * # FuiMenuItem Component
- *
- * A menu item component designed to be used within fui-menu.
- * Provides consistent styling and behavior for menu options.
- *
- * ## Features
- * - Default and danger variants
- * - Full accessibility support (ARIA attributes, keyboard navigation)
- * - Icon support with proper spacing
- * - Disabled state support
- * - Hover and focus states
- * - Keyboard activation (Enter and Space)
- *
- * ## Usage
- *
- * ### Basic Menu Item
- * ```html
- * <fui-menu-item>Profile</fui-menu-item>
- * ```
- *
- * ### Menu Item with Icon
- * ```html
- * <fui-menu-item>
- *   <fui-icon name="user" fuiPrefix></fui-icon>
- *   Profile
- * </fui-menu-item>
- * ```
- *
- * ### Danger Menu Item
- * ```html
- * <fui-menu-item variant="danger">
- *   <fui-icon name="trash" fuiPrefix></fui-icon>
- *   Delete Account
- * </fui-menu-item>
- * ```
- *
- * ### Disabled Menu Item
- * ```html
- * <fui-menu-item [disabled]="true">
- *   Unavailable Option
- * </fui-menu-item>
- * ```
- *
- * @example
- * ```typescript
- * import { FuiMenuItemComponent } from '@raintonic/formaui/components/menu';
- *
- * @Component({
- *   standalone: true,
- *   imports: [FuiMenuItemComponent],
- *   templateUrl: './my-component.component.html',
- *   styleUrl: './my-component.component.scss'
- * })
- * export class MyComponent {
- *   onItemClick(event: Event) {
- *     console.log('Menu item clicked:', event);
- *   }
- * }
- * ```
- */
-class FuiMenuItemComponent {
-    /**
-     * Menu item variant that determines the visual style
-     * @default 'default'
-     */
-    variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (v) => (MENU_ITEM_VARIANTS.includes(v) ? v : 'default') });
-    /**
-     * Whether the menu item is disabled
-     * @default false
-     */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Emitted when the menu item is clicked or activated
-     */
-    selected = output();
-    /**
-     * Internal tabindex for roving tabindex pattern.
-     * Managed by the parent FuiMenuComponent.
-     * @internal
-     */
-    tabIndex = signal('-1', ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    // Computed properties
-    computedClasses = computed(() => {
-        const classes = ['fui-menu-item', `fui-menu-item--${this.variant()}`];
-        if (this.disabled()) {
-            classes.push('fui-menu-item--disabled');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ _elementRef = inject(ElementRef);
-    _renderer = inject(Renderer2);
-    onClick(event) {
-        if (this.disabled()) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.selected.emit(event);
-    }
-    onKeydown(event) {
-        if (this.disabled()) {
-            return;
-        }
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                // Dispatch a synthetic click so the parent menu's click handler
-                // can detect the activation and close the menu.
-                this._elementRef.nativeElement.click();
-                break;
-        }
-    }
-    /**
-     * Focuses the menu item
-     */
-    focus() {
-        this._elementRef.nativeElement.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiMenuItemComponent, isStandalone: true, selector: "fui-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "computedClasses()", "attr.role": "\"menuitem\"", "attr.tabindex": "disabled() ? \"-1\" : tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-menu-item{transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;display:flex;align-items:center;gap:var(--fui-spacing-03);width:100%;padding:var(--fui-spacing-03) var(--fui-spacing-04);margin:0;background-color:transparent;border:none;border-radius:var(--fui-border-radius-sm);font-family:var(--fui-font-family-sans);letter-spacing:.56px;font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-menu-item:focus-visible{background-color:var(--fui-surface-02);outline:2px solid var(--fui-primary);outline-offset:-2px}:host.fui-menu-item:hover:not(.fui-menu-item--disabled){background-color:var(--fui-surface-02)}:host.fui-menu-item:active:not(.fui-menu-item--disabled){background-color:var(--fui-surface-05)}:host.fui-menu-item--danger{color:var(--fui-danger-100)}:host.fui-menu-item--danger:hover:not(.fui-menu-item--disabled){background-color:var(--fui-danger-10);color:var(--fui-danger-70)}:host.fui-menu-item--danger:active:not(.fui-menu-item--disabled){background-color:var(--fui-danger-20);color:var(--fui-danger-80)}:host.fui-menu-item--danger:focus-visible{background-color:var(--fui-danger-10);outline-color:var(--fui-danger-60)}:host.fui-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-opacity-disabled)}:host.fui-menu-item--disabled:hover,:host.fui-menu-item--disabled:active,:host.fui-menu-item--disabled:focus{background-color:transparent}:host.fui-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);font-size:var(--fui-icon-size-md)}:host.fui-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-02)}:host.fui-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-menu-item .fui-menu-item__shortcut{margin-left:auto;font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);font-family:var(--fui-font-family-mono)}@media(prefers-contrast:more){:host.fui-menu-item:focus-visible{outline-width:3px}:host.fui-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-menu-item{transition:none}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fui-menu-item', standalone: true, imports: [], host: {
-                        '[class]': 'computedClasses()',
-                        '[attr.role]': '"menuitem"',
-                        '[attr.tabindex]': 'disabled() ? "-1" : tabIndex()',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                    }, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-menu-item{transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;display:flex;align-items:center;gap:var(--fui-spacing-03);width:100%;padding:var(--fui-spacing-03) var(--fui-spacing-04);margin:0;background-color:transparent;border:none;border-radius:var(--fui-border-radius-sm);font-family:var(--fui-font-family-sans);letter-spacing:.56px;font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-menu-item:focus-visible{background-color:var(--fui-surface-02);outline:2px solid var(--fui-primary);outline-offset:-2px}:host.fui-menu-item:hover:not(.fui-menu-item--disabled){background-color:var(--fui-surface-02)}:host.fui-menu-item:active:not(.fui-menu-item--disabled){background-color:var(--fui-surface-05)}:host.fui-menu-item--danger{color:var(--fui-danger-100)}:host.fui-menu-item--danger:hover:not(.fui-menu-item--disabled){background-color:var(--fui-danger-10);color:var(--fui-danger-70)}:host.fui-menu-item--danger:active:not(.fui-menu-item--disabled){background-color:var(--fui-danger-20);color:var(--fui-danger-80)}:host.fui-menu-item--danger:focus-visible{background-color:var(--fui-danger-10);outline-color:var(--fui-danger-60)}:host.fui-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-opacity-disabled)}:host.fui-menu-item--disabled:hover,:host.fui-menu-item--disabled:active,:host.fui-menu-item--disabled:focus{background-color:transparent}:host.fui-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);font-size:var(--fui-icon-size-md)}:host.fui-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-02)}:host.fui-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-menu-item .fui-menu-item__shortcut{margin-left:auto;font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);font-family:var(--fui-font-family-mono)}@media(prefers-contrast:more){:host.fui-menu-item:focus-visible{outline-width:3px}:host.fui-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-menu-item{transition:none}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-const RT_MENU_POSITIONS = [
-    'top-start',
-    'top',
-    'top-end',
-    'bottom-start',
-    'bottom',
-    'bottom-end',
-    'left-start',
-    'left',
-    'left-end',
-    'right-start',
-    'right',
-    'right-end',
-];
-const RT_MENU_SIZES = ['sm', 'md', 'lg'];
-/**
- * # FuiMenu Component
- *
- * A dropdown menu component that provides a list of options or actions.
- * Designed to work with external triggers using the fuiMenuTrigger directive.
- *
- * ## Features
- * - Multiple positioning options relative to trigger
- * - Keyboard navigation (Arrow keys, Enter, Escape)
- * - Click outside to close
- * - Full accessibility support (ARIA attributes, focus management)
- * - Customizable size variants
- * - Auto-positioning with collision detection
- * - Portal attachment to document body to avoid clipping issues
- *
- * ## Usage
- *
- * ### Basic Menu with External Trigger
- * ```html
- * <button fuiButton fuiMenuTrigger [fuiMenuTriggerFor]="menu">
- *   Open Menu
- * </button>
- * <fui-menu #menu>
- *   <fui-menu-item>Option 1</fui-menu-item>
- *   <fui-menu-item>Option 2</fui-menu-item>
- * </fui-menu>
- * ```
- *
- * ### Menu with Custom Position
- * ```html
- * <button fuiButton fuiMenuTrigger [fuiMenuTriggerFor]="menu">
- *   Open Menu
- * </button>
- * <fui-menu #menu position="top-start" size="lg">
- *   <fui-menu-item>Profile</fui-menu-item>
- *   <fui-menu-item variant="danger">Logout</fui-menu-item>
- * </fui-menu>
- * ```
- *
- * ### Menu without Portal (for special cases)
- * ```html
- * <button fuiButton fuiMenuTrigger [fuiMenuTriggerFor]="menu">
- *   Open Menu
- * </button>
- * <fui-menu #menu [attachToBody]="false">
- *   <fui-menu-item>Option 1</fui-menu-item>
- *   <fui-menu-item>Option 2</fui-menu-item>
- * </fui-menu>
- * ```
- *
- * ### Menu with Data Passed from Trigger
- * ```html
- * <button fuiButton fuiMenuTrigger
- *         [fuiMenuTriggerFor]="dynamicMenu"
- *         [menuTriggerData]="{ user: currentUser, items: menuItems }">
- *   Open Menu
- * </button>
- * <fui-menu #dynamicMenu>
- *   <!-- Access data in component using menu.menuData() -->
- * </fui-menu>
- * ```
- *
- * ```typescript
- * @Component({
- *   template: `
- *     <fui-menu #menu>
- *       <fui-menu-item *ngFor="let item of menu.menuData()?.items">
- *         {{ item.label }}
- *       </fui-menu-item>
- *     </fui-menu>
- *   `
- * })
- * export class MyComponent { }
- * ```
- */
-class FuiMenuComponent {
-    /**
-     * Menu position relative to the trigger element
-     * @default 'bottom-start'
-     */
-    position = input('bottom-start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /**
-     * Menu size variant
-     * @default 'md'
-     */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the menu should close when clicking outside
-     * @default true
-     */
-    closeOnClickOutside = input(true, { ...(ngDevMode ? { debugName: "closeOnClickOutside" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether the menu should close when pressing Escape
-     * @default true
-     */
-    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether the menu is disabled
-     * @default false
-     */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether to attach the menu panel to the document body to avoid clipping issues
-     * @default true
-     */
-    attachToBody = input(true, { ...(ngDevMode ? { debugName: "attachToBody" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Emitted when the menu open state changes
-     */
-    openChange = output();
-    /**
-     * Emitted when a menu item is selected
-     */
-    itemSelected = output();
-    // Internal state
-    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
-    _animationState = signal('void', ...(ngDevMode ? [{ debugName: "_animationState" }] : /* istanbul ignore next */ []));
-    _triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "_triggerElement" }] : /* istanbul ignore next */ []));
-    _menuData = signal(null, ...(ngDevMode ? [{ debugName: "_menuData" }] : /* istanbul ignore next */ []));
-    _previousFocusedElement = null;
-    _overlayRef = null;
-    _overlaySubscriptions = new Subscription();
-    _closeAnimationTimeout = null;
-    // Computed properties
-    computedClasses = computed(() => {
-        const classes = ['fui-menu', `fui-menu--${this.position()}`, `fui-menu--${this.size()}`];
-        if (this.disabled()) {
-            classes.push('fui-menu--disabled');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
-    // Injected dependencies
-    _elementRef = inject(ElementRef);
-    _overlayService = inject(FuiOverlayService);
-    _document = inject(DOCUMENT);
-    _ngZone = inject(NgZone);
-    _outsideClickSub;
-    // View references
-    menuPanel;
-    // Content children for roving tabindex management
-    _menuItems = contentChildren(FuiMenuItemComponent, { ...(ngDevMode ? { debugName: "_menuItems" } : /* istanbul ignore next */ {}), descendants: true });
-    constructor() {
-        // Handle open state changes with animation
-        effect(() => {
-            if (this._isOpen()) {
-                requestAnimationFrame(() => {
-                    this._animationState.set('enter');
-                    this._openMenu();
-                });
-            }
-            else {
-                this._startCloseAnimation();
-            }
-        });
-        // Emit open change events
-        effect(() => {
-            this.openChange.emit(this._isOpen());
-        });
-    }
-    /**
-     * Whether the menu is currently open
-     */
-    isOpen() {
-        return this._isOpen();
-    }
-    /**
-     * Opens the menu
-     */
-    open() {
-        if (this.disabled())
-            return;
-        this._isOpen.set(true);
-    }
-    /**
-     * Closes the menu
-     */
-    close() {
-        this._isOpen.set(false);
-    }
-    /**
-     * Toggles the menu open/closed state
-     */
-    toggle() {
-        if (this._isOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    /**
-     * Sets the trigger element for positioning (called by trigger directive)
-     */
-    setTriggerElement(element) {
-        this._triggerElement.set(element);
-    }
-    /**
-     * Gets the menu data passed from the trigger
-     * Returns a signal containing the data
-     */
-    menuData() {
-        return this._menuData();
-    }
-    /**
-     * Sets the menu data (called by trigger directive)
-     * @param data The data to pass to the menu
-     */
-    setMenuData(data) {
-        this._menuData.set(data);
-    }
-    // Start listening for outside clicks when menu opens
-    _listenForOutsideClicks() {
-        this._outsideClickSub?.unsubscribe();
-        if (!this.closeOnClickOutside())
-            return;
-        this._ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
-                this._outsideClickSub = fromEvent(this._document, 'click')
-                    .pipe(filter(() => this._isOpen()), filter((event) => {
-                    const target = event.target;
-                    const menuElement = this._elementRef.nativeElement;
-                    const triggerElement = this._triggerElement();
-                    return !menuElement.contains(target) && !triggerElement?.contains(target);
-                }))
-                    .subscribe(() => {
-                    this._ngZone.run(() => {
-                        this.close();
-                    });
-                });
-            });
-        });
-    }
-    onDocumentKeydown(event) {
-        if (!this._isOpen() || !this._isTopmostOverlay()) {
-            return;
-        }
-        switch (event.key) {
-            case 'Escape':
-                if (this.closeOnEscape()) {
-                    event.preventDefault();
-                    this.close();
-                }
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this._focusNextItem();
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this._focusPreviousItem();
-                break;
-            case 'Home':
-                event.preventDefault();
-                this._focusFirstItem();
-                break;
-            case 'End':
-                event.preventDefault();
-                this._focusLastItem();
-                break;
-        }
-    }
-    onMenuClick(event) {
-        // Check if the click was on a menu item
-        const target = event.target;
-        const menuItem = target.closest('fui-menu-item');
-        if (menuItem && this._isOpen()) {
-            // Emit the itemSelected event and close the menu
-            this.itemSelected.emit(event);
-            this.close();
-        }
-    }
-    ngOnDestroy() {
-        this._clearCloseTimeout();
-        this._outsideClickSub?.unsubscribe();
-        this._restoreFocus();
-        this._disposeOverlay();
-    }
-    _openMenu() {
-        // Create overlay after the view updates
-        requestAnimationFrame(() => {
-            this._createOverlay();
-            this._listenForOutsideClicks();
-            const triggerElement = this._triggerElement();
-            if (triggerElement) {
-                triggerElement.setAttribute('aria-expanded', 'true');
-                this._previousFocusedElement = document.activeElement;
-            }
-        });
-    }
-    _closeMenu() {
-        this._outsideClickSub?.unsubscribe();
-        const triggerElement = this._triggerElement();
-        if (triggerElement) {
-            triggerElement.setAttribute('aria-expanded', 'false');
-        }
-        // Reset roving tabindex on all items
-        this._resetRovingTabindex();
-        this._disposeOverlay();
-        this._restoreFocus();
-    }
-    _createOverlay() {
-        if (this._overlayRef || !this.menuPanel) {
-            return;
-        }
-        const triggerElement = this._triggerElement();
-        if (!triggerElement) {
-            return;
-        }
-        // Create overlay with positioning strategy
-        const positions = this._getPositionsForMenuPosition(this.position());
-        const positionStrategy = this._overlayService
-            .position()
-            .connectedTo(triggerElement, positions)
-            .withPush(true)
-            .withViewportMargin(8);
-        // Create overlay
-        this._overlayRef = this._overlayService.create({
-            positionStrategy,
-            scrollStrategy: this.closeOnClickOutside()
-                ? this._overlayService.scrollStrategies.close()
-                : this._overlayService.scrollStrategies.reposition(),
-            hasBackdrop: this.closeOnClickOutside(),
-            backdropClass: 'fui-menu-backdrop',
-            backdropClickBehavior: 'close',
-            panelClass: ['fui-menu-panel', `fui-menu-panel--${this.size()}`],
-        });
-        // Track overlay subscriptions for proper cleanup
-        this._overlaySubscriptions.unsubscribe();
-        this._overlaySubscriptions = new Subscription();
-        if (this.closeOnClickOutside()) {
-            this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
-                this.close();
-            }));
-        }
-        if (this.closeOnEscape()) {
-            this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
-                if (event.key === 'Escape') {
-                    this.close();
-                }
-            }));
-        }
-        // Attach menu panel to overlay
-        const menuElement = this.menuPanel.nativeElement;
-        this._overlayRef.attach(menuElement);
-        // Focus first item after attachment
-        setTimeout(() => {
-            this._focusFirstItem();
-        }, 0);
-    }
-    _getPositionsForMenuPosition(position) {
-        const offset = 4;
-        switch (position) {
-            case 'bottom-start':
-                return [
-                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
-                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
-                ];
-            case 'bottom':
-                return [
-                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
-                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
-                ];
-            case 'bottom-end':
-                return [
-                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
-                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
-                ];
-            case 'top-start':
-                return [
-                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
-                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
-                ];
-            case 'top':
-                return [
-                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
-                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
-                ];
-            case 'top-end':
-                return [
-                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
-                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
-                ];
-            case 'right-start':
-                return [
-                    { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset },
-                    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset },
-                ];
-            case 'right':
-                return [
-                    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
-                    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
-                ];
-            case 'right-end':
-                return [
-                    { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset },
-                    { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -offset },
-                ];
-            case 'left-start':
-                return [
-                    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset },
-                    { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset },
-                ];
-            case 'left':
-                return [
-                    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
-                    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
-                ];
-            case 'left-end':
-                return [
-                    { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -offset },
-                    { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset },
-                ];
-            default:
-                return [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset }];
-        }
-    }
-    _restoreFocus() {
-        // Prefer the trigger element for focus restoration
-        const triggerElement = this._triggerElement();
-        if (triggerElement) {
-            triggerElement.focus();
-        }
-        else if (this._previousFocusedElement) {
-            this._previousFocusedElement.focus();
-        }
-        this._previousFocusedElement = null;
-    }
-    _getMenuItems() {
-        const menuElement = this.menuPanel?.nativeElement;
-        if (!menuElement)
-            return [];
-        return Array.from(menuElement.querySelectorAll('fui-menu-item:not([aria-disabled="true"])'));
-    }
-    /** @internal Called by FuiMenuTriggerDirective */
-    _focusFirstItem() {
-        const items = this._getMenuItems();
-        if (items.length > 0) {
-            this._focusItem(items[0]);
-        }
-    }
-    /** @internal Called by FuiMenuTriggerDirective */
-    _focusLastItem() {
-        const items = this._getMenuItems();
-        if (items.length > 0) {
-            this._focusItem(items[items.length - 1]);
-        }
-    }
-    _focusNextItem() {
-        const items = this._getMenuItems();
-        if (items.length === 0) {
-            return;
-        }
-        const currentIndex = items.findIndex((item) => item === document.activeElement);
-        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-        this._focusItem(items[nextIndex]);
-    }
-    _focusPreviousItem() {
-        const items = this._getMenuItems();
-        if (items.length === 0) {
-            return;
-        }
-        const currentIndex = items.findIndex((item) => item === document.activeElement);
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-        this._focusItem(items[prevIndex]);
-    }
-    /**
-     * Focuses a menu item and updates roving tabindex across all items.
-     */
-    _focusItem(element) {
-        this._updateRovingTabindex(element);
-        element.focus();
-    }
-    /**
-     * Resets all items to tabindex="-1" when the menu closes.
-     */
-    _resetRovingTabindex() {
-        const items = this._menuItems();
-        for (const item of items) {
-            item.tabIndex.set('-1');
-        }
-    }
-    /**
-     * Updates roving tabindex: sets tabindex="0" on the target item
-     * and tabindex="-1" on all other items.
-     */
-    _updateRovingTabindex(targetElement) {
-        const items = this._menuItems();
-        for (const item of items) {
-            if (item._elementRef.nativeElement === targetElement) {
-                item.tabIndex.set('0');
-            }
-            else {
-                item.tabIndex.set('-1');
-            }
-        }
-    }
-    _disposeOverlay() {
-        this._overlaySubscriptions.unsubscribe();
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-    }
-    _startCloseAnimation() {
-        // Clear any existing timeout
-        this._clearCloseTimeout();
-        // Trigger leave animation
-        this._animationState.set('leave');
-        // Wait for animation to complete before closing (matches CSS transition duration)
-        this._closeAnimationTimeout = window.setTimeout(() => {
-            this._closeMenu();
-            this._animationState.set('void');
-        }, 150); // Match the CSS transition duration
-    }
-    _clearCloseTimeout() {
-        if (this._closeAnimationTimeout !== null) {
-            clearTimeout(this._closeAnimationTimeout);
-            this._closeAnimationTimeout = null;
-        }
-    }
-    /**
-     * Checks if this menu's overlay is the topmost (most recently opened) overlay.
-     * This ensures that only the topmost menu responds to keyboard events when
-     * multiple menus are open (e.g., nested menus).
-     */
-    _isTopmostOverlay() {
-        if (!this._overlayRef) {
-            return false;
-        }
-        const activeOverlays = this._overlayService.getActiveOverlays();
-        // The last overlay in the array is the most recently created (topmost)
-        const topmostOverlay = activeOverlays[activeOverlays.length - 1];
-        return topmostOverlay === this._overlayRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiMenuComponent, isStandalone: true, selector: "fui-menu", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, attachToBody: { classPropertyName: "attachToBody", publicName: "attachToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)", "click": "onMenuClick($event)" }, properties: { "class": "computedClasses()", "attr.data-open": "isOpen() ? \"true\" : null" } }, queries: [{ propertyName: "_menuItems", predicate: FuiMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menuPanel"], descendants: true }], ngImport: i0, template: "@if (_isOpen() || _animationState() === 'leave') {\r\n  <div class=\"fui-menu__panel\" #menuPanel role=\"menu\" [attr.data-animation-state]=\"_animationState()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}::ng-deep .fui-menu{position:absolute}::ng-deep .fui-menu--disabled{opacity:var(--fui-opacity-disabled);pointer-events:none}::ng-deep .fui-menu__panel{--fui-menu-min-width: 150px;--fui-menu-max-width: 500px;--fui-menu-border-radius: var(--fui-border-radius-sm);--fui-menu-padding: var(--fui-spacing-02);--fui-menu-bg: var(--fui-surface-00);--fui-menu-shadow: var(--fui-shadow-04);z-index:var(--fui-z-popover);min-width:var(--fui-menu-min-width);max-width:var(--fui-menu-max-width);background-color:var(--fui-menu-bg);border-radius:var(--fui-menu-border-radius);padding:var(--fui-menu-padding);box-shadow:var(--fui-menu-shadow);overflow:hidden;transform-origin:top center;will-change:transform,opacity;opacity:0;transform:translateY(-14px);transition:opacity var(--fui-duration-moderate-02) var(--fui-ease-exit),transform var(--fui-duration-moderate-02) var(--fui-ease-exit)}::ng-deep .fui-menu__panel:focus{outline:none}::ng-deep .fui-menu__panel[data-animation-state=enter]{opacity:1;transform:translateY(0);transition:opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance),transform var(--fui-duration-moderate-01) var(--fui-ease-entrance)}::ng-deep .fui-menu__panel[data-animation-state=leave]{opacity:0;transform:translateY(-14px)}::ng-deep .fui-menu-panel--sm .fui-menu__panel{min-width:8rem;font-size:var(--fui-font-size-01)}::ng-deep .fui-menu-panel--md .fui-menu__panel{min-width:12rem;font-size:var(--fui-font-size-02)}::ng-deep .fui-menu-panel--lg .fui-menu__panel{min-width:16rem;font-size:var(--fui-font-size-03)}@media(prefers-contrast:more){::ng-deep .fui-menu__panel{border-width:2px;box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-menu__panel{transition:none}}@media print{::ng-deep .fui-menu__panel{display:none!important}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fui-menu', standalone: true, imports: [], host: {
-                        '[class]': 'computedClasses()',
-                        '[attr.data-open]': 'isOpen() ? "true" : null',
-                    }, template: "@if (_isOpen() || _animationState() === 'leave') {\r\n  <div class=\"fui-menu__panel\" #menuPanel role=\"menu\" [attr.data-animation-state]=\"_animationState()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}::ng-deep .fui-menu{position:absolute}::ng-deep .fui-menu--disabled{opacity:var(--fui-opacity-disabled);pointer-events:none}::ng-deep .fui-menu__panel{--fui-menu-min-width: 150px;--fui-menu-max-width: 500px;--fui-menu-border-radius: var(--fui-border-radius-sm);--fui-menu-padding: var(--fui-spacing-02);--fui-menu-bg: var(--fui-surface-00);--fui-menu-shadow: var(--fui-shadow-04);z-index:var(--fui-z-popover);min-width:var(--fui-menu-min-width);max-width:var(--fui-menu-max-width);background-color:var(--fui-menu-bg);border-radius:var(--fui-menu-border-radius);padding:var(--fui-menu-padding);box-shadow:var(--fui-menu-shadow);overflow:hidden;transform-origin:top center;will-change:transform,opacity;opacity:0;transform:translateY(-14px);transition:opacity var(--fui-duration-moderate-02) var(--fui-ease-exit),transform var(--fui-duration-moderate-02) var(--fui-ease-exit)}::ng-deep .fui-menu__panel:focus{outline:none}::ng-deep .fui-menu__panel[data-animation-state=enter]{opacity:1;transform:translateY(0);transition:opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance),transform var(--fui-duration-moderate-01) var(--fui-ease-entrance)}::ng-deep .fui-menu__panel[data-animation-state=leave]{opacity:0;transform:translateY(-14px)}::ng-deep .fui-menu-panel--sm .fui-menu__panel{min-width:8rem;font-size:var(--fui-font-size-01)}::ng-deep .fui-menu-panel--md .fui-menu__panel{min-width:12rem;font-size:var(--fui-font-size-02)}::ng-deep .fui-menu-panel--lg .fui-menu__panel{min-width:16rem;font-size:var(--fui-font-size-03)}@media(prefers-contrast:more){::ng-deep .fui-menu__panel{border-width:2px;box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-menu__panel{transition:none}}@media print{::ng-deep .fui-menu__panel{display:none!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], attachToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachToBody", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], menuPanel: [{
-                type: ViewChild,
-                args: ['menuPanel', { static: false }]
-            }], _menuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], onDocumentKeydown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }], onMenuClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * # fuiMenuTrigger Directive
- *
- * A directive that marks an element as a menu trigger, similar to Angular Material's matMenuTriggerFor.
- * This directive should be used in conjunction with FuiMenuComponent.
- *
- * ## Usage
- *
- * ### Basic Usage
- * ```html
- * <button fuiMenuTrigger [menuTriggerFor]="menu">Open Menu</button>
- * <fui-menu #menu>
- *   <fui-menu-item>Option 1</fui-menu-item>
- *   <fui-menu-item>Option 2</fui-menu-item>
- * </fui-menu>
- * ```
- *
- * ### With Menu Reference
- * ```html
- * <button fuiMenuTrigger [menuTriggerFor]="userMenu">
- *   <fui-icon name="user"></fui-icon>
- *   User Menu
- * </button>
- *
- * <fui-menu #userMenu position="bottom-end">
- *   <fui-menu-item>Profile</fui-menu-item>
- *   <fui-menu-item>Settings</fui-menu-item>
- *   <fui-menu-item variant="danger">Logout</fui-menu-item>
- * </fui-menu>
- * ```
- *
- * ### Passing Data to Menu
- * ```html
- * <button fuiMenuTrigger
- *         [menuTriggerFor]="dynamicMenu"
- *         [menuTriggerData]="{ user: currentUser, role: 'admin' }">
- *   Open Menu
- * </button>
- *
- * <fui-menu #dynamicMenu>
- *   <!-- Access menu data in your component via menu.menuData() -->
- * </fui-menu>
- * ```
- *
- * @example
- * ```typescript
- * import { FuiMenuTriggerDirective, FuiMenuComponent, FuiMenuItemComponent } from '@raintonic/formaui/components/menu';
- *
- * @Component({
- *   standalone: true,
- *   imports: [FuiMenuTriggerDirective, FuiMenuComponent, FuiMenuItemComponent],
- *   template: `
- *     <button fuiMenuTrigger [menuTriggerFor]="menu">Open Menu</button>
- *     <fui-menu #menu>
- *       <fui-menu-item>Option 1</fui-menu-item>
- *       <fui-menu-item>Option 2</fui-menu-item>
- *     </fui-menu>
- *   `
- * })
- * export class MyComponent { }
- * ```
- */
-class FuiMenuTriggerDirective {
-    _elementRef = inject((ElementRef));
-    /** The menu instance that this trigger should open */
-    menuTriggerFor = input(...(ngDevMode ? [undefined, { debugName: "menuTriggerFor" }] : /* istanbul ignore next */ []));
-    /**
-     * Data to be passed to the menu.
-     * Can be accessed in the menu component or menu items.
-     * Similar to Angular Material's matMenuTriggerData.
-     */
-    menuTriggerData = input(...(ngDevMode ? [undefined, { debugName: "menuTriggerData" }] : /* istanbul ignore next */ []));
-    /** The menu instance that this trigger is associated with */
-    menu = null;
-    constructor() {
-        // Set up the menu reference when fuiMenuTriggerFor changes
-        effect(() => {
-            const menuRef = this.menuTriggerFor();
-            if (menuRef) {
-                this.menu = menuRef;
-                // Set the trigger element on the menu for positioning
-                menuRef.setTriggerElement(this._elementRef.nativeElement);
-            }
-        });
-    }
-    ngAfterViewInit() {
-        // Ensure the menu reference is set after view initialization
-        const menuRef = this.menuTriggerFor();
-        if (menuRef) {
-            this.menu = menuRef;
-            menuRef.setTriggerElement(this._elementRef.nativeElement);
-        }
-    }
-    onClick(event) {
-        if (this.menu) {
-            event.preventDefault();
-            // Update trigger element to ensure correct positioning when multiple triggers exist
-            this.menu.setTriggerElement(this._elementRef.nativeElement);
-            // Pass data to menu before opening/toggling
-            const data = this.menuTriggerData();
-            if (data !== undefined && this.menu.setMenuData) {
-                this.menu.setMenuData(data);
-            }
-            this.menu.toggle();
-        }
-    }
-    onKeydown(event) {
-        const menu = this.menu;
-        if (!menu)
-            return;
-        // Update trigger element and pass data to menu before opening
-        const prepareMenu = () => {
-            // Update trigger element to ensure correct positioning when multiple triggers exist
-            menu.setTriggerElement(this._elementRef.nativeElement);
-            // Pass data to menu
-            const data = this.menuTriggerData();
-            if (data !== undefined) {
-                menu.setMenuData(data);
-            }
-        };
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                prepareMenu();
-                menu.toggle();
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                prepareMenu();
-                menu.open();
-                // Focus first item after menu opens
-                setTimeout(() => {
-                    menu._focusFirstItem();
-                }, 0);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                prepareMenu();
-                menu.open();
-                // Focus last item after menu opens
-                setTimeout(() => {
-                    menu._focusLastItem();
-                }, 0);
-                break;
-        }
-    }
-    /** Gets the trigger element */
-    getElement() {
-        return this._elementRef.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiMenuTriggerDirective, isStandalone: true, selector: "[fuiMenuTrigger]", inputs: { menuTriggerFor: { classPropertyName: "menuTriggerFor", publicName: "menuTriggerFor", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerData: { classPropertyName: "menuTriggerData", publicName: "menuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-haspopup": "\"true\"", "attr.aria-expanded": "menu?.isOpen() ? \"true\" : \"false\"" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiMenuTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fuiMenuTrigger]',
-                    standalone: true,
-                    host: {
-                        '[attr.aria-haspopup]': '"true"',
-                        '[attr.aria-expanded]': 'menu?.isOpen() ? "true" : "false"',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { menuTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerFor", required: false }] }], menuTriggerData: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerData", required: false }] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-// Public API for menu components
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { FuiMenuComponent, FuiMenuItemComponent, FuiMenuTriggerDirective, MENU_ITEM_VARIANTS, RT_MENU_POSITIONS, RT_MENU_SIZES };
-//# sourceMappingURL=raintonic-formaui-components-menu.mjs.map