@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -7,7 +7,6 @@ import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, ContainsPipe } from '@nanahoshi/mona-ui/common';
 import { ListService } from '@nanahoshi/mona-ui/internal/list';
 import { ListViewComponent, ListViewSelectableDirective, ListViewItemTemplateDirective, ListViewNavigableDirective, ListViewNoDataTemplateDirective, ListViewFooterTemplateDirective, ListViewHeaderTemplateDirective } from '@nanahoshi/mona-ui/list-view';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { ImmutableList } from '@mirei/ts-collections';
 import { Subject, ReplaySubject, sample, delay, filter, tap, scan, startWith, switchMap } from 'rxjs';
 import { cva } from 'class-variance-authority';
@@ -133,9 +132,9 @@ class ListBoxTransferEvent extends PreventableEvent {
     }
 }
 
-const listBoxBaseVariants = cva(`
-        flex gap-1
-        [&_mona-list-view]:w-full
+const listBoxBaseThemeVariants = cva(`
+        flex gap-1
+        [&_mona-list-view]:w-full
     `, {
     variants: {
         direction: {
@@ -171,9 +170,9 @@ const listBoxBaseVariants = cva(`
         }
     ]
 });
-const listBoxToolbarVariants = cva(`
-        flex gap-1
-        items-center justify-center
+const listBoxToolbarThemeVariants = cva(`
+        flex gap-1
+        items-center justify-center
     `, {
     variants: {
         direction: {
@@ -183,37 +182,18 @@ const listBoxToolbarVariants = cva(`
     }
 });
 
-const listBoxBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return listBoxBaseVariants;
-        default:
-            return listBoxBaseVariants;
-    }
-};
-const listBoxToolbarThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return listBoxToolbarVariants;
-        default:
-            return listBoxToolbarVariants;
-    }
-};
-
 class ListBoxComponent {
     #dataStateChange$;
     #destroyRef;
     #hostElementRef;
     #listService;
     #notifySelectionChange$;
-    #themeService;
     constructor() {
         this.#dataStateChange$ = new Subject();
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject(ElementRef);
         this.#listService = inject(ListService);
         this.#notifySelectionChange$ = new ReplaySubject(1);
-        this.#themeService = inject(ThemeService);
         /**
          * The list box (`this` or the connected list box) that currently holds the selection; falling back to `this`
          * when neither side has a selection. Used by actions that make sense to run on `this` even with no selection
@@ -232,14 +212,13 @@ class ListBoxComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeListBox" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
             const toolbarOptions = this.toolbarOptions();
             const position = toolbarOptions?.position ?? "right";
             const direction = position === "left" || position === "right" ? "horizontal" : "vertical";
             const reversed = position === "left" || position === "top";
-            return listBoxBaseThemeVariants(theme)({ direction, reversed, rounded, size });
+            return listBoxBaseThemeVariants({ direction, reversed, rounded, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.footerTemplate = contentChild(ListBoxFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -266,11 +245,10 @@ class ListBoxComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectableOptions" }] : /* istanbul ignore next */ []));
         this.toolbarClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const toolbarOptions = this.toolbarOptions();
             const position = toolbarOptions?.position ?? "right";
             const direction = position === "left" || position === "right" ? "vertical" : "horizontal";
-            return listBoxToolbarThemeVariants(theme)({ direction });
+            return listBoxToolbarThemeVariants({ direction });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "toolbarClasses" }] : /* istanbul ignore next */ []));
         this.toolbarOptions = computed(() => {
@@ -588,7 +566,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\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [items]=\"listBoxItems()\"\r\n    [height]=\"'100%'\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [textField]=\"textField()\"\r\n    [width]=\"'100%'\"\r\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\r\n    [monaListViewSelectable]=\"selectableOptions()\"\r\n    [selectBy]=\"selectBy()\"\r\n    [selectedKeys]=\"selectedKeys()\"\r\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListViewFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListViewHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListViewItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListViewNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list-view>\r\n\r\n@let options = toolbarOptions() ?? null;\r\n@let connectedListBox = connectedList();\r\n@let hasSelectedItems = selectedItems().length > 0;\r\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\r\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\r\n@if (options !== null && connectedListBox !== null) {\r\n    <div [class]=\"toolbarClasses()\">\r\n        @if (options.actions | monaContains: \"moveUp\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onMoveClick('moveUp', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Move Up\"\r\n                aria-label=\"Move Up\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideChevronUp [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"moveDown\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onMoveClick('moveDown', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Move Down\"\r\n                aria-label=\"Move Down\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideChevronDown [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferFrom\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferFrom', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer From\"\r\n                aria-label=\"Transfer From\"\r\n                [disabled]=\"!connectedListHasSelectedItems\">\r\n                <svg lucideChevronLeft [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferTo\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferTo', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer To\"\r\n                aria-label=\"Transfer To\"\r\n                [disabled]=\"!hasSelectedItems\">\r\n                <svg lucideChevronRight [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferAllFrom\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer All From\"\r\n                aria-label=\"Transfer All From\"\r\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\r\n                <svg lucideChevronsLeft [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferAllTo\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferAllTo', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer All To\"\r\n                aria-label=\"Transfer All To\"\r\n                [disabled]=\"listBoxItems().length === 0\">\r\n                <svg lucideChevronsRight [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"clear\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onClearClick($event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Clear Selection\"\r\n                aria-label=\"Clear Selection\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideX [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"remove\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onRemoveClick($event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Remove\"\r\n                aria-label=\"Remove\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideTrash2 [size]=\"14\"></svg>\r\n            </button>\r\n        }\r\n    </div>\r\n}\r\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", "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=\"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", "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,
@@ -615,7 +593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "baseClasses()",
                         "[style.height]": "listHeight()",
                         "[style.width]": "listWidth()"
-                    }, template: "<mona-list-view\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [items]=\"listBoxItems()\"\r\n    [height]=\"'100%'\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [textField]=\"textField()\"\r\n    [width]=\"'100%'\"\r\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\r\n    [monaListViewSelectable]=\"selectableOptions()\"\r\n    [selectBy]=\"selectBy()\"\r\n    [selectedKeys]=\"selectedKeys()\"\r\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListViewFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListViewHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListViewItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListViewNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list-view>\r\n\r\n@let options = toolbarOptions() ?? null;\r\n@let connectedListBox = connectedList();\r\n@let hasSelectedItems = selectedItems().length > 0;\r\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\r\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\r\n@if (options !== null && connectedListBox !== null) {\r\n    <div [class]=\"toolbarClasses()\">\r\n        @if (options.actions | monaContains: \"moveUp\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onMoveClick('moveUp', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Move Up\"\r\n                aria-label=\"Move Up\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideChevronUp [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"moveDown\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onMoveClick('moveDown', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Move Down\"\r\n                aria-label=\"Move Down\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideChevronDown [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferFrom\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferFrom', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer From\"\r\n                aria-label=\"Transfer From\"\r\n                [disabled]=\"!connectedListHasSelectedItems\">\r\n                <svg lucideChevronLeft [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferTo\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferTo', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer To\"\r\n                aria-label=\"Transfer To\"\r\n                [disabled]=\"!hasSelectedItems\">\r\n                <svg lucideChevronRight [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferAllFrom\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer All From\"\r\n                aria-label=\"Transfer All From\"\r\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\r\n                <svg lucideChevronsLeft [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"transferAllTo\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onTransferClick('transferAllTo', $event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Transfer All To\"\r\n                aria-label=\"Transfer All To\"\r\n                [disabled]=\"listBoxItems().length === 0\">\r\n                <svg lucideChevronsRight [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"clear\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onClearClick($event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Clear Selection\"\r\n                aria-label=\"Clear Selection\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideX [size]=\"16\"></svg>\r\n            </button>\r\n        }\r\n        @if (options.actions | monaContains: \"remove\") {\r\n            <button\r\n                monaButton\r\n                (click)=\"onRemoveClick($event)\"\r\n                [iconOnly]=\"true\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                title=\"Remove\"\r\n                aria-label=\"Remove\"\r\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\r\n                <svg lucideTrash2 [size]=\"14\"></svg>\r\n            </button>\r\n        }\r\n    </div>\r\n}\r\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=\"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" }]
         }], 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 }] }] } });
 
 /*

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

@@ -4,7 +4,6 @@ import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, Temp
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ListService, ListComponent, ListHeaderTemplateDirective, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { PagerComponent } from '@nanahoshi/mona-ui/pager';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { ImmutableSet } from '@mirei/ts-collections';
 import { fromEvent, filter } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -65,11 +64,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const listViewBaseVariants = cva(`
-        flex flex-col h-full
-        outline-none overflow-hidden
-        bg-background text-foreground
-        border border-border
+const listViewBaseThemeVariants = cva(`
+        flex h-full flex-col overflow-hidden
+        bg-surface text-foreground
+        border border-border
+        outline-none
     `, {
     variants: {
         rounded: {
@@ -86,20 +85,10 @@ const listViewBaseVariants = cva(`
     }
 });
 
-const listViewBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return listViewBaseVariants;
-        default:
-            return listViewBaseVariants;
-    }
-};
-
 class ListViewComponent {
     #destroyRef;
     #hostElementRef;
     #scrollBottomEnabled;
-    #themeService;
     #scrollSubscription;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -109,13 +98,11 @@ class ListViewComponent {
             return !pageableOptions.enabled;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#scrollBottomEnabled" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.#scrollSubscription = null;
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            const variantClasses = listViewBaseThemeVariants(theme)({ rounded, size });
+            const variantClasses = listViewBaseThemeVariants({ rounded, size });
             const userClass = this.userClass();
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
@@ -287,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\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [data]=\"viewItems()\"\r\n    [height]=\"listHeight()\"\r\n    [width]=\"listWidth()\"\r\n    [maxHeight]=\"listMaxHeight()\"\r\n    [maxWidth]=\"listMaxWidth()\"\r\n    [listItemClass]=\"listItemClass()\"\r\n    [listItemStyle]=\"listItemStyle()\"\r\n    [listClass]=\"listClass()\"\r\n    [listStyle]=\"listStyle()\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (groupHeaderTemplate()) {\r\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list>\r\n\r\n@let pageableOptions = listService.pageableOptions();\r\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\r\n    @let pageState = listService.pageState();\r\n    <div class=\"mona-list-view-pager\">\r\n        <mona-pager\r\n            [firstLast]=\"pageableOptions.firstLast\"\r\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\r\n            [visiblePages]=\"pageableOptions.visiblePages\"\r\n            [total]=\"itemCount()\"\r\n            [skip]=\"pageState.skip\"\r\n            [responsive]=\"false\"\r\n            [rounded]=\"rounded()\"\r\n            [pageSize]=\"pageState.take\"\r\n            [previousNext]=\"pageableOptions.previousNext\"\r\n            [showInfo]=\"pageableOptions.showInfo\"\r\n            (pageChange)=\"onPageChange($event)\"\r\n            (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\r\n    </div>\r\n}\r\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            (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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -311,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClasses()",
                         "[attr.tabindex]": "-1"
-                    }, template: "<mona-list\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [data]=\"viewItems()\"\r\n    [height]=\"listHeight()\"\r\n    [width]=\"listWidth()\"\r\n    [maxHeight]=\"listMaxHeight()\"\r\n    [maxWidth]=\"listMaxWidth()\"\r\n    [listItemClass]=\"listItemClass()\"\r\n    [listItemStyle]=\"listItemStyle()\"\r\n    [listClass]=\"listClass()\"\r\n    [listStyle]=\"listStyle()\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (groupHeaderTemplate()) {\r\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list>\r\n\r\n@let pageableOptions = listService.pageableOptions();\r\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\r\n    @let pageState = listService.pageState();\r\n    <div class=\"mona-list-view-pager\">\r\n        <mona-pager\r\n            [firstLast]=\"pageableOptions.firstLast\"\r\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\r\n            [visiblePages]=\"pageableOptions.visiblePages\"\r\n            [total]=\"itemCount()\"\r\n            [skip]=\"pageState.skip\"\r\n            [responsive]=\"false\"\r\n            [rounded]=\"rounded()\"\r\n            [pageSize]=\"pageState.take\"\r\n            [previousNext]=\"pageableOptions.previousNext\"\r\n            [showInfo]=\"pageableOptions.showInfo\"\r\n            (pageChange)=\"onPageChange($event)\"\r\n            (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\r\n    </div>\r\n}\r\n" }]
+                    }, 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            (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 }] }] } });
 
 class ListViewGroupableDirective {