@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-tree.mjs

@@ -0,0 +1,599 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Directive, inject, booleanAttribute, model, output, signal, effect, untracked, runInInjectionContext, Component } from '@angular/core';
+import { treeControlTemplate } from '@ngneers/controls-themes/templates/tree';
+import { filterOptions } from '@ngneers/controls/api';
+import { templateTypesFn, NgnStorage, NgnTemplate } from '@ngneers/controls/api/ng';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnCheckbox } from '@ngneers/controls/checkbox';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnScroller, NgnScrollerItem } from '@ngneers/controls/scroller';
+import { createConditionalSpinner, NgnSpinner } from '@ngneers/controls/spinner';
+import { maybeCallback, Logger } from '@ngneers/controls/utils';
+import { asyncComputed } from '@ngneers/controls/utils-ng';
+
+class TreeTemplates extends ValueControlBase {
+    // Item template
+    _defaultItemTemplate = viewChild.required('defaultItemTemplate');
+    _userItemTemplate = contentChild('item', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userItemTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for a tree node.
+     * Can also be set via an `<ng-template #item>` element. A per-node
+     * `item.template` takes precedence over this global template.
+     */
+    templateItem = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateItem" }] : /* istanbul ignore next */ []));
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem() ?? this._defaultItemTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    // Empty template
+    _defaultEmptyTemplate = viewChild.required('defaultEmptyTemplate');
+    _userEmptyTemplate = contentChild('empty', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userEmptyTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the empty state.
+     * Can also be set via an `<ng-template #empty>` element.
+     */
+    templateEmpty = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateEmpty" }] : /* istanbul ignore next */ []));
+    emptyTemplate = computed(() => this._userEmptyTemplate() ?? this.templateEmpty() ?? this._defaultEmptyTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TreeTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: TreeTemplates, isStandalone: true, inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null }, templateEmpty: { classPropertyName: "templateEmpty", publicName: "templateEmpty", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "_userEmptyTemplate", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultEmptyTemplate", first: true, predicate: ["defaultEmptyTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TreeTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _defaultItemTemplate: [{ type: i0.ViewChild, args: ['defaultItemTemplate', { isSignal: true }] }], _userItemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], templateItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateItem", required: false }] }], _defaultEmptyTemplate: [{ type: i0.ViewChild, args: ['defaultEmptyTemplate', { isSignal: true }] }], _userEmptyTemplate: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], templateEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateEmpty", required: false }] }] } });
+
+/** Walk the tree, emitting only expanded + visible nodes as a flat list. */
+function flattenTree(items, expanded, level = 0, parentDisabled = false) {
+    const result = [];
+    const setSize = items.length;
+    items.forEach((item, index) => {
+        // A lazy branch shows a toggle before its children are loaded.
+        const hasChildren = (!!item.items && item.items.length > 0) || !!item.lazy;
+        const isExpanded = hasChildren && expanded.has(item.value);
+        const effectiveDisabled = parentDisabled || !!item.disabled;
+        result.push({
+            item,
+            level,
+            setSize,
+            posInSet: index + 1,
+            hasChildren,
+            expanded: isExpanded,
+            parentDisabled,
+        });
+        if (isExpanded && item.items) {
+            result.push(...flattenTree(item.items, expanded, level + 1, effectiveDisabled));
+        }
+    });
+    return result;
+}
+/**
+ * Inject lazily-loaded children (keyed by node value) into the tree, returning
+ * a new forest where resolved lazy nodes carry their loaded `items` and are no
+ * longer marked `lazy`. Returns the input unchanged when nothing is loaded.
+ */
+function applyLoadedChildren(items, loaded) {
+    if (loaded.size === 0) {
+        return items;
+    }
+    return items.map(item => {
+        const cached = loaded.get(item.value);
+        if (cached !== undefined) {
+            return { ...item, items: [...applyLoadedChildren(cached, loaded)], lazy: false };
+        }
+        if (item.items && item.items.length > 0) {
+            return { ...item, items: [...applyLoadedChildren(item.items, loaded)] };
+        }
+        return item;
+    });
+}
+/** All selectable, enabled leaf values under (and including) an item. */
+function collectLeafValues(item, parentDisabled = false) {
+    const disabled = parentDisabled || !!item.disabled;
+    if (item.items && item.items.length > 0) {
+        return item.items.flatMap(child => collectLeafValues(child, disabled));
+    }
+    if (disabled || item.selectable === false) {
+        return [];
+    }
+    return [item.value];
+}
+/** All branch values in the forest (used to auto-expand while filtering). */
+function collectBranchValues(items) {
+    return items.flatMap(item => item.items && item.items.length > 0 ? [item.value, ...collectBranchValues(item.items)] : []);
+}
+/** Add/remove all of a node's enabled leaf values against the current value set. */
+function cascadeCheck(node, shouldCheck, currentValue) {
+    const leaves = collectLeafValues(node);
+    const set = new Set(currentValue);
+    for (const value of leaves) {
+        if (shouldCheck) {
+            set.add(value);
+        }
+        else {
+            set.delete(value);
+        }
+    }
+    return [...set];
+}
+/** Derive a node's tri-state from which of its leaves are in the value set. */
+function computeNodeState(item, valueSet) {
+    const leaves = collectLeafValues(item);
+    if (leaves.length === 0) {
+        return 'unchecked';
+    }
+    let checked = 0;
+    for (const value of leaves) {
+        if (valueSet.has(value)) {
+            checked++;
+        }
+    }
+    if (checked === 0)
+        return 'unchecked';
+    if (checked === leaves.length)
+        return 'checked';
+    return 'indeterminate';
+}
+
+/**
+ * @category control
+ */
+class NgnTree extends TreeTemplates {
+    i18n = inject(I18n).translations;
+    theme = this.injectThemeTemplate(treeControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+        empty: () => !this.flatNodes().length,
+    });
+    _scroller = viewChild.required(NgnScroller);
+    /** The tree items to render, as a nested list of {@link NgnTreeItem} objects. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether nodes can be selected/checked.
+     * @default true
+     */
+    selectable = input(true, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the tree is focusable and participates in keyboard navigation.
+     * @default true
+     */
+    focussable = input(true, { ...(ngDevMode ? { debugName: "focussable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the tree is virtualized. When enabled, provide {@link itemHeight}.
+     * @default false
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When {@link virtual} is enabled, this defines the height of each node in the list.
+     */
+    itemHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Enable this to allow selecting multiple nodes. The value then becomes an array of node values.
+     * @default false
+     */
+    multiple = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render checkboxes. Defaults to `multiple()`.
+     * @default multiple()
+     */
+    checkbox = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "checkbox" }] : /* istanbul ignore next */ []));
+    /**
+     * Boolean to enable filtering, or a `FilterConfig` to customize it.
+     * @default false
+     */
+    filter = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** Manually set the filter text. */
+    filterText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+    /** Values of expanded branch nodes (two-way). */
+    expandedValues = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedValues" }] : /* istanbul ignore next */ []));
+    /**
+     * Persist expansion + selection state across reloads. Provide a key and,
+     * optionally, an `NgnStorageKind` (defaults to `'localstorage'`).
+     */
+    storage = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storage" }] : /* istanbul ignore next */ []));
+    _storage;
+    /**
+     * Loads the children of a `lazy` node the first time it is expanded.
+     * The returned items are cached internally and merged into the tree.
+     */
+    loadChildren = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "loadChildren" }] : /* istanbul ignore next */ []));
+    /** Emitted with the node's value whenever a node is clicked/selected. */
+    itemClicked = output();
+    /** Emitted when a branch is expanded (fires before any lazy load resolves). */
+    nodeExpand = output();
+    maybeCallback = maybeCallback;
+    /** Lazily-loaded children, keyed by node value. */
+    _loadedChildren = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadedChildren" }] : /* istanbul ignore next */ []));
+    /** Node values currently awaiting their lazy children. */
+    _loadingNodes = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadingNodes" }] : /* istanbul ignore next */ []));
+    filteredItems = asyncComputed(async () => {
+        const filter = !!this.filter();
+        const appliedFilterOptions = this._appliedFilterOptions();
+        const filterText = this.filterText();
+        if (!filter || !filterText) {
+            return this.items();
+        }
+        return await filterOptions(this.items(), filterText, appliedFilterOptions);
+    }, []);
+    _appliedFilterOptions = computed(() => {
+        const filter = this.filter();
+        const providedFilterArgs = typeof filter === 'boolean' ? {} : filter;
+        const options = {
+            filterFieldsCallback: item => item.label,
+            fieldItems: 'items',
+            splitWords: true,
+            caseSensitive: false,
+            filterFn: 'contains',
+            ...providedFilterArgs,
+        };
+        return options;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_appliedFilterOptions" }] : /* istanbul ignore next */ []));
+    filterIsExecuting = this.filteredItems.isRunning;
+    /** While filtering, auto-expand every branch that survived the filter. */
+    _autoExpanded = computed(() => this.filterText() ? collectBranchValues(this.filteredItems()) : [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_autoExpanded" }] : /* istanbul ignore next */ []));
+    _expandedSet = computed(() => new Set([...this.expandedValues(), ...this._autoExpanded()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandedSet" }] : /* istanbul ignore next */ []));
+    /** Filtered items with any lazily-loaded children merged in. */
+    _effectiveItems = computed(() => applyLoadedChildren(this.filteredItems(), this._loadedChildren()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveItems" }] : /* istanbul ignore next */ []));
+    flatNodes = computed(() => flattenTree(this._effectiveItems(), this._expandedSet()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flatNodes" }] : /* istanbul ignore next */ []));
+    valueArray = computed(() => {
+        const v = this.value();
+        return (Array.isArray(v) ? v : v != null ? [v] : []);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueArray" }] : /* istanbul ignore next */ []));
+    _valueSet = computed(() => new Set(this.valueArray()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_valueSet" }] : /* istanbul ignore next */ []));
+    currentHighlightedValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentHighlightedValue" }] : /* istanbul ignore next */ []));
+    showCheckboxes = computed(() => this.checkbox() ?? this.multiple() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCheckboxes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        createConditionalSpinner(this.filterIsExecuting);
+        // Fallback init for when the `storage` config arrives after ngOnInit (e.g.
+        // an async binding). Idempotent with the ngOnInit path. Registered before
+        // the persistence effect so the store is restored before any write; the
+        // persistence effect no-ops until `_storage` exists anyway.
+        effect(() => {
+            const cfg = this.storage();
+            if (cfg) {
+                untracked(() => this._initStorage(cfg));
+            }
+        });
+        // Persist expansion + selection whenever they change.
+        effect(() => {
+            const expanded = this.expandedValues();
+            const value = this.value();
+            untracked(() => {
+                if (!this._storage) {
+                    return;
+                }
+                if (this._persistsState('expanded')) {
+                    this._storage.set('expanded', expanded);
+                }
+                if (this._persistsState('value')) {
+                    this._storage.set('value', value ?? null);
+                }
+            });
+        });
+        // Drop cached lazy children when the source items change identity.
+        effect(() => {
+            this.items();
+            untracked(() => {
+                if (this._loadedChildren().size || this._loadingNodes().size) {
+                    this._loadedChildren.set(new Map());
+                    this._loadingNodes.set(new Set());
+                }
+            });
+        });
+        effect(() => {
+            const highlighted = this.currentHighlightedValue();
+            if (highlighted == null) {
+                return;
+            }
+            const index = this.flatNodes().findIndex(node => node.item.value === highlighted);
+            if (index >= 0) {
+                this._scroller().scrollToIndex(index);
+            }
+        });
+    }
+    /**
+     * Create the store and restore persisted state before the first view check
+     * (so it also feeds the SSR render for the `cookie` kind without triggering
+     * ExpressionChangedAfterItHasBeenChecked).
+     *
+     * This is the common path: the `storage` config is normally bound before
+     * init, so the restore happens pre-render. When the config only becomes
+     * available after init (e.g. an async binding, or a dynamic host that applies
+     * inputs after creating the component), the constructor effect below picks it
+     * up instead — `_initStorage` is idempotent, so at most one of them runs.
+     */
+    ngOnInit() {
+        const cfg = this.storage();
+        if (cfg) {
+            this._initStorage(cfg);
+        }
+    }
+    /** Create the store and restore persisted state. Runs at most once. */
+    _initStorage(cfg) {
+        if (this._storage) {
+            return;
+        }
+        // NgnStorage reads platform/document/request tokens, so it needs an
+        // injection context.
+        this._storage = runInInjectionContext(this.injector, () => new NgnStorage(cfg.key, cfg.kind ?? 'localstorage', {
+            expanded: this.expandedValues(),
+            value: this.value() ?? null,
+        }));
+        if (this._persistsState('expanded')) {
+            const savedExpanded = this._storage.get('expanded');
+            if (Array.isArray(savedExpanded)) {
+                this.expandedValues.set(savedExpanded);
+            }
+        }
+        if (this._persistsState('value')) {
+            const savedValue = this._storage.get('value');
+            if (savedValue !== undefined) {
+                this.value.set(savedValue);
+            }
+        }
+    }
+    /** Whether the given state should be persisted (all states when unset). */
+    _persistsState(state) {
+        const states = this.storage()?.states;
+        return !states || states.includes(state);
+    }
+    /** Derived tri-state for a node's checkbox / aria-checked. */
+    nodeState(item) {
+        return computeNodeState(item, this._valueSet());
+    }
+    /** Whether a node can be selected/checked right now. */
+    isSelectable(node) {
+        const disabled = node.parentDisabled || !!node.item.disabled;
+        return this.selectable() && node.item.selectable !== false && !disabled;
+    }
+    /** Whether a lazy node is currently loading its children. */
+    isLoading(item) {
+        return this._loadingNodes().has(item.value);
+    }
+    async toggleExpand(item) {
+        const value = item.value;
+        const willExpand = !this.expandedValues().includes(value);
+        this.expandedValues.update(values => values.includes(value) ? values.filter(v => v !== value) : [...values, value]);
+        if (!willExpand) {
+            return;
+        }
+        this.nodeExpand.emit(item);
+        const loader = this.loadChildren();
+        if (!item.lazy ||
+            !loader ||
+            this._loadedChildren().has(value) ||
+            this._loadingNodes().has(value)) {
+            return;
+        }
+        this._loadingNodes.update(set => new Set(set).add(value));
+        let children;
+        try {
+            children = await loader(item);
+        }
+        catch (error) {
+            Logger.warn(`ngn-tree: failed to load children for node "${String(value)}"`, error);
+        }
+        // Ignore stale results: if items() changed mid-load, the loading state was
+        // cleared and this result should be dropped.
+        if (children && this._loadingNodes().has(value)) {
+            this._loadedChildren.update(map => new Map(map).set(value, children));
+        }
+        this._loadingNodes.update(set => {
+            const next = new Set(set);
+            next.delete(value);
+            return next;
+        });
+    }
+    onRowClick(node) {
+        if (!this.isSelectable(node)) {
+            return;
+        }
+        this.onSelect(node.item);
+    }
+    onSelect(item) {
+        const value = item.value;
+        if (this.multiple()) {
+            if (this.showCheckboxes()) {
+                // Cascade tri-state checking; value stays a leaf-only array.
+                const shouldCheck = this.nodeState(item) !== 'checked';
+                this.value.set(cascadeCheck(item, shouldCheck, this.valueArray()));
+            }
+            else {
+                const current = this.value() ?? [];
+                this.value.set((current.includes(value)
+                    ? current.filter(v => v !== value)
+                    : [...current, value]));
+            }
+        }
+        else {
+            // Single-select always stores a single value (never an array), even when
+            // checkboxes are shown.
+            this.value.set(value);
+        }
+        this.itemClicked.emit(value);
+        this.touched.set(true);
+    }
+    scrollToIndex(index) {
+        this._scroller().scrollToIndex(index);
+    }
+    onKeyDown(event) {
+        const nodes = this.flatNodes();
+        if (!nodes.length) {
+            return;
+        }
+        const enabled = nodes.filter(n => !(n.parentDisabled || n.item.disabled));
+        const key = event.key;
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._moveHighlight(enabled, key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (key === 'Home' || key === 'End') {
+            event.preventDefault();
+            event.stopPropagation();
+            const target = key === 'Home' ? enabled[0] : enabled[enabled.length - 1];
+            this.currentHighlightedValue.set((target?.item.value ?? null));
+        }
+        else if (key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._expandOrEnter(nodes);
+        }
+        else if (key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._collapseOrLeave(nodes);
+        }
+        else if (key === 'Enter' || key === ' ') {
+            const node = this._currentNode(nodes);
+            if (node && this.isSelectable(node)) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.onSelect(node.item);
+            }
+        }
+        else if (key.length === 1 && /\S/.test(key)) {
+            this._typeahead(enabled, key);
+        }
+    }
+    _currentNode(nodes) {
+        const current = this.currentHighlightedValue();
+        return nodes.find(n => n.item.value === current);
+    }
+    _moveHighlight(enabled, dir) {
+        if (!enabled.length) {
+            this.currentHighlightedValue.set(null);
+            return;
+        }
+        const current = this.currentHighlightedValue();
+        const idx = enabled.findIndex(n => n.item.value === current);
+        let next;
+        if (idx === -1) {
+            next = dir === 1 ? 0 : enabled.length - 1;
+        }
+        else {
+            next = (idx + dir + enabled.length) % enabled.length;
+        }
+        const target = enabled[next];
+        if (target) {
+            this.currentHighlightedValue.set(target.item.value);
+        }
+    }
+    _expandOrEnter(nodes) {
+        const node = this._currentNode(nodes);
+        if (!node) {
+            return;
+        }
+        if (node.hasChildren && !node.expanded) {
+            void this.toggleExpand(node.item);
+        }
+        else if (node.hasChildren && node.expanded) {
+            const idx = nodes.indexOf(node);
+            for (let i = idx + 1; i < nodes.length; i++) {
+                const candidate = nodes[i];
+                if (!candidate || candidate.level <= node.level) {
+                    break; // left this node's subtree
+                }
+                if (!(candidate.parentDisabled || candidate.item.disabled)) {
+                    this.currentHighlightedValue.set(candidate.item.value);
+                    return;
+                }
+            }
+        }
+    }
+    _collapseOrLeave(nodes) {
+        const node = this._currentNode(nodes);
+        if (!node) {
+            return;
+        }
+        if (node.hasChildren && node.expanded) {
+            void this.toggleExpand(node.item);
+            return;
+        }
+        // move to parent: previous node with a smaller level
+        const idx = nodes.indexOf(node);
+        for (let i = idx - 1; i >= 0; i--) {
+            const ancestor = nodes[i];
+            if (!ancestor) {
+                continue;
+            }
+            if (ancestor.level < node.level) {
+                if (!(ancestor.parentDisabled || ancestor.item.disabled)) {
+                    this.currentHighlightedValue.set(ancestor.item.value);
+                }
+                return;
+            }
+        }
+    }
+    _typeahead(enabled, char) {
+        const lower = char.toLowerCase();
+        const current = this.currentHighlightedValue();
+        const start = enabled.findIndex(n => n.item.value === current);
+        for (let offset = 1; offset <= enabled.length; offset++) {
+            const node = enabled[(start + offset + enabled.length) % enabled.length];
+            if (!node) {
+                continue;
+            }
+            const label = maybeCallback(node.item.label).toLowerCase();
+            if (label.startsWith(lower)) {
+                this.currentHighlightedValue.set(node.item.value);
+                return;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTree, isStandalone: true, selector: "ngn-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, focussable: { classPropertyName: "focussable", publicName: "focussable", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, expandedValues: { classPropertyName: "expandedValues", publicName: "expandedValues", isSignal: true, isRequired: false, transformFunction: null }, storage: { classPropertyName: "storage", publicName: "storage", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedValues: "expandedValuesChange", itemClicked: "itemClicked", nodeExpand: "nodeExpand" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "onKeyDown($event)", "focusout": "currentHighlightedValue.set(null)" }, properties: { "attr.tabIndex": "focussable() ? 0 : null", "attr.aria-activedescendant": "currentHighlightedValue() != null ? inputId() + \"_node_\" + currentHighlightedValue() : null", "attr.aria-multiselectable": "!!multiple()", "attr.aria-label": "label()", "attr.aria-labelledby": "labelledBy()", "id": "inputId()" } }, providers: [provideSelf(NgnTree)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: NgnScroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ngn-scroller\n  [ptInt]=\"this\"\n  [ptDep]=\"'scroller'\"\n  [virtual]=\"virtual()\"\n  [itemHeight]=\"itemHeight()\"\n  [items]=\"flatNodes()\"\n  [templateItem]=\"usedItemTemplate\"\n  #scroller\n/>\n\n@if (!flatNodes().length) {\n  <div role=\"status\">\n    <ng-container\n      *ngTemplateOutlet=\"emptyTemplate() || defaultEmptyTemplate; context: {}\"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #usedItemTemplate [ngnTemplate]=\"scroller.templateTypes.item\" let-node>\n  @let item = node.item;\n  @let disabled = node.parentDisabled || item.disabled;\n  @let state = nodeState(item);\n  @let selectableNode = isSelectable(node);\n  <!--\n    Virtual scrolling renders a flat list, so treeitems are not DOM-nested in\n    role=\"group\" containers. Per WAI-ARIA, aria-level + aria-setsize +\n    aria-posinset are the sanctioned substitute that convey the hierarchy to\n    assistive tech. (The `group` CSS class below is visual styling only.)\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    [ngnScrollerItem]=\"node\"\n    [id]=\"inputId() + '_node_' + item.value\"\n    role=\"treeitem\"\n    [attr.aria-level]=\"node.level + 1\"\n    [attr.aria-setsize]=\"node.setSize\"\n    [attr.aria-posinset]=\"node.posInSet\"\n    [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n    [attr.aria-selected]=\"\n      !showCheckboxes() && selectableNode ? valueArray().includes(item.value) : null\n    \"\n    [attr.aria-checked]=\"\n      showCheckboxes() && selectableNode\n        ? state === 'indeterminate'\n          ? 'mixed'\n          : state === 'checked'\n            ? 'true'\n            : 'false'\n        : null\n    \"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [style.--ngn-tree-level]=\"node.level\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      item: !item.items,\n      group: !!item.items,\n      'item-selectable': selectableNode,\n      'item-selected': valueArray().includes(item.value),\n      'item-highlighted': item.value === currentHighlightedValue(),\n      'item-disabled': !!disabled,\n      'item-expanded': node.expanded,\n    }\"\n    (click)=\"onRowClick(node)\"\n  >\n    @if (node.hasChildren) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'toggle'\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"toggleExpand(item); $event.stopPropagation()\"\n      >\n        <span [ptInt]=\"this\" [ptClass]=\"'toggle-icon'\">\n          @if (isLoading(item)) {\n            <ngn-spinner [size]=\"14\" />\n          } @else {\n            <span [ptInt]=\"this\" [ptClass]=\"'toggle-arrow'\"></span>\n          }\n        </span>\n      </button>\n    } @else {\n      <span [ptInt]=\"this\" [ptClass]=\"'toggle-placeholder'\" aria-hidden=\"true\"></span>\n    }\n    @if (showCheckboxes() && selectableNode) {\n      <ngn-checkbox\n        [ptInt]=\"this\"\n        [ptDep]=\"'item-checkbox'\"\n        [allowIndeterminate]=\"true\"\n        [value]=\"state === 'indeterminate' ? null : state === 'checked'\"\n        aria-hidden=\"true\"\n        inert=\"true\"\n      />\n    } @else if (showCheckboxes() && selectable() && item.selectable !== false) {\n      <!-- Disabled node: show the checkbox for consistency, but disabled. -->\n      <ngn-checkbox\n        [ptInt]=\"this\"\n        [ptDep]=\"'item-checkbox'\"\n        [allowIndeterminate]=\"true\"\n        [value]=\"state === 'indeterminate' ? null : state === 'checked'\"\n        [disabled]=\"true\"\n        aria-hidden=\"true\"\n        inert=\"true\"\n      />\n    } @else if (showCheckboxes()) {\n      <span [ptInt]=\"this\" [ptClass]=\"'item-checkbox-placeholder'\" aria-hidden=\"true\"></span>\n    }\n    @if (item.template) {\n      <ng-container *ngTemplateOutlet=\"item.template; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate();\n          context: {\n            $implicit: item,\n            level: node.level,\n            expanded: node.expanded,\n            hasChildren: node.hasChildren,\n          }\n        \"\n      ></ng-container>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\n  <span [attr.data-testid]=\"item?.testId\" [ptInt]=\"this\" [ptClass]=\"'default-item'\">\n    @let label = item?.label;\n    @if (label) {\n      <span>{{ maybeCallback(label) }}</span>\n    } @else {\n      <span>&ZeroWidthSpace;</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n  <span [ptInt]=\"this\" [ptClass]=\"'empty'\" [attr.data-testid]=\"'empty'\">{{\n    i18n['tree_noItemsFound']()\n  }}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnScroller, selector: "ngn-scroller, [ngn-scroller]", inputs: ["items", "fieldId", "virtual", "itemHeight", "virtualPadding", "focusable", "fieldSticky"] }, { kind: "directive", type: NgnScrollerItem, selector: "[ngnScrollerItem]", inputs: ["ngnScrollerItem"] }, { kind: "component", type: NgnCheckbox, selector: "ngn-checkbox", inputs: ["iconChecked", "iconUnchecked", "iconIndeterminate", "allowIndeterminate"] }, { kind: "component", type: NgnSpinner, selector: "ngn-spinner", inputs: ["size", "thickness", "centered"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-tree', imports: [
+                        NgTemplateOutlet,
+                        NgnScroller,
+                        NgnScrollerItem,
+                        NgnCheckbox,
+                        NgnSpinner,
+                        NgnTemplate,
+                        NgnPt,
+                    ], providers: [provideSelf(NgnTree)], host: {
+                        '[attr.tabIndex]': 'focussable() ? 0 : null',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focusout)': 'currentHighlightedValue.set(null)',
+                        role: 'tree',
+                        '[attr.aria-activedescendant]': 'currentHighlightedValue() != null ? inputId() + "_node_" + currentHighlightedValue() : null',
+                        '[attr.aria-multiselectable]': '!!multiple()',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[id]': 'inputId()',
+                    }, template: "<ngn-scroller\n  [ptInt]=\"this\"\n  [ptDep]=\"'scroller'\"\n  [virtual]=\"virtual()\"\n  [itemHeight]=\"itemHeight()\"\n  [items]=\"flatNodes()\"\n  [templateItem]=\"usedItemTemplate\"\n  #scroller\n/>\n\n@if (!flatNodes().length) {\n  <div role=\"status\">\n    <ng-container\n      *ngTemplateOutlet=\"emptyTemplate() || defaultEmptyTemplate; context: {}\"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #usedItemTemplate [ngnTemplate]=\"scroller.templateTypes.item\" let-node>\n  @let item = node.item;\n  @let disabled = node.parentDisabled || item.disabled;\n  @let state = nodeState(item);\n  @let selectableNode = isSelectable(node);\n  <!--\n    Virtual scrolling renders a flat list, so treeitems are not DOM-nested in\n    role=\"group\" containers. Per WAI-ARIA, aria-level + aria-setsize +\n    aria-posinset are the sanctioned substitute that convey the hierarchy to\n    assistive tech. (The `group` CSS class below is visual styling only.)\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    [ngnScrollerItem]=\"node\"\n    [id]=\"inputId() + '_node_' + item.value\"\n    role=\"treeitem\"\n    [attr.aria-level]=\"node.level + 1\"\n    [attr.aria-setsize]=\"node.setSize\"\n    [attr.aria-posinset]=\"node.posInSet\"\n    [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n    [attr.aria-selected]=\"\n      !showCheckboxes() && selectableNode ? valueArray().includes(item.value) : null\n    \"\n    [attr.aria-checked]=\"\n      showCheckboxes() && selectableNode\n        ? state === 'indeterminate'\n          ? 'mixed'\n          : state === 'checked'\n            ? 'true'\n            : 'false'\n        : null\n    \"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [style.--ngn-tree-level]=\"node.level\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      item: !item.items,\n      group: !!item.items,\n      'item-selectable': selectableNode,\n      'item-selected': valueArray().includes(item.value),\n      'item-highlighted': item.value === currentHighlightedValue(),\n      'item-disabled': !!disabled,\n      'item-expanded': node.expanded,\n    }\"\n    (click)=\"onRowClick(node)\"\n  >\n    @if (node.hasChildren) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'toggle'\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"toggleExpand(item); $event.stopPropagation()\"\n      >\n        <span [ptInt]=\"this\" [ptClass]=\"'toggle-icon'\">\n          @if (isLoading(item)) {\n            <ngn-spinner [size]=\"14\" />\n          } @else {\n            <span [ptInt]=\"this\" [ptClass]=\"'toggle-arrow'\"></span>\n          }\n        </span>\n      </button>\n    } @else {\n      <span [ptInt]=\"this\" [ptClass]=\"'toggle-placeholder'\" aria-hidden=\"true\"></span>\n    }\n    @if (showCheckboxes() && selectableNode) {\n      <ngn-checkbox\n        [ptInt]=\"this\"\n        [ptDep]=\"'item-checkbox'\"\n        [allowIndeterminate]=\"true\"\n        [value]=\"state === 'indeterminate' ? null : state === 'checked'\"\n        aria-hidden=\"true\"\n        inert=\"true\"\n      />\n    } @else if (showCheckboxes() && selectable() && item.selectable !== false) {\n      <!-- Disabled node: show the checkbox for consistency, but disabled. -->\n      <ngn-checkbox\n        [ptInt]=\"this\"\n        [ptDep]=\"'item-checkbox'\"\n        [allowIndeterminate]=\"true\"\n        [value]=\"state === 'indeterminate' ? null : state === 'checked'\"\n        [disabled]=\"true\"\n        aria-hidden=\"true\"\n        inert=\"true\"\n      />\n    } @else if (showCheckboxes()) {\n      <span [ptInt]=\"this\" [ptClass]=\"'item-checkbox-placeholder'\" aria-hidden=\"true\"></span>\n    }\n    @if (item.template) {\n      <ng-container *ngTemplateOutlet=\"item.template; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate();\n          context: {\n            $implicit: item,\n            level: node.level,\n            expanded: node.expanded,\n            hasChildren: node.hasChildren,\n          }\n        \"\n      ></ng-container>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\n  <span [attr.data-testid]=\"item?.testId\" [ptInt]=\"this\" [ptClass]=\"'default-item'\">\n    @let label = item?.label;\n    @if (label) {\n      <span>{{ maybeCallback(label) }}</span>\n    } @else {\n      <span>&ZeroWidthSpace;</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n  <span [ptInt]=\"this\" [ptClass]=\"'empty'\" [attr.data-testid]=\"'empty'\">{{\n    i18n['tree_noItemsFound']()\n  }}</span>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnScroller), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], focussable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focussable", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }], expandedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedValues", required: false }] }, { type: i0.Output, args: ["expandedValuesChange"] }], storage: [{ type: i0.Input, args: [{ isSignal: true, alias: "storage", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnTree, TreeTemplates, applyLoadedChildren, cascadeCheck, collectBranchValues, collectLeafValues, computeNodeState, flattenTree };
+//# sourceMappingURL=ngneers-controls-tree.mjs.map