@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs';
+export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-T9Bj98kl.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

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

@@ -8,9 +8,9 @@ import { FilterInputComponent } from '@nanahoshi/mona-ui/internal/filter-input';
 import { PlaceholderComponent } from '@nanahoshi/mona-ui/placeholder';
 import { Subject, ReplaySubject, fromEvent, asyncScheduler, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
 import { ImmutableList, from, ImmutableSet, toImmutableSet } from '@mirei/ts-collections';
 import { v4 } from 'uuid';
+import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CheckboxDirective } from '@nanahoshi/mona-ui/check-box';
@@ -63,86 +63,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const listVariants = cva(`
-        h-full flex flex-col overflow-hidden outline-none
-    `);
-const listInnerListVariants = cva(`
-        list-none p-0 m-0 overflow-x-hidden overflow-y-auto
-        h-full outline-none
-    `);
-const listGroupHeaderVariants = cva(``, {
-    variants: {
-        hasTemplate: {
-            true: "",
-            false: "py-1 font-bold"
-        }
-    }
-});
-const listGroupHeaderTextVariants = cva(`select-none`, {
-    variants: {
-        hasTemplate: {
-            true: "",
-            false: "font-bold w-full px-3 py-1"
-        }
-    }
-});
-const listItemBaseVariants = cva(`
-        w-full h-full flex gap-2 items-center
-    `);
-const listItemContentVariants = cva(`
-        relative flex cursor-default select-none items-center
-        outline-none px-3 py-1
-        hover:bg-accent hover:text-accent-foreground
-        focus:bg-accent focus:text-accent-foreground
-    `, {
-    variants: {
-        checkboxes: {
-            true: "gap-2",
-            false: ""
-        },
-        highlighted: {
-            true: "bg-accent text-accent-foreground rounded-none inset-ring-1 inset-ring-gray-400/70",
-            false: ""
-        },
-        selected: {
-            true: "bg-primary text-primary-foreground inset-ring-1 inset-ring-primary-foreground/40",
-            false: ""
-        },
-        disabled: {
-            true: "pointer-events-none opacity-50 cursor-default",
-            false: "cursor-pointer"
-        }
-    },
-    compoundVariants: [
-        {
-            selected: true,
-            checkboxes: false,
-            class: `
-                    bg-primary text-primary-foreground rounded-none
-                    inset-ring-1 inset-ring-primary-foreground/40
-                    hover:bg-primary hover:text-primary-foreground
-                    focus:bg-primary focus:text-primary-foreground
-                `
-        },
-        {
-            highlighted: true,
-            selected: true,
-            checkboxes: false,
-            class: `
-                    bg-primary text-primary-foreground rounded-none
-                    inset-ring-1 inset-ring-primary-foreground/40
-                    hover:bg-primary hover:text-primary-foreground
-                    focus:bg-primary focus:text-primary-foreground
-                `
-        },
-        {
-            selected: true,
-            checkboxes: true,
-            class: `bg-transparent text-foreground`
-        }
-    ]
-});
-
 class ListItem {
     constructor(options) {
         this.header = "";
@@ -794,6 +714,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
+const listVariants = cva(`
+        h-full flex flex-col overflow-hidden outline-none
+    `);
+const listInnerListVariants = cva(`
+        list-none p-0 m-0 overflow-x-hidden overflow-y-auto
+        h-full outline-none
+    `);
+const listGroupHeaderVariants = cva(``, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "py-1 font-bold"
+        }
+    }
+});
+const listGroupHeaderTextVariants = cva(`select-none`, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "font-bold w-full px-3 py-1"
+        }
+    }
+});
+const listItemBaseVariants = cva(`
+        w-full h-full flex gap-2 items-center
+    `);
+const listItemContentVariants = cva(`
+        relative flex cursor-default select-none items-center
+        outline-none px-3 py-1
+        hover:bg-accent hover:text-accent-foreground
+        focus:bg-accent focus:text-accent-foreground
+    `, {
+    variants: {
+        checkboxes: {
+            true: "gap-2",
+            false: ""
+        },
+        highlighted: {
+            true: "bg-accent text-accent-foreground rounded-none inset-ring-1 inset-ring-gray-400/70",
+            false: ""
+        },
+        selected: {
+            true: "bg-primary text-primary-foreground inset-ring-1 inset-ring-primary-foreground/40",
+            false: ""
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-default",
+            false: "cursor-pointer"
+        }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            checkboxes: false,
+            class: `
+                    bg-primary text-primary-foreground rounded-none
+                    inset-ring-1 inset-ring-primary-foreground/40
+                    hover:bg-primary hover:text-primary-foreground
+                    focus:bg-primary focus:text-primary-foreground
+                `
+        },
+        {
+            highlighted: true,
+            selected: true,
+            checkboxes: false,
+            class: `
+                    bg-primary text-primary-foreground rounded-none
+                    inset-ring-1 inset-ring-primary-foreground/40
+                    hover:bg-primary hover:text-primary-foreground
+                    focus:bg-primary focus:text-primary-foreground
+                `
+        },
+        {
+            selected: true,
+            checkboxes: true,
+            class: `bg-transparent text-foreground`
+        }
+    ]
+});
+
 class ListItemDirective {
     #listService;
     constructor() {

package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs

@@ -1180,28 +1180,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-const subTreeListVariants = cva(`
-        list-none flex flex-col
+const subTreeListVariants = cva(`
+        list-none flex flex-col
     `);
-const subTreeListItemVariants = cva(`
-        relative overflow-hidden outline-none
-        ps-6
+const subTreeListItemVariants = cva(`
+        relative overflow-hidden outline-none
+        ps-6
     `);
-const treeBaseVariants = cva(`
-        relative outline-none select-none
-        text-md
+const treeBaseVariants = cva(`
+        relative outline-none select-none
+        text-md
     `);
-const treeDropHintBaseVariants = cva(`
-        fixed z-1 w-10 h-0.5
-        bg-primary opacity-80
-        pointer-events-none
+const treeDropHintBaseVariants = cva(`
+        fixed z-1 w-10 h-0.5
+        bg-primary opacity-80
+        pointer-events-none
     `);
-const treeDropHintIconVariants = cva(`
-        absolute flex items-center justify-center
-        -top-3.25 -left-3.5 text-xl
+const treeDropHintIconVariants = cva(`
+        absolute flex items-center justify-center
+        -top-3.25 -left-3.5 text-xl
     `);
-const treeNodeBaseVariants = cva(`
-        px-2 py-1 cursor-default
+const treeNodeBaseVariants = cva(`
+        px-2 py-1 cursor-default
     `, {
     variants: {
         disabled: {
@@ -1230,20 +1230,20 @@ const treeNodeBaseVariants = cva(`
         }
     ]
 });
-const treeNodeContainerVariants = cva(`
-        flex items-center
+const treeNodeContainerVariants = cva(`
+        flex items-center
     `);
-const treeNodeDraggingVariants = cva(`
-        flex items-center justify-center
-        px-2! py-1! top-3!
-        bg-background! text-foreground!
-        border! border-border!
-        shadow-md
+const treeNodeDraggingVariants = cva(`
+        flex items-center justify-center
+        px-2! py-1! top-3!
+        bg-background! text-foreground!
+        border! border-border!
+        shadow-md
     `);
-const treeNodeExpanderVariants = cva(`
-        min-w-6 h-full -ms-6
-        flex items-center justify-center
-        cursor-pointer text-sm text-foreground
+const treeNodeExpanderVariants = cva(`
+        min-w-6 h-full -ms-6
+        flex items-center justify-center
+        cursor-pointer text-sm text-foreground
     `);
 
 const subTreeListThemeVariants = (theme) => {
@@ -1635,11 +1635,11 @@ class TreeNodeComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeNodeComponent, isStandalone: true, selector: "mona-tree-node", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\r\n    @if (treeService.nodeTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\r\n            [ngTemplateOutletContext]=\"{\r\n                $implicit: node()?.data,\r\n                element: element.parentElement\r\n            }\"></ng-container>\r\n    } @else {\r\n        <span class=\"truncate\">{{ nodeText() }}</span>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeNodeComponent, isStandalone: true, selector: "mona-tree-node", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\n    @if (treeService.nodeTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: node()?.data,\n                element: element.parentElement\n            }\"></ng-container>\n    } @else {\n        <span class=\"truncate\">{{ nodeText() }}</span>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tree-node", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\r\n    @if (treeService.nodeTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\r\n            [ngTemplateOutletContext]=\"{\r\n                $implicit: node()?.data,\r\n                element: element.parentElement\r\n            }\"></ng-container>\r\n    } @else {\r\n        <span class=\"truncate\">{{ nodeText() }}</span>\r\n    }\r\n</div>\r\n" }]
+            args: [{ selector: "mona-tree-node", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\n    @if (treeService.nodeTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: node()?.data,\n                element: element.parentElement\n            }\"></ng-container>\n    } @else {\n        <span class=\"truncate\">{{ nodeText() }}</span>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
 class SubTreeComponent {
@@ -1783,7 +1783,7 @@ class SubTreeComponent {
         element.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\r\n    [class]=\"listClass()\"\r\n    [attr.role]=\"parent() ? 'group' : null\"\r\n    cdkDropList\r\n    [cdkDropListSortingDisabled]=\"true\"\r\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\r\n    @for (node of visibleNodes(); track node.uid) {\r\n        <li\r\n            [attr.id]=\"node.uid | treeNodeElementId\"\r\n            [attr.data-uid]=\"node.uid\"\r\n            [class]=\"listItemClass()\"\r\n            [tabindex]=\"-1\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"depth() + 1\"\r\n            [attr.aria-setsize]=\"visibleNodes().length\"\r\n            [attr.aria-posinset]=\"$index + 1\"\r\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\r\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\r\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\r\n            [attr.aria-checked]=\"\r\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\r\n            \"\r\n            (focus)=\"treeService.navigatedNode.set(node)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"node\"\r\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\r\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\r\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\r\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\r\n            <div [class]=\"nodeContainerClass()\">\r\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        tabindex=\"-1\"\r\n                        [class]=\"nodeExpanderClass()\"\r\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\r\n                        [attr.aria-label]=\"\r\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\r\n                        \"\r\n                        (click)=\"onExpandStateChange(node)\">\r\n                        @if (node.loading()) {\r\n                            <i class=\"ri-loader-2-line\"></i>\r\n                        } @else if (nodeComponent.expanded()) {\r\n                            <i class=\"ri-arrow-down-s-fill\"></i>\r\n                        } @else {\r\n                            <i class=\"ri-arrow-right-s-fill\"></i>\r\n                        }\r\n                    </button>\r\n                }\r\n                @if (nodeComponent.checkable()) {\r\n                    <mona-check-box\r\n                        aria-hidden=\"true\"\r\n                        [tabIndex]=\"-1\"\r\n                        [disabled]=\"nodeComponent.disabled()\"\r\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\r\n                        [ngModel]=\"nodeComponent.checked()\"\r\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\r\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\r\n                }\r\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\r\n            </div>\r\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\r\n                <div\r\n                    class=\"grid overflow-hidden\"\r\n                    [animate.enter]=\"nodeExpandEnterClass()\"\r\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\r\n                    <div class=\"min-h-0 overflow-hidden\">\r\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\r\n                    </div>\r\n                </div>\r\n            }\r\n            @if (!nodeComponent.disabled()) {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\r\n                    <span>\r\n                        @switch (treeService.dropPositionSignal()?.position) {\r\n                            @case (\"before\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-up-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"after\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-down-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"inside\") {\r\n                                <i class=\"ri-add-line\"></i>\r\n                            }\r\n                            @default {\r\n                                <i class=\"ri-prohibited-2-line\"></i>\r\n                            }\r\n                        }\r\n                    </span>\r\n                    <span>{{ nodeComponent.nodeText() }}</span>\r\n                </div>\r\n            } @else {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, decorators: [{
             type: Component,
@@ -1795,7 +1795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         CdkDragPreview,
                         CheckBoxComponent,
                         TreeNodeElementIdPipe
-                    ], template: "<ul\r\n    [class]=\"listClass()\"\r\n    [attr.role]=\"parent() ? 'group' : null\"\r\n    cdkDropList\r\n    [cdkDropListSortingDisabled]=\"true\"\r\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\r\n    @for (node of visibleNodes(); track node.uid) {\r\n        <li\r\n            [attr.id]=\"node.uid | treeNodeElementId\"\r\n            [attr.data-uid]=\"node.uid\"\r\n            [class]=\"listItemClass()\"\r\n            [tabindex]=\"-1\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"depth() + 1\"\r\n            [attr.aria-setsize]=\"visibleNodes().length\"\r\n            [attr.aria-posinset]=\"$index + 1\"\r\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\r\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\r\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\r\n            [attr.aria-checked]=\"\r\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\r\n            \"\r\n            (focus)=\"treeService.navigatedNode.set(node)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"node\"\r\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\r\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\r\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\r\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\r\n            <div [class]=\"nodeContainerClass()\">\r\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        tabindex=\"-1\"\r\n                        [class]=\"nodeExpanderClass()\"\r\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\r\n                        [attr.aria-label]=\"\r\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\r\n                        \"\r\n                        (click)=\"onExpandStateChange(node)\">\r\n                        @if (node.loading()) {\r\n                            <i class=\"ri-loader-2-line\"></i>\r\n                        } @else if (nodeComponent.expanded()) {\r\n                            <i class=\"ri-arrow-down-s-fill\"></i>\r\n                        } @else {\r\n                            <i class=\"ri-arrow-right-s-fill\"></i>\r\n                        }\r\n                    </button>\r\n                }\r\n                @if (nodeComponent.checkable()) {\r\n                    <mona-check-box\r\n                        aria-hidden=\"true\"\r\n                        [tabIndex]=\"-1\"\r\n                        [disabled]=\"nodeComponent.disabled()\"\r\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\r\n                        [ngModel]=\"nodeComponent.checked()\"\r\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\r\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\r\n                }\r\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\r\n            </div>\r\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\r\n                <div\r\n                    class=\"grid overflow-hidden\"\r\n                    [animate.enter]=\"nodeExpandEnterClass()\"\r\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\r\n                    <div class=\"min-h-0 overflow-hidden\">\r\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\r\n                    </div>\r\n                </div>\r\n            }\r\n            @if (!nodeComponent.disabled()) {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\r\n                    <span>\r\n                        @switch (treeService.dropPositionSignal()?.position) {\r\n                            @case (\"before\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-up-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"after\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-down-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"inside\") {\r\n                                <i class=\"ri-add-line\"></i>\r\n                            }\r\n                            @default {\r\n                                <i class=\"ri-prohibited-2-line\"></i>\r\n                            }\r\n                        }\r\n                    </span>\r\n                    <span>{{ nodeComponent.nodeText() }}</span>\r\n                </div>\r\n            } @else {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
+                    ], template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
         }], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: true }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }] } });
 
 class TreeDropHintComponent {
@@ -1863,13 +1863,13 @@ class TreeDropHintComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\r\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-tree-drop-hint", changeDetection: ChangeDetectionStrategy.Eager, host: {
                         "[class]": "baseClass()"
-                    }, template: "<i [class]=\"iconClass()\"></i>\r\n" }]
+                    }, template: "<i [class]=\"iconClass()\"></i>\n" }]
         }], ctorParameters: () => [] });
 
 class TreeComponent {

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

@@ -133,9 +133,9 @@ class ListBoxTransferEvent extends PreventableEvent {
     }
 }
 
-const listBoxBaseVariants = cva(`
-        flex gap-1
-        [&_mona-list-view]:w-full
+const listBoxBaseVariants = cva(`
+        flex gap-1
+        [&_mona-list-view]:w-full
     `, {
     variants: {
         direction: {
@@ -171,9 +171,9 @@ const listBoxBaseVariants = cva(`
         }
     ]
 });
-const listBoxToolbarVariants = cva(`
-        flex gap-1
-        items-center justify-center
+const listBoxToolbarVariants = cva(`
+        flex gap-1
+        items-center justify-center
     `, {
     variants: {
         direction: {
@@ -588,7 +588,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 +615,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 }] }] } });
 
 /*