@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-menu.mjs

@@ -0,0 +1,851 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injector, input, booleanAttribute, output, ElementRef, signal, forwardRef, ChangeDetectionStrategy, Component, TemplateRef, Directive, viewChild, contentChild, contentChildren, effect, ViewContainerRef, DestroyRef, NgZone, ChangeDetectorRef, computed } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { outputToObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Subject, Subscription, merge, fromEvent, EMPTY, startWith, switchMap } from 'rxjs';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Option, SELECT } from '@ngstarter-ui/components/select';
+
+const MENU_ITEM = new InjectionToken('MENU_ITEM');
+const MENU_TRIGGER = new InjectionToken('MENU_TRIGGER');
+
+class MenuItem {
+    _injector = inject(Injector);
+    _menuTrigger = null;
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    role = input('menuitem', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _triggered = output();
+    _elementRef = inject((ElementRef));
+    _menu = inject(Menu, { optional: true });
+    get label() {
+        return this._elementRef.nativeElement.textContent?.trim() || '';
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    ngOnInit() {
+        this._menuTrigger = this._injector.get(MENU_TRIGGER, null);
+    }
+    _handleClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const menuTrigger = this._menuTrigger;
+        const hasPopup = this._elementRef.nativeElement.getAttribute('aria-haspopup');
+        if (menuTrigger || hasPopup === 'menu') {
+            return;
+        }
+        this._triggered.emit();
+    }
+    _handleMouseEnter() {
+        const menuTrigger = this._menuTrigger;
+        if (this._menu && !menuTrigger) {
+            this._menu._triggerOpened(null);
+        }
+    }
+    _isHighlighted = signal(false, ...(ngDevMode ? [{ debugName: "_isHighlighted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MenuItem, isStandalone: true, selector: "ngs-menu-item, [ngs-menu-item]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _triggered: "_triggered" }, host: { listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role()", "class.ngs-menu-item": "true", "class.ngs-menu-item-highlighted": "_isHighlighted() || selected()", "attr.disabled": "disabled() || null", "attr.aria-disabled": "disabled()", "tabindex": "disabled() ? -1 : 0" } }, providers: [
+            {
+                provide: MENU_ITEM,
+                useExisting: forwardRef(() => MenuItem)
+            }
+        ], exportAs: ["ngsMenuItem"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"ngs-icon\"/>\n</div>\n\n<div class=\"ngs-menu-item-content\">\n  <ng-content/>\n</div>\n\n@if (_menuTrigger) {\n  <svg class=\"ngs-menu-item-submenu-icon\"\n       viewBox=\"0 0 24 24\"\n       fill=\"none\"\n       stroke=\"currentColor\"\n       stroke-width=\"2\"\n       stroke-linecap=\"round\"\n       stroke-linejoin=\"round\">\n    <polyline points=\"9 18 15 12 9 6\"></polyline>\n  </svg>\n}\n", styles: [":host{--ngs-menu-item-height: var(--option-height);--ngs-menu-item-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-menu-item-font-size: .875rem;--ngs-menu-item-color: var(--color-on-surface);--ngs-menu-item-hover-background: var(--color-surface-container-high);--ngs-menu-item-selected-background: var(--color-primary-container);--ngs-menu-item-selected-color: var(--color-on-primary-container);--ngs-menu-item-active-background: var(--color-surface-container-highest);--ngs-menu-item-disabled-color: var(--color-on-surface-variant);--ngs-menu-item-gap: calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;flex:none;min-height:var(--ngs-menu-item-height);padding:var(--ngs-menu-item-padding);font-size:var(--ngs-menu-item-font-size);color:var(--ngs-menu-item-color);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;background:none;width:100%;text-align:left;box-sizing:border-box;transition:background .1s ease-in-out;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:var(--ngs-menu-item-gap)}:host:hover:not([disabled]),:host.ngs-menu-item-highlighted:not([disabled]){background:var(--ngs-menu-item-hover-background)}:host.ngs-menu-item-active:not([disabled]){background:var(--ngs-menu-item-active-background)}:host[disabled]{color:var(--ngs-menu-item-disabled-color);cursor:default;pointer-events:none}:host .icon{line-height:0;opacity:.75}:host .icon:empty{display:none}:host .ngs-menu-item-content{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);flex:1}:host .ngs-menu-item-submenu-icon{width:16px;height:16px;margin-left:8px;opacity:.5}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-menu-item, [ngs-menu-item]', exportAs: 'ngsMenuItem', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MENU_ITEM,
+                            useExisting: forwardRef(() => MenuItem)
+                        }
+                    ], host: {
+                        '[attr.role]': 'role()',
+                        '[class.ngs-menu-item]': 'true',
+                        '[class.ngs-menu-item-highlighted]': '_isHighlighted() || selected()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[tabindex]': 'disabled() ? -1 : 0',
+                        '(click)': '_handleClick($event)',
+                        '(mouseenter)': '_handleMouseEnter()',
+                    }, template: "<div class=\"icon\">\n  <ng-content select=\"ngs-icon\"/>\n</div>\n\n<div class=\"ngs-menu-item-content\">\n  <ng-content/>\n</div>\n\n@if (_menuTrigger) {\n  <svg class=\"ngs-menu-item-submenu-icon\"\n       viewBox=\"0 0 24 24\"\n       fill=\"none\"\n       stroke=\"currentColor\"\n       stroke-width=\"2\"\n       stroke-linecap=\"round\"\n       stroke-linejoin=\"round\">\n    <polyline points=\"9 18 15 12 9 6\"></polyline>\n  </svg>\n}\n", styles: [":host{--ngs-menu-item-height: var(--option-height);--ngs-menu-item-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-menu-item-font-size: .875rem;--ngs-menu-item-color: var(--color-on-surface);--ngs-menu-item-hover-background: var(--color-surface-container-high);--ngs-menu-item-selected-background: var(--color-primary-container);--ngs-menu-item-selected-color: var(--color-on-primary-container);--ngs-menu-item-active-background: var(--color-surface-container-highest);--ngs-menu-item-disabled-color: var(--color-on-surface-variant);--ngs-menu-item-gap: calc(var(--spacing, .25rem) * 2.5);display:flex;align-items:center;flex:none;min-height:var(--ngs-menu-item-height);padding:var(--ngs-menu-item-padding);font-size:var(--ngs-menu-item-font-size);color:var(--ngs-menu-item-color);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;background:none;width:100%;text-align:left;box-sizing:border-box;transition:background .1s ease-in-out;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:var(--ngs-menu-item-gap)}:host:hover:not([disabled]),:host.ngs-menu-item-highlighted:not([disabled]){background:var(--ngs-menu-item-hover-background)}:host.ngs-menu-item-active:not([disabled]){background:var(--ngs-menu-item-active-background)}:host[disabled]{color:var(--ngs-menu-item-disabled-color);cursor:default;pointer-events:none}:host .icon{line-height:0;opacity:.75}:host .icon:empty{display:none}:host .ngs-menu-item-content{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);flex:1}:host .ngs-menu-item-submenu-icon{width:16px;height:16px;margin-left:8px;opacity:.5}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], _triggered: [{ type: i0.Output, args: ["_triggered"] }] } });
+
+class MenuContent {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MenuContent, isStandalone: true, selector: "[ngsMenuContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsMenuContent]',
+                    standalone: true
+                }]
+        }] });
+
+class Menu {
+    role = input('menu', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    classList = input('', ...(ngDevMode ? [{ debugName: "classList" }] : /* istanbul ignore next */ []));
+    xPosition = input('after', ...(ngDevMode ? [{ debugName: "xPosition" }] : /* istanbul ignore next */ []));
+    yPosition = input('below', ...(ngDevMode ? [{ debugName: "yPosition" }] : /* istanbul ignore next */ []));
+    _panelClasses = signal([], ...(ngDevMode ? [{ debugName: "_panelClasses" }] : /* istanbul ignore next */ []));
+    closed = output();
+    _childMenuClosed = new Subject();
+    templateRef = viewChild.required(TemplateRef);
+    content = contentChild(MenuContent, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    items = contentChildren(MenuItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    _isNested = signal(false, ...(ngDevMode ? [{ debugName: "_isNested" }] : /* istanbul ignore next */ []));
+    _context = signal(undefined, ...(ngDevMode ? [{ debugName: "_context" }] : /* istanbul ignore next */ []));
+    _parentMenu = inject(Menu, { optional: true, skipSelf: true });
+    _parentMenuTrigger = inject(MENU_TRIGGER, { optional: true });
+    _itemSubscription = Subscription.EMPTY;
+    _openedTrigger = null;
+    constructor() {
+        if (this._parentMenu || this._parentMenuTrigger) {
+            this._isNested.set(true);
+        }
+        effect(() => {
+            const items = this.items();
+            this._itemSubscription.unsubscribe();
+            if (items.length > 0) {
+                this._itemSubscription = merge(...items.map(item => outputToObservable(item._triggered)))
+                    .subscribe(() => {
+                    this.close('click');
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._itemSubscription.unsubscribe();
+    }
+    close(reason) {
+        if (this._openedTrigger) {
+            this._openedTrigger.closeMenu(reason);
+        }
+        this.closed.emit(reason);
+    }
+    _setPanelClasses(classes) {
+        this._panelClasses.set(classes);
+    }
+    _setContext(context) {
+        this._context.set(context);
+    }
+    _triggerOpened(trigger) {
+        if (this._openedTrigger && this._openedTrigger !== trigger) {
+            this._openedTrigger.closeMenu('mouse', true);
+        }
+        this._openedTrigger = trigger;
+    }
+    _triggerClosed(trigger) {
+        if (this._openedTrigger === trigger) {
+            this._openedTrigger = null;
+            this._childMenuClosed.next();
+        }
+    }
+    hasOpenChild() {
+        return !!this._openedTrigger && this._openedTrigger.menuOpen();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Menu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Menu, isStandalone: true, selector: "ngs-menu", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "role()", "class.ngs-menu": "true" } }, queries: [{ propertyName: "content", first: true, predicate: MenuContent, descendants: true, isSignal: true }, { propertyName: "items", predicate: MenuItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["ngsMenu"], ngImport: i0, template: "<ng-template>\n  <div\n    class=\"ngs-menu-panel\"\n    [class]=\"classList()\"\n    [class.ngs-menu-before]=\"_panelClasses().includes('ngs-menu-before')\"\n    [class.ngs-menu-after]=\"_panelClasses().includes('ngs-menu-after')\"\n    [class.ngs-menu-above]=\"_panelClasses().includes('ngs-menu-above')\"\n    [class.ngs-menu-below]=\"_panelClasses().includes('ngs-menu-below')\"\n    tabindex=\"-1\"\n    role=\"menu\"\n  >\n    <ng-content select=\"[ngs-menu-header]\"/>\n    <div class=\"ngs-menu-content\">\n      @if (content()) {\n        <ng-container [ngTemplateOutlet]=\"content()!.templateRef\" [ngTemplateOutletContext]=\"_context()\" />\n      } @else {\n        <ng-content />\n      }\n    </div>\n    <ng-content select=\"[ngs-menu-footer]\"/>\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.ngs-menu-panel{background:var(--ngs-menu-background, var(--dropdown-bg));box-shadow:var(--ngs-menu-shadow, var(--dropdown-shadow));border-radius:var(--ngs-menu-border-radius, var(--dropdown-radius));max-height:var(--ngs-menu-max-height, 90vh)}@media(min-height:640px){.ngs-menu-panel{max-height:var(--ngs-menu-max-height, 65vh)}}.ngs-menu-panel{min-width:var(--ngs-menu-min-width, 112px);max-width:var(--ngs-menu-max-width, 280px);outline:var(--ngs-menu-border, var(--dropdown-border));overflow:auto;animation-name:ngs-menu-panel-showing;animation-duration:.15s;animation-timing-function:cubic-bezier(0,0,.2,1);padding-top:8px;padding-bottom:8px}.ngs-menu-panel.ngs-menu-below{transform-origin:top}.ngs-menu-panel.ngs-menu-below.ngs-menu-before{transform-origin:top right}.ngs-menu-panel.ngs-menu-below.ngs-menu-after{transform-origin:top left}.ngs-menu-panel.ngs-menu-above{transform-origin:bottom}.ngs-menu-panel.ngs-menu-above.ngs-menu-before{transform-origin:bottom right}.ngs-menu-panel.ngs-menu-above.ngs-menu-after{transform-origin:bottom left}@keyframes ngs-menu-panel-showing{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ngs-menu-content{padding:var(--ngs-menu-padding, 0)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Menu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-menu', exportAs: 'ngsMenu', standalone: true, imports: [
+                        NgTemplateOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.role]': 'role()',
+                        '[class.ngs-menu]': 'true',
+                    }, template: "<ng-template>\n  <div\n    class=\"ngs-menu-panel\"\n    [class]=\"classList()\"\n    [class.ngs-menu-before]=\"_panelClasses().includes('ngs-menu-before')\"\n    [class.ngs-menu-after]=\"_panelClasses().includes('ngs-menu-after')\"\n    [class.ngs-menu-above]=\"_panelClasses().includes('ngs-menu-above')\"\n    [class.ngs-menu-below]=\"_panelClasses().includes('ngs-menu-below')\"\n    tabindex=\"-1\"\n    role=\"menu\"\n  >\n    <ng-content select=\"[ngs-menu-header]\"/>\n    <div class=\"ngs-menu-content\">\n      @if (content()) {\n        <ng-container [ngTemplateOutlet]=\"content()!.templateRef\" [ngTemplateOutletContext]=\"_context()\" />\n      } @else {\n        <ng-content />\n      }\n    </div>\n    <ng-content select=\"[ngs-menu-footer]\"/>\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.ngs-menu-panel{background:var(--ngs-menu-background, var(--dropdown-bg));box-shadow:var(--ngs-menu-shadow, var(--dropdown-shadow));border-radius:var(--ngs-menu-border-radius, var(--dropdown-radius));max-height:var(--ngs-menu-max-height, 90vh)}@media(min-height:640px){.ngs-menu-panel{max-height:var(--ngs-menu-max-height, 65vh)}}.ngs-menu-panel{min-width:var(--ngs-menu-min-width, 112px);max-width:var(--ngs-menu-max-width, 280px);outline:var(--ngs-menu-border, var(--dropdown-border));overflow:auto;animation-name:ngs-menu-panel-showing;animation-duration:.15s;animation-timing-function:cubic-bezier(0,0,.2,1);padding-top:8px;padding-bottom:8px}.ngs-menu-panel.ngs-menu-below{transform-origin:top}.ngs-menu-panel.ngs-menu-below.ngs-menu-before{transform-origin:top right}.ngs-menu-panel.ngs-menu-below.ngs-menu-after{transform-origin:top left}.ngs-menu-panel.ngs-menu-above{transform-origin:bottom}.ngs-menu-panel.ngs-menu-above.ngs-menu-before{transform-origin:bottom right}.ngs-menu-panel.ngs-menu-above.ngs-menu-after{transform-origin:bottom left}@keyframes ngs-menu-panel-showing{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ngs-menu-content{padding:var(--ngs-menu-padding, 0)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuContent), { isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class MenuDivider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MenuDivider, isStandalone: true, selector: "ngs-menu-divider", ngImport: i0, template: "", styles: [":host{display:block;height:1px;background:var(--ngs-menu-divider-color, var(--color-subtle));margin:var(--ngs-menu-divider-margin, calc(var(--spacing, .25rem) * 2) 0)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuDivider, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-menu-divider', imports: [], template: "", styles: [":host{display:block;height:1px;background:var(--ngs-menu-divider-color, var(--color-subtle));margin:var(--ngs-menu-divider-margin, calc(var(--spacing, .25rem) * 2) 0)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class MenuHeading {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MenuHeading, isStandalone: true, selector: "ngs-menu-heading", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem;margin:calc(var(--spacing, .25rem) * 2) 0;padding:0 calc(var(--spacing, .25rem) * 3);color:var(--color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuHeading, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-menu-heading', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem;margin:calc(var(--spacing, .25rem) * 2) 0;padding:0 calc(var(--spacing, .25rem) * 3);color:var(--color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class MenuTrigger {
+    _overlay = inject(Overlay);
+    _elementRef = inject((ElementRef));
+    _viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    _injector = inject(Injector);
+    _parentMenu = inject(Menu, { optional: true, skipSelf: true });
+    _menu = inject(Menu, { optional: true });
+    menu = input(null, { ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'ngsMenuTriggerFor' });
+    menuData = input(undefined, { ...(ngDevMode ? { debugName: "menuData" } : /* istanbul ignore next */ {}), alias: 'ngsMenuTriggerData' });
+    menuDisabled = input(false, { ...(ngDevMode ? { debugName: "menuDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsMenuDisabled' });
+    xPosition = input('after', ...(ngDevMode ? [{ debugName: "xPosition" }] : /* istanbul ignore next */ []));
+    yPosition = input('below', ...(ngDevMode ? [{ debugName: "yPosition" }] : /* istanbul ignore next */ []));
+    menuOpened = output();
+    menuClosed = output();
+    restoreFocus = input(true, { ...(ngDevMode ? { debugName: "restoreFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsMenuTriggerRestoreFocus' });
+    _overlayRef = null;
+    _portal = null;
+    _closingSubscription = Subscription.EMPTY;
+    _hoverSubscription = Subscription.EMPTY;
+    _childMenuClosedSubscription = Subscription.EMPTY;
+    _closeTimeoutId;
+    _previouslyFocusedElement = null;
+    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this._closingSubscription.unsubscribe();
+        this._hoverSubscription.unsubscribe();
+        this._childMenuClosedSubscription.unsubscribe();
+        this._clearCloseTimeout();
+    }
+    _handleMouseLeave() {
+    }
+    _clearCloseTimeout() {
+        if (this._closeTimeoutId) {
+            clearTimeout(this._closeTimeoutId);
+            this._closeTimeoutId = null;
+        }
+    }
+    _handleClick(event) {
+        const menuItem = this._injector.get(MENU_ITEM, null);
+        if (menuItem) {
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+        this.toggleMenu();
+    }
+    toggleMenu() {
+        if (this.menuDisabled()) {
+            return;
+        }
+        if (this._parentMenu) {
+            this.openMenu();
+        }
+        else {
+            this.menuOpen() ? this.closeMenu('click') : this.openMenu();
+        }
+    }
+    openMenu() {
+        const menu = this.menu();
+        if (this.menuOpen() || !menu) {
+            return;
+        }
+        this._previouslyFocusedElement = document.activeElement;
+        const overlayRef = this._createOverlay();
+        const strategy = overlayRef.getConfig().positionStrategy;
+        strategy.positionChanges.subscribe(change => {
+            menu._setPanelClasses(this._getPanelClasses(change.connectionPair));
+        });
+        menu._setContext(this.menuData());
+        this._portal = new TemplatePortal(menu.templateRef(), this._viewContainerRef, this._viewContainerRef.injector);
+        overlayRef.attach(this._portal);
+        if (overlayRef.hasAttached()) {
+            this._setIsMenuOpen(true);
+            const overlayElement = overlayRef.overlayElement;
+            this._hoverSubscription.unsubscribe();
+            this._hoverSubscription = merge(fromEvent(overlayElement, 'mouseenter'), fromEvent(overlayElement, 'mouseleave')).subscribe(event => {
+                if (event.type === 'mouseenter') {
+                    this._clearCloseTimeout();
+                }
+                else {
+                    this._handleMouseLeave();
+                }
+            });
+        }
+        if (this._menu) {
+            this._menu._triggerOpened(this);
+            this._childMenuClosedSubscription.unsubscribe();
+            this._childMenuClosedSubscription = this._menu._childMenuClosed.subscribe(() => {
+                this._handleMouseLeave();
+            });
+        }
+        this._closingSubscription = this._menuClosingActions().subscribe(reason => this.closeMenu(reason));
+        this.menuOpened.emit();
+    }
+    closeMenu(reason, force = false) {
+        if (!this._overlayRef || !this.menuOpen()) {
+            return;
+        }
+        if (!force && reason === 'mouse' && this.menu()?.hasOpenChild()) {
+            return;
+        }
+        this._setIsMenuOpen(false);
+        const menu = this.menu();
+        if (menu) {
+            menu.close(reason);
+        }
+        if (this._menu) {
+            this._menu._triggerClosed(this);
+        }
+        this._overlayRef.detach();
+        this._closingSubscription.unsubscribe();
+        this._hoverSubscription.unsubscribe();
+        this._childMenuClosedSubscription.unsubscribe();
+        this._clearCloseTimeout();
+        this.menuClosed.emit(reason);
+        if (this.restoreFocus() && this._previouslyFocusedElement) {
+            this._previouslyFocusedElement.focus();
+        }
+        this._previouslyFocusedElement = null;
+        if (reason === 'click' && this._parentMenu) {
+            this._parentMenu.close('click');
+        }
+    }
+    _setIsMenuOpen(isOpen) {
+        this.menuOpen.set(isOpen);
+    }
+    _getPanelClasses(connectionPair) {
+        const classes = [];
+        const isBelow = connectionPair.overlayY === 'top';
+        const isBefore = connectionPair.overlayX === 'end';
+        if (isBelow) {
+            classes.push('ngs-menu-below');
+        }
+        else {
+            classes.push('ngs-menu-above');
+        }
+        if (isBefore) {
+            classes.push('ngs-menu-before');
+        }
+        else {
+            classes.push('ngs-menu-after');
+        }
+        return classes;
+    }
+    _createOverlay() {
+        if (!this._overlayRef) {
+            const config = this._getOverlayConfig();
+            this._overlayRef = this._overlay.create(config);
+            this._overlayRef
+                .keydownEvents()
+                .pipe(filter(event => event.key === 'Escape'))
+                .subscribe(() => this.closeMenu('keydown'));
+            this._overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                if (this._parentMenu && this._elementRef.nativeElement.contains(event.target)) {
+                    return;
+                }
+                this.closeMenu('backdrop');
+            });
+        }
+        return this._overlayRef;
+    }
+    _getOverlayConfig() {
+        return new OverlayConfig({
+            positionStrategy: this._overlay.position()
+                .flexibleConnectedTo(this._elementRef)
+                .withLockedPosition(false)
+                .withTransformOriginOn('.ngs-menu-panel')
+                .withPositions(this._getPositions())
+                .withPush(false),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            hasBackdrop: !this._parentMenu,
+            backdropClass: 'cdk-overlay-transparent-backdrop'
+        });
+    }
+    _getPositions() {
+        const menu = this.menu();
+        if (this._parentMenu) {
+            return [
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetX: 0,
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetX: 0,
+                },
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetX: 0,
+                },
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    offsetX: 0,
+                }
+            ];
+        }
+        const xPosition = menu?.xPosition() || this.xPosition();
+        const yPosition = menu?.yPosition() || this.yPosition();
+        if (yPosition === 'above') {
+            return [
+                {
+                    originX: xPosition === 'before' ? 'end' : 'start',
+                    originY: 'top',
+                    overlayX: xPosition === 'before' ? 'end' : 'start',
+                    overlayY: 'bottom',
+                },
+                {
+                    originX: xPosition === 'before' ? 'start' : 'end',
+                    originY: 'top',
+                    overlayX: xPosition === 'before' ? 'start' : 'end',
+                    overlayY: 'bottom',
+                },
+                {
+                    originX: xPosition === 'before' ? 'end' : 'start',
+                    originY: 'bottom',
+                    overlayX: xPosition === 'before' ? 'end' : 'start',
+                    overlayY: 'top',
+                },
+                {
+                    originX: xPosition === 'before' ? 'start' : 'end',
+                    originY: 'bottom',
+                    overlayX: xPosition === 'before' ? 'start' : 'end',
+                    overlayY: 'top',
+                },
+            ];
+        }
+        return [
+            {
+                originX: xPosition === 'before' ? 'end' : 'start',
+                originY: 'bottom',
+                overlayX: xPosition === 'before' ? 'end' : 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: xPosition === 'before' ? 'start' : 'end',
+                originY: 'bottom',
+                overlayX: xPosition === 'before' ? 'start' : 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: xPosition === 'before' ? 'end' : 'start',
+                originY: 'top',
+                overlayX: xPosition === 'before' ? 'end' : 'start',
+                overlayY: 'bottom',
+            },
+            {
+                originX: xPosition === 'before' ? 'start' : 'end',
+                originY: 'top',
+                overlayX: xPosition === 'before' ? 'start' : 'end',
+                overlayY: 'bottom',
+            },
+        ];
+    }
+    _menuClosingActions() {
+        const menu = this.menu();
+        const detachments = this._overlayRef.detachments();
+        const menuClosed = menu ? outputToObservable(menu.closed) : EMPTY;
+        const parentMenuClosed = this._parentMenu ? outputToObservable(this._parentMenu.closed) : EMPTY;
+        return merge(detachments, menuClosed, parentMenuClosed).pipe(filter((reason) => !!reason));
+    }
+    _handleMouseEnter() {
+        this._clearCloseTimeout();
+        if (this._parentMenu) {
+            this.openMenu();
+        }
+        else if (this._menu) {
+            this.openMenu();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: MenuTrigger, isStandalone: true, selector: "[ngsMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "ngsMenuTriggerFor", isSignal: true, isRequired: false, transformFunction: null }, menuData: { classPropertyName: "menuData", publicName: "ngsMenuTriggerData", isSignal: true, isRequired: false, transformFunction: null }, menuDisabled: { classPropertyName: "menuDisabled", publicName: "ngsMenuDisabled", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "ngsMenuTriggerRestoreFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave()" }, properties: { "attr.aria-expanded": "menuOpen()", "attr.aria-controls": "menuOpen() ? menu()?.templateRef() : null", "class.ngs-menu-item-highlighted": "menuOpen()" } }, providers: [
+            {
+                provide: MENU_TRIGGER,
+                useExisting: forwardRef(() => MenuTrigger)
+            }
+        ], exportAs: ["ngsMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsMenuTriggerFor]',
+                    exportAs: 'ngsMenuTrigger',
+                    standalone: true,
+                    host: {
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'menuOpen()',
+                        '[attr.aria-controls]': 'menuOpen() ? menu()?.templateRef() : null',
+                        '[class.ngs-menu-item-highlighted]': 'menuOpen()',
+                        '(click)': '_handleClick($event)',
+                        '(mouseenter)': '_handleMouseEnter()',
+                        '(mouseleave)': '_handleMouseLeave()',
+                    },
+                    providers: [
+                        {
+                            provide: MENU_TRIGGER,
+                            useExisting: forwardRef(() => MenuTrigger)
+                        }
+                    ]
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsMenuTriggerFor", required: false }] }], menuData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsMenuTriggerData", required: false }] }], menuDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsMenuDisabled", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsMenuTriggerRestoreFocus", required: false }] }] } });
+
+class ContextMenuTrigger {
+    _overlay = inject(Overlay);
+    _elementRef = inject((ElementRef));
+    _viewContainerRef = inject(ViewContainerRef);
+    _ngZone = inject(NgZone);
+    menu = input(null, { ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'ngsContextMenuTriggerFor' });
+    menuData = input(undefined, { ...(ngDevMode ? { debugName: "menuData" } : /* istanbul ignore next */ {}), alias: 'ngsContextMenuTriggerData' });
+    menuOpened = output();
+    menuClosed = output();
+    _overlayRef = null;
+    _portal = null;
+    _closingSubscription = Subscription.EMPTY;
+    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this._closingSubscription.unsubscribe();
+    }
+    openMenu(x, y) {
+        const menu = this.menu();
+        if (this.menuOpen() || !menu) {
+            return;
+        }
+        const overlayRef = this._createOverlay(x, y);
+        const strategy = overlayRef.getConfig().positionStrategy;
+        strategy.positionChanges.subscribe(change => {
+            menu._setPanelClasses(this._getPanelClasses(change.connectionPair));
+        });
+        menu._setContext(this.menuData());
+        this._portal = new TemplatePortal(menu.templateRef(), this._viewContainerRef);
+        overlayRef.attach(this._portal);
+        if (overlayRef.hasAttached()) {
+            this._setIsMenuOpen(true);
+        }
+        this._closingSubscription = this._menuClosingActions().subscribe(reason => this.closeMenu(reason));
+        this.menuOpened.emit();
+    }
+    closeMenu(reason) {
+        if (!this._overlayRef || !this.menuOpen()) {
+            return;
+        }
+        this._setIsMenuOpen(false);
+        const menu = this.menu();
+        if (menu) {
+            menu.close(reason);
+        }
+        this._overlayRef.detach();
+        this._closingSubscription.unsubscribe();
+        this.menuClosed.emit(reason);
+    }
+    _setIsMenuOpen(isOpen) {
+        this.menuOpen.set(isOpen);
+    }
+    _getPanelClasses(connectionPair) {
+        const classes = [];
+        const isBelow = connectionPair.overlayY === 'top';
+        const isBefore = connectionPair.overlayX === 'end';
+        if (isBelow) {
+            classes.push('ngs-menu-below');
+        }
+        else {
+            classes.push('ngs-menu-above');
+        }
+        if (isBefore) {
+            classes.push('ngs-menu-before');
+        }
+        else {
+            classes.push('ngs-menu-after');
+        }
+        return classes;
+    }
+    _createOverlay(x, y) {
+        if (this._overlayRef) {
+            this._overlayRef.updatePositionStrategy(this._getPositionStrategy(x, y));
+            return this._overlayRef;
+        }
+        const config = this._getOverlayConfig(x, y);
+        this._overlayRef = this._overlay.create(config);
+        this._overlayRef.keydownEvents()
+            .pipe(filter(event => event.key === 'Escape'))
+            .subscribe(() => this.closeMenu('keydown'));
+        this._overlayRef.backdropClick().subscribe(() => this.closeMenu('backdrop'));
+        return this._overlayRef;
+    }
+    _getOverlayConfig(x, y) {
+        return new OverlayConfig({
+            positionStrategy: this._getPositionStrategy(x, y),
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+    }
+    _getPositionStrategy(x, y) {
+        return this._overlay.position()
+            .flexibleConnectedTo({ x, y })
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+        ]);
+    }
+    _menuClosingActions() {
+        const menu = this.menu();
+        const detachments = this._overlayRef.detachments();
+        const menuClosed = menu ? outputToObservable(menu.closed) : EMPTY;
+        return merge(detachments, menuClosed).pipe(filter((reason) => !!reason));
+    }
+    _handleContextMenu(event) {
+        event.preventDefault();
+        if (this.menuOpen()) {
+            this.closeMenu('click');
+        }
+        this.openMenu(event.clientX, event.clientY);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ContextMenuTrigger, isStandalone: true, selector: "[ngsContextMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "ngsContextMenuTriggerFor", isSignal: true, isRequired: false, transformFunction: null }, menuData: { classPropertyName: "menuData", publicName: "ngsContextMenuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "contextmenu": "_handleContextMenu($event)" } }, exportAs: ["ngsContextMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsContextMenuTriggerFor]',
+                    exportAs: 'ngsContextMenuTrigger',
+                    standalone: true,
+                    host: {
+                        '(contextmenu)': '_handleContextMenu($event)',
+                    }
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsContextMenuTriggerFor", required: false }] }], menuData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsContextMenuTriggerData", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
+
+class MenuHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MenuHeader, isStandalone: true, selector: "ngs-menu-header", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;padding:var(--ngs-menu-footer-padding, 0 calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-menu-header', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;padding:var(--ngs-menu-footer-padding, 0 calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class MenuFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MenuFooter, isStandalone: true, selector: "ngs-menu-footer", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;padding:var(--ngs-menu-footer-padding, calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) 0 calc(var(--spacing, .25rem) * 3))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuFooter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-menu-footer', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;padding:var(--ngs-menu-footer-padding, calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) 0 calc(var(--spacing, .25rem) * 3))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/**
+ * Injection token used to provide the parent component to options.
+ */
+const OPTION_PARENT_COMPONENT = new InjectionToken('OPTION_PARENT_COMPONENT');
+
+class MenuOptionGroupDirective {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _destroyRef = inject(DestroyRef);
+    _menu = inject(Menu, { optional: true });
+    disableRipple = false;
+    inertGroups = false;
+    hideSingleSelectionIndicator = false;
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    multipleSignal = computed(() => this.multiple(), ...(ngDevMode ? [{ debugName: "multipleSignal" }] : /* istanbul ignore next */ []));
+    hideCheckIcon = signal(false, ...(ngDevMode ? [{ debugName: "hideCheckIcon" }] : /* istanbul ignore next */ []));
+    _optionsContentChanges = signal(0, ...(ngDevMode ? [{ debugName: "_optionsContentChanges" }] : /* istanbul ignore next */ []));
+    _selectionModel;
+    _value;
+    options = contentChildren(Option, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    ngsOptions = contentChildren(forwardRef(() => Option), { ...(ngDevMode ? { debugName: "ngsOptions" } : /* istanbul ignore next */ {}), descendants: true });
+    _options$ = toObservable(this.options);
+    _ngsOptions$ = toObservable(this.ngsOptions);
+    _initialized = new Subject();
+    valueChange = output();
+    optionSelectionChanges = merge(this._options$, this._ngsOptions$).pipe(startWith(null), switchMap(() => {
+        const options = this.options();
+        const ngsOptions = this.ngsOptions();
+        const streams = [
+            ...options.map(option => outputToObservable(option.onSelectionChange)),
+            ...ngsOptions.map(option => outputToObservable(option.onSelectionChange))
+        ];
+        if (streams.length === 0) {
+            return EMPTY;
+        }
+        return merge(...streams);
+    }));
+    onChange = () => { };
+    onTouched = () => { };
+    ngOnInit() {
+        this._selectionModel = new SelectionModel(this.multiple());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    ngAfterContentInit() {
+        this.optionSelectionChanges
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((res) => {
+            let source;
+            if (res instanceof Option) {
+                source = res;
+            }
+            else if (res && res.source instanceof Option) {
+                source = res.source;
+            }
+            else {
+                source = res;
+            }
+            if (source instanceof Option) {
+                this._value = source.value();
+            }
+            else if (source && typeof source.value === 'function') {
+                this._value = source.value();
+            }
+            else {
+                this._value = source.value;
+            }
+            this._selectOptionByValue();
+            this.onChange(this._value);
+            if (!this.multiple) {
+                this._menu?.close('click');
+            }
+        });
+        this._options$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._selectOptionByValue();
+        });
+        this._ngsOptions$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._selectOptionByValue();
+        });
+    }
+    _selectOptionByValue() {
+        const options = this.options();
+        const ngsOptions = this.ngsOptions();
+        options.forEach(option => {
+            if (option.value === this._value) {
+                option.select();
+            }
+            else {
+                option.deselect();
+            }
+        });
+        ngsOptions.forEach(option => {
+            if (option.value() === this._value) {
+                option.select();
+            }
+            else {
+                option.deselect();
+            }
+        });
+        this._changeDetectorRef.markForCheck();
+    }
+    writeValue(newValue) {
+        if (newValue !== this._value) {
+            this._value = newValue;
+            this._selectOptionByValue();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuOptionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.4", type: MenuOptionGroupDirective, isStandalone: true, selector: "[ngsMenuOptionGroup]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: OPTION_PARENT_COMPONENT,
+                useExisting: MenuOptionGroupDirective
+            },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MenuOptionGroupDirective),
+                multi: true
+            },
+            {
+                provide: SELECT,
+                useFactory: (directive) => {
+                    return {
+                        multiple: directive.multipleSignal,
+                        hideCheckIcon: directive.hideCheckIcon,
+                        _optionsContentChanges: directive._optionsContentChanges
+                    };
+                },
+                deps: [forwardRef(() => MenuOptionGroupDirective)]
+            }
+        ], queries: [{ propertyName: "options", predicate: Option, descendants: true, isSignal: true }, { propertyName: "ngsOptions", predicate: i0.forwardRef(() => Option), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuOptionGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsMenuOptionGroup]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: OPTION_PARENT_COMPONENT,
+                            useExisting: MenuOptionGroupDirective
+                        },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MenuOptionGroupDirective),
+                            multi: true
+                        },
+                        {
+                            provide: SELECT,
+                            useFactory: (directive) => {
+                                return {
+                                    multiple: directive.multipleSignal,
+                                    hideCheckIcon: directive.hideCheckIcon,
+                                    _optionsContentChanges: directive._optionsContentChanges
+                                };
+                            },
+                            deps: [forwardRef(() => MenuOptionGroupDirective)]
+                        }
+                    ]
+                }]
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Option), { ...{ descendants: true }, isSignal: true }] }], ngsOptions: [{ type: i0.ContentChildren, args: [forwardRef(() => Option), { ...{ descendants: true }, isSignal: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContextMenuTrigger, Menu, MenuContent, MenuDivider, MenuFooter, MenuHeader, MenuHeading, MenuItem, MenuOptionGroupDirective, MenuTrigger };
+//# sourceMappingURL=ngstarter-ui-components-menu.mjs.map