@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-menubar.mjs

@@ -0,0 +1,966 @@
+import * as i0 from '@angular/core';
+import { Directive, contentChildren, input, contentChild, TemplateRef, computed, ChangeDetectionStrategy, Component, effect, forwardRef, inject, DestroyRef, DOCUMENT, ElementRef, signal, viewChildren, output, untracked, afterNextRender } from '@angular/core';
+import { PopupMenuToken, preparePopupMenuItems, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuTemplateOrigin, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent, PopupMenuGroupTemplateDirective, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuComponent } from '@nanahoshi/mona-ui/popup-menu';
+import { any, zip, rotate } from '@mirei/ts-collections';
+import { v4 } from 'uuid';
+import { NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { Subject, startWith, pairwise, tap } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class MenuIconTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuIconTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MenuIconTemplateDirective, isStandalone: true, selector: "ng-template[monaMenuIconTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMenuIconTemplate]"
+                }]
+        }] });
+
+class MenuTextTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MenuTextTemplateDirective, isStandalone: true, selector: "ng-template[monaMenuTextTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMenuTextTemplate]"
+                }]
+        }] });
+
+class MenuComponent {
+    constructor() {
+        this.menuItemComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "menuItemComponents" } : /* istanbul ignore next */ {}), descendants: false });
+        /**
+         * @description Sets the menu as disabled.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.iconTemplate = contentChild(MenuIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Sets the items of the menu.
+         * If provided, it will override the menu items defined by the menu item components.
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.menuItems = computed(() => {
+            if (any(this.items())) {
+                return preparePopupMenuItems(this.items());
+            }
+            return this.menuItemComponents()
+                .map(item => item.getPopupMenuItem())
+                .flatMap(i => i);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.textTemplate = contentChild(MenuTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description The text of the menu.
+         */
+        this.text = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.uid = v4();
+        this.popupMenu = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: MenuComponent, isStandalone: true, selector: "mona-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: MenuIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: MenuTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuIconTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+
+const componentTypeMap = {
+    [PopupMenuItemType.CheckboxMenuItem]: "mona-menu-checkbox-item",
+    [PopupMenuItemType.MenuGroup]: "mona-menu-group",
+    [PopupMenuItemType.MenuItem]: "mona-menu-item",
+    [PopupMenuItemType.RadioGroup]: "mona-menu-radio-group",
+    [PopupMenuItemType.RadioItem]: "mona-menu-radio-item",
+    [PopupMenuItemType.Separator]: "mona-menu-separator"
+};
+const templateTypeMap = {
+    [PopupMenuTemplateType.Group]: "monaMenubarMenuGroupTemplate",
+    [PopupMenuTemplateType.Icon]: "monaMenubarMenuItemIconTemplate",
+    [PopupMenuTemplateType.Shortcut]: "monaMenubarMenuItemShortcutTemplate",
+    [PopupMenuTemplateType.Text]: "monaMenubarMenuItemTextTemplate"
+};
+const ensureMenubarComponentTypes = (components) => {
+    ensurePopupComponentTypes({
+        components,
+        componentTypeMap,
+        origin: PopupMenuOrigin.MenubarMenu,
+        prefix: "mona-menu"
+    });
+};
+const ensureMenubarTemplateTypes = (templates) => {
+    ensurePopupTemplateTypes({
+        templates,
+        templateTypeMap,
+        origin: PopupMenuTemplateOrigin.MenubarMenu,
+        prefix: "mona-menu"
+    });
+};
+
+class MenuCheckboxItemComponent extends PopupMenuCheckboxItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.MenubarMenu;
+        effect(() => ensureMenubarTemplateTypes([this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuCheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: MenuCheckboxItemComponent, isStandalone: true, selector: "mona-menu-checkbox-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => MenuCheckboxItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu-checkbox-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => MenuCheckboxItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class MenuGroupComponent extends PopupMenuGroupComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.MenubarMenu;
+        effect(() => ensureMenubarComponentTypes(this.items()));
+        effect(() => ensureMenubarTemplateTypes([this.groupTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: MenuGroupComponent, isStandalone: true, selector: "mona-menu-group", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => MenuGroupComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu-group",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => MenuGroupComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class MenuItemComponent extends PopupMenuItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.MenubarMenu;
+        effect(() => ensureMenubarComponentTypes(this.items()));
+        effect(() => ensureMenubarTemplateTypes([this.iconTemplateConfig(), this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: MenuItemComponent, isStandalone: true, selector: "mona-menu-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => MenuItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => MenuItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class MenuRadioGroupComponent extends PopupMenuRadioGroupComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.MenubarMenu;
+        effect(() => ensureMenubarComponentTypes(this.items()));
+        effect(() => ensureMenubarTemplateTypes([this.groupTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: MenuRadioGroupComponent, isStandalone: true, selector: "mona-menu-radio-group", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => MenuRadioGroupComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu-radio-group",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => MenuRadioGroupComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class MenuRadioItemComponent extends PopupMenuRadioItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.MenubarMenu;
+        effect(() => ensureMenubarTemplateTypes([this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: MenuRadioItemComponent, isStandalone: true, selector: "mona-menu-radio-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => MenuRadioItemComponent)
+            },
+            {
+                provide: PopupMenuRadioItemToken,
+                useExisting: forwardRef(() => MenuRadioItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuRadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu-radio-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => MenuRadioItemComponent)
+                        },
+                        {
+                            provide: PopupMenuRadioItemToken,
+                            useExisting: forwardRef(() => MenuRadioItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class MenuSeparatorComponent extends PopupMenuSeparatorComponent {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuOrigin.MenubarMenu;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuSeparatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: MenuSeparatorComponent, isStandalone: true, selector: "mona-menu-separator", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => MenuSeparatorComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-menu-separator",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => MenuSeparatorComponent)
+                        }
+                    ]
+                }]
+        }] });
+
+class MenuGroupTemplateDirective extends PopupMenuGroupTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.MenubarMenu;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuGroupTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MenuGroupTemplateDirective, isStandalone: true, selector: "ng-template[monaMenuGroupTemplate]", providers: [
+            {
+                provide: PopupMenuGroupTemplateToken,
+                useExisting: forwardRef(() => MenuGroupTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuGroupTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMenuGroupTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuGroupTemplateToken,
+                            useExisting: forwardRef(() => MenuGroupTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class MenuItemIconTemplateDirective extends PopupMenuIconTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.MenubarMenu;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemIconTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MenuItemIconTemplateDirective, isStandalone: true, selector: "ng-template[monaMenuItemIconTemplate]", providers: [
+            {
+                provide: PopupMenuIconTemplateToken,
+                useExisting: forwardRef(() => MenuItemIconTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMenuItemIconTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuIconTemplateToken,
+                            useExisting: forwardRef(() => MenuItemIconTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class MenuItemShortcutTemplateDirective extends PopupMenuShortcutTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.MenubarMenu;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemShortcutTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MenuItemShortcutTemplateDirective, isStandalone: true, selector: "ng-template[monaMenuItemShortcutTemplate]", providers: [
+            {
+                provide: PopupMenuShortcutTemplateToken,
+                useExisting: forwardRef(() => MenuItemShortcutTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemShortcutTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMenuItemShortcutTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuShortcutTemplateToken,
+                            useExisting: forwardRef(() => MenuItemShortcutTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class MenuItemTextTemplateDirective extends PopupMenuTextTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.MenubarMenu;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemTextTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MenuItemTextTemplateDirective, isStandalone: true, selector: "ng-template[monaMenuItemTextTemplate]", providers: [
+            {
+                provide: PopupMenuTextTemplateToken,
+                useExisting: forwardRef(() => MenuItemTextTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuItemTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMenuItemTextTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuTextTemplateToken,
+                            useExisting: forwardRef(() => MenuItemTextTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+const contextMenuContentVariants = cva(`
+        w-full gap-4 overflow-hidden
+        bg-background text-foreground
+        shadow-lg border border-border
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        },
+        size: {
+            small: "px-1 py-0.5",
+            medium: "px-1.5 py-1",
+            large: "px-2 py-1.5"
+        }
+    }
+});
+const contextMenuDividerVariants = cva(`-mx-0.5 my-1 h-px bg-border`);
+const menuItemGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2 py-1 w-full`, {
+    variants: {
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-md"
+        }
+    }
+});
+const menuItemIconVariants = cva(`absolute left-2 flex h-3.5 w-3.5 items-center justify-center`);
+const menuItemLinkVariants = cva(`flex h-3.5 w-3.5 items-center justify-center`);
+const menuItemShortcutVariants = cva(`flex items-center justify-end flex-1 opacity-60 text-xs`);
+const menuItemTextVariants = cva(`flex flex-1 items-center justify-start gap-2`);
+const menuItemVariants = cva(`
+        relative flex cursor-default select-none items-center px-2 py-1.5 gap-4
+        outline-none
+
+        hover:bg-hover
+        hover:text-hover-foreground
+
+        focus-within:bg-accent
+        focus-within:text-accent-foreground
+        focus-within:outline-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        data-[focused]:bg-accent
+        data-[focused]:text-accent-foreground
+    `, {
+    variants: {
+        size: {
+            small: "px-2 py-1 text-xs",
+            medium: "px-2 py-1.5 text-sm",
+            large: "px-3 py-2 text-md"
+        }
+    }
+});
+const menubarBaseVariants = cva(`
+        flex items-center justify-center
+        gap-1 overflow-hidden
+        bg-background text-foreground
+        shadow-sm border border-border
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        },
+        size: {
+            small: "h-8 text-xs",
+            medium: "h-10 text-sm",
+            large: "h-12 text-md"
+        }
+    }
+});
+const menubarListItemVariants = cva(`
+        h-full flex items-center justify-center
+        px-2 py-1.5
+        cursor-pointer outline-none
+
+        hover:bg-hover
+        hover:text-hover-foreground
+        focus-within:bg-accent
+        focus-within:text-accent-foreground
+        focus-within:outline-none
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+        data-[active='true']:bg-accent
+        data-[active='true']:text-accent-foreground
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        }
+    }
+});
+const menubarListVariants = cva(`
+        w-full h-full list-none
+        flex items-center select-none
+        p-1
+    `);
+
+const contextMenuContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return contextMenuContentVariants;
+        default:
+            return contextMenuContentVariants;
+    }
+};
+const contextMenuDividerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return contextMenuDividerVariants;
+        default:
+            return contextMenuDividerVariants;
+    }
+};
+const menuItemGroupHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menuItemGroupHeaderVariants;
+        default:
+            return menuItemGroupHeaderVariants;
+    }
+};
+const menuItemIconThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menuItemIconVariants;
+        default:
+            return menuItemIconVariants;
+    }
+};
+const menuItemLinkThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menuItemLinkVariants;
+        default:
+            return menuItemLinkVariants;
+    }
+};
+const menuItemShortcutThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menuItemShortcutVariants;
+        default:
+            return menuItemShortcutVariants;
+    }
+};
+const menuItemTextThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menuItemTextVariants;
+        default:
+            return menuItemTextVariants;
+    }
+};
+const menuItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menuItemVariants;
+        default:
+            return menuItemVariants;
+    }
+};
+const menubarBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menubarBaseVariants;
+        default:
+            return menubarBaseVariants;
+    }
+};
+const menubarListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menubarListItemVariants;
+        default:
+            return menubarListItemVariants;
+    }
+};
+const menubarListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return menubarListVariants;
+        default:
+            return menubarListVariants;
+    }
+};
+
+class MenubarComponent {
+    #destroyRef;
+    #document;
+    #hostElementRef;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#hostElementRef = inject((ElementRef));
+        this.#themeService = inject(ThemeService);
+        this.activeIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const userClasses = this.userClasses();
+            const variants = menubarBaseThemeVariants(theme)({ rounded, size });
+            return twMerge(variants, userClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.currentPopupElement = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPopupElement" }] : /* istanbul ignore next */ []));
+        this.currentPopupMenu = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPopupMenu" }] : /* istanbul ignore next */ []));
+        this.groupTemplate = contentChild(MenuGroupTemplateDirective, { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.iconTemplate = contentChild(MenuIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.listClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return menubarListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+        this.listItemClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return menubarListItemThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemClasses" }] : /* istanbul ignore next */ []));
+        this.menuItemIconTemplate = contentChild(MenuItemIconTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemIconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.menuItemShortcutTemplate = contentChild(MenuItemShortcutTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemShortcutTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.menuItemTextTemplate = contentChild(MenuItemTextTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemTextTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.menuList = contentChildren(MenuComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuList" }] : /* istanbul ignore next */ []));
+        this.navigate$ = new Subject();
+        this.popupMenuComponents = viewChildren(PopupMenuComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupMenuComponents" }] : /* istanbul ignore next */ []));
+        this.textTemplate = contentChild(MenuTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        /**
+         * @description ARIA label for the menubar.
+         */
+        this.ariaLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description ARIA labelledby for the menubar.
+         */
+        this.ariaLabelledby = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the disabled state of menubar.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when a menu item is clicked.
+         */
+        this.menuItemClick = output();
+        /**
+         * @description Sets the size of the menubar.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the rounded style of the menubar.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes to apply to the menubar, merged with the computed theme classes.
+         */
+        this.userClasses = input("", { ...(ngDevMode ? { debugName: "userClasses" } : /* istanbul ignore next */ {}), alias: "class" });
+        effect(() => {
+            const popupMenuComponents = this.popupMenuComponents();
+            untracked(() => {
+                zip(this.menuList(), popupMenuComponents).forEach(([menu, popupMenu]) => {
+                    menu.popupMenu = popupMenu;
+                });
+            });
+        });
+        effect(() => {
+            this.menuList();
+            untracked(() => {
+                this.currentPopupMenu()?.closeMenu();
+                this.currentPopupMenu.set(null);
+                this.currentPopupElement.set(null);
+            });
+        });
+        effect(() => {
+            const menuList = this.menuList();
+            untracked(() => {
+                const currentItem = menuList[this.activeIndex()];
+                if (!currentItem || currentItem.disabled()) {
+                    const fallbackIndex = menuList.findIndex(m => !m.disabled());
+                    this.activeIndex.set(fallbackIndex >= 0 ? fallbackIndex : 0);
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+    }
+    onMenuBlur(event) {
+        if (!this.currentPopupMenu()) {
+            const relatedTarget = event.relatedTarget;
+            const menubarElement = this.#hostElementRef.nativeElement;
+            if (!relatedTarget || !menubarElement.contains(relatedTarget)) {
+                this.currentPopupElement.set(null);
+            }
+        }
+    }
+    onMenuClick(event, item) {
+        if (this.disabled() || item.disabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    onMenuFocus(index) {
+        this.activeIndex.set(index);
+    }
+    onMenuItemClick(event) {
+        this.menuItemClick.emit(event);
+    }
+    onMenuKeyDown(event, item, popupMenu) {
+        if (this.disabled()) {
+            return;
+        }
+        switch (event.key) {
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (popupMenu && !item.disabled()) {
+                    popupMenu.openMenuViaKeyboard();
+                }
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                this.moveToNextMenu();
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                this.moveToPreviousMenu();
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                if (popupMenu && !item.disabled() && !this.currentPopupMenu()) {
+                    popupMenu.openMenuViaKeyboard();
+                }
+                break;
+            case "Home":
+                event.preventDefault();
+                this.moveToFirstMenu();
+                break;
+            case "End":
+                event.preventDefault();
+                this.moveToLastMenu();
+                break;
+            case "Escape":
+                event.preventDefault();
+                this.closeCurrentMenu();
+                break;
+        }
+    }
+    onMenuPointerEnter(item, element, popupMenu) {
+        if (this.disabled() || item.disabled() || this.currentPopupMenu() === popupMenu || !this.currentPopupMenu()) {
+            return;
+        }
+        this.currentPopupMenu()?.clearFocusRestoration();
+        this.currentPopupMenu()?.closeMenu();
+        this.currentPopupMenu.set(popupMenu);
+        this.currentPopupElement.set(element);
+        this.currentPopupMenu().openMenu(false);
+    }
+    onPopupMenuClose() {
+        this.currentPopupMenu.set(null);
+        this.currentPopupElement.set(null);
+    }
+    onPopupMenuOpen(popupMenu, element) {
+        if (this.currentPopupMenu() === popupMenu) {
+            return;
+        }
+        this.currentPopupMenu.set(popupMenu);
+        this.currentPopupElement.set(element);
+    }
+    closeCurrentMenu() {
+        if (this.currentPopupMenu()) {
+            this.currentPopupMenu()?.closeMenu();
+        }
+    }
+    findCurrentMenuIndex() {
+        let currentIndex = this.menuList().findIndex(n => n.popupMenu === this.currentPopupMenu());
+        if (currentIndex < 0) {
+            const focusedElement = this.#document.activeElement;
+            if (focusedElement && focusedElement.hasAttribute("data-mid")) {
+                const uid = focusedElement.getAttribute("data-mid");
+                currentIndex = this.menuList().findIndex(m => m.uid === uid);
+            }
+        }
+        return currentIndex >= 0 ? currentIndex : null;
+    }
+    findMenuElementByUid(uid) {
+        const menuList = this.menuList();
+        const index = menuList.findIndex(m => m.uid === uid);
+        if (index < 0) {
+            return null;
+        }
+        return this.#hostElementRef.nativeElement.querySelector(`li[data-mid="${uid}"]`);
+    }
+    findNextNonDisabledMenuIndex() {
+        const currentIndex = this.findCurrentMenuIndex();
+        if (currentIndex == null || currentIndex < 0) {
+            return this.menuList().findIndex(m => !m.disabled());
+        }
+        const next = rotate(this.menuList(), currentIndex)
+            .skip(1)
+            .firstOrDefault(m => !m.disabled());
+        if (next) {
+            return this.menuList().findIndex(m => m === next);
+        }
+        return -1;
+    }
+    findPreviousNonDisabledMenuIndex() {
+        let currentIndex = this.findCurrentMenuIndex();
+        if (currentIndex == null || currentIndex < 0) {
+            const menuList = this.menuList();
+            const lastEnabledIndex = menuList
+                .slice()
+                .reverse()
+                .findIndex(m => !m.disabled());
+            return lastEnabledIndex >= 0 ? menuList.length - 1 - lastEnabledIndex : -1;
+        }
+        const next = rotate(this.menuList(), currentIndex)
+            .reverse()
+            .firstOrDefault(m => !m.disabled());
+        if (next) {
+            return this.menuList().findIndex(m => m === next);
+        }
+        return -1;
+    }
+    focusMenuAt(index) {
+        const menu = this.menuList()[index];
+        if (menu && !menu.disabled()) {
+            const element = this.findMenuElementByUid(menu.uid);
+            if (element) {
+                element.focus();
+            }
+        }
+    }
+    moveToFirstMenu() {
+        const firstEnabledIndex = this.menuList().findIndex(m => !m.disabled());
+        if (firstEnabledIndex >= 0) {
+            this.focusMenuAt(firstEnabledIndex);
+        }
+    }
+    moveToLastMenu() {
+        const menuList = this.menuList();
+        const lastEnabledIndex = menuList
+            .slice()
+            .reverse()
+            .findIndex(m => !m.disabled());
+        if (lastEnabledIndex >= 0) {
+            const actualIndex = menuList.length - 1 - lastEnabledIndex;
+            this.focusMenuAt(actualIndex);
+        }
+    }
+    moveToNextMenu() {
+        const index = this.findNextNonDisabledMenuIndex();
+        if (index >= 0) {
+            this.focusMenuAt(index);
+        }
+    }
+    moveToPreviousMenu() {
+        const index = this.findPreviousNonDisabledMenuIndex();
+        if (index >= 0) {
+            this.focusMenuAt(index);
+        }
+    }
+    setNavigationSubscription() {
+        this.navigate$
+            .pipe(takeUntilDestroyed(this.#destroyRef), startWith(null), pairwise(), tap(([prev, next]) => {
+            if (next && next.direction === "right" && (next.level === 0 || (next.level > 0 && !next.item))) {
+                const index = this.findNextNonDisabledMenuIndex();
+                if (index >= 0) {
+                    this.updateCurrentMenuData(index);
+                }
+            }
+            else if (next && prev && next.direction === "left" && prev.level === 0 && next.level === 0) {
+                const index = this.findPreviousNonDisabledMenuIndex();
+                if (index >= 0) {
+                    this.updateCurrentMenuData(index);
+                }
+            }
+            if (next && this.currentPopupMenu()) {
+                this.currentPopupMenu()?.setRestoreFocusForKeyboard();
+            }
+        }))
+            .subscribe();
+    }
+    setSubscriptions() {
+        this.setNavigationSubscription();
+    }
+    updateCurrentMenuData(index) {
+        this.currentPopupMenu()?.clearFocusRestoration();
+        this.currentPopupMenu()?.closeMenu();
+        this.currentPopupMenu.set(this.menuList()[index].popupMenu);
+        const element = this.findMenuElementByUid(this.menuList()[index].uid);
+        this.currentPopupElement.set(element);
+        this.currentPopupMenu()?.openMenuViaKeyboard();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MenubarComponent, isStandalone: true, selector: "mona-menubar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()" } }, queries: [{ propertyName: "groupTemplate", first: true, predicate: MenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: MenuIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: MenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: MenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: MenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuList", predicate: MenuComponent, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: MenuTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupMenuComponents", predicate: PopupMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n    [class]=\"listClasses()\"\n    role=\"menubar\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\">\n    @for (item of menuList(); track item; let i = $index) {\n        @let menuIconTemplate = item.iconTemplate() ?? iconTemplate() ?? null;\n        @let menuTextTemplate = item.textTemplate() ?? textTemplate() ?? null;\n        @let menuId = item.uid + \"-menu\";\n        <li\n            [class]=\"listItemClasses()\"\n            [attr.data-disabled]=\"item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"item.disabled() ? -1 : i === activeIndex() ? 0 : -1\"\n            [attr.role]=\"'menuitem'\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"\n                currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? 'true' : 'false'\n            \"\n            [attr.aria-controls]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? menuId : null\"\n            [attr.aria-disabled]=\"item.disabled()\"\n            (pointerenter)=\"onMenuPointerEnter(item, listItemElement, popupMenu)\"\n            (keydown)=\"onMenuKeyDown($event, item, popupMenu)\"\n            (click)=\"onMenuClick($event, item)\"\n            (focus)=\"onMenuFocus(i)\"\n            (blur)=\"onMenuBlur($event)\"\n            #listItemElement>\n            @if (menuIconTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuIconTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\"></ng-container>\n            }\n            @if (!menuTextTemplate) {\n                <span>{{ item.text() }}</span>\n            } @else {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuTextTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\">\n                </ng-container>\n            }\n        </li>\n        <mona-popup-menu\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            [target]=\"listItemElement\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            (menuClick)=\"onMenuItemClick($event)\"\n            (navigate)=\"navigate$.next($event)\"\n            [trigger]=\"'click'\"\n            [offset]=\"{ horizontal: 0, vertical: 2 }\"\n            (close)=\"onPopupMenuClose()\"\n            (open)=\"onPopupMenuOpen(popupMenu, listItemElement)\"\n            [items]=\"item.menuItems()\"\n            [id]=\"menuId\"\n            #popupMenu>\n            @if (groupTemplate()) {\n                <ng-template monaPopupMenuGroupTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemIconTemplate()) {\n                <ng-template monaPopupMenuIconTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemShortcutTemplate()) {\n                <ng-template monaPopupMenuShortcutTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemTextTemplate()) {\n                <ng-template monaPopupMenuTextTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n        </mona-popup-menu>\n    }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenubarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-menubar", imports: [
+                        NgTemplateOutlet,
+                        PopupMenuComponent,
+                        PopupMenuTextTemplateDirective,
+                        PopupMenuIconTemplateDirective,
+                        PopupMenuShortcutTemplateDirective,
+                        PopupMenuGroupTemplateDirective
+                    ], host: {
+                        "[class]": "baseClasses()",
+                        "[attr.data-disabled]": "disabled()"
+                    }, template: "<ul\n    [class]=\"listClasses()\"\n    role=\"menubar\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\">\n    @for (item of menuList(); track item; let i = $index) {\n        @let menuIconTemplate = item.iconTemplate() ?? iconTemplate() ?? null;\n        @let menuTextTemplate = item.textTemplate() ?? textTemplate() ?? null;\n        @let menuId = item.uid + \"-menu\";\n        <li\n            [class]=\"listItemClasses()\"\n            [attr.data-disabled]=\"item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"item.disabled() ? -1 : i === activeIndex() ? 0 : -1\"\n            [attr.role]=\"'menuitem'\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"\n                currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? 'true' : 'false'\n            \"\n            [attr.aria-controls]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu ? menuId : null\"\n            [attr.aria-disabled]=\"item.disabled()\"\n            (pointerenter)=\"onMenuPointerEnter(item, listItemElement, popupMenu)\"\n            (keydown)=\"onMenuKeyDown($event, item, popupMenu)\"\n            (click)=\"onMenuClick($event, item)\"\n            (focus)=\"onMenuFocus(i)\"\n            (blur)=\"onMenuBlur($event)\"\n            #listItemElement>\n            @if (menuIconTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuIconTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\"></ng-container>\n            }\n            @if (!menuTextTemplate) {\n                <span>{{ item.text() }}</span>\n            } @else {\n                <ng-container\n                    [ngTemplateOutlet]=\"menuTextTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item.text(), items: item.menuItems() }\">\n                </ng-container>\n            }\n        </li>\n        <mona-popup-menu\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            [target]=\"listItemElement\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            (menuClick)=\"onMenuItemClick($event)\"\n            (navigate)=\"navigate$.next($event)\"\n            [trigger]=\"'click'\"\n            [offset]=\"{ horizontal: 0, vertical: 2 }\"\n            (close)=\"onPopupMenuClose()\"\n            (open)=\"onPopupMenuOpen(popupMenu, listItemElement)\"\n            [items]=\"item.menuItems()\"\n            [id]=\"menuId\"\n            #popupMenu>\n            @if (groupTemplate()) {\n                <ng-template monaPopupMenuGroupTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemIconTemplate()) {\n                <ng-template monaPopupMenuIconTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemShortcutTemplate()) {\n                <ng-template monaPopupMenuShortcutTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n            @if (menuItemTextTemplate()) {\n                <ng-template monaPopupMenuTextTemplate let-item>\n                    <ng-container\n                        [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-template>\n            }\n        </mona-popup-menu>\n    }\n</ul>\n" }]
+        }], ctorParameters: () => [], propDecorators: { groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuGroupTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuIconTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuItemIconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuItemIconTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuItemShortcutTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuItemShortcutTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuItemTextTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuItemTextTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuComponent), { isSignal: true }] }], popupMenuComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PopupMenuComponent), { isSignal: true }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuTextTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/menubar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuCheckboxItemComponent, MenuComponent, MenuGroupComponent, MenuGroupTemplateDirective, MenuIconTemplateDirective, MenuItemComponent, MenuItemIconTemplateDirective, MenuItemShortcutTemplateDirective, MenuItemTextTemplateDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSeparatorComponent, MenuTextTemplateDirective, MenubarComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-menubar.mjs.map