@malva-ui/core 0.1.12

package/esm2022/tree/lib/tree/tree.js

@@ -0,0 +1,362 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, forwardRef, input, output, signal, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Tree } from '@angular/aria/tree';
+import { MlvTreeNodeDef } from './tree-node-def';
+import { MLV_TREE } from './tree-context';
+import { MlvTreeSubtree } from './tree-subtree';
+import * as i0 from "@angular/core";
+// Re-export for convenience
+export { MLV_TREE };
+/**
+ * Hierarchical data tree component for displaying nested data.
+ *
+ * Built on the `@angular/aria` headless `Tree`/`TreeItem`/`TreeItemGroup`
+ * directives (applied inside the component — consumers never see `ng*`
+ * selectors). aria owns roles, `aria-level`/`setsize`/`posinset`, roving
+ * `tabindex`, keyboard navigation (arrows, Home/End), text typeahead, and
+ * selection; the component keeps the Malva UI data-driven `nodes` API, the
+ * `mlv-expand` animated expand/collapse, lazy loading, custom node templates,
+ * and multi-select checkboxes.
+ *
+ * Features:
+ * - Expand/collapse nodes with smooth animated height transition via `mlv-expand`
+ * - Single-select and multi-select checkbox mode
+ * - Lazy loading via `loadChildren` callbacks with spinner
+ * - Full keyboard navigation and text typeahead (owned by `@angular/aria`)
+ * - Custom node templates via `[mlvTreeNodeDef]`
+ * - Optional navigation-tree mode (`nav` + `currentType`) for sidebar-style trees
+ * - Generic typed `MlvTreeNode<T>` interface
+ * - Recursive rendering via internal `MlvTreeSubtree`
+ *
+ * @example
+ * ```html
+ * <mlv-tree [nodes]="treeData" selectMode="multi" (selectionChange)="onSelect($event)" />
+ * ```
+ */
+export class MlvTree {
+    /** The tree nodes to render. Supports nested children. */
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /**
+     * Selection mode:
+     * - `'none'` — no selection (default); rows are activated (`nodeActivate`)
+     * - `'single'` — click/Space/Enter selects one node at a time
+     * - `'multi'` — checkbox-based multi-select
+     */
+    selectMode = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
+    /** Indentation per depth level in `rem`. Defaults to `1.5`. */
+    indentSize = input(1.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, renders vertical and horizontal connector lines between parent and child nodes
+     * (file-explorer pattern). Defaults to `false`.
+     */
+    showConnectors = input(false, { ...(ngDevMode ? { debugName: "showConnectors" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When true, the tree renders as a navigation tree: selected rows expose
+     * `aria-current` (of `currentType`) instead of `aria-selected`. Suited to
+     * sidebar-style navigation trees. Defaults to `false`.
+     */
+    nav = input(false, { ...(ngDevMode ? { debugName: "nav" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The `aria-current` type used when `nav` is enabled. Defaults to `'page'`. */
+    currentType = input('page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentType" }] : /* istanbul ignore next */ []));
+    /** Emits the set of selected node IDs whenever the selection changes. */
+    selectionChange = output();
+    /** Emits when a node is activated (clicked or Enter in single-select/none mode). */
+    nodeActivate = output();
+    /** Emits when a node's expanded state changes. */
+    nodeToggle = output();
+    /**
+     * @public Selected node ids, mirrored to the aria `Tree.value` model (aria
+     * selection is always an array — a single-select tree holds at most one id).
+     */
+    _value = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Selection membership set derived from `_value`. Rebuilt only when
+     * the selection changes, giving `_isSelected` an O(1) lookup instead of an
+     * O(selected) array scan on every node (twice per row) per change-detection
+     * pass. Mirrors the `_expandedIds`/`_loadingIds` Set pattern.
+     */
+    _selectedIdSet = computed(() => new Set(this._value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedIdSet" }] : /* istanbul ignore next */ []));
+    /** @public Internal expansion state set (node id → expanded). */
+    _expandedIds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandedIds" }] : /* istanbul ignore next */ []));
+    /** @public Map of node id → loaded children (for lazy nodes). */
+    _loadedChildren = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadedChildren" }] : /* istanbul ignore next */ []));
+    /** @private Set of node ids currently loading lazy children. */
+    _loadingIds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadingIds" }] : /* istanbul ignore next */ []));
+    /** @public The custom node template if provided. */
+    _nodeDefDirective = contentChild((MlvTreeNodeDef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nodeDefDirective" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        // Seed expansion state from nodes flagged `expanded: true`.
+        const initialExpanded = new Set();
+        this._collectInitialExpanded(this.nodes(), initialExpanded);
+        this._expandedIds.set(initialExpanded);
+    }
+    /** @private Collect nodes that have `expanded: true` initially. */
+    _collectInitialExpanded(nodes, result) {
+        for (const node of nodes) {
+            if (node.expanded) {
+                result.add(node.id);
+            }
+            if (node.children?.length) {
+                this._collectInitialExpanded(node.children, result);
+            }
+        }
+    }
+    // --- MlvTreeAccessor: state queries -------------------------------------
+    /** @public Whether the given node id is currently expanded. */
+    _isExpanded(id) {
+        return this._expandedIds().has(id);
+    }
+    /** @public Whether the given node id is currently loading lazy children. */
+    _isLoading(id) {
+        return this._loadingIds().has(id);
+    }
+    /** @public Whether the given node id is currently selected. */
+    _isSelected(id) {
+        return this._selectedIdSet().has(id);
+    }
+    /**
+     * @public Effective children of a node — lazily-loaded children when present,
+     * otherwise the static `children` array.
+     */
+    _children(node) {
+        return this._loadedChildren().get(node.id) ?? node.children ?? [];
+    }
+    /** @public Whether a node renders an expandable group (static/loaded/lazy children). */
+    _hasChildren(node) {
+        return this._children(node).length > 0 || !!node.loadChildren;
+    }
+    // --- MlvTreeAccessor: interaction ---------------------------------------
+    /**
+     * @public Reacts to the aria `TreeItem.expanded` model changing (keyboard,
+     * pointer, chevron, or programmatic). Syncs the expansion set, triggers lazy
+     * loading, and emits `nodeToggle`.
+     */
+    _onExpandedChange(node, expanded) {
+        if (expanded) {
+            this._expandedIds.update((s) => {
+                const next = new Set(s);
+                next.add(node.id);
+                return next;
+            });
+            if (node.loadChildren &&
+                !this._loadedChildren().has(node.id) &&
+                !this._loadingIds().has(node.id)) {
+                this._loadLazy(node);
+            }
+            this.nodeToggle.emit({ node, expanded: true });
+        }
+        else {
+            this._expandedIds.update((s) => {
+                const next = new Set(s);
+                next.delete(node.id);
+                return next;
+            });
+            this.nodeToggle.emit({ node, expanded: false });
+        }
+    }
+    /**
+     * @public Chevron toggle handler. Guards disabled nodes, stops propagation so
+     * the aria tree does not also select the row, and flips the aria item's
+     * `expanded` model (which routes through `_onExpandedChange`).
+     */
+    _onToggle(node, item, event) {
+        event.stopPropagation();
+        if (node.disabled)
+            return;
+        item.expanded.set(!item.expanded());
+    }
+    /**
+     * @public Row pointer handler. Emits `nodeActivate` in `none` mode and
+     * implements the single-select deselect-on-re-click affordance (aria's
+     * `selectOne` never deselects on its own).
+     */
+    _onRowClick(node, event) {
+        if (node.disabled)
+            return;
+        const mode = this.selectMode();
+        if (mode === 'none') {
+            this.nodeActivate.emit(node);
+            return;
+        }
+        if (mode === 'single') {
+            const current = this._value();
+            if (current.length === 1 && current[0] === node.id) {
+                // Re-clicking the sole selected node clears it. aria's selectOne would
+                // re-select it, so clear the model and stop the aria tree click.
+                this._value.set([]);
+                this.selectionChange.emit(new Set());
+                event.stopPropagation();
+            }
+            // First selection: aria selectOne handles it; `nodeActivate` is emitted
+            // from `_onAriaValueChange` (covers pointer and keyboard selection).
+        }
+        // multi mode: aria toggles selection on row click; no `nodeActivate`.
+    }
+    /** @public Row Enter/Space handler used to emit `nodeActivate` in `none` mode. */
+    _onActivateKey(node) {
+        if (node.disabled)
+            return;
+        if (this.selectMode() === 'none') {
+            this.nodeActivate.emit(node);
+        }
+    }
+    /**
+     * @public Bridges the aria `Tree.value` model to `selectionChange`. Also
+     * emits `nodeActivate` for user-driven single-select (pointer or keyboard);
+     * programmatic selection goes through `setSelection` instead.
+     */
+    _onAriaValueChange(value) {
+        this._value.set(value);
+        this.selectionChange.emit(new Set(value));
+        if (this.selectMode() === 'single' && value.length === 1) {
+            const node = this._findNode(value[0]);
+            if (node) {
+                this.nodeActivate.emit(node);
+            }
+        }
+    }
+    /** @private Load lazy children then keep the node expanded to reveal them. */
+    _loadLazy(node) {
+        if (!node.loadChildren)
+            return;
+        this._loadingIds.update((s) => {
+            const next = new Set(s);
+            next.add(node.id);
+            return next;
+        });
+        node.loadChildren().then((children) => {
+            this._loadedChildren.update((m) => {
+                const next = new Map(m);
+                next.set(node.id, children);
+                return next;
+            });
+            this._loadingIds.update((s) => {
+                const next = new Set(s);
+                next.delete(node.id);
+                return next;
+            });
+        });
+    }
+    /** @private Recursively find a node by id across static and loaded children. */
+    _findNode(id) {
+        const search = (list) => {
+            for (const node of list) {
+                if (node.id === id)
+                    return node;
+                const children = this._loadedChildren().get(node.id) ?? node.children ?? [];
+                const found = search(children);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        };
+        return search(this.nodes());
+    }
+    // --- Programmatic API -----------------------------------------------------
+    /** @public Exposes the currently selected node ids. */
+    get selectedIds() {
+        return new Set(this._value());
+    }
+    /** Programmatically set the selected node IDs. */
+    setSelection(ids) {
+        this._value.set([...ids]);
+        this.selectionChange.emit(new Set(ids));
+    }
+    /** Programmatically expand a node by ID. */
+    expandNode(nodeId) {
+        this._expandedIds.update((s) => {
+            const next = new Set(s);
+            next.add(nodeId);
+            return next;
+        });
+    }
+    /** Programmatically collapse a node by ID. */
+    collapseNode(nodeId) {
+        this._expandedIds.update((s) => {
+            const next = new Set(s);
+            next.delete(nodeId);
+            return next;
+        });
+    }
+    /** Expand all nodes. */
+    expandAll() {
+        const allIds = new Set();
+        this._collectAllIds(this.nodes(), allIds);
+        this._expandedIds.set(allIds);
+    }
+    /** Collapse all nodes. */
+    collapseAll() {
+        this._expandedIds.set(new Set());
+    }
+    /** @private Collect all node IDs recursively. */
+    _collectAllIds(nodes, result) {
+        for (const node of nodes) {
+            result.add(node.id);
+            if (node.children?.length) {
+                this._collectAllIds(node.children, result);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvTree, isStandalone: true, selector: "mlv-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, nav: { classPropertyName: "nav", publicName: "nav", isSignal: true, isRequired: false, transformFunction: null }, currentType: { classPropertyName: "currentType", publicName: "currentType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeActivate: "nodeActivate", nodeToggle: "nodeToggle" }, host: { properties: { "class.mlv-tree--connectors": "showConnectors()" }, classAttribute: "mlv-tree" }, providers: [
+            {
+                provide: MLV_TREE,
+                useExisting: forwardRef(() => MlvTree),
+            },
+        ], queries: [{ propertyName: "_nodeDefDirective", first: true, predicate: (MlvTreeNodeDef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="mlv-tree__root"
+      ngTree
+      #root="ngTree"
+      [multi]="selectMode() === 'multi'"
+      [selectionMode]="'explicit'"
+      [softDisabled]="true"
+      [wrap]="false"
+      [nav]="nav()"
+      [currentType]="currentType()"
+      [value]="_value()"
+      (valueChange)="_onAriaValueChange($event)"
+    >
+      <mlv-tree-subtree [nodes]="nodes()" [parent]="root" [depth]="0" />
+    </div>
+  `, isInline: true, styles: [".mlv-tree{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree *{box-sizing:border-box}.mlv-tree{display:block;width:100%;outline:none}.mlv-tree__list{display:flex;flex-direction:column;gap:0}.mlv-tree__root,.mlv-tree__subtree{display:contents}.mlv-tree__group{display:block}.mlv-tree__item{display:flex;align-items:center;gap:.5rem;min-height:var(--mlv-height-m);padding-block:.375rem;padding-inline-start:.5rem;padding-inline-end:.75rem;border-radius:var(--mlv-radius-m);cursor:pointer;color:var(--mlv-text-primary);transition:background-color var(--mlv-duration-normal) var(--mlv-ease-out),color var(--mlv-duration-normal) var(--mlv-ease-out);-webkit-user-select:none;user-select:none;position:relative}.mlv-tree__item:hover:not(.mlv-tree__item--disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-tree__item:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-tree__item--selected:not(.mlv-tree__item--disabled){background-color:var(--mlv-background-accent-2);color:var(--mlv-text-action)}.mlv-tree__item--selected:not(.mlv-tree__item--disabled):hover{background-color:var(--mlv-background-accent-2-hover)}.mlv-tree__item--disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-tree__toggle{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree__toggle *{box-sizing:border-box}.mlv-tree__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border:none;background:none;border-radius:var(--mlv-radius-s);cursor:pointer;color:var(--mlv-text-action);transition:color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-tree__toggle:hover{background-color:var(--mlv-background-neutral-1-hover);color:var(--mlv-text-primary)}.mlv-tree__toggle--expanded{color:var(--mlv-text-action)}.mlv-tree__toggle--invisible{visibility:hidden;pointer-events:none}.mlv-tree__spinner{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-tree__checkbox{flex-shrink:0;pointer-events:none}.mlv-tree__checkbox.mlv-checkbox{margin:0}.mlv-tree__content{display:flex;align-items:center;flex:1;min-width:0;gap:.5rem;line-height:1.4}.mlv-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mlv-tree__icon{flex-shrink:0;color:var(--mlv-text-secondary)}.mlv-tree__item--selected .mlv-tree__icon{color:var(--mlv-text-action)}.mlv-tree .mlv-expand{--mlv-duration-slow: var(--mlv-duration-normal)}.mlv-tree .mlv-expand .mlv-expand__body--enter{animation-name:mlv-tree--enter}.mlv-tree .mlv-expand .mlv-expand__body--leave{animation-name:mlv-tree--leave}@media(prefers-reduced-motion:reduce){.mlv-tree .mlv-expand .mlv-expand__body--enter,.mlv-tree .mlv-expand .mlv-expand__body--leave{animation:none}}.mlv-tree--connectors .mlv-tree__group{position:relative}.mlv-tree--connectors .mlv-tree__group:before{content:\"\";position:absolute;top:0;inset-inline-start:var(--mlv-tree-connector-offset, .75rem);bottom:0;width:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item{position:relative}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item:before{content:\"\";position:absolute;top:50%;inset-inline-start:calc(var(--mlv-tree-connector-offset, .75rem) - .5rem);width:.75rem;height:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}@keyframes mlv-tree--enter{0%{grid-template-rows:0fr;opacity:0}60%{grid-template-rows:1fr}to{grid-template-rows:1fr;opacity:1}}@keyframes mlv-tree--leave{0%{grid-template-rows:1fr;opacity:1}40%{opacity:0}to{grid-template-rows:0fr;opacity:0}}\n"], dependencies: [{ kind: "directive", type: Tree, selector: "[ngTree]", inputs: ["id", "orientation", "multi", "disabled", "selectionMode", "focusMode", "wrap", "softDisabled", "typeaheadDelay", "tabindex", "value", "nav", "currentType"], outputs: ["valueChange"], exportAs: ["ngTree"] }, { kind: "component", type: MlvTreeSubtree, selector: "mlv-tree-subtree", inputs: ["nodes", "parent", "depth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tree', template: `
+    <div
+      class="mlv-tree__root"
+      ngTree
+      #root="ngTree"
+      [multi]="selectMode() === 'multi'"
+      [selectionMode]="'explicit'"
+      [softDisabled]="true"
+      [wrap]="false"
+      [nav]="nav()"
+      [currentType]="currentType()"
+      [value]="_value()"
+      (valueChange)="_onAriaValueChange($event)"
+    >
+      <mlv-tree-subtree [nodes]="nodes()" [parent]="root" [depth]="0" />
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [Tree, MlvTreeSubtree], providers: [
+                        {
+                            provide: MLV_TREE,
+                            useExisting: forwardRef(() => MlvTree),
+                        },
+                    ], host: {
+                        class: 'mlv-tree',
+                        '[class.mlv-tree--connectors]': 'showConnectors()',
+                    }, styles: [".mlv-tree{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree *{box-sizing:border-box}.mlv-tree{display:block;width:100%;outline:none}.mlv-tree__list{display:flex;flex-direction:column;gap:0}.mlv-tree__root,.mlv-tree__subtree{display:contents}.mlv-tree__group{display:block}.mlv-tree__item{display:flex;align-items:center;gap:.5rem;min-height:var(--mlv-height-m);padding-block:.375rem;padding-inline-start:.5rem;padding-inline-end:.75rem;border-radius:var(--mlv-radius-m);cursor:pointer;color:var(--mlv-text-primary);transition:background-color var(--mlv-duration-normal) var(--mlv-ease-out),color var(--mlv-duration-normal) var(--mlv-ease-out);-webkit-user-select:none;user-select:none;position:relative}.mlv-tree__item:hover:not(.mlv-tree__item--disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-tree__item:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-tree__item--selected:not(.mlv-tree__item--disabled){background-color:var(--mlv-background-accent-2);color:var(--mlv-text-action)}.mlv-tree__item--selected:not(.mlv-tree__item--disabled):hover{background-color:var(--mlv-background-accent-2-hover)}.mlv-tree__item--disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-tree__toggle{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree__toggle *{box-sizing:border-box}.mlv-tree__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border:none;background:none;border-radius:var(--mlv-radius-s);cursor:pointer;color:var(--mlv-text-action);transition:color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-tree__toggle:hover{background-color:var(--mlv-background-neutral-1-hover);color:var(--mlv-text-primary)}.mlv-tree__toggle--expanded{color:var(--mlv-text-action)}.mlv-tree__toggle--invisible{visibility:hidden;pointer-events:none}.mlv-tree__spinner{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-tree__checkbox{flex-shrink:0;pointer-events:none}.mlv-tree__checkbox.mlv-checkbox{margin:0}.mlv-tree__content{display:flex;align-items:center;flex:1;min-width:0;gap:.5rem;line-height:1.4}.mlv-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mlv-tree__icon{flex-shrink:0;color:var(--mlv-text-secondary)}.mlv-tree__item--selected .mlv-tree__icon{color:var(--mlv-text-action)}.mlv-tree .mlv-expand{--mlv-duration-slow: var(--mlv-duration-normal)}.mlv-tree .mlv-expand .mlv-expand__body--enter{animation-name:mlv-tree--enter}.mlv-tree .mlv-expand .mlv-expand__body--leave{animation-name:mlv-tree--leave}@media(prefers-reduced-motion:reduce){.mlv-tree .mlv-expand .mlv-expand__body--enter,.mlv-tree .mlv-expand .mlv-expand__body--leave{animation:none}}.mlv-tree--connectors .mlv-tree__group{position:relative}.mlv-tree--connectors .mlv-tree__group:before{content:\"\";position:absolute;top:0;inset-inline-start:var(--mlv-tree-connector-offset, .75rem);bottom:0;width:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item{position:relative}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item:before{content:\"\";position:absolute;top:50%;inset-inline-start:calc(var(--mlv-tree-connector-offset, .75rem) - .5rem);width:.75rem;height:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}@keyframes mlv-tree--enter{0%{grid-template-rows:0fr;opacity:0}60%{grid-template-rows:1fr}to{grid-template-rows:1fr;opacity:1}}@keyframes mlv-tree--leave{0%{grid-template-rows:1fr;opacity:1}40%{opacity:0}to{grid-template-rows:0fr;opacity:0}}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], nav: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav", required: false }] }], currentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentType", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeActivate: [{ type: i0.Output, args: ["nodeActivate"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], _nodeDefDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTreeNodeDef), { isSignal: true }] }] } });
+//# sourceMappingURL=tree.js.map

package/esm2022/tree/lib/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../../../../../libs/core/tree/src/lib/tree/tree.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  forwardRef,\n  input,\n  type OnInit,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Tree } from '@angular/aria/tree';\nimport type { MlvTreeNode } from './tree-node';\nimport type { MlvTreeSelectMode } from './tree-node';\nimport { MlvTreeNodeDef } from './tree-node-def';\nimport { MLV_TREE } from './tree-context';\nimport type { MlvTreeAccessor } from './tree-context';\nimport { MlvTreeSubtree } from './tree-subtree';\nimport type { TreeItem } from '@angular/aria/tree';\n\n// Re-export for convenience\nexport { MLV_TREE };\nexport type { MlvTreeAccessor };\n\n/** `aria-current` type surfaced when the tree is used as a navigation tree. */\nexport type MlvTreeCurrentType =\n  | 'page'\n  | 'step'\n  | 'location'\n  | 'date'\n  | 'time'\n  | 'true'\n  | 'false';\n\n/**\n * Hierarchical data tree component for displaying nested data.\n *\n * Built on the `@angular/aria` headless `Tree`/`TreeItem`/`TreeItemGroup`\n * directives (applied inside the component — consumers never see `ng*`\n * selectors). aria owns roles, `aria-level`/`setsize`/`posinset`, roving\n * `tabindex`, keyboard navigation (arrows, Home/End), text typeahead, and\n * selection; the component keeps the Malva UI data-driven `nodes` API, the\n * `mlv-expand` animated expand/collapse, lazy loading, custom node templates,\n * and multi-select checkboxes.\n *\n * Features:\n * - Expand/collapse nodes with smooth animated height transition via `mlv-expand`\n * - Single-select and multi-select checkbox mode\n * - Lazy loading via `loadChildren` callbacks with spinner\n * - Full keyboard navigation and text typeahead (owned by `@angular/aria`)\n * - Custom node templates via `[mlvTreeNodeDef]`\n * - Optional navigation-tree mode (`nav` + `currentType`) for sidebar-style trees\n * - Generic typed `MlvTreeNode<T>` interface\n * - Recursive rendering via internal `MlvTreeSubtree`\n *\n * @example\n * ```html\n * <mlv-tree [nodes]=\"treeData\" selectMode=\"multi\" (selectionChange)=\"onSelect($event)\" />\n * ```\n */\n@Component({\n  selector: 'mlv-tree',\n  // The aria `Tree` directive is applied to an inner `[ngTree]` element rather\n  // than as a `hostDirective`: aria's config inputs (`multi`, `selectionMode`,\n  // `softDisabled`) are derived internally from `selectMode` and CANNOT be set\n  // on a host directive from the component's own `host` metadata (silently\n  // ignored — verified). Binding them on an in-template element works. aria owns\n  // `role=\"tree\"`, `aria-multiselectable/orientation/disabled/activedescendant`,\n  // the roving tabindex and all keyboard/pointer handling on `.mlv-tree__root`.\n  template: `\n    <div\n      class=\"mlv-tree__root\"\n      ngTree\n      #root=\"ngTree\"\n      [multi]=\"selectMode() === 'multi'\"\n      [selectionMode]=\"'explicit'\"\n      [softDisabled]=\"true\"\n      [wrap]=\"false\"\n      [nav]=\"nav()\"\n      [currentType]=\"currentType()\"\n      [value]=\"_value()\"\n      (valueChange)=\"_onAriaValueChange($event)\"\n    >\n      <mlv-tree-subtree [nodes]=\"nodes()\" [parent]=\"root\" [depth]=\"0\" />\n    </div>\n  `,\n  styleUrl: './tree.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [Tree, MlvTreeSubtree],\n  providers: [\n    {\n      provide: MLV_TREE,\n      useExisting: forwardRef(() => MlvTree),\n    },\n  ],\n  host: {\n    class: 'mlv-tree',\n    '[class.mlv-tree--connectors]': 'showConnectors()',\n  },\n})\nexport class MlvTree<T = unknown> implements OnInit, MlvTreeAccessor {\n  /** The tree nodes to render. Supports nested children. */\n  readonly nodes = input<MlvTreeNode<T>[]>([]);\n\n  /**\n   * Selection mode:\n   * - `'none'` — no selection (default); rows are activated (`nodeActivate`)\n   * - `'single'` — click/Space/Enter selects one node at a time\n   * - `'multi'` — checkbox-based multi-select\n   */\n  readonly selectMode = input<MlvTreeSelectMode>('none');\n\n  /** Indentation per depth level in `rem`. Defaults to `1.5`. */\n  readonly indentSize = input<number>(1.5);\n\n  /**\n   * When true, renders vertical and horizontal connector lines between parent and child nodes\n   * (file-explorer pattern). Defaults to `false`.\n   */\n  readonly showConnectors = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When true, the tree renders as a navigation tree: selected rows expose\n   * `aria-current` (of `currentType`) instead of `aria-selected`. Suited to\n   * sidebar-style navigation trees. Defaults to `false`.\n   */\n  readonly nav = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** The `aria-current` type used when `nav` is enabled. Defaults to `'page'`. */\n  readonly currentType = input<MlvTreeCurrentType>('page');\n\n  /** Emits the set of selected node IDs whenever the selection changes. */\n  readonly selectionChange = output<Set<string | number>>();\n\n  /** Emits when a node is activated (clicked or Enter in single-select/none mode). */\n  readonly nodeActivate = output<MlvTreeNode<T>>();\n\n  /** Emits when a node's expanded state changes. */\n  readonly nodeToggle = output<{ node: MlvTreeNode<T>; expanded: boolean }>();\n\n  /**\n   * @public Selected node ids, mirrored to the aria `Tree.value` model (aria\n   * selection is always an array — a single-select tree holds at most one id).\n   */\n  readonly _value = signal<(string | number)[]>([]);\n\n  /**\n   * @private Selection membership set derived from `_value`. Rebuilt only when\n   * the selection changes, giving `_isSelected` an O(1) lookup instead of an\n   * O(selected) array scan on every node (twice per row) per change-detection\n   * pass. Mirrors the `_expandedIds`/`_loadingIds` Set pattern.\n   */\n  private readonly _selectedIdSet = computed(() => new Set(this._value()));\n\n  /** @public Internal expansion state set (node id → expanded). */\n  readonly _expandedIds = signal<Set<string | number>>(new Set());\n\n  /** @public Map of node id → loaded children (for lazy nodes). */\n  readonly _loadedChildren = signal<Map<string | number, MlvTreeNode<T>[]>>(\n    new Map(),\n  );\n\n  /** @private Set of node ids currently loading lazy children. */\n  private readonly _loadingIds = signal<Set<string | number>>(new Set());\n\n  /** @public The custom node template if provided. */\n  readonly _nodeDefDirective = contentChild(MlvTreeNodeDef<T>);\n\n  ngOnInit(): void {\n    // Seed expansion state from nodes flagged `expanded: true`.\n    const initialExpanded = new Set<string | number>();\n    this._collectInitialExpanded(this.nodes(), initialExpanded);\n    this._expandedIds.set(initialExpanded);\n  }\n\n  /** @private Collect nodes that have `expanded: true` initially. */\n  private _collectInitialExpanded(\n    nodes: MlvTreeNode<T>[],\n    result: Set<string | number>,\n  ): void {\n    for (const node of nodes) {\n      if (node.expanded) {\n        result.add(node.id);\n      }\n      if (node.children?.length) {\n        this._collectInitialExpanded(node.children, result);\n      }\n    }\n  }\n\n  // --- MlvTreeAccessor: state queries -------------------------------------\n\n  /** @public Whether the given node id is currently expanded. */\n  _isExpanded(id: string | number): boolean {\n    return this._expandedIds().has(id);\n  }\n\n  /** @public Whether the given node id is currently loading lazy children. */\n  _isLoading(id: string | number): boolean {\n    return this._loadingIds().has(id);\n  }\n\n  /** @public Whether the given node id is currently selected. */\n  _isSelected(id: string | number): boolean {\n    return this._selectedIdSet().has(id);\n  }\n\n  /**\n   * @public Effective children of a node — lazily-loaded children when present,\n   * otherwise the static `children` array.\n   */\n  _children(node: MlvTreeNode<T>): MlvTreeNode<T>[] {\n    return this._loadedChildren().get(node.id) ?? node.children ?? [];\n  }\n\n  /** @public Whether a node renders an expandable group (static/loaded/lazy children). */\n  _hasChildren(node: MlvTreeNode<T>): boolean {\n    return this._children(node).length > 0 || !!node.loadChildren;\n  }\n\n  // --- MlvTreeAccessor: interaction ---------------------------------------\n\n  /**\n   * @public Reacts to the aria `TreeItem.expanded` model changing (keyboard,\n   * pointer, chevron, or programmatic). Syncs the expansion set, triggers lazy\n   * loading, and emits `nodeToggle`.\n   */\n  _onExpandedChange(node: MlvTreeNode<T>, expanded: boolean): void {\n    if (expanded) {\n      this._expandedIds.update((s) => {\n        const next = new Set(s);\n        next.add(node.id);\n        return next;\n      });\n      if (\n        node.loadChildren &&\n        !this._loadedChildren().has(node.id) &&\n        !this._loadingIds().has(node.id)\n      ) {\n        this._loadLazy(node);\n      }\n      this.nodeToggle.emit({ node, expanded: true });\n    } else {\n      this._expandedIds.update((s) => {\n        const next = new Set(s);\n        next.delete(node.id);\n        return next;\n      });\n      this.nodeToggle.emit({ node, expanded: false });\n    }\n  }\n\n  /**\n   * @public Chevron toggle handler. Guards disabled nodes, stops propagation so\n   * the aria tree does not also select the row, and flips the aria item's\n   * `expanded` model (which routes through `_onExpandedChange`).\n   */\n  _onToggle(\n    node: MlvTreeNode<T>,\n    item: TreeItem<string | number>,\n    event: Event,\n  ): void {\n    event.stopPropagation();\n    if (node.disabled) return;\n    item.expanded.set(!item.expanded());\n  }\n\n  /**\n   * @public Row pointer handler. Emits `nodeActivate` in `none` mode and\n   * implements the single-select deselect-on-re-click affordance (aria's\n   * `selectOne` never deselects on its own).\n   */\n  _onRowClick(node: MlvTreeNode<T>, event: MouseEvent): void {\n    if (node.disabled) return;\n    const mode = this.selectMode();\n    if (mode === 'none') {\n      this.nodeActivate.emit(node);\n      return;\n    }\n    if (mode === 'single') {\n      const current = this._value();\n      if (current.length === 1 && current[0] === node.id) {\n        // Re-clicking the sole selected node clears it. aria's selectOne would\n        // re-select it, so clear the model and stop the aria tree click.\n        this._value.set([]);\n        this.selectionChange.emit(new Set());\n        event.stopPropagation();\n      }\n      // First selection: aria selectOne handles it; `nodeActivate` is emitted\n      // from `_onAriaValueChange` (covers pointer and keyboard selection).\n    }\n    // multi mode: aria toggles selection on row click; no `nodeActivate`.\n  }\n\n  /** @public Row Enter/Space handler used to emit `nodeActivate` in `none` mode. */\n  _onActivateKey(node: MlvTreeNode<T>): void {\n    if (node.disabled) return;\n    if (this.selectMode() === 'none') {\n      this.nodeActivate.emit(node);\n    }\n  }\n\n  /**\n   * @public Bridges the aria `Tree.value` model to `selectionChange`. Also\n   * emits `nodeActivate` for user-driven single-select (pointer or keyboard);\n   * programmatic selection goes through `setSelection` instead.\n   */\n  _onAriaValueChange(value: (string | number)[]): void {\n    this._value.set(value);\n    this.selectionChange.emit(new Set(value));\n    if (this.selectMode() === 'single' && value.length === 1) {\n      const node = this._findNode(value[0]);\n      if (node) {\n        this.nodeActivate.emit(node);\n      }\n    }\n  }\n\n  /** @private Load lazy children then keep the node expanded to reveal them. */\n  private _loadLazy(node: MlvTreeNode<T>): void {\n    if (!node.loadChildren) return;\n    this._loadingIds.update((s) => {\n      const next = new Set(s);\n      next.add(node.id);\n      return next;\n    });\n    node.loadChildren().then((children) => {\n      this._loadedChildren.update((m) => {\n        const next = new Map(m);\n        next.set(node.id, children);\n        return next;\n      });\n      this._loadingIds.update((s) => {\n        const next = new Set(s);\n        next.delete(node.id);\n        return next;\n      });\n    });\n  }\n\n  /** @private Recursively find a node by id across static and loaded children. */\n  private _findNode(id: string | number): MlvTreeNode<T> | undefined {\n    const search = (list: MlvTreeNode<T>[]): MlvTreeNode<T> | undefined => {\n      for (const node of list) {\n        if (node.id === id) return node;\n        const children =\n          this._loadedChildren().get(node.id) ?? node.children ?? [];\n        const found = search(children);\n        if (found) return found;\n      }\n      return undefined;\n    };\n    return search(this.nodes());\n  }\n\n  // --- Programmatic API -----------------------------------------------------\n\n  /** @public Exposes the currently selected node ids. */\n  get selectedIds(): Set<string | number> {\n    return new Set(this._value());\n  }\n\n  /** Programmatically set the selected node IDs. */\n  setSelection(ids: Set<string | number>): void {\n    this._value.set([...ids]);\n    this.selectionChange.emit(new Set(ids));\n  }\n\n  /** Programmatically expand a node by ID. */\n  expandNode(nodeId: string | number): void {\n    this._expandedIds.update((s) => {\n      const next = new Set(s);\n      next.add(nodeId);\n      return next;\n    });\n  }\n\n  /** Programmatically collapse a node by ID. */\n  collapseNode(nodeId: string | number): void {\n    this._expandedIds.update((s) => {\n      const next = new Set(s);\n      next.delete(nodeId);\n      return next;\n    });\n  }\n\n  /** Expand all nodes. */\n  expandAll(): void {\n    const allIds = new Set<string | number>();\n    this._collectAllIds(this.nodes(), allIds);\n    this._expandedIds.set(allIds);\n  }\n\n  /** Collapse all nodes. */\n  collapseAll(): void {\n    this._expandedIds.set(new Set());\n  }\n\n  /** @private Collect all node IDs recursively. */\n  private _collectAllIds(\n    nodes: MlvTreeNode<T>[],\n    result: Set<string | number>,\n  ): void {\n    for (const node of nodes) {\n      result.add(node.id);\n      if (node.children?.length) {\n        this._collectAllIds(node.children, result);\n      }\n    }\n  }\n}\n"]}

package/esm2022/tree/malva-ui-core-tree.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-tree.js.map

package/esm2022/tree/malva-ui-core-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-tree.js","sourceRoot":"","sources":["../../../../../libs/core/tree/src/malva-ui-core-tree.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/expand/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/expand/expand';
+export * from './lib/expand/expand-content';

package/expand/lib/expand/expand-content.d.ts

@@ -0,0 +1,26 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Marks an `<ng-template>` as the lazy content for a `mlv-expand` panel.
+ *
+ * Nothing inside the template is constructed until the panel first opens, so a
+ * heavy child component in a panel the user never expands is never initialized.
+ * The template is re-instantiated on each subsequent open — it is not cached —
+ * because `mlv-expand` removes its body from the DOM while closed.
+ *
+ * @example
+ * ```html
+ * <button type="button" (click)="panel.toggle()">Load on demand</button>
+ * <mlv-expand #panel>
+ *   <ng-template mlvExpandContent>
+ *     <heavy-component />
+ *   </ng-template>
+ * </mlv-expand>
+ * ```
+ */
+export declare class MlvExpandContent {
+    /** The template reference rendered once the panel first opens. */
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvExpandContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvExpandContent, "[mlvExpandContent]", never, {}, {}, never, never, true, never>;
+}

package/expand/lib/expand/expand.d.ts

@@ -0,0 +1,74 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { MlvExpandContent } from './expand-content';
+import * as i0 from "@angular/core";
+/**
+ * Expandable panel component with smooth `grid-template-rows` animation.
+ *
+ * The component renders no header or trigger of its own — it is the animated
+ * panel only. Drive it from your own control through `[(opened)]` or a template
+ * reference and `toggle()`.
+ *
+ * Supports two content modes:
+ * - **Eager** (default): place content directly inside `<mlv-expand>`.
+ * - **Lazy**: wrap content in `<ng-template mlvExpandContent>`.
+ *
+ * In both modes the body element only exists while `opened()` is `true`, so
+ * projected content is created on open and destroyed on close. The difference
+ * is *when the content is first constructed*: eager `<ng-content>` is created
+ * with the host component, the lazy template only on first open — which is what
+ * keeps a heavy child from being initialized in a panel the user never expands.
+ *
+ * @example Eager (ng-content)
+ * ```html
+ * <button type="button" (click)="panel.toggle()">Details</button>
+ * <mlv-expand #panel>
+ *   <p>Created with the host; in the DOM only while the panel is open.</p>
+ * </mlv-expand>
+ * ```
+ *
+ * @example Lazy (structural directive)
+ * ```html
+ * <button type="button" (click)="isOpen.set(!isOpen())">Load on demand</button>
+ * <mlv-expand [(opened)]="isOpen">
+ *   <ng-template mlvExpandContent>
+ *     <heavy-chart-component />
+ *   </ng-template>
+ * </mlv-expand>
+ * ```
+ */
+export declare class MlvExpand {
+    /**
+     * Two-way bindable open/closed state.
+     * Bind with `[(opened)]="isOpen"` or read with `(openedChange)="onToggle($event)"`.
+     *
+     * @remarks Renamed from `open` to `opened` for consistency with the other
+     * open/close surfaces (`mlv-dialog`, `mlv-drawer`, `mlv-popup`). Breaking
+     * change — see the expand migration note.
+     */
+    readonly opened: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * When `true`, prevents toggling and visually dims the component.
+     * Supports attribute syntax: `<mlv-expand disabled>`.
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Optional accessible label for the expand body region.
+     * When set, applies `role="region"` with `aria-label` on the body element.
+     * Prefer `ariaLabelledBy` when a visible label element exists.
+     */
+    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * ID of an element that labels this expand region.
+     * When set, applies `role="region"` with `aria-labelledby` on the body element.
+     */
+    readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+    /** @internal Detects whether a lazy content directive is projected. */
+    protected readonly _lazyContent: import("@angular/core").Signal<MlvExpandContent | undefined>;
+    /**
+     * Toggles the open/closed state.
+     * No-op when the component is disabled.
+     */
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvExpand, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvExpand, "mlv-expand", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; }, ["_lazyContent"], ["*"], true, never>;
+}

package/expand/malva-ui-core-expand.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@malva-ui/core/expand" />
+export * from './index';

package/file-upload/README.md

@@ -0,0 +1,7 @@
+# file-upload
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test file-upload` to execute the unit tests.

package/file-upload/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/file-upload-action';
+export * from './lib/file-upload/file-upload';
+export * from './lib/file-upload/file-upload.types';
+export * from './lib/file-upload-item/file-upload-item';