@nanahoshi/mona-ui 0.18.5 → 0.19.0

package/fesm2022/nanahoshi-mona-ui-list-box.mjs

@@ -9,6 +9,7 @@ import { ListService } from '@nanahoshi/mona-ui/internal/list';
 import { ListViewComponent, ListViewSelectableDirective, ListViewItemTemplateDirective, ListViewNavigableDirective, ListViewNoDataTemplateDirective, ListViewFooterTemplateDirective, ListViewHeaderTemplateDirective } from '@nanahoshi/mona-ui/list-view';
 import { ImmutableList } from '@mirei/ts-collections';
 import { Subject, ReplaySubject, sample, delay, filter, tap, scan, startWith, switchMap } from 'rxjs';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 class ListBoxFooterTemplateDirective {
@@ -55,6 +56,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const LIST_BOX_DEFAULT_MESSAGES = {
+    clearSelection: "Clear Selection",
+    moveDown: "Move Down",
+    moveUp: "Move Up",
+    remove: "Remove",
+    transferAllFrom: "Transfer All From",
+    transferAllTo: "Transfer All To",
+    transferFrom: "Transfer From",
+    transferTo: "Transfer To"
+};
+
 class ListBoxClearEvent extends PreventableEvent {
     #action = "clear";
     #selectedItems;
@@ -186,12 +198,14 @@ class ListBoxComponent {
     #dataStateChange$;
     #destroyRef;
     #hostElementRef;
+    #i18n;
     #listService;
     #notifySelectionChange$;
     constructor() {
         this.#dataStateChange$ = new Subject();
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#listService = inject(ListService);
         this.#notifySelectionChange$ = new ReplaySubject(1);
         /**
@@ -234,6 +248,7 @@ class ListBoxComponent {
             return typeof width === "number" ? `${width}px` : width;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("listBox", LIST_BOX_DEFAULT_MESSAGES);
         this.noDataTemplate = contentChild(ListBoxNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.selectableOptions = computed(() => {
             const enabled = true;
@@ -301,6 +316,12 @@ class ListBoxComponent {
          */
         this.selectBy = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectBy" }] : /* istanbul ignore next */ []));
+        this.selectedItems = computed(() => {
+            const listItems = this.#listService.selectedListItems();
+            return listItems.select(item => item.data).toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        this.selectedItems$ = toObservable(this.selectedItems);
         /**
          * @description Keys of the currently selected items.
          * @default []
@@ -315,12 +336,6 @@ class ListBoxComponent {
          * @description Emitted with the selected and deselected items whenever the selection changes.
          */
         this.selectionChange = output();
-        this.selectedItems = computed(() => {
-            const listItems = this.#listService.selectedListItems();
-            return listItems.select(item => item.data).toImmutableSet();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
-        this.selectedItems$ = toObservable(this.selectedItems);
         /**
          * @description Allows multiple items to be selected simultaneously when set to `"multiple"`.
          * @default single
@@ -504,15 +519,6 @@ class ListBoxComponent {
      * or `null` if neither side has one. Unlike {@link activeListBox}, this does not fall back to `this`,
      * since move actions need to know an actual selected index to operate on.
      */
-    getSelectedListBox() {
-        if (this.selectedItems().any()) {
-            return this;
-        }
-        if (this.connectedList() != null) {
-            return this.connectedList().getSelectedListBox();
-        }
-        return null;
-    }
     getDefaultToolbarOptions() {
         return {
             actions: [
@@ -528,6 +534,15 @@ class ListBoxComponent {
             position: "right"
         };
     }
+    getSelectedListBox() {
+        if (this.selectedItems().any()) {
+            return this;
+        }
+        if (this.connectedList() != null) {
+            return this.connectedList().getSelectedListBox();
+        }
+        return null;
+    }
     scrollToSelectedItem() {
         const selectedItemElement = this.#hostElementRef.nativeElement.querySelector("[data-selected='true']");
         if (selectedItemElement) {
@@ -566,7 +581,7 @@ class ListBoxComponent {
         return { actions, position };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListBoxComponent, isStandalone: true, selector: "mona-list-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, connectedList: { classPropertyName: "connectedList", publicName: "connectedList", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selectBy: { classPropertyName: "selectBy", publicName: "selectBy", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, singleSelectionToggleable: { classPropertyName: "singleSelectionToggleable", publicName: "singleSelectionToggleable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", selectedKeysChange: "selectedKeysChange", selectionChange: "selectionChange" }, host: { properties: { "class": "baseClasses()", "style.height": "listHeight()", "style.width": "listWidth()" } }, providers: [ListService], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListBoxFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListBoxHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListBoxItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListBoxNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list-view\n    [ariaLabel]=\"ariaLabel()\"\n    [items]=\"listBoxItems()\"\n    [height]=\"'100%'\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [textField]=\"textField()\"\n    [width]=\"'100%'\"\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\n    [monaListViewSelectable]=\"selectableOptions()\"\n    [selectBy]=\"selectBy()\"\n    [selectedKeys]=\"selectedKeys()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\n    @if (footerTemplate()) {\n        <ng-template monaListViewFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListViewHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListViewItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListViewNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n        </ng-template>\n    }\n</mona-list-view>\n\n@let options = toolbarOptions() ?? null;\n@let connectedListBox = connectedList();\n@let hasSelectedItems = selectedItems().length > 0;\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\n@if (options !== null && connectedListBox !== null) {\n    <div [class]=\"toolbarClasses()\">\n        @if (options.actions | monaContains: \"moveUp\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveUp', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Move Up\"\n                aria-label=\"Move Up\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronUp [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"moveDown\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveDown', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Move Down\"\n                aria-label=\"Move Down\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronDown [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer From\"\n                aria-label=\"Transfer From\"\n                [disabled]=\"!connectedListHasSelectedItems\">\n                <svg lucideChevronLeft [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer To\"\n                aria-label=\"Transfer To\"\n                [disabled]=\"!hasSelectedItems\">\n                <svg lucideChevronRight [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer All From\"\n                aria-label=\"Transfer All From\"\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\n                <svg lucideChevronsLeft [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer All To\"\n                aria-label=\"Transfer All To\"\n                [disabled]=\"listBoxItems().length === 0\">\n                <svg lucideChevronsRight [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"clear\") {\n            <button\n                monaButton\n                (click)=\"onClearClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Clear Selection\"\n                aria-label=\"Clear Selection\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideX [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"remove\") {\n            <button\n                monaButton\n                (click)=\"onRemoveClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Remove\"\n                aria-label=\"Remove\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: ListViewComponent, selector: "mona-list-view", inputs: ["aria-label", "height", "listClass", "listItemClass", "listItemStyle", "listStyle", "items", "maxHeight", "maxWidth", "rounded", "size", "textField", "class", "width"], outputs: ["scrollBottom"] }, { kind: "directive", type: ListViewSelectableDirective, selector: "mona-list-view[monaListViewSelectable]", inputs: ["monaListViewSelectable", "selectBy", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: ListViewItemTemplateDirective, selector: "ng-template[monaListViewItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: ListViewNavigableDirective, selector: "mona-list-view[monaListViewNavigable]", inputs: ["monaListViewNavigable"] }, { kind: "directive", type: ListViewNoDataTemplateDirective, selector: "ng-template[monaListViewNoDataTemplate]" }, { kind: "directive", type: ListViewFooterTemplateDirective, selector: "ng-template[monaListViewFooterTemplate]" }, { kind: "directive", type: ListViewHeaderTemplateDirective, selector: "ng-template[monaListViewHeaderTemplate]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "pipe", type: ContainsPipe, name: "monaContains" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListBoxComponent, isStandalone: true, selector: "mona-list-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, connectedList: { classPropertyName: "connectedList", publicName: "connectedList", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selectBy: { classPropertyName: "selectBy", publicName: "selectBy", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, singleSelectionToggleable: { classPropertyName: "singleSelectionToggleable", publicName: "singleSelectionToggleable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", selectedKeysChange: "selectedKeysChange", selectionChange: "selectionChange" }, host: { properties: { "class": "baseClasses()", "style.height": "listHeight()", "style.width": "listWidth()" } }, providers: [ListService], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListBoxFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListBoxHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListBoxItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListBoxNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list-view\n    [ariaLabel]=\"ariaLabel()\"\n    [items]=\"listBoxItems()\"\n    [height]=\"'100%'\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [textField]=\"textField()\"\n    [width]=\"'100%'\"\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\n    [monaListViewSelectable]=\"selectableOptions()\"\n    [selectBy]=\"selectBy()\"\n    [selectedKeys]=\"selectedKeys()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\n    @if (footerTemplate()) {\n        <ng-template monaListViewFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListViewHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListViewItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListViewNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n        </ng-template>\n    }\n</mona-list-view>\n\n@let options = toolbarOptions() ?? null;\n@let connectedListBox = connectedList();\n@let hasSelectedItems = selectedItems().length > 0;\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\n@if (options !== null && connectedListBox !== null) {\n    <div [class]=\"toolbarClasses()\">\n        @if (options.actions | monaContains: \"moveUp\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveUp', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveUp\"\n                [attr.aria-label]=\"messages().moveUp\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronUp [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"moveDown\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveDown', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveDown\"\n                [attr.aria-label]=\"messages().moveDown\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronDown [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferFrom\"\n                [attr.aria-label]=\"messages().transferFrom\"\n                [disabled]=\"!connectedListHasSelectedItems\">\n                <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferTo\"\n                [attr.aria-label]=\"messages().transferTo\"\n                [disabled]=\"!hasSelectedItems\">\n                <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllFrom\"\n                [attr.aria-label]=\"messages().transferAllFrom\"\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\n                <svg lucideChevronsLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllTo\"\n                [attr.aria-label]=\"messages().transferAllTo\"\n                [disabled]=\"listBoxItems().length === 0\">\n                <svg lucideChevronsRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"clear\") {\n            <button\n                monaButton\n                (click)=\"onClearClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().clearSelection\"\n                [attr.aria-label]=\"messages().clearSelection\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideX [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"remove\") {\n            <button\n                monaButton\n                (click)=\"onRemoveClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().remove\"\n                [attr.aria-label]=\"messages().remove\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: ListViewComponent, selector: "mona-list-view", inputs: ["aria-label", "height", "items", "listClass", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "rounded", "size", "textField", "class", "width"], outputs: ["scrollBottom"] }, { kind: "directive", type: ListViewSelectableDirective, selector: "mona-list-view[monaListViewSelectable]", inputs: ["monaListViewSelectable", "selectBy", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: ListViewItemTemplateDirective, selector: "ng-template[monaListViewItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: ListViewNavigableDirective, selector: "mona-list-view[monaListViewNavigable]", inputs: ["monaListViewNavigable"] }, { kind: "directive", type: ListViewNoDataTemplateDirective, selector: "ng-template[monaListViewNoDataTemplate]" }, { kind: "directive", type: ListViewFooterTemplateDirective, selector: "ng-template[monaListViewFooterTemplate]" }, { kind: "directive", type: ListViewHeaderTemplateDirective, selector: "ng-template[monaListViewHeaderTemplate]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "pipe", type: ContainsPipe, name: "monaContains" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
@@ -593,7 +608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "baseClasses()",
                         "[style.height]": "listHeight()",
                         "[style.width]": "listWidth()"
-                    }, template: "<mona-list-view\n    [ariaLabel]=\"ariaLabel()\"\n    [items]=\"listBoxItems()\"\n    [height]=\"'100%'\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [textField]=\"textField()\"\n    [width]=\"'100%'\"\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\n    [monaListViewSelectable]=\"selectableOptions()\"\n    [selectBy]=\"selectBy()\"\n    [selectedKeys]=\"selectedKeys()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\n    @if (footerTemplate()) {\n        <ng-template monaListViewFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListViewHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListViewItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListViewNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n        </ng-template>\n    }\n</mona-list-view>\n\n@let options = toolbarOptions() ?? null;\n@let connectedListBox = connectedList();\n@let hasSelectedItems = selectedItems().length > 0;\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\n@if (options !== null && connectedListBox !== null) {\n    <div [class]=\"toolbarClasses()\">\n        @if (options.actions | monaContains: \"moveUp\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveUp', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Move Up\"\n                aria-label=\"Move Up\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronUp [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"moveDown\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveDown', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Move Down\"\n                aria-label=\"Move Down\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronDown [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer From\"\n                aria-label=\"Transfer From\"\n                [disabled]=\"!connectedListHasSelectedItems\">\n                <svg lucideChevronLeft [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer To\"\n                aria-label=\"Transfer To\"\n                [disabled]=\"!hasSelectedItems\">\n                <svg lucideChevronRight [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer All From\"\n                aria-label=\"Transfer All From\"\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\n                <svg lucideChevronsLeft [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Transfer All To\"\n                aria-label=\"Transfer All To\"\n                [disabled]=\"listBoxItems().length === 0\">\n                <svg lucideChevronsRight [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"clear\") {\n            <button\n                monaButton\n                (click)=\"onClearClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Clear Selection\"\n                aria-label=\"Clear Selection\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideX [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"remove\") {\n            <button\n                monaButton\n                (click)=\"onRemoveClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                title=\"Remove\"\n                aria-label=\"Remove\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n" }]
+                    }, template: "<mona-list-view\n    [ariaLabel]=\"ariaLabel()\"\n    [items]=\"listBoxItems()\"\n    [height]=\"'100%'\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [textField]=\"textField()\"\n    [width]=\"'100%'\"\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\n    [monaListViewSelectable]=\"selectableOptions()\"\n    [selectBy]=\"selectBy()\"\n    [selectedKeys]=\"selectedKeys()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\n    @if (footerTemplate()) {\n        <ng-template monaListViewFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListViewHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListViewItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListViewNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n        </ng-template>\n    }\n</mona-list-view>\n\n@let options = toolbarOptions() ?? null;\n@let connectedListBox = connectedList();\n@let hasSelectedItems = selectedItems().length > 0;\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\n@if (options !== null && connectedListBox !== null) {\n    <div [class]=\"toolbarClasses()\">\n        @if (options.actions | monaContains: \"moveUp\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveUp', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveUp\"\n                [attr.aria-label]=\"messages().moveUp\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronUp [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"moveDown\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveDown', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveDown\"\n                [attr.aria-label]=\"messages().moveDown\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronDown [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferFrom\"\n                [attr.aria-label]=\"messages().transferFrom\"\n                [disabled]=\"!connectedListHasSelectedItems\">\n                <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferTo\"\n                [attr.aria-label]=\"messages().transferTo\"\n                [disabled]=\"!hasSelectedItems\">\n                <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllFrom\"\n                [attr.aria-label]=\"messages().transferAllFrom\"\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\n                <svg lucideChevronsLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllTo\"\n                [attr.aria-label]=\"messages().transferAllTo\"\n                [disabled]=\"listBoxItems().length === 0\">\n                <svg lucideChevronsRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"clear\") {\n            <button\n                monaButton\n                (click)=\"onClearClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().clearSelection\"\n                [attr.aria-label]=\"messages().clearSelection\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideX [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"remove\") {\n            <button\n                monaButton\n                (click)=\"onRemoveClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().remove\"\n                [attr.aria-label]=\"messages().remove\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListBoxFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListBoxHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListBoxItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListBoxNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], connectedList: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedList", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selectBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectBy", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], selectedKeysChange: [{ type: i0.Output, args: ["selectedKeysChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], singleSelectionToggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelectionToggleable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 /*
@@ -604,5 +619,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ListBoxClearEvent, ListBoxComponent, ListBoxFooterTemplateDirective, ListBoxHeaderTemplateDirective, ListBoxItemTemplateDirective, ListBoxMoveEvent, ListBoxNoDataTemplateDirective, ListBoxRemoveEvent, ListBoxTransferEvent };
+export { LIST_BOX_DEFAULT_MESSAGES, ListBoxClearEvent, ListBoxComponent, ListBoxFooterTemplateDirective, ListBoxHeaderTemplateDirective, ListBoxItemTemplateDirective, ListBoxMoveEvent, ListBoxNoDataTemplateDirective, ListBoxRemoveEvent, ListBoxTransferEvent };
 //# sourceMappingURL=nanahoshi-mona-ui-list-box.mjs.map

package/fesm2022/nanahoshi-mona-ui-list-view.mjs

@@ -153,6 +153,12 @@ class ListViewComponent {
          */
         this.height = input("100%", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Collection of items to render.
+         * @default []
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the classes of the inner UL element.
          * @default ""
@@ -177,12 +183,6 @@ class ListViewComponent {
          */
         this.listStyle = input({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Collection of items to render.
-         * @default []
-         */
-        this.items = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the maximum height of the list.
          * @default ""
@@ -266,7 +266,7 @@ class ListViewComponent {
             .subscribe(event => this.scrollBottom.emit(event));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListViewComponent, isStandalone: true, selector: "mona-list-view", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", 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 }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollBottom: "scrollBottom" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "-1" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListViewComponent, isStandalone: true, selector: "mona-list-view", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", 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 }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollBottom: "scrollBottom" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "-1" } }, providers: [
             {
                 provide: ListService,
                 useFactory: (parentListService) => {
@@ -274,7 +274,7 @@ class ListViewComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), ListService]]
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\n    @if (footerTemplate()) {\n        <ng-template monaListFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (groupHeaderTemplate()) {\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            [size]=\"size()\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\n    @if (footerTemplate()) {\n        <ng-template monaListFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (groupHeaderTemplate()) {\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            [size]=\"size()\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-x-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -298,8 +298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClasses()",
                         "[attr.tabindex]": "-1"
-                    }, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\n    @if (footerTemplate()) {\n        <ng-template monaListFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (groupHeaderTemplate()) {\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            [size]=\"size()\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], scrollBottom: [{ type: i0.Output, args: ["scrollBottom"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+                    }, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\n    @if (footerTemplate()) {\n        <ng-template monaListFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (groupHeaderTemplate()) {\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            [size]=\"size()\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-x-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], scrollBottom: [{ type: i0.Output, args: ["scrollBottom"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 class ListViewGroupableDirective {
     #defaultOptions;

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

@@ -1,3 +1,5 @@
+export { LIST_DEFAULT_MESSAGES } from '@nanahoshi/mona-ui/internal/list';
+
 /**
  * Generated bundle index. Do not edit.
  */

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

@@ -5,6 +5,7 @@ import { PopupMenuToken, preparePopupMenuItems, PopupMenuItemType, PopupMenuTemp
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject, startWith, pairwise, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -56,12 +57,12 @@ class MenuComponent {
                 .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.textTemplate = contentChild(MenuTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.uid = v4();
         this.popupMenu = null;
     }
@@ -77,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], 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 }] }] } });
+                        }, isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MenuTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 const componentTypeMap = {
     [PopupMenuItemType.CheckboxMenuItem]: "mona-menu-checkbox-item",
@@ -421,7 +422,7 @@ const menuItemGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px-
         }
     }
 });
-const menuItemIconThemeVariants = cva(`absolute left-2 flex h-3.5 w-3.5 items-center justify-center`);
+const menuItemIconThemeVariants = cva(`absolute start-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`);
@@ -496,12 +497,18 @@ const menubarListThemeVariants = cva(`
 
 class MenubarComponent {
     #destroyRef;
+    #direction;
     #document;
     #hostElementRef;
+    #i18n;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#document = inject(DOCUMENT);
         this.#hostElementRef = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.activeIndex = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
@@ -561,16 +568,16 @@ class MenubarComponent {
          * @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 Sets the size of the menubar.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * @description Additional CSS classes to apply to the menubar, merged with the computed theme classes.
          */
@@ -630,6 +637,9 @@ class MenubarComponent {
         if (this.disabled()) {
             return;
         }
+        const isRtl = this.isRtl();
+        const nextMenuKey = isRtl ? "ArrowLeft" : "ArrowRight";
+        const prevMenuKey = isRtl ? "ArrowRight" : "ArrowLeft";
         switch (event.key) {
             case "Enter":
             case " ":
@@ -638,11 +648,11 @@ class MenubarComponent {
                     popupMenu.openMenuViaKeyboard();
                 }
                 break;
-            case "ArrowRight":
+            case nextMenuKey:
                 event.preventDefault();
                 this.moveToNextMenu();
                 break;
-            case "ArrowLeft":
+            case prevMenuKey:
                 event.preventDefault();
                 this.moveToPreviousMenu();
                 break;
@@ -725,7 +735,7 @@ class MenubarComponent {
         return -1;
     }
     findPreviousNonDisabledMenuIndex() {
-        let currentIndex = this.findCurrentMenuIndex();
+        const currentIndex = this.findCurrentMenuIndex();
         if (currentIndex == null || currentIndex < 0) {
             const menuList = this.menuList();
             const lastEnabledIndex = menuList
@@ -783,13 +793,16 @@ class MenubarComponent {
     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 isRtl = this.isRtl();
+            const nextDir = isRtl ? "left" : "right";
+            const prevDir = isRtl ? "right" : "left";
+            if (next && next.direction === nextDir && (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) {
+            else if (next && prev && next.direction === prevDir && prev.level === 0 && next.level === 0) {
                 const index = this.findPreviousNonDisabledMenuIndex();
                 if (index >= 0) {
                     this.updateCurrentMenuData(index);
@@ -813,7 +826,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", "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]" }] }); }
+    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 }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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,
@@ -827,7 +840,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]=\"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" }]
+                    }, 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
@@ -846,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         }, 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 }] }] } });
+                        }, 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"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/menubar