@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -1,14 +1,14 @@
 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 { 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 { 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';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class MenuIconTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MenuIconTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -392,10 +392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const contextMenuContentVariants = cva(`
-        w-full gap-4 overflow-hidden
-        bg-background text-foreground
-        shadow-lg border border-border
+const contextMenuContentThemeVariants = cva(`
+        w-full gap-4 overflow-hidden
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -411,8 +411,8 @@ const contextMenuContentVariants = cva(`
         }
     }
 });
-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`, {
+const contextMenuDividerThemeVariants = cva(`-mx-0.5 my-1 h-px bg-border-subtle`);
+const menuItemGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px-2 py-1 font-bold text-muted-foreground`, {
     variants: {
         size: {
             small: "text-xs",
@@ -421,27 +421,20 @@ const menuItemGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2
         }
     }
 });
-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
+const menuItemIconThemeVariants = cva(`absolute left-2 flex h-3.5 w-3.5 items-center justify-center`);
+const menuItemLinkThemeVariants = cva(`flex h-3.5 w-3.5 items-center justify-center`);
+const menuItemShortcutThemeVariants = cva(`flex flex-1 items-center justify-end text-xs text-muted-foreground`);
+const menuItemTextThemeVariants = cva(`flex flex-1 items-center justify-start gap-2`);
+const menuItemThemeVariants = cva(`
+        relative flex cursor-default select-none items-center gap-4 px-2 py-1.5
+        text-foreground outline-none
+        hover:bg-[var(--mona-menu-item-hover-background,var(--color-hover))] hover:text-foreground
+        focus-within:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        focus-within:text-foreground focus-within:outline-none
+        data-[disabled='true']:pointer-events-none data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
+        data-[focused]:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        data-[focused]:text-foreground
     `, {
     variants: {
         size: {
@@ -451,15 +444,16 @@ const menuItemVariants = cva(`
         }
     }
 });
-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
+const menubarBaseThemeVariants = cva(`
+        flex items-center justify-center gap-1 overflow-hidden
+        bg-(--mona-menubar-background)
+        [background-image:var(--mona-menubar-background-image,var(--mona-effect-raised-background-image,none))]
+        [backdrop-filter:var(--mona-menubar-backdrop-filter,var(--mona-effect-raised-backdrop-filter,none))]
+        [-webkit-backdrop-filter:var(--mona-menubar-backdrop-filter,var(--mona-effect-raised-backdrop-filter,none))]
+        text-foreground
+        border border-border-subtle shadow-(--mona-menubar-shadow)
+        data-[disabled='true']:pointer-events-none data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground data-[disabled='true']:opacity-50
     `, {
     variants: {
         rounded: {
@@ -475,21 +469,16 @@ const menubarBaseVariants = cva(`
         }
     }
 });
-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
+const menubarListItemThemeVariants = cva(`
+        flex h-full items-center justify-center px-2 py-1.5
+        cursor-pointer text-foreground outline-none
+        hover:bg-[var(--mona-menu-item-hover-background,var(--color-hover))] hover:text-foreground
+        focus-within:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        focus-within:text-foreground focus-within:outline-none
+        data-[disabled='true']:pointer-events-none data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
+        data-[active='true']:bg-[var(--mona-menu-item-hover-background,var(--color-selected))]
+        data-[active='true']:text-[var(--mona-menu-item-hover-foreground,var(--color-selected-foreground))]
     `, {
     variants: {
         rounded: {
@@ -500,119 +489,26 @@ const menubarListItemVariants = cva(`
         }
     }
 });
-const menubarListVariants = cva(`
-        w-full h-full list-none
-        flex items-center select-none
-        p-1
+const menubarListThemeVariants = cva(`
+        flex h-full w-full list-none items-center p-1
+        select-none
     `);
 
-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 });
+            const variants = menubarBaseThemeVariants({ rounded, size });
             return twMerge(variants, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
@@ -625,14 +521,12 @@ class MenubarComponent {
         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)();
+            return menubarListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
         this.listItemClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return menubarListItemThemeVariants(theme)({ rounded });
+            return menubarListItemThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClasses" }] : /* istanbul ignore next */ []));
         this.menuItemIconTemplate = contentChild(MenuItemIconTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemIconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
@@ -919,7 +813,7 @@ class MenubarComponent {
         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]" }] }); }
+    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]=\"disabled() || item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"disabled() || 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]=\"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,
@@ -933,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], 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" }]
+                    }, 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]=\"disabled() || item.disabled()\"\n            [attr.data-active]=\"currentPopupMenu() != null && currentPopupMenu() === item.popupMenu\"\n            [attr.data-mid]=\"item.uid\"\n            [attr.tabindex]=\"disabled() || 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]=\"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