@nanahoshi/mona-ui 0.3.0 → 0.5.0

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

@@ -813,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]=\"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]" }] }); }
+    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", "class"], 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,

package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, inject, DestroyRef, ElementRef, afterNextRender, Component, contentChild, contentChildren, input, output, afterRenderEffect, ChangeDetectionStrategy, linkedSignal, forwardRef, model, TemplateRef, Directive } from '@angular/core';
+import { InjectionToken, signal, computed, inject, DestroyRef, ElementRef, afterNextRender, Component, contentChild, contentChildren, input, output, afterRenderEffect, linkedSignal, forwardRef, ChangeDetectionStrategy, model, TemplateRef, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { PreventableEvent, classInputToClass } from '@nanahoshi/mona-ui/common';
 import { themeOverlaySurfaceClasses, createElementControlId, isNavigationKey, isTypeaheadKey, setupTypeahead, toCssValue, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { PopupDataInjectionToken, PopupService } from '@nanahoshi/mona-ui/popup';
 import { forEach, select, groupBy, selectMany, any } from '@mirei/ts-collections';
 import { Subject, take, tap, fromEvent, takeUntil, filter, switchMap } from 'rxjs';
-import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideChevronRight, LucideCheck } from '@lucide/angular';
@@ -270,7 +270,7 @@ class PopupMenuListComponent {
             const size = this.#parentConfig.size();
             const hasIcon = this.iconAreaVisible();
             const variantClasses = popupMenuGroupHeaderThemeVariants({ size });
-            const iconClasses = hasIcon ? "pl-8" : "pl-2";
+            const iconClasses = ""; //hasIcon ? "pl-8" : "pl-2";
             return twMerge(variantClasses, iconClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
@@ -738,6 +738,8 @@ class PopupMenuComponent {
          */
         this.width = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        this.userClass = input(undefined, { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
         afterNextRender({
             read: () => this.setSubscriptions()
         });
@@ -827,6 +829,7 @@ class PopupMenuComponent {
             data,
             minWidth,
             offset,
+            popupClass: this.userClass(),
             popupConnectionPoint,
             restoreFocus: false,
             width
@@ -918,14 +921,13 @@ class PopupMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuComponent, isStandalone: true, selector: "mona-popup-menu", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, precise: { classPropertyName: "precise", publicName: "precise", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", menuClick: "menuClick", navigate: "navigate", open: "open" }, queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "iconTemplateConfig", first: true, predicate: PopupMenuIconTemplateToken, isSignal: true }, { propertyName: "nestedComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuComponent, isStandalone: true, selector: "mona-popup-menu", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, precise: { classPropertyName: "precise", publicName: "precise", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", menuClick: "menuClick", navigate: "navigate", open: "open" }, queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "iconTemplateConfig", first: true, predicate: PopupMenuIconTemplateToken, isSignal: true }, { propertyName: "nestedComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "mona-popup-menu",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    template: ""
                 }]
         }], ctorParameters: () => [], propDecorators: { groupTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuGroupTemplateToken), { ...{
                             descendants: false
@@ -935,7 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                             descendants: false
                         }, isSignal: true }] }], textTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuTextTemplateToken), { ...{
                             descendants: false
-                        }, isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], precise: [{ type: i0.Input, args: [{ isSignal: true, alias: "precise", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+                        }, isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], precise: [{ type: i0.Input, args: [{ isSignal: true, alias: "precise", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class PopupMenuCheckboxItemComponent {
     constructor() {
@@ -1091,14 +1093,13 @@ class PopupMenuItemComponent {
                 provide: PopupMenuToken,
                 useExisting: forwardRef(() => PopupMenuItemComponent)
             }
-        ], queries: [{ propertyName: "iconTemplateConfig", first: true, predicate: PopupMenuIconTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuToken, isSignal: true }, { propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "iconTemplateConfig", first: true, predicate: PopupMenuIconTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuToken, isSignal: true }, { propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "mona-popup-menu-item",
                     template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: PopupMenuToken,
@@ -1116,38 +1117,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class PopupMenuGroupComponent {
     constructor() {
+        this.#groupSymbol = Symbol(v4());
         this.groupTemplateConfig = contentChild(PopupMenuGroupTemplateToken, { ...(ngDevMode ? { debugName: "groupTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
         this.items = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: false });
         this.origin = PopupMenuOrigin.Popup;
         /**
          * @description Sets the title of the menu group.
          */
-        this.title = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
         this.type = PopupMenuItemType.MenuGroup;
     }
+    #groupSymbol;
     getPopupMenuItem() {
         const menuItems = this.items().map(i => i.getPopupMenuItem().map(item => ({
             ...item,
-            group: this.title(),
+            group: this.title() || this.#groupSymbol,
             groupTemplate: computed(() => this.groupTemplateConfig()?.template ?? null)
         })));
         return selectMany(menuItems, i => i).toArray();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuGroupComponent, isStandalone: true, selector: "mona-popup-menu-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuGroupComponent, isStandalone: true, selector: "mona-popup-menu-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: PopupMenuToken,
                 useExisting: forwardRef(() => PopupMenuGroupComponent)
             }
-        ], queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuToken, isSignal: true }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuToken, isSignal: true }], ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "mona-popup-menu-group",
                     template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: PopupMenuToken,
@@ -1157,7 +1159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { groupTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuGroupTemplateToken), { ...{
                             descendants: false
-                        }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }] } });
+                        }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
 
 class PopupMenuRadioGroupComponent {
     constructor() {