@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,733 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, contentChild, TemplateRef, computed, input, output, effect, untracked, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FilterInputComponent } from '@nanahoshi/mona-ui/internal/filter-input';
+import { TreeService, TreeComponent, TreeNodeTemplateDirective, NodeDropEvent } from '@nanahoshi/mona-ui/internal/tree';
+export { NodeCheckEvent, NodeClickEvent, NodeDragEndEvent, NodeDragEvent, NodeDragStartEvent, NodeDropEvent, moveFlatTreeNode, moveTreeNode } from '@nanahoshi/mona-ui/internal/tree';
+import { sequenceEqual } from '@mirei/ts-collections';
+import { pairwise } from 'rxjs';
+
+class TreeViewNodeTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TreeViewNodeTemplateDirective, isStandalone: true, selector: "ng-template[monaTreeViewNodeTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewNodeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaTreeViewNodeTemplate]"
+                }]
+        }] });
+
+class TreeViewComponent {
+    #destroyRef;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.nodeTemplate = contentChild(TreeViewNodeTemplateDirective, { ...(ngDevMode ? { debugName: "nodeTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.treeService = inject((TreeService));
+        this.filterAriaLabel = computed(() => {
+            const ariaLabel = this.ariaLabel();
+            return ariaLabel ? `Filter ${ariaLabel}` : "Filter tree";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterAriaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables CSS transitions when nodes expand or collapse.
+         * @default true
+         */
+        this.animate = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the tree. Describe what the tree represents. When empty, assistive technology announces the role without a label.
+         * @default ""
+         */
+        this.ariaLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Property name or accessor used to derive a node's children from a data item. Accepts a property name, a function returning the children, or a function returning an observable of the children.
+         * @default ""
+         */
+        this.children = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Collection of items to render.
+         * @default []
+         */
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Predicate that determines whether a node has children. Required when the children selector returns an observable.
+         * @default null
+         */
+        this.hasChildren = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Property name that holds a node's unique identifier. Required when `mode` is set to `"flat"`.
+         * @default ""
+         */
+        this.idField = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "idField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Shape of the source data: `"hierarchical"` for nested items via `children`, or `"flat"` for a flat list linked by `idField` and `parentIdField`.
+         * @default "hierarchical"
+         */
+        this.mode = input("hierarchical", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the tree-view loses focus.
+         */
+        this.blur = output();
+        /**
+         * @description Emitted when the tree-view gains focus.
+         */
+        this.focus = output();
+        /**
+         * @description Emitted when a node is clicked.
+         */
+        this.nodeClick = output();
+        /**
+         * @description Property name that holds a node's parent identifier. Required when `mode` is set to `"flat"`.
+         * @default ""
+         */
+        this.parentIdField = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parentIdField" }] : /* 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 */ []));
+        effect(() => {
+            const mode = this.mode();
+            if (mode === "flat") {
+                this.#setFlatDataStructureFields();
+            }
+            else if (mode === "hierarchical") {
+                this.#setHierarchicalDataStructureFields();
+            }
+            this.#setGenericDataStructureFields(mode);
+        });
+        effect(() => {
+            const animate = this.animate();
+            untracked(() => {
+                this.treeService.setAnimationEnabled(animate);
+            });
+        });
+        afterNextRender({
+            read: () => this.#setSubscriptions()
+        });
+    }
+    moveNode(source, target, position) {
+        if (position === "outside") {
+            return null;
+        }
+        const sourceNode = this.treeService.getNodeByUid(source.uid);
+        if (!sourceNode) {
+            return null;
+        }
+        const targetNode = this.treeService.getNodeByUid(target.uid);
+        if (!targetNode) {
+            return null;
+        }
+        const originalParentUid = sourceNode.parent?.uid ?? null;
+        const originalIndex = sourceNode.parent !== null
+            ? sourceNode.parent.children().toList().indexOf(sourceNode)
+            : this.treeService.nodeSet().toList().indexOf(sourceNode);
+        this.treeService.moveNode(sourceNode, targetNode, position);
+        return { originalParentUid, originalIndex, sourceNodeUid: sourceNode.uid };
+    }
+    undoMoveNode(snapshot) {
+        const sourceNode = this.treeService.getNodeByUid(snapshot.sourceNodeUid);
+        if (!sourceNode) {
+            return;
+        }
+        if (snapshot.originalParentUid === null) {
+            this.treeService.detachNode(sourceNode);
+            this.treeService.insertNodeAtIndex(sourceNode, null, snapshot.originalIndex);
+        }
+        else {
+            this.treeService.detachNode(sourceNode);
+            this.treeService.insertNodeAtIndex(sourceNode, snapshot.originalParentUid, snapshot.originalIndex);
+        }
+    }
+    onFilterChange(event) {
+        this.treeService.filterChange$.next(event);
+        if (!event.isDefaultPrevented()) {
+            this.treeService.filter$.next(event.filter);
+        }
+    }
+    #setFlatDataStructureFields() {
+        const idField = this.idField();
+        const parentIdField = this.parentIdField();
+        untracked(() => {
+            this.treeService.setFlatIdField(idField);
+            this.treeService.setFlatParentIdField(parentIdField);
+        });
+    }
+    #setGenericDataStructureFields(mode) {
+        const textField = this.textField();
+        const data = this.data();
+        untracked(() => {
+            this.treeService.setTextField(textField);
+            this.treeService.setDataStructure(mode);
+            this.treeService.setData(data);
+        });
+    }
+    #setHierarchicalDataStructureFields() {
+        const childrenSelector = this.children();
+        const hasChildren = this.hasChildren();
+        untracked(() => {
+            this.treeService.setChildrenSelector(childrenSelector);
+            this.treeService.setHasChildrenPredicate(hasChildren);
+        });
+    }
+    #setSubscriptions() {
+        this.treeService.nodeClick$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.nodeClick.emit(event);
+        });
+        this.treeService.focus$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => this.focus.emit(e));
+        this.treeService.blur$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => this.blur.emit(e));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\r\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\r\n        <mona-filter-input\r\n            [filter]=\"treeService.filterText()\"\r\n            [debounce]=\"treeService.filterableOptions().debounce\"\r\n            [placeholder]=\"treeService.filterPlaceholder()\"\r\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\r\n    </div>\r\n}\r\n<div class=\"flex-1 overflow-auto\">\r\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\r\n        @if (nodeTemplate()) {\r\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\r\n            </ng-template>\r\n        }\r\n    </mona-tree>\r\n</div>\r\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tree-view", imports: [FilterInputComponent, TreeComponent, TreeNodeTemplateDirective, NgTemplateOutlet], providers: [TreeService], template: "@if (treeService.filterableOptions().enabled) {\r\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\r\n        <mona-filter-input\r\n            [filter]=\"treeService.filterText()\"\r\n            [debounce]=\"treeService.filterableOptions().debounce\"\r\n            [placeholder]=\"treeService.filterPlaceholder()\"\r\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\r\n    </div>\r\n}\r\n<div class=\"flex-1 overflow-auto\">\r\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\r\n        @if (nodeTemplate()) {\r\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\r\n            </ng-template>\r\n        }\r\n    </mona-tree>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TreeViewNodeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], parentIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentIdField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }] } });
+
+class TreeViewCheckableDirective {
+    #defaultOptions;
+    #destroyRef;
+    #treeService;
+    constructor() {
+        this.#defaultOptions = {
+            checkChildren: true,
+            checkParents: true,
+            enabled: true,
+            mode: "multiple"
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#treeService = inject(TreeService);
+        /**
+         * @description Property name or accessor used to derive a node's check key from its data. Falls back to the node's data when unset.
+         * @default ""
+         */
+        this.checkBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkBy" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Keys of the currently checked nodes.
+         * @default []
+         */
+        this.checkedKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkedKeys" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the checked keys change.
+         */
+        this.checkedKeysChange = output();
+        /**
+         * @description Predicate that determines whether a node displays a checkbox. When unset, every node displays a checkbox.
+         * @default null
+         */
+        this.hasCheckbox = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCheckbox" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when a node is checked or unchecked.
+         */
+        this.nodeCheck = output();
+        /**
+         * @description Configures check mode and whether checking a node also checks its children or parents. Merged over `{ checkChildren: true, checkParents: true, enabled: true, mode: "multiple" }` when applied bare.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaTreeViewCheckable" });
+        effect(() => {
+            const checkBy = this.checkBy();
+            untracked(() => {
+                this.#treeService.setCheckBy(checkBy ?? "");
+            });
+        });
+        effect(() => {
+            const checkedKeys = this.checkedKeys();
+            untracked(() => {
+                this.#treeService.setCheckedKeys(checkedKeys ?? []);
+            });
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#treeService.setCheckableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#treeService.setCheckableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+        effect(() => {
+            const hasCheckbox = this.hasCheckbox();
+            untracked(() => {
+                this.#treeService.setHasCheckboxPredicate(hasCheckbox);
+            });
+        });
+    }
+    ngOnInit() {
+        this.setNodeCheckSubscription();
+    }
+    setNodeCheckSubscription() {
+        this.#treeService.checkedKeys$
+            .pipe(pairwise(), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(([oldKeys, keys]) => {
+            const orderedOldKeys = oldKeys.orderBy(k => k);
+            const orderedKeys = keys.orderBy(k => k);
+            if (sequenceEqual(orderedOldKeys, orderedKeys)) {
+                return;
+            }
+            this.checkedKeysChange.emit(keys.toArray());
+        });
+        this.#treeService.nodeCheck$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.nodeCheck.emit(event);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewCheckableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TreeViewCheckableDirective, isStandalone: true, selector: "mona-tree-view[monaTreeViewCheckable]", inputs: { checkBy: { classPropertyName: "checkBy", publicName: "checkBy", isSignal: true, isRequired: false, transformFunction: null }, checkedKeys: { classPropertyName: "checkedKeys", publicName: "checkedKeys", isSignal: true, isRequired: false, transformFunction: null }, hasCheckbox: { classPropertyName: "hasCheckbox", publicName: "hasCheckbox", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaTreeViewCheckable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedKeysChange: "checkedKeysChange", nodeCheck: "nodeCheck" }, exportAs: ["monaTreeViewCheckable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewCheckableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-tree-view[monaTreeViewCheckable]",
+                    exportAs: "monaTreeViewCheckable"
+                }]
+        }], ctorParameters: () => [], propDecorators: { checkBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkBy", required: false }] }], checkedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedKeys", required: false }] }], checkedKeysChange: [{ type: i0.Output, args: ["checkedKeysChange"] }], hasCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCheckbox", required: false }] }], nodeCheck: [{ type: i0.Output, args: ["nodeCheck"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaTreeViewCheckable", required: false }] }] } });
+
+class TreeViewDisableDirective {
+    #defaultOptions;
+    #treeService;
+    constructor() {
+        this.#defaultOptions = {
+            disableChildren: true,
+            enabled: true
+        };
+        this.#treeService = inject(TreeService);
+        /**
+         * @description Property name or accessor used to derive a node's disable key from its data. Falls back to the node's data when unset.
+         * @default ""
+         */
+        this.disableBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableBy" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Keys of the currently disabled nodes.
+         * @default []
+         */
+        this.disabledKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledKeys" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Configures whether disabling a node also disables its children. Merged over `{ disableChildren: true, enabled: true }` when applied bare.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaTreeViewDisable" });
+        effect(() => {
+            const disableBy = this.disableBy();
+            untracked(() => {
+                this.#treeService.setDisableBy(disableBy ?? "");
+            });
+        });
+        effect(() => {
+            const disabledKeys = this.disabledKeys();
+            untracked(() => {
+                this.#treeService.setDisabledKeys(disabledKeys ?? []);
+            });
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#treeService.setDisableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#treeService.setDisableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewDisableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TreeViewDisableDirective, isStandalone: true, selector: "mona-tree-view[monaTreeViewDisable]", inputs: { disableBy: { classPropertyName: "disableBy", publicName: "disableBy", isSignal: true, isRequired: false, transformFunction: null }, disabledKeys: { classPropertyName: "disabledKeys", publicName: "disabledKeys", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaTreeViewDisable", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["monaTreeViewDisable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewDisableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-tree-view[monaTreeViewDisable]",
+                    exportAs: "monaTreeViewDisable"
+                }]
+        }], ctorParameters: () => [], propDecorators: { disableBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBy", required: false }] }], disabledKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKeys", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaTreeViewDisable", required: false }] }] } });
+
+class TreeViewDragAndDropDirective {
+    #defaultOptions;
+    #destroyRef;
+    #treeService;
+    #treeView;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#treeService = inject(TreeService);
+        this.#treeView = inject((TreeViewComponent));
+        /**
+         * @description Emitted while a node is being dragged.
+         */
+        this.nodeDrag = output();
+        /**
+         * @description Emitted when a node drag ends.
+         */
+        this.nodeDragEnd = output();
+        /**
+         * @description Emitted when a node drag starts.
+         */
+        this.nodeDragStart = output();
+        /**
+         * @description Emitted when a node is dropped.
+         */
+        this.nodeDrop = output();
+        /**
+         * @description Configures whether dragging nodes to reorder or reparent them is enabled. Merged over `{ enabled: true }` when applied bare.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaTreeViewDragAndDrop" });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#treeService.setDraggableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#treeService.setDraggableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+    }
+    setSubscriptions() {
+        this.#treeService.nodeDrag$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => {
+            this.nodeDrag.emit(e.dragEvent);
+        });
+        this.#treeService.nodeDragEnd$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => {
+            this.nodeDragEnd.emit(e);
+        });
+        this.#treeService.nodeDragStart$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => {
+            this.nodeDragStart.emit(e);
+        });
+        this.#treeService.nodeDrop$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => {
+            const event = new NodeDropEvent({
+                event: e.event,
+                position: e.position,
+                sourceNode: e.sourceNode,
+                targetNode: e.targetNode,
+                treeView: this.#treeView
+            });
+            this.nodeDrop.emit(event);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewDragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TreeViewDragAndDropDirective, isStandalone: true, selector: "mona-tree-view[monaTreeViewDragAndDrop]", inputs: { options: { classPropertyName: "options", publicName: "monaTreeViewDragAndDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeDrag: "nodeDrag", nodeDragEnd: "nodeDragEnd", nodeDragStart: "nodeDragStart", nodeDrop: "nodeDrop" }, exportAs: ["monaTreeViewDragAndDrop"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewDragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-tree-view[monaTreeViewDragAndDrop]",
+                    exportAs: "monaTreeViewDragAndDrop"
+                }]
+        }], ctorParameters: () => [], propDecorators: { nodeDrag: [{ type: i0.Output, args: ["nodeDrag"] }], nodeDragEnd: [{ type: i0.Output, args: ["nodeDragEnd"] }], nodeDragStart: [{ type: i0.Output, args: ["nodeDragStart"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaTreeViewDragAndDrop", required: false }] }] } });
+
+class TreeViewExpandableDirective {
+    #defaultOptions;
+    #destroyRef;
+    #treeService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#treeService = inject(TreeService);
+        /**
+         * @description Emitted when a node is collapsed.
+         */
+        this.collapse = output();
+        /**
+         * @description Emitted when a node is expanded.
+         */
+        this.expand = output();
+        /**
+         * @description Property name or accessor used to derive a node's expand key from its data. Falls back to the node's data when unset.
+         * @default ""
+         */
+        this.expandBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandBy" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Keys of the currently expanded nodes.
+         * @default []
+         */
+        this.expandedKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the expanded keys change.
+         */
+        this.expandedKeysChange = output();
+        /**
+         * @description Configures whether expanding and collapsing nodes is enabled. Merged over `{ enabled: true }` when applied bare.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaTreeViewExpandable" });
+        effect(() => {
+            const expandBy = this.expandBy();
+            untracked(() => {
+                this.#treeService.setExpandBy(expandBy ?? "");
+            });
+        });
+        effect(() => {
+            const expandedKeys = this.expandedKeys();
+            untracked(() => {
+                this.#treeService.setExpandedKeys(expandedKeys ?? []);
+            });
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#treeService.setExpandableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#treeService.setExpandableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+    }
+    setSubscriptions() {
+        this.#treeService.expandedKeys$
+            .pipe(pairwise(), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(([oldKeys, keys]) => {
+            const orderedOldKeys = oldKeys.orderBy(k => k);
+            const orderedKeys = keys.orderBy(k => k);
+            if (sequenceEqual(orderedOldKeys, orderedKeys)) {
+                return;
+            }
+            this.expandedKeysChange.emit(keys.toArray());
+        });
+        this.#treeService.nodeExpand$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (event.expanded) {
+                this.expand.emit(event.node.nodeItem);
+            }
+            else {
+                this.collapse.emit(event.node.nodeItem);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewExpandableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TreeViewExpandableDirective, isStandalone: true, selector: "mona-tree-view[monaTreeViewExpandable]", inputs: { expandBy: { classPropertyName: "expandBy", publicName: "expandBy", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaTreeViewExpandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapse: "collapse", expand: "expand", expandedKeysChange: "expandedKeysChange" }, exportAs: ["monaTreeViewExpandable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewExpandableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-tree-view[monaTreeViewExpandable]",
+                    exportAs: "monaTreeViewExpandable"
+                }]
+        }], ctorParameters: () => [], propDecorators: { collapse: [{ type: i0.Output, args: ["collapse"] }], expand: [{ type: i0.Output, args: ["expand"] }], expandBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBy", required: false }] }], expandedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedKeys", required: false }] }], expandedKeysChange: [{ type: i0.Output, args: ["expandedKeysChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaTreeViewExpandable", required: false }] }] } });
+
+class TreeViewFilterableDirective {
+    #defaultOptions;
+    #destroyRef;
+    #treeService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true,
+            operator: "contains",
+            caseSensitive: false,
+            debounce: 0
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#treeService = inject(TreeService);
+        /**
+         * @description Current filter text used to narrow the visible nodes.
+         * @default ""
+         */
+        this.filter = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the filter value changes.
+         */
+        this.filterChange = output();
+        /**
+         * @description Placeholder text shown in the filter input.
+         * @default ""
+         */
+        this.filterPlaceholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Configures the filter operator, case sensitivity, and debounce delay. Merged over `{ enabled: true, operator: "contains", caseSensitive: false, debounce: 0 }` when applied bare.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaTreeViewFilterable" });
+        effect(() => {
+            const filter = this.filter();
+            untracked(() => this.#treeService.filter$.next(filter));
+        });
+        effect(() => {
+            const filterPlaceholder = this.filterPlaceholder();
+            untracked(() => this.#treeService.filterPlaceholder.set(filterPlaceholder));
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#treeService.setFilterableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#treeService.setFilterableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.setSubscription()
+        });
+    }
+    setSubscription() {
+        this.#treeService.filterChange$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.filterChange.emit(event);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewFilterableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TreeViewFilterableDirective, isStandalone: true, selector: "mona-tree-view[monaTreeViewFilterable]", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaTreeViewFilterable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, exportAs: ["monaTreeViewFilterable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewFilterableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-tree-view[monaTreeViewFilterable]",
+                    exportAs: "monaTreeViewFilterable"
+                }]
+        }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaTreeViewFilterable", required: false }] }] } });
+
+class TreeViewSelectableDirective {
+    #defaultOptions;
+    #destroyRef;
+    #treeService;
+    constructor() {
+        this.#defaultOptions = {
+            childrenOnly: false,
+            enabled: true,
+            mode: "single",
+            toggleable: false
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#treeService = inject(TreeService);
+        /**
+         * @description Emitted when a node is selected or deselected.
+         */
+        this.nodeSelect = output();
+        /**
+         * @description Property name or accessor used to derive a node's selection key from its data. Falls back to the node's data when unset.
+         * @default ""
+         */
+        this.selectBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectBy" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Keys of the currently selected nodes.
+         * @default []
+         */
+        this.selectedKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the selected keys change.
+         */
+        this.selectedKeysChange = output();
+        /**
+         * @description Emitted when the selection changes.
+         */
+        this.selectionChange = output();
+        /**
+         * @description Configures selection mode, toggleability, and whether only child nodes are selectable. Merged over `{ childrenOnly: false, enabled: true, mode: "single", toggleable: false }` when applied bare.
+         * @default ""
+         */
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaTreeViewSelectable" });
+        effect(() => {
+            const selectBy = this.selectBy();
+            untracked(() => this.#treeService.setSelectBy(selectBy ?? ""));
+        });
+        effect(() => {
+            const selectedKeys = this.selectedKeys();
+            untracked(() => this.#treeService.setSelectedKeys(selectedKeys ?? []));
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#treeService.setSelectableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#treeService.setSelectableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        this.setNodeSelectSubscription();
+    }
+    setNodeSelectSubscription() {
+        this.#treeService.nodeSelect$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.nodeSelect.emit(event);
+        });
+        this.#treeService.selectedKeys$
+            .pipe(pairwise(), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(([oldKeys, keys]) => {
+            const orderedOldKeys = oldKeys.orderBy(k => k);
+            const orderedKeys = keys.orderBy(k => k);
+            if (sequenceEqual(orderedOldKeys, orderedKeys)) {
+                return;
+            }
+            this.selectedKeysChange.emit(keys.toArray());
+        });
+        this.#treeService.selectionChange$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(nodeItem => {
+            this.selectionChange.emit(nodeItem);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewSelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TreeViewSelectableDirective, isStandalone: true, selector: "mona-tree-view[monaTreeViewSelectable]", inputs: { selectBy: { classPropertyName: "selectBy", publicName: "selectBy", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaTreeViewSelectable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", selectedKeysChange: "selectedKeysChange", selectionChange: "selectionChange" }, exportAs: ["monaTreeViewSelectable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewSelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-tree-view[monaTreeViewSelectable]",
+                    exportAs: "monaTreeViewSelectable"
+                }]
+        }], ctorParameters: () => [], propDecorators: { nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], 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"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaTreeViewSelectable", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/tree-view
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TreeViewCheckableDirective, TreeViewComponent, TreeViewDisableDirective, TreeViewDragAndDropDirective, TreeViewExpandableDirective, TreeViewFilterableDirective, TreeViewNodeTemplateDirective, TreeViewSelectableDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-tree-view.mjs.map