@ojiepermana/angular 22.1.10 → 22.1.12

package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs

@@ -1,7 +1,693 @@
-export * from '@ojiepermana/angular-component/dropdown-menu';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, output, Directive, computed, Component, model, forwardRef, contentChildren, Injector, TemplateRef, ViewContainerRef, DestroyRef, signal } from '@angular/core';
+import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { connectedPositionFor, oppositeSide } from '@ojiepermana/angular/component/utils/overlay';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const MENU_OVERLAY = new InjectionToken('MenuOverlayController');
+/**
+ * Marker every `MenuTrigger` provides on its own element.
+ *
+ * A submenu is a menu item that also opens a menu. Choosing it must open the
+ * submenu, not close the menu it lives in, so an item that finds this marker on
+ * itself skips the close-after-select step.
+ */
+const MENU_SUBMENU_TRIGGER = new InjectionToken('MenuSubmenuTrigger');
+
+class MenuFocusableItem {
+    el = inject(ElementRef);
+    /** Present whenever the item is rendered inside a `MenuTrigger` overlay. */
+    overlay = inject(MENU_OVERLAY, { optional: true });
+    /** True when this same element also opens a submenu. */
+    opensSubmenu = inject(MENU_SUBMENU_TRIGGER, { optional: true, self: true }) ?? false;
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    inset = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    selected = output();
+    get disabled() {
+        return this.disabledInput();
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    getLabel() {
+        return this.el.nativeElement.textContent?.trim() ?? '';
+    }
+    buildItemClasses(extraClass = '') {
+        return cn('relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'transition-colors focus:bg-accent focus:text-accent-foreground', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', 'data-[inset=true]:pl-8', 'data-[variant=destructive]:text-destructive', 'data-[variant=destructive]:focus:bg-destructive/10', 'data-[variant=destructive]:focus:text-destructive', extraClass, this.class());
+    }
+    /**
+     * Consume the keystroke that activated the item.
+     *
+     * Items render on `button` hosts, and a button turns Enter and Space into an
+     * activation click of its own. With `(click)` and `(keydown.enter|space)` both
+     * wired to the same handler that click runs the handler a SECOND time: a
+     * checkbox toggled on keydown flipped straight back, so `aria-checked` never
+     * moved, and a plain item emitted `selected` twice whenever the menu was told
+     * not to close. Preventing the default suppresses the synthesised click, which
+     * leaves exactly one activation per keystroke on native and non-native hosts
+     * alike. It also stops Space from scrolling the page behind the menu.
+     */
+    emitSelection(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return false;
+        }
+        if (event.type === 'keydown') {
+            event.preventDefault();
+        }
+        this.selected.emit(event);
+        return true;
+    }
+    /**
+     * Close the menu and return focus to the trigger, which is the menu pattern.
+     *
+     * Call this AFTER the item has updated its own state: closing tears down the
+     * overlay view, and a checkbox or radio that wrote its model afterwards would
+     * never propagate the change. A consumer that already closes the menu by hand
+     * is fine, closing twice is a no-op.
+     */
+    finishSelection() {
+        if (this.opensSubmenu) {
+            return;
+        }
+        this.overlay?.closeAfterSelect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuFocusableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: MenuFocusableItem, isStandalone: true, inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuFocusableItem, decorators: [{
+            type: Directive
+        }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+class MenuGroupComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: MenuGroupComponent, isStandalone: true, selector: "MenuGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuGroup',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class MenuRadioGroupBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuRadioGroupBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: MenuRadioGroupBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuRadioGroupBase, decorators: [{
+            type: Directive
+        }] });
+class MenuRadioGroupComponent extends MenuRadioGroupBase {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    isChecked(value) {
+        return this.value() === value;
+    }
+    select(value) {
+        this.value.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: MenuRadioGroupComponent, isStandalone: true, selector: "MenuRadioGroup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, providers: [
+            { provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuRadioGroup',
+                    providers: [
+                        { provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class MenuItemComponent extends MenuFocusableItem {
+    classes = computed(() => this.buildItemClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    handleClick(e) {
+        if (!this.emitSelection(e)) {
+            return;
+        }
+        this.finishSelection();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: MenuItemComponent, isStandalone: true, selector: "MenuItem, button[MenuItem]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "handleClick($any($event))", "keydown.enter": "handleClick($any($event))", "keydown.space": "handleClick($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.data-inset": "inset() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuItem, button[MenuItem]',
+                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menuitem"',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? "true" : null',
+                        '[attr.data-inset]': 'inset() ? "true" : null',
+                        '[attr.data-variant]': 'variant()',
+                        '(click)': 'handleClick($any($event))',
+                        '(keydown.enter)': 'handleClick($any($event))',
+                        '(keydown.space)': 'handleClick($any($event))',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+class MenuCheckboxItemComponent extends MenuFocusableItem {
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    classes = computed(() => this.buildItemClasses('pl-8'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // A checkbox item does NOT close the menu, unlike a plain item or a radio.
+    //
+    // Ticking boxes is a repeated action by nature -- a column picker, a filter
+    // list -- and closing after each one turned "hide three columns" into three
+    // trips through the trigger. Radio stays as it is: choosing one of several
+    // genuinely ends the interaction, so closing there is right.
+    //
+    // Escape, Tab, a click outside, or picking a plain item all still close it, so
+    // there is no way to get stuck in an open menu.
+    toggle(event) {
+        if (!this.emitSelection(event)) {
+            return;
+        }
+        this.checked.set(!this.checked());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuCheckboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: MenuCheckboxItemComponent, isStandalone: true, selector: "MenuCheckboxItem, button[MenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "toggle($any($event))", "keydown.enter": "toggle($any($event))", "keydown.space": "toggle($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemcheckbox\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [
+            { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <svg
+          aria-hidden="true"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuCheckboxItem, button[MenuCheckboxItem]',
+                    providers: [
+                        { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menuitemcheckbox"',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? "true" : null',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[attr.data-variant]': 'variant()',
+                        '(click)': 'toggle($any($event))',
+                        '(keydown.enter)': 'toggle($any($event))',
+                        '(keydown.space)': 'toggle($any($event))',
+                    },
+                    template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <svg
+          aria-hidden="true"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+class MenuRadioItemComponent extends MenuFocusableItem {
+    group = inject(MenuRadioGroupBase);
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    checked = computed(() => this.group.isChecked(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    classes = computed(() => this.buildItemClasses('pl-8'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    select(event) {
+        if (!this.emitSelection(event)) {
+            return;
+        }
+        this.group.select(this.value());
+        this.finishSelection();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuRadioItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: MenuRadioItemComponent, isStandalone: true, selector: "MenuRadioItem, button[MenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "select($any($event))", "keydown.enter": "select($any($event))", "keydown.space": "select($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemradio\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [
+            { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
+      }
+    </span>
+    <ng-content />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuRadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuRadioItem, button[MenuRadioItem]',
+                    providers: [
+                        { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menuitemradio"',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? "true" : null',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[attr.data-variant]': 'variant()',
+                        '(click)': 'select($any($event))',
+                        '(keydown.enter)': 'select($any($event))',
+                        '(keydown.space)': 'select($any($event))',
+                    },
+                    template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
+      }
+    </span>
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+class MenuSeparatorComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('-mx-1 my-1 block h-px bg-border', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: MenuSeparatorComponent, isStandalone: true, selector: "MenuSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"separator\"", "attr.aria-orientation": "\"horizontal\"" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuSeparator',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"separator"',
+                        '[attr.aria-orientation]': '"horizontal"',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class MenuLabelComponent {
+    inset = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('px-2 py-1.5 text-sm font-semibold text-foreground', this.inset() ? 'pl-8' : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: MenuLabelComponent, isStandalone: true, selector: "MenuLabel", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuLabel',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class MenuShortcutComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: MenuShortcutComponent, isStandalone: true, selector: "MenuShortcut, span[MenuShortcut]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuShortcutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuShortcut, span[MenuShortcut]',
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Surface rendered inside the overlay. Hosts keyboard navigation for its items.
+ */
+class MenuSurfaceComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    items = contentChildren(MenuFocusableItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    /** Present whenever the surface is rendered by a `MenuTrigger`. */
+    overlay = inject(MENU_OVERLAY, { optional: true });
+    /**
+     * Emitted when the surface asks to be closed (today: on Tab). The trigger now
+     * closes itself, so consumers no longer have to wire this up; it stays for
+     * anyone who already listens to it.
+     */
+    closeRequested = output();
+    /** Tied to the trigger's `aria-controls`, so the pair references each other. */
+    surfaceId = this.overlay?.surfaceId ?? injectUniqueId('MenuSurface');
+    /** Names the menu after the control that opened it. */
+    labelledBy = this.overlay?.triggerId ?? null;
+    keyManager = new FocusKeyManager(this.items, inject(Injector))
+        .withWrap()
+        .withTypeAhead()
+        .skipPredicate((item) => item.disabled);
+    classes = computed(() => cn('z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ngAfterContentInit() {
+        // Focus the first enabled item when the menu opens.
+        queueMicrotask(() => this.keyManager.setFirstItemActive());
+    }
+    onArrow(e, delta) {
+        e.preventDefault();
+        this.keyManager.cancelTypeahead();
+        if (delta > 0) {
+            this.keyManager.setNextItemActive();
+        }
+        else {
+            this.keyManager.setPreviousItemActive();
+        }
+    }
+    // ArrowLeft closes a SUBMENU and hands focus back to the item that opened it,
+    // which is the menu pattern.
+    //
+    // A root menu leaves the key alone. The row of menus above it owns left and
+    // right there: a `Menubar` listens for them on its own overlay to walk to the
+    // neighbouring menu, and it only ever sees the key because this surface let it
+    // carry on bubbling.
+    onArrowLeft(e) {
+        if (!this.overlay?.isSubmenu) {
+            return;
+        }
+        e.preventDefault();
+        this.overlay.close();
+    }
+    onHome(e) {
+        e.preventDefault();
+        this.keyManager.cancelTypeahead();
+        this.keyManager.setFirstItemActive();
+    }
+    onEnd(e) {
+        e.preventDefault();
+        this.keyManager.cancelTypeahead();
+        this.keyManager.setLastItemActive();
+    }
+    // Routes printable characters into the key manager's type-ahead buffer, which
+    // is the only thing that fills it: `withTypeAhead()` above configures the
+    // buffer, but nothing reaches it unless `onKeydown` is called.
+    //
+    // Only printable characters are forwarded, and Space is not one of them here.
+    // Every other key already has an owner -- the arrows and Home/End above, Enter
+    // and Space on the item, Tab on the trigger -- and handing those to the key
+    // manager as well would run two handlers for one keystroke.
+    //
+    // Space belongs to the item unconditionally. Letting it extend a search in
+    // progress, so that a two-word label could be matched past its first word,
+    // would mean intercepting the key BEFORE the focused item acts on it: this
+    // listener runs on the bubbling phase, by which point `(keydown.space)` on the
+    // item has already activated it and closed the menu. Reaching it would take a
+    // capture-phase listener that swallows Space, which is a lot of machinery, and
+    // a way to activate an item that stops working mid-search, for a matching
+    // nicety the menu contract never asked for.
+    onTypeAhead(e) {
+        if (e.key.length !== 1 || e.key === ' ' || e.ctrlKey || e.metaKey || e.altKey) {
+            return;
+        }
+        this.keyManager.onKeydown(e);
+    }
+    onTab(e) {
+        // No preventDefault: the menu closes, focus goes back to the trigger, and
+        // the browser carries on with the tab sequence from there.
+        void e;
+        this.closeRequested.emit();
+        this.overlay?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: MenuSurfaceComponent, isStandalone: true, selector: "MenuSurface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.arrowLeft": "onArrowLeft($any($event))", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))", "keydown": "onTypeAhead($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menu\"", "attr.id": "surfaceId", "attr.aria-labelledby": "labelledBy" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuSurfaceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenuSurface',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menu"',
+                        '[attr.id]': 'surfaceId',
+                        '[attr.aria-labelledby]': 'labelledBy',
+                        tabindex: '-1',
+                        '(keydown.arrowDown)': 'onArrow($any($event), 1)',
+                        '(keydown.arrowUp)': 'onArrow($any($event), -1)',
+                        '(keydown.arrowLeft)': 'onArrowLeft($any($event))',
+                        '(keydown.home)': 'onHome($any($event))',
+                        '(keydown.end)': 'onEnd($any($event))',
+                        '(keydown.tab)': 'onTab($any($event))',
+                        '(keydown)': 'onTypeAhead($any($event))',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuFocusableItem), { ...{ descendants: true }, isSignal: true }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
+/**
+ * Wraps an `<ng-template>` that holds `<MenuSurface>` + items.
+ */
+class MenuContentDirective {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: MenuContentDirective, isStandalone: true, selector: "ng-template[MenuContent]", exportAs: ["MenuContent"], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[MenuContent]',
+                    exportAs: 'MenuContent',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Zero, because the gap between a trigger and its menu is NOT a position offset.
+ *
+ * CDK applies `offsetX`/`offsetY` as a `transform` on the pane, and it does so
+ * AFTER clamping the pane to the viewport -- so an offset pushes the panel back
+ * off screen by exactly its own size, which is how the panel's top edge ended up
+ * at minus four on a phone. The gap is transparent padding on the pane instead
+ * (`.menu-panel` in the theme's global layer): padding is part of the box CDK
+ * measures, so the clamp accounts for it.
+ */
+const MENU_SIDE_OFFSET = 0;
+/**
+ * Opens an `<ng-template MenuContent>` anchored to the trigger element.
+ */
+class MenuTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    /**
+     * The controller of the menu this trigger lives in, if any. Present only when
+     * the trigger is itself an item of another menu, which is exactly what makes
+     * the menu it opens a submenu.
+     */
+    parentMenu = inject(MENU_OVERLAY, { optional: true });
+    MenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "MenuTrigger" }] : /* istanbul ignore next */ []));
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Close the menu when an item is chosen, which is the WAI ARIA menu pattern
+     * and the default here. Set it to `false` for a menu that stays open, for
+     * example a list of checkbox items the user toggles several of in a row.
+     */
+    closeOnSelect = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    /**
+     * Id used for `aria-controls` and for the surface's `aria-labelledby`. A
+     * consumer's own `id` on the trigger element always wins.
+     */
+    triggerId = this.el.nativeElement.id || injectUniqueId('MenuTrigger');
+    surfaceId = injectUniqueId('MenuSurface');
+    openedChange = output();
+    overlayRef = null;
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false }));
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    openAndFocus(e) {
+        if (this.disabled())
+            return;
+        e.preventDefault();
+        this.open();
+    }
+    openForSide(e, side) {
+        if (this.disabled() || this.side() !== side)
+            return;
+        e.preventDefault();
+        this.open();
+    }
+    open() {
+        if (this.isOpen() || this.disabled())
+            return;
+        const primary = connectedPositionFor(this.side(), this.align(), MENU_SIDE_OFFSET);
+        const fallbackSide = this.side() === 'top' || this.side() === 'bottom' ? oppositeSide(this.side()) : this.side();
+        const fallback = connectedPositionFor(fallbackSide, this.align(), MENU_SIDE_OFFSET);
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.el)
+                .withPositions([primary, fallback]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'menu-panel',
+        });
+        const controller = {
+            surfaceId: this.surfaceId,
+            triggerId: this.triggerId,
+            isSubmenu: this.parentMenu !== null,
+            close: () => this.close(),
+            closeAfterSelect: () => {
+                if (this.closeOnSelect())
+                    this.close();
+            },
+        };
+        const portal = new TemplatePortal(this.MenuTrigger().template, this.vcr, undefined, Injector.create({
+            parent: this.injector,
+            providers: [{ provide: MENU_OVERLAY, useValue: controller }],
+        }));
+        this.overlayRef.attach(portal);
+        merge(this.overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((e) => !this.el.nativeElement.contains(e.target))), this.overlayRef.detachments())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close({ restoreFocus: false }));
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Escape'))
+            .subscribe(() => this.close());
+        // Tab closes the menu and hands focus back to the trigger WITHOUT preventing
+        // the default, so the browser then continues the tab sequence from the
+        // trigger. That is what the menu pattern asks for: Tab leaves the menu and
+        // lands wherever normal tab order says, rather than being swallowed.
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Tab'))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close(options = {}) {
+        const { restoreFocus = true } = options;
+        if (!this.isOpen())
+            return;
+        const overlayRef = this.overlayRef;
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        overlayRef?.dispose();
+        if (!this.destroyRef.destroyed) {
+            this.openedChange.emit(false);
+        }
+        if (restoreFocus) {
+            this.el.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: MenuTriggerDirective, isStandalone: true, selector: "[MenuTrigger]", inputs: { MenuTrigger: { classPropertyName: "MenuTrigger", publicName: "MenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "openAndFocus($any($event))", "keydown.space": "openAndFocus($any($event))", "keydown.arrowDown": "openAndFocus($any($event))", "keydown.arrowRight": "openForSide($any($event), \"right\")", "keydown.arrowLeft": "openForSide($any($event), \"left\")" }, properties: { "attr.id": "triggerId", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? surfaceId : null" } }, providers: [{ provide: MENU_SUBMENU_TRIGGER, useValue: true }], exportAs: ["MenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[MenuTrigger]',
+                    exportAs: 'MenuTrigger',
+                    providers: [{ provide: MENU_SUBMENU_TRIGGER, useValue: true }],
+                    host: {
+                        '[attr.id]': 'triggerId',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'isOpen() ? surfaceId : null',
+                        '(click)': 'toggle()',
+                        '(keydown.enter)': 'openAndFocus($any($event))',
+                        '(keydown.space)': 'openAndFocus($any($event))',
+                        '(keydown.arrowDown)': 'openAndFocus($any($event))',
+                        '(keydown.arrowRight)': 'openForSide($any($event), "right")',
+                        '(keydown.arrowLeft)': 'openForSide($any($event), "left")',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { MenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "MenuTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { MENU_OVERLAY, MENU_SUBMENU_TRIGGER, MenuCheckboxItemComponent, MenuContentDirective, MenuFocusableItem, MenuGroupComponent, MenuItemComponent, MenuLabelComponent, MenuRadioGroupBase, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective };