@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,630 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, output, input, signal, effect, untracked, afterNextRender, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LucideChevronUp, LucideChevronDown, LucideChevronLeft, LucideChevronRight, LucideChevronsLeft, LucideChevronsRight, LucideX, LucideTrash2 } from '@lucide/angular';
+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';
+
+class ListBoxFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListBoxFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaListBoxFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListBoxFooterTemplate]"
+                }]
+        }] });
+
+class ListBoxHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListBoxHeaderTemplateDirective, isStandalone: true, selector: "ng-template[monaListBoxHeaderTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListBoxHeaderTemplate]"
+                }]
+        }] });
+
+class ListBoxItemTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListBoxItemTemplateDirective, isStandalone: true, selector: "ng-template[monaListBoxItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListBoxItemTemplate]"
+                }]
+        }] });
+
+class ListBoxNoDataTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxNoDataTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListBoxNoDataTemplateDirective, isStandalone: true, selector: "ng-template[monaListBoxNoDataTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxNoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListBoxNoDataTemplate]"
+                }]
+        }] });
+
+class ListBoxClearEvent extends PreventableEvent {
+    #action = "clear";
+    #selectedItems;
+    constructor(selectedItems, originalEvent) {
+        super("listBoxClear", originalEvent);
+        this.#selectedItems = [...selectedItems];
+    }
+    get action() {
+        return this.#action;
+    }
+    get selectedItems() {
+        return this.#selectedItems;
+    }
+}
+
+class ListBoxMoveEvent extends PreventableEvent {
+    #action;
+    #newIndex;
+    #oldIndex;
+    #selectedIndices;
+    #selectedItems;
+    constructor(action, selectedItems, selectedIndices, oldIndex, newIndex, originalEvent) {
+        super("listBoxMove", originalEvent);
+        this.#action = action;
+        this.#newIndex = newIndex;
+        this.#oldIndex = oldIndex;
+        this.#selectedIndices = Array.from(selectedIndices);
+        this.#selectedItems = Array.from(selectedItems);
+    }
+    get action() {
+        return this.#action;
+    }
+    get newIndex() {
+        return this.#newIndex;
+    }
+    get oldIndex() {
+        return this.#oldIndex;
+    }
+    get selectedIndices() {
+        return this.#selectedIndices;
+    }
+    get selectedItems() {
+        return this.#selectedItems;
+    }
+}
+
+class ListBoxRemoveEvent extends PreventableEvent {
+    #action = "remove";
+    #selectedItems;
+    constructor(selectedItems, originalEvent) {
+        super("listBoxRemove", originalEvent);
+        this.#selectedItems = [...selectedItems];
+    }
+    get action() {
+        return this.#action;
+    }
+    get selectedItems() {
+        return this.#selectedItems;
+    }
+}
+
+class ListBoxTransferEvent extends PreventableEvent {
+    #action;
+    #selectedItems;
+    constructor(action, selectedItems, originalEvent) {
+        super("listBoxTransfer", originalEvent);
+        this.#action = action;
+        this.#selectedItems = Array.from(selectedItems);
+    }
+    get action() {
+        return this.#action;
+    }
+    get selectedItems() {
+        return this.#selectedItems;
+    }
+}
+
+const listBoxBaseVariants = cva(`
+        flex gap-1
+        [&_mona-list-view]:w-full
+    `, {
+    variants: {
+        direction: {
+            horizontal: "flex-row",
+            vertical: "flex-col"
+        },
+        reversed: {
+            true: "",
+            false: ""
+        },
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        },
+        size: {
+            small: "text-sm",
+            medium: "text-base",
+            large: "text-lg"
+        }
+    },
+    compoundVariants: [
+        {
+            direction: "horizontal",
+            reversed: true,
+            class: "flex-row-reverse"
+        },
+        {
+            direction: "vertical",
+            reversed: true,
+            class: "flex-col-reverse"
+        }
+    ]
+});
+const listBoxToolbarVariants = cva(`
+        flex gap-1
+        items-center justify-center
+    `, {
+    variants: {
+        direction: {
+            horizontal: "flex-row",
+            vertical: "flex-col"
+        }
+    }
+});
+
+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
+         * (e.g., "transfer all"). For actions that require a real selection to proceed, use {@link getSelectedListBox} instead.
+         */
+        this.activeListBox = computed(() => {
+            const selectedItems = this.selectedItems();
+            if (selectedItems.any()) {
+                return this;
+            }
+            const connectedList = this.connectedList();
+            if (connectedList?.selectedItems().any()) {
+                return connectedList;
+            }
+            return this;
+        }, /* @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 });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = contentChild(ListBoxFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.headerTemplate = contentChild(ListBoxHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.itemTemplate = contentChild(ListBoxItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.listHeight = computed(() => {
+            const height = this.height();
+            return typeof height === "number" ? `${height}px` : height;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []));
+        this.listWidth = computed(() => {
+            const width = this.width();
+            return typeof width === "number" ? `${width}px` : width;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
+        this.noDataTemplate = contentChild(ListBoxNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.selectableOptions = computed(() => {
+            const enabled = true;
+            const mode = this.selectionMode();
+            if (mode === "multiple") {
+                return { enabled, mode };
+            }
+            return { enabled, mode, toggleable: this.singleSelectionToggleable() };
+        }, /* @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 });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbarClasses" }] : /* istanbul ignore next */ []));
+        this.toolbarOptions = computed(() => {
+            const toolbar = this.toolbar();
+            if (typeof toolbar === "boolean") {
+                return toolbar ? this.getDefaultToolbarOptions() : null;
+            }
+            return this.updateToolbarOptions(toolbar);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbarOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when a toolbar action button is clicked, carrying the action's details.
+         */
+        this.actionClick = output();
+        /**
+         * @description Accessible name for the list box's `listbox` element. Describe what the list represents,
+         * which matters in particular when connecting two list boxes.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description The other list box to transfer items to and from using the toolbar actions.
+         * @default null
+         */
+        this.connectedList = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "connectedList" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the height of the component.
+         * @default 100%
+         */
+        this.height = input("100%", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Collection of items to render.
+         * @default []
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.listBoxItems = signal(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listBoxItems" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * @default medium
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Property name or accessor used to derive the key from a data item, used to identify selected items.
+         * @default ""
+         */
+        this.selectBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectBy" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Keys of the currently selected items.
+         * @default []
+         */
+        this.selectedKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted with the updated keys whenever the selection changes.
+         */
+        this.selectedKeysChange = output();
+        /**
+         * @description Emitted with the selected and deselected items whenever the selection changes.
+         */
+        this.selectionChange = output();
+        this.selectedItems = computed(() => {
+            const listItems = this.#listService.selectedListItems();
+            return listItems.select(item => item.data).toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        this.selectedItems$ = toObservable(this.selectedItems);
+        /**
+         * @description Allows multiple items to be selected simultaneously when set to `"multiple"`.
+         * @default single
+         */
+        this.selectionMode = input("single", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Allows an already-selected item to be deselected by clicking it again while `selectionMode`
+         * is `"single"`. Has no effect when `selectionMode` is `"multiple"`.
+         * @default true
+         */
+        this.singleSelectionToggleable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleSelectionToggleable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the component's dimensions.
+         * @default medium
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Property name or accessor used to derive the display text from a data item.
+         * @default ""
+         */
+        this.textField = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Shows the action toolbar. Pass `false` to hide it entirely, or an options object to customize
+         * which actions are shown and where the toolbar is positioned.
+         * @default true
+         */
+        this.toolbar = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the component.
+         * @default 100%
+         */
+        this.width = input("100%", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const items = this.items();
+            untracked(() => this.listBoxItems.set(ImmutableList.create(items)));
+        });
+        effect(onCleanup => {
+            const connectedList = this.connectedList();
+            if (!connectedList) {
+                return;
+            }
+            const subscription = connectedList.selectionChange.subscribe(() => {
+                untracked(() => this.clearSelections());
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+    }
+    /**
+     * @description Clears the current selection without emitting `selectionChange`. Call {@link notifySelectionChange}
+     * afterward if the resulting selection change should be emitted.
+     */
+    clearSelections() {
+        this.#listService.clearSelections();
+    }
+    /**
+     * @description Emits `selectionChange` for any selection changes made since the last notification
+     * (e.g., after programmatically calling {@link clearSelections}).
+     */
+    notifySelectionChange() {
+        this.#notifySelectionChange$.next(true);
+    }
+    onClearClick(event) {
+        const listBox = this.activeListBox();
+        if (!listBox) {
+            return;
+        }
+        const selectedItems = listBox.selectedItems();
+        if (selectedItems.none()) {
+            return;
+        }
+        const clearEvent = new ListBoxClearEvent(selectedItems, event);
+        listBox.actionClick.emit(clearEvent);
+        if (!clearEvent.isDefaultPrevented()) {
+            listBox.clearSelections();
+            listBox.notifySelectionChange();
+            this.connectedList()?.clearSelections();
+            this.connectedList()?.notifySelectionChange();
+        }
+    }
+    onMoveClick(direction, event) {
+        const activeListBox = this.getSelectedListBox();
+        if (!activeListBox) {
+            return;
+        }
+        const selectedItems = activeListBox.selectedItems();
+        if (selectedItems.none()) {
+            const moveEvent = new ListBoxMoveEvent(direction, [], [], -1, -1, event);
+            activeListBox.actionClick.emit(moveEvent);
+            return;
+        }
+        const listBoxItems = activeListBox.listBoxItems();
+        const startIndex = listBoxItems.indexOf(selectedItems.elementAt(0));
+        const endIndex = listBoxItems.indexOf(selectedItems.elementAt(selectedItems.length - 1));
+        let newMoveIndex;
+        if (direction === "moveDown") {
+            if (endIndex >= listBoxItems.length - 1) {
+                return;
+            }
+            newMoveIndex = endIndex + 1;
+        }
+        else {
+            if (startIndex <= 0) {
+                return;
+            }
+            newMoveIndex = startIndex - 1;
+        }
+        const selectedIndices = selectedItems.select(item => listBoxItems.indexOf(item)).toArray();
+        const moveEvent = new ListBoxMoveEvent(direction, selectedItems, selectedIndices, startIndex, newMoveIndex, event);
+        activeListBox.actionClick.emit(moveEvent);
+        if (!moveEvent.isDefaultPrevented()) {
+            activeListBox.scrollToSelectedItem();
+        }
+    }
+    onRemoveClick(event) {
+        const listBox = this.activeListBox();
+        if (!listBox) {
+            return;
+        }
+        const selectedItems = listBox.selectedItems();
+        if (selectedItems.none()) {
+            return;
+        }
+        const removeEvent = new ListBoxRemoveEvent(selectedItems, event);
+        listBox.actionClick.emit(removeEvent);
+        if (!removeEvent.isDefaultPrevented()) {
+            listBox.scrollToSelectedItem();
+            this.#dataStateChange$.next();
+        }
+    }
+    onSelectedKeysChange(keys) {
+        this.selectedKeysChange.emit(keys);
+        this.connectedList()?.clearSelections();
+        this.#notifySelectionChange$.next(true);
+    }
+    onTransferClick(action, event) {
+        const connectedList = this.connectedList();
+        if (!connectedList) {
+            return;
+        }
+        const sourceList = this.activeListBox();
+        const targetList = this.activeListBox() === connectedList ? this : connectedList;
+        if (!sourceList || !targetList) {
+            return;
+        }
+        const selectedItems = sourceList.selectedItems();
+        const transferEvent = new ListBoxTransferEvent(action, selectedItems, event);
+        if (action === "transferFrom" || action === "transferAllFrom") {
+            connectedList.actionClick.emit(transferEvent);
+        }
+        else {
+            sourceList.actionClick.emit(transferEvent);
+        }
+        if (!transferEvent.isDefaultPrevented()) {
+            sourceList.clearSelections();
+            targetList.clearSelections();
+            targetList.scrollToSelectedItem();
+            this.#dataStateChange$.next();
+        }
+    }
+    createSelectedChangeNotifier() {
+        return this.selectedItems$.pipe(sample(this.#notifySelectionChange$.pipe(delay(0), filter(e => e), tap(() => this.#notifySelectionChange$.next(false)))), scan((previous, current) => {
+            const selectedItems = current.where(i => !previous.contains(i)).toArray();
+            const deselectedItems = previous.where(i => !current.contains(i)).toArray();
+            if (selectedItems.length > 0 || deselectedItems.length > 0) {
+                this.activeListBox()?.selectionChange.emit({ selectedItems, deselectedItems });
+            }
+            return current;
+        }, this.selectedItems()));
+    }
+    /**
+     * The list box (`this` or the connected list box, recursively) that currently has a real selection
+     * or `null` if neither side has one. Unlike {@link activeListBox}, this does not fall back to `this`,
+     * since move actions need to know an actual selected index to operate on.
+     */
+    getSelectedListBox() {
+        if (this.selectedItems().any()) {
+            return this;
+        }
+        if (this.connectedList() != null) {
+            return this.connectedList().getSelectedListBox();
+        }
+        return null;
+    }
+    getDefaultToolbarOptions() {
+        return {
+            actions: [
+                "clear",
+                "moveDown",
+                "moveUp",
+                "remove",
+                "transferAllFrom",
+                "transferAllTo",
+                "transferFrom",
+                "transferTo"
+            ],
+            position: "right"
+        };
+    }
+    scrollToSelectedItem() {
+        const selectedItemElement = this.#hostElementRef.nativeElement.querySelector("[data-selected='true']");
+        if (selectedItemElement) {
+            selectedItemElement.scrollIntoView({ behavior: "auto", block: "center" });
+        }
+    }
+    setSubscriptions() {
+        this.#dataStateChange$
+            .pipe(takeUntilDestroyed(this.#destroyRef), startWith(null), switchMap(() => this.createSelectedChangeNotifier()))
+            .subscribe();
+    }
+    updateToolbarOptions(options) {
+        if (typeof options === "boolean") {
+            return options ? this.getDefaultToolbarOptions() : null;
+        }
+        const position = options.position ?? "right";
+        let actions;
+        if (options.actions && options.actions.length > 0) {
+            actions = options.actions;
+        }
+        else if (options.actions && options.actions.length === 0) {
+            actions = [];
+        }
+        else {
+            actions = [
+                "clear",
+                "moveDown",
+                "moveUp",
+                "remove",
+                "transferAllFrom",
+                "transferAllTo",
+                "transferFrom",
+                "transferTo"
+            ];
+        }
+        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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-list-box", providers: [ListService], imports: [
+                        ListViewComponent,
+                        ListViewSelectableDirective,
+                        ListViewItemTemplateDirective,
+                        NgTemplateOutlet,
+                        ButtonDirective,
+                        ContainsPipe,
+                        ListViewNavigableDirective,
+                        ListViewNoDataTemplateDirective,
+                        ListViewFooterTemplateDirective,
+                        ListViewHeaderTemplateDirective,
+                        LucideChevronUp,
+                        LucideChevronDown,
+                        LucideChevronLeft,
+                        LucideChevronRight,
+                        LucideChevronsLeft,
+                        LucideChevronsRight,
+                        LucideX,
+                        LucideTrash2
+                    ], host: {
+                        "[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" }]
+        }], 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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/list-box
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListBoxClearEvent, ListBoxComponent, ListBoxFooterTemplateDirective, ListBoxHeaderTemplateDirective, ListBoxItemTemplateDirective, ListBoxMoveEvent, ListBoxNoDataTemplateDirective, ListBoxRemoveEvent, ListBoxTransferEvent };
+//# sourceMappingURL=nanahoshi-mona-ui-list-box.mjs.map