@nanahoshi/mona-ui 0.18.6 → 0.20.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.
  */