@sdcorejs/angular 21.0.4 → 21.0.5

package/fesm2022/sdcorejs-angular-components-tree.mjs

@@ -0,0 +1,526 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, contentChild, computed, signal, effect, isSignal, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i6 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SdButton } from '@sdcorejs/angular/components/button';
+import { SdQuickAction } from '@sdcorejs/angular/components/quick-action';
+
+class SdTreeItemDefDirective {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTreeItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: SdTreeItemDefDirective, isStandalone: true, selector: "[sdTreeItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTreeItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdTreeItemDef]',
+                    standalone: true,
+                }]
+        }] });
+
+const DEFAULT_STATIC_TREE = { loadType: 'static' };
+const EMPTY_TREE_ITEMS = [];
+class SdTree {
+    autoIdInput = input(undefined, { ...(ngDevMode ? { debugName: "autoIdInput" } : /* istanbul ignore next */ {}), alias: 'autoId' });
+    option = input(undefined, ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
+    /** Migration bridge. New usage should put the data source in `option.items`. */
+    items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Migration bridge. New usage should put static/lazy config in `option.tree`. */
+    tree = input(DEFAULT_STATIC_TREE, ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+    selectedItemsInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedItemsInput" } : /* istanbul ignore next */ {}), alias: 'selectedItems' });
+    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : /* istanbul ignore next */ []));
+    selectable = input(true, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selector = input(undefined, ...(ngDevMode ? [{ debugName: "selector" }] : /* istanbul ignore next */ []));
+    itemTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    selectedItemsChange = output();
+    selectChange = output();
+    expandChange = output();
+    collapseChange = output();
+    itemDef = contentChild((SdTreeItemDefDirective), ...(ngDevMode ? [{ debugName: "itemDef" }] : /* istanbul ignore next */ []));
+    resolvedItemsSource = computed(() => {
+        return this.option()?.items ?? this.items() ?? EMPTY_TREE_ITEMS;
+    }, ...(ngDevMode ? [{ debugName: "resolvedItemsSource" }] : /* istanbul ignore next */ []));
+    resolvedTree = computed(() => this.option()?.tree ?? this.tree() ?? DEFAULT_STATIC_TREE, ...(ngDevMode ? [{ debugName: "resolvedTree" }] : /* istanbul ignore next */ []));
+    resolvedSelector = computed(() => this.option()?.selector ?? this.selector(), ...(ngDevMode ? [{ debugName: "resolvedSelector" }] : /* istanbul ignore next */ []));
+    resolvedCommands = computed(() => this.option()?.commands ?? this.commands() ?? [], ...(ngDevMode ? [{ debugName: "resolvedCommands" }] : /* istanbul ignore next */ []));
+    resolvedSelectable = computed(() => this.option()?.selectable ?? this.selectable(), ...(ngDevMode ? [{ debugName: "resolvedSelectable" }] : /* istanbul ignore next */ []));
+    autoId = computed(() => {
+        const scope = this.option()?.autoId ?? this.autoIdInput();
+        return scope ? `components-tree-${scope}` : undefined;
+    }, ...(ngDevMode ? [{ debugName: "autoId" }] : /* istanbul ignore next */ []));
+    resolvedItemTemplate = computed(() => {
+        return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;
+    }, ...(ngDevMode ? [{ debugName: "resolvedItemTemplate" }] : /* istanbul ignore next */ []));
+    indentSize = computed(() => this.resolvedTree().indentSize ?? 20, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
+    #rootItems = signal([], ...(ngDevMode ? [{ debugName: "#rootItems" }] : /* istanbul ignore next */ []));
+    #expandedState = signal({}, ...(ngDevMode ? [{ debugName: "#expandedState" }] : /* istanbul ignore next */ []));
+    #loadingState = signal({}, ...(ngDevMode ? [{ debugName: "#loadingState" }] : /* istanbul ignore next */ []));
+    #lazyChildren = signal({}, ...(ngDevMode ? [{ debugName: "#lazyChildren" }] : /* istanbul ignore next */ []));
+    #selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "#selectedIds" }] : /* istanbul ignore next */ []));
+    #filterText = signal('', ...(ngDevMode ? [{ debugName: "#filterText" }] : /* istanbul ignore next */ []));
+    #reloadTick = signal(0, ...(ngDevMode ? [{ debugName: "#reloadTick" }] : /* istanbul ignore next */ []));
+    #rootLoadId = 0;
+    #lastSource;
+    #lastSourceValue;
+    #lastReloadTick = -1;
+    normalizedFilterText = computed(() => normalizeText(this.#filterText()), ...(ngDevMode ? [{ debugName: "normalizedFilterText" }] : /* istanbul ignore next */ []));
+    selectionVisible = computed(() => this.resolvedSelectable() && this.resolvedSelector()?.visible === true, ...(ngDevMode ? [{ debugName: "selectionVisible" }] : /* istanbul ignore next */ []));
+    selectedIdSet = computed(() => {
+        const selectedItems = this.option()?.selectedItems ?? this.selectedItemsInput();
+        return selectedItems ? this.#idsFromSelectedItems(selectedItems) : this.#selectedIds();
+    }, ...(ngDevMode ? [{ debugName: "selectedIdSet" }] : /* istanbul ignore next */ []));
+    rootNodes = computed(() => this.#buildNodes(this.#rootItems(), 0, null), ...(ngDevMode ? [{ debugName: "rootNodes" }] : /* istanbul ignore next */ []));
+    visibleNodes = computed(() => {
+        const filterText = this.normalizedFilterText();
+        const result = [];
+        const walk = (nodes) => {
+            for (const node of nodes) {
+                const nodeOrDescendantMatches = this.#subtreeMatches(node, filterText);
+                if (!filterText || nodeOrDescendantMatches) {
+                    result.push(node);
+                }
+                const shouldShowChildren = filterText ? nodeOrDescendantMatches : node.isExpanded;
+                if (shouldShowChildren) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(this.rootNodes());
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    selectedItems = computed(() => this.#selectedItemsFromIds(this.selectedIdSet()), ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    selectedCount = computed(() => this.selectedItems().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    selectionMessage = computed(() => {
+        const items = this.selectedItems();
+        const message = this.resolvedSelector()?.message;
+        if (typeof message === 'function')
+            return message(items);
+        return message || `Đã chọn ${items.length} mục`;
+    }, ...(ngDevMode ? [{ debugName: "selectionMessage" }] : /* istanbul ignore next */ []));
+    visibleSelectionActions = computed(() => {
+        const items = this.selectedItems();
+        return (this.resolvedSelector()?.actions || []).filter(action => {
+            const hidden = typeof action.hidden === 'function' ? action.hidden(items) : action.hidden;
+            return !hidden;
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleSelectionActions" }] : /* istanbul ignore next */ []));
+    selectionActionViews = computed(() => {
+        return this.visibleSelectionActions().map((action, index) => ({
+            action,
+            autoId: this.#selectionActionAutoId(index),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "selectionActionViews" }] : /* istanbul ignore next */ []));
+    clearSelectionAutoId = computed(() => {
+        const base = this.autoId();
+        return base ? `${base}-clear-selection` : null;
+    }, ...(ngDevMode ? [{ debugName: "clearSelectionAutoId" }] : /* istanbul ignore next */ []));
+    /**
+     * Template-facing row model. Expensive/variable values are resolved once per
+     * signal recomputation so the HTML does not call helper methods for every CD pass.
+     */
+    visibleViewNodes = computed(() => {
+        const selectedIds = this.selectedIdSet();
+        const selectedItems = this.selectedItems();
+        const selector = this.resolvedSelector();
+        const commands = this.resolvedCommands();
+        return this.visibleNodes().map(node => this.#toViewNode(node, selectedIds, selectedItems, selector, commands));
+    }, ...(ngDevMode ? [{ debugName: "visibleViewNodes" }] : /* istanbul ignore next */ []));
+    trackByNode = (_index, node) => node.id;
+    constructor() {
+        effect(() => {
+            const source = this.resolvedItemsSource();
+            const reloadTick = this.#reloadTick();
+            // Data sources can be arrays, signals, sync loaders, or async loaders.
+            // The effect normalizes them into #rootItems; `reload()` only bumps the tick.
+            if (isSignal(source)) {
+                const items = source();
+                untracked(() => this.#applySignalSource(source, items, reloadTick));
+                return;
+            }
+            untracked(() => {
+                if (source === this.#lastSource && reloadTick === this.#lastReloadTick)
+                    return;
+                this.#lastSource = source;
+                this.#lastSourceValue = undefined;
+                this.#lastReloadTick = reloadTick;
+                this.#loadRootItems(source);
+            });
+        });
+    }
+    reload() {
+        this.#reloadTick.update(value => value + 1);
+    }
+    filter(searchText) {
+        this.#filterText.set(searchText ?? '');
+    }
+    isSelected(node) {
+        return this.selectedIdSet().has(node.id);
+    }
+    nodeIcon(node) {
+        return this.#iconOf(node);
+    }
+    visibleCommands(node) {
+        return this.resolvedCommands().filter(command => !this.#resolveBoolean(command.hidden, node.data));
+    }
+    isSelectionDisabled(node) {
+        const disabled = this.resolvedSelector()?.disabled;
+        return disabled ? disabled(node.data, this.selectedItems()) : false;
+    }
+    commandTitle(command, item) {
+        return typeof command.title === 'function' ? command.title(item) : command.title;
+    }
+    commandIcon(command, item) {
+        const icon = typeof command.icon === 'function' ? command.icon(item) : command.icon;
+        return icon || 'more_horiz';
+    }
+    isCommandDisabled(command, item) {
+        return this.#resolveBoolean(command.disabled, item);
+    }
+    async toggle(node, event) {
+        event?.stopPropagation();
+        const currentNode = this.#findNode(node.id) ?? node;
+        if (!currentNode.hasChildren || currentNode.isLoading)
+            return;
+        if (currentNode.isExpanded) {
+            this.#expandedState.update(state => ({ ...state, [currentNode.id]: false }));
+            const toggleEvent = { item: currentNode.data, expanded: false, node: { ...currentNode, isExpanded: false } };
+            this.option()?.onCollapse?.(toggleEvent);
+            this.collapseChange.emit(toggleEvent);
+            return;
+        }
+        await this.#ensureLazyChildren(currentNode);
+        const nextNode = this.#findNode(currentNode.id) ?? currentNode;
+        if (!nextNode.hasChildren)
+            return;
+        this.#expandedState.update(state => ({ ...state, [currentNode.id]: true }));
+        const toggleEvent = { item: currentNode.data, expanded: true, node: { ...nextNode, isExpanded: true } };
+        this.option()?.onExpand?.(toggleEvent);
+        this.expandChange.emit(toggleEvent);
+    }
+    toggleSelection(node, event) {
+        event?.stopPropagation();
+        if (!this.selectionVisible() || this.isSelectionDisabled(node))
+            return;
+        const selectedIds = new Set(this.selectedIdSet());
+        const nextSelected = !selectedIds.has(node.id);
+        if (nextSelected) {
+            selectedIds.add(node.id);
+        }
+        else {
+            selectedIds.delete(node.id);
+        }
+        this.#selectedIds.set(selectedIds);
+        const selectedItems = this.#selectedItemsFromIds(selectedIds);
+        this.option()?.onSelectedItemsChange?.(selectedItems);
+        this.selectedItemsChange.emit(selectedItems);
+        const selectionEvent = { item: node.data, selected: nextSelected, selectedItems };
+        this.option()?.onSelect?.(selectionEvent);
+        this.selectChange.emit(selectionEvent);
+    }
+    clearSelection() {
+        this.#selectedIds.set(new Set());
+        this.option()?.onSelectedItemsChange?.([]);
+        this.selectedItemsChange.emit([]);
+    }
+    onSelectionAction(action) {
+        action.click(this.selectedItems());
+    }
+    createContext(node) {
+        return this.#createContext(node, this.isSelected(node));
+    }
+    nodeAutoId(node, part) {
+        const base = this.autoId();
+        return base ? `${base}-${part}-${sanitizeId(node.id)}` : undefined;
+    }
+    commandAutoId(node, command) {
+        const base = this.nodeAutoId(node, 'command');
+        return base ? `${base}-${sanitizeId(command.key)}` : undefined;
+    }
+    #applySignalSource(source, items, reloadTick) {
+        if (source === this.#lastSource && items === this.#lastSourceValue && reloadTick === this.#lastReloadTick)
+            return;
+        this.#lastSource = source;
+        this.#lastSourceValue = items;
+        this.#lastReloadTick = reloadTick;
+        this.#setRootItems(items);
+    }
+    #loadRootItems(source) {
+        const loadId = ++this.#rootLoadId;
+        try {
+            const result = this.#readItemsSource(source);
+            if (isPromiseLike(result)) {
+                result
+                    .then(items => {
+                    if (loadId === this.#rootLoadId) {
+                        this.#setRootItems(items);
+                    }
+                })
+                    .catch(() => {
+                    if (loadId === this.#rootLoadId) {
+                        this.#setRootItems([]);
+                    }
+                });
+                return;
+            }
+            if (loadId === this.#rootLoadId) {
+                this.#setRootItems(result);
+            }
+        }
+        catch {
+            if (loadId === this.#rootLoadId) {
+                this.#setRootItems([]);
+            }
+        }
+    }
+    #readItemsSource(source) {
+        if (isSignal(source))
+            return source();
+        if (typeof source === 'function')
+            return source();
+        return source;
+    }
+    #setRootItems(items) {
+        this.#rootItems.set([...(items ?? [])]);
+        this.#lazyChildren.set({});
+        this.#loadingState.set({});
+    }
+    #toViewNode(node, selectedIds, selectedItems, selector, commands) {
+        const selected = selectedIds.has(node.id);
+        const selectionDisabled = selector?.disabled ? selector.disabled(node.data, selectedItems) : false;
+        const viewNode = {
+            ...node,
+            icon: this.#iconOf(node),
+            selected,
+            selectionDisabled,
+            toggleDisabled: !node.hasChildren || node.isLoading,
+            toggleLabel: node.isExpanded ? 'Collapse tree item' : 'Expand tree item',
+            ariaExpanded: node.hasChildren ? node.isExpanded : null,
+            autoIds: this.#nodeAutoIds(node),
+            commands: this.#commandViews(node, commands),
+            context: undefined,
+        };
+        viewNode.context = this.#createContext(viewNode, selected);
+        return viewNode;
+    }
+    #commandViews(node, commands) {
+        return commands
+            .filter(command => !this.#resolveBoolean(command.hidden, node.data))
+            .map(command => ({
+            key: command.key,
+            command,
+            title: this.commandTitle(command, node.data),
+            icon: this.commandIcon(command, node.data),
+            color: command.color || 'secondary',
+            fontSet: command.fontSet || 'material-icons-outlined',
+            disabled: this.isCommandDisabled(command, node.data),
+            autoId: this.commandAutoId(node, command),
+            defaultColor: !command.color,
+        }));
+    }
+    #createContext(node, selected) {
+        return {
+            $implicit: node.data,
+            item: node.data,
+            treeItem: node.treeItem,
+            node,
+            level: node.level,
+            expanded: node.isExpanded,
+            selected,
+            loading: node.isLoading,
+            hasChildren: node.hasChildren,
+            isLeaf: !node.hasChildren,
+            toggle: () => void this.toggle(node),
+            select: () => this.toggleSelection(node),
+        };
+    }
+    #nodeAutoIds(node) {
+        return {
+            row: this.nodeAutoId(node, 'row'),
+            toggle: this.nodeAutoId(node, 'toggle'),
+            checkbox: this.nodeAutoId(node, 'checkbox'),
+            icon: this.nodeAutoId(node, 'icon'),
+            label: this.nodeAutoId(node, 'label'),
+            command: this.nodeAutoId(node, 'command'),
+        };
+    }
+    #selectionActionAutoId(index) {
+        const base = this.autoId();
+        return base ? `${base}-selection-action-${index}` : null;
+    }
+    #buildNodes(items, level, parent) {
+        const option = this.resolvedTree();
+        const maxDepth = option.maxDepth;
+        if (maxDepth !== undefined && level > maxDepth)
+            return [];
+        return items.map(item => {
+            const rawChildren = this.#childrenOf(item);
+            const hasChildren = rawChildren.length > 0 || this.#hasLazyChildren(item);
+            const isExpanded = this.#expandedState()[item.id] ?? item.expanded ?? this.#defaultExpanded(level);
+            const node = {
+                treeItem: item,
+                data: item.data,
+                id: item.id,
+                label: item.label,
+                level,
+                parent,
+                children: [],
+                hasChildren,
+                isExpanded,
+                isLoading: this.#loadingState()[item.id] ?? false,
+            };
+            node.children = this.#buildNodes(rawChildren, level + 1, node);
+            return node;
+        });
+    }
+    #childrenOf(item) {
+        const option = this.resolvedTree();
+        // Static items own their `children`; lazy items keep loaded children in component state.
+        if (option.loadType === 'lazy') {
+            return this.#lazyChildren()[item.id] ?? [];
+        }
+        return item.children ?? [];
+    }
+    #hasLazyChildren(item) {
+        const option = this.resolvedTree();
+        if (option.loadType !== 'lazy' || this.#lazyChildren()[item.id])
+            return false;
+        // Lazy mode uses `hasChildren` as the branch hint before children are loaded.
+        return item.hasChildren ?? true;
+    }
+    #defaultExpanded(level) {
+        const option = this.resolvedTree();
+        if (option.loadType !== 'static')
+            return false;
+        const value = option.defaultExpanded ?? false;
+        if (value === true)
+            return true;
+        if (value === false)
+            return false;
+        return level < value;
+    }
+    #iconOf(node) {
+        // One optional `treeItem.icon` handles both branch and leaf overrides.
+        // Without it, branches get folder icons while leaves intentionally render no icon.
+        if (node.treeItem.icon)
+            return node.treeItem.icon;
+        if (!node.hasChildren)
+            return undefined;
+        return node.isExpanded ? 'folder_open' : 'folder';
+    }
+    async #ensureLazyChildren(node) {
+        const option = this.resolvedTree();
+        if (option.loadType !== 'lazy' || node.children.length > 0 || this.#lazyChildren()[node.id])
+            return;
+        this.#loadingState.update(state => ({ ...state, [node.id]: true }));
+        try {
+            const lazyItem = node.treeItem;
+            const children = await Promise.resolve(option.onExpandChildren(lazyItem));
+            this.#lazyChildren.update(state => ({ ...state, [node.id]: children }));
+            // Do not write `children` onto lazy items; that field belongs to static items only.
+            lazyItem.hasChildren = children.length > 0;
+        }
+        finally {
+            this.#loadingState.update(state => ({ ...state, [node.id]: false }));
+        }
+    }
+    #findNode(id) {
+        return this.#flattenAll(this.rootNodes()).find(node => node.id === id);
+    }
+    #flattenAll(nodes) {
+        const result = [];
+        const walk = (current) => {
+            for (const node of current) {
+                result.push(node);
+                walk(node.children);
+            }
+        };
+        walk(nodes);
+        return result;
+    }
+    #selectedItemsFromIds(selectedIds) {
+        return this.#flattenAll(this.rootNodes())
+            .filter(node => selectedIds.has(node.id))
+            .map(node => node.data);
+    }
+    #idsFromSelectedItems(selectedItems) {
+        const selectedRefs = new Set(selectedItems);
+        const selectedDataIds = new Set(selectedItems.map(item => this.#dataId(item)).filter((id) => !!id));
+        const result = new Set();
+        for (const node of this.#flattenAll(this.rootNodes())) {
+            const dataId = this.#dataId(node.data);
+            if (selectedRefs.has(node.data) || (dataId && selectedDataIds.has(dataId))) {
+                result.add(node.id);
+            }
+        }
+        return result;
+    }
+    #dataId(item) {
+        const record = item;
+        const value = record?.['id'] ?? record?.['code'] ?? record?.['value'];
+        return value != null && value !== '' ? String(value) : undefined;
+    }
+    #nodeMatches(node, filterText) {
+        return normalizeText(node.label).includes(filterText);
+    }
+    #subtreeMatches(node, filterText) {
+        if (this.#nodeMatches(node, filterText))
+            return true;
+        return node.children.some(child => this.#subtreeMatches(child, filterText));
+    }
+    #resolveBoolean(resolver, item) {
+        return typeof resolver === 'function' ? resolver(item) : !!resolver;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdTree, isStandalone: true, selector: "sd-tree", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsInput: { classPropertyName: "selectedItemsInput", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selector: { classPropertyName: "selector", publicName: "selector", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemsChange: "selectedItemsChange", selectChange: "selectChange", expandChange: "expandChange", collapseChange: "collapseChange" }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: (SdTreeItemDefDirective), descendants: true, isSignal: true }], ngImport: i0, template: "@let _templateRef = resolvedItemTemplate();\n@let _selectionVisible = selectionVisible();\n@let _selectedCount = selectedCount();\n@let _selectionMessage = selectionMessage();\n@let _selectionActions = selectionActionViews();\n\n<div class=\"sd-tree\" role=\"tree\" [style.--sd-tree-indent-size]=\"indentSize() + 'px'\">\n  @for (node of visibleViewNodes(); track node.id) {\n    <div\n      class=\"sd-tree__row\"\n      role=\"treeitem\"\n      [class.sd-tree__row--selected]=\"node.selected\"\n      [style.--sd-tree-level]=\"node.level\"\n      [attr.aria-expanded]=\"node.ariaExpanded\"\n      [attr.aria-selected]=\"_selectionVisible ? node.selected : null\"\n      [attr.data-autoid]=\"node.autoIds.row\">\n      <div class=\"sd-tree__main\">\n        <button\n          type=\"button\"\n          class=\"sd-tree__toggle\"\n          [class.sd-tree__toggle--placeholder]=\"!node.hasChildren\"\n          [disabled]=\"node.toggleDisabled\"\n          [attr.aria-label]=\"node.toggleLabel\"\n          [attr.data-autoid]=\"node.autoIds.toggle\"\n          (click)=\"toggle(node, $event)\">\n          @if (node.isLoading) {\n            <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\" />\n          } @else if (node.hasChildren) {\n            <mat-icon>{{ node.isExpanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          }\n        </button>\n\n        @if (_selectionVisible) {\n          <mat-checkbox\n            class=\"sd-tree__checkbox\"\n            [checked]=\"node.selected\"\n            [disabled]=\"node.selectionDisabled\"\n            [attr.data-autoid]=\"node.autoIds.checkbox\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleSelection(node)\" />\n        }\n\n        @if (node.icon) {\n          <mat-icon class=\"sd-tree__item-icon\" color=\"primary\" [attr.data-autoid]=\"node.autoIds.icon\">{{ node.icon }}</mat-icon>\n        }\n\n        <div class=\"sd-tree__content\" [class.sd-tree__content--custom]=\"_templateRef\" [attr.data-autoid]=\"node.autoIds.label\">\n          @if (_templateRef) {\n            <ng-container *ngTemplateOutlet=\"_templateRef; context: node.context\" />\n          } @else {\n            <span class=\"sd-tree__label\">{{ node.label }}</span>\n          }\n        </div>\n      </div>\n\n      @if (node.commands.length) {\n        <button\n          type=\"button\"\n          class=\"sd-tree__command-trigger\"\n          mat-icon-button\n          [matMenuTriggerFor]=\"commandMenu\"\n          [attr.data-autoid]=\"node.autoIds.command\"\n          (click)=\"$event.stopPropagation()\">\n          <mat-icon class=\"c-icon\" fontSet=\"material-icons-outlined\">more_vert</mat-icon>\n        </button>\n        <mat-menu #commandMenu=\"matMenu\" class=\"sd-tree__command-menu\">\n          @for (command of node.commands; track command.key) {\n            <button\n              type=\"button\"\n              class=\"sd-tree__command-menu-item\"\n              mat-menu-item\n              [disabled]=\"command.disabled\"\n              [attr.data-autoid]=\"command.autoId\"\n              (click)=\"command.command.click(node.data)\">\n              <span class=\"sd-tree__command-menu-content\">\n                <mat-icon\n                  class=\"c-icon sd-tree__command-menu-icon\"\n                  [class.sd-tree__command-menu-icon--default]=\"command.defaultColor\"\n                  [color]=\"command.color\"\n                  [fontSet]=\"command.fontSet\">\n                  {{ command.icon }}\n                </mat-icon>\n                <span class=\"sd-tree__command-title\">{{ command.title }}</span>\n              </span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n\n<sd-quick-action [opened]=\"_selectedCount > 0\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length sd-tree__qa-count\">{{ _selectedCount }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ _selectionMessage }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8 sd-tree__qa-actions\" sdAction>\n    @for (actionView of _selectionActions; track $index) {\n      <sd-button\n        [autoId]=\"actionView.autoId\"\n        class=\"ml-4\"\n        [tooltip]=\"actionView.action.tooltip\"\n        [prefixIcon]=\"actionView.action.icon\"\n        [color]=\"actionView.action.color || 'primary'\"\n        [type]=\"actionView.action.type || 'light'\"\n        [fontSet]=\"actionView.action.fontSet\"\n        [title]=\"actionView.action.title\"\n        (click)=\"onSelectionAction(actionView.action)\" />\n    }\n    <sd-button\n      [autoId]=\"clearSelectionAutoId()\"\n      class=\"ml-4\"\n      prefixIcon=\"close\"\n      color=\"secondary\"\n      type=\"outline\"\n      width=\"35px\"\n      (click)=\"clearSelection()\" />\n  </div>\n</sd-quick-action>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{--sd-tree-row-height: 44px;--sd-tree-control-size: 28px;--sd-tree-indent-size: 20px;--sd-tree-selected-bg: color-mix(in srgb, var(--sd-primary, #2a66f4) 12%, #ffffff);--sd-tree-hover-bg: rgba(15, 23, 42, .04);--sd-tree-text: #102047;--sd-tree-muted: #5f6f89;display:block}.sd-tree{display:flex;flex-direction:column;width:100%}.sd-tree__row{position:relative;display:flex;align-items:center;min-height:var(--sd-tree-row-height);box-sizing:border-box;padding:6px 4px 6px calc(4px + var(--sd-tree-level) * var(--sd-tree-indent-size));color:var(--sd-tree-text);border-radius:0}.sd-tree__row:hover{background:var(--sd-tree-hover-bg)}.sd-tree__row--selected{background:var(--sd-tree-selected-bg)}.sd-tree__main{display:flex;align-items:center;min-width:0;flex:1 1 auto}.sd-tree__toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--sd-tree-control-size);width:var(--sd-tree-control-size);height:var(--sd-tree-control-size);padding:0;color:var(--sd-tree-muted);background:transparent;border:0;border-radius:4px;cursor:pointer}.sd-tree__toggle:disabled{cursor:default}.sd-tree__toggle--placeholder{visibility:hidden}.sd-tree__toggle mat-icon{width:20px;height:20px;font-size:20px;line-height:20px}.sd-tree__checkbox{flex:0 0 auto;height:var(--sd-tree-control-size);margin:0 4px 0 0;transform:scale(.85);transform-origin:center;--mdc-checkbox-selected-checkmark-color: #ffffff;--mdc-checkbox-selected-focus-icon-color: var(--sd-primary, #2a66f4);--mdc-checkbox-selected-hover-icon-color: var(--sd-primary, #2a66f4);--mdc-checkbox-selected-icon-color: var(--sd-primary, #2a66f4);--mdc-checkbox-selected-pressed-icon-color: var(--sd-primary, #2a66f4)}.sd-tree__item-icon{flex:0 0 auto;width:20px;height:20px;margin:0 8px 0 0;font-size:20px;line-height:20px}.sd-tree__content{display:-webkit-box;min-width:0;min-height:var(--sd-tree-control-size);padding:4px 0;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:20px}.sd-tree__content--custom{display:block;max-height:none;-webkit-line-clamp:unset}.sd-tree__label{font-size:14px;font-weight:500}.sd-tree__command-trigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:center;width:24px;height:24px;padding:0;margin-left:8px;line-height:24px;opacity:0;transition:opacity .12s ease}.sd-tree__row:hover .sd-tree__command-trigger,.sd-tree__command-trigger[aria-expanded=true]{opacity:1}.sd-tree__command-trigger mat-icon.c-icon,.sd-tree__command-menu-icon{width:16px;height:16px;font-size:16px;line-height:16px}.sd-tree__command-trigger mat-icon.c-icon,.sd-tree__command-menu-icon--default{color:var(--sd-black400)!important}::ng-deep .mat-mdc-menu-panel.sd-tree__command-menu .mat-mdc-menu-item.sd-tree__command-menu-item,::ng-deep .mat-menu-panel.sd-tree__command-menu .mat-menu-item.sd-tree__command-menu-item{min-height:40px;padding:0 12px}::ng-deep .mat-mdc-menu-panel.sd-tree__command-menu .mat-mdc-menu-item.sd-tree__command-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-panel.sd-tree__command-menu .mat-mdc-menu-item.sd-tree__command-menu-item .mdc-list-item__primary-text,::ng-deep .mat-menu-panel.sd-tree__command-menu .mat-menu-item.sd-tree__command-menu-item{width:100%;min-width:0}.sd-tree__command-menu-content{display:flex;align-items:center;gap:6px;width:100%;min-width:0;line-height:20px}.sd-tree__command-menu-icon{display:flex;align-items:center;justify-content:center;flex:0 0 16px;margin:0!important;padding:0;text-align:center;overflow:hidden}.sd-tree__command-title{display:block;min-width:0;line-height:20px}.c-bg-length{display:flex;flex-direction:column;align-items:flex-start;position:static;width:auto;min-width:48px;height:48px;padding:12px 8px;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:500;line-height:24px;text-align:center}.c-message{position:static;min-width:200px;height:20px;margin:0 0 0 8px;color:#000;font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.sd-tree__qa-actions{align-items:center;gap:4px;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-tree', standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatProgressSpinnerModule,
+                        MatTooltipModule,
+                        SdButton,
+                        SdQuickAction,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-autoid]': 'autoId()',
+                    }, template: "@let _templateRef = resolvedItemTemplate();\n@let _selectionVisible = selectionVisible();\n@let _selectedCount = selectedCount();\n@let _selectionMessage = selectionMessage();\n@let _selectionActions = selectionActionViews();\n\n<div class=\"sd-tree\" role=\"tree\" [style.--sd-tree-indent-size]=\"indentSize() + 'px'\">\n  @for (node of visibleViewNodes(); track node.id) {\n    <div\n      class=\"sd-tree__row\"\n      role=\"treeitem\"\n      [class.sd-tree__row--selected]=\"node.selected\"\n      [style.--sd-tree-level]=\"node.level\"\n      [attr.aria-expanded]=\"node.ariaExpanded\"\n      [attr.aria-selected]=\"_selectionVisible ? node.selected : null\"\n      [attr.data-autoid]=\"node.autoIds.row\">\n      <div class=\"sd-tree__main\">\n        <button\n          type=\"button\"\n          class=\"sd-tree__toggle\"\n          [class.sd-tree__toggle--placeholder]=\"!node.hasChildren\"\n          [disabled]=\"node.toggleDisabled\"\n          [attr.aria-label]=\"node.toggleLabel\"\n          [attr.data-autoid]=\"node.autoIds.toggle\"\n          (click)=\"toggle(node, $event)\">\n          @if (node.isLoading) {\n            <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\" />\n          } @else if (node.hasChildren) {\n            <mat-icon>{{ node.isExpanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          }\n        </button>\n\n        @if (_selectionVisible) {\n          <mat-checkbox\n            class=\"sd-tree__checkbox\"\n            [checked]=\"node.selected\"\n            [disabled]=\"node.selectionDisabled\"\n            [attr.data-autoid]=\"node.autoIds.checkbox\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleSelection(node)\" />\n        }\n\n        @if (node.icon) {\n          <mat-icon class=\"sd-tree__item-icon\" color=\"primary\" [attr.data-autoid]=\"node.autoIds.icon\">{{ node.icon }}</mat-icon>\n        }\n\n        <div class=\"sd-tree__content\" [class.sd-tree__content--custom]=\"_templateRef\" [attr.data-autoid]=\"node.autoIds.label\">\n          @if (_templateRef) {\n            <ng-container *ngTemplateOutlet=\"_templateRef; context: node.context\" />\n          } @else {\n            <span class=\"sd-tree__label\">{{ node.label }}</span>\n          }\n        </div>\n      </div>\n\n      @if (node.commands.length) {\n        <button\n          type=\"button\"\n          class=\"sd-tree__command-trigger\"\n          mat-icon-button\n          [matMenuTriggerFor]=\"commandMenu\"\n          [attr.data-autoid]=\"node.autoIds.command\"\n          (click)=\"$event.stopPropagation()\">\n          <mat-icon class=\"c-icon\" fontSet=\"material-icons-outlined\">more_vert</mat-icon>\n        </button>\n        <mat-menu #commandMenu=\"matMenu\" class=\"sd-tree__command-menu\">\n          @for (command of node.commands; track command.key) {\n            <button\n              type=\"button\"\n              class=\"sd-tree__command-menu-item\"\n              mat-menu-item\n              [disabled]=\"command.disabled\"\n              [attr.data-autoid]=\"command.autoId\"\n              (click)=\"command.command.click(node.data)\">\n              <span class=\"sd-tree__command-menu-content\">\n                <mat-icon\n                  class=\"c-icon sd-tree__command-menu-icon\"\n                  [class.sd-tree__command-menu-icon--default]=\"command.defaultColor\"\n                  [color]=\"command.color\"\n                  [fontSet]=\"command.fontSet\">\n                  {{ command.icon }}\n                </mat-icon>\n                <span class=\"sd-tree__command-title\">{{ command.title }}</span>\n              </span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n\n<sd-quick-action [opened]=\"_selectedCount > 0\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length sd-tree__qa-count\">{{ _selectedCount }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ _selectionMessage }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8 sd-tree__qa-actions\" sdAction>\n    @for (actionView of _selectionActions; track $index) {\n      <sd-button\n        [autoId]=\"actionView.autoId\"\n        class=\"ml-4\"\n        [tooltip]=\"actionView.action.tooltip\"\n        [prefixIcon]=\"actionView.action.icon\"\n        [color]=\"actionView.action.color || 'primary'\"\n        [type]=\"actionView.action.type || 'light'\"\n        [fontSet]=\"actionView.action.fontSet\"\n        [title]=\"actionView.action.title\"\n        (click)=\"onSelectionAction(actionView.action)\" />\n    }\n    <sd-button\n      [autoId]=\"clearSelectionAutoId()\"\n      class=\"ml-4\"\n      prefixIcon=\"close\"\n      color=\"secondary\"\n      type=\"outline\"\n      width=\"35px\"\n      (click)=\"clearSelection()\" />\n  </div>\n</sd-quick-action>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{--sd-tree-row-height: 44px;--sd-tree-control-size: 28px;--sd-tree-indent-size: 20px;--sd-tree-selected-bg: color-mix(in srgb, var(--sd-primary, #2a66f4) 12%, #ffffff);--sd-tree-hover-bg: rgba(15, 23, 42, .04);--sd-tree-text: #102047;--sd-tree-muted: #5f6f89;display:block}.sd-tree{display:flex;flex-direction:column;width:100%}.sd-tree__row{position:relative;display:flex;align-items:center;min-height:var(--sd-tree-row-height);box-sizing:border-box;padding:6px 4px 6px calc(4px + var(--sd-tree-level) * var(--sd-tree-indent-size));color:var(--sd-tree-text);border-radius:0}.sd-tree__row:hover{background:var(--sd-tree-hover-bg)}.sd-tree__row--selected{background:var(--sd-tree-selected-bg)}.sd-tree__main{display:flex;align-items:center;min-width:0;flex:1 1 auto}.sd-tree__toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--sd-tree-control-size);width:var(--sd-tree-control-size);height:var(--sd-tree-control-size);padding:0;color:var(--sd-tree-muted);background:transparent;border:0;border-radius:4px;cursor:pointer}.sd-tree__toggle:disabled{cursor:default}.sd-tree__toggle--placeholder{visibility:hidden}.sd-tree__toggle mat-icon{width:20px;height:20px;font-size:20px;line-height:20px}.sd-tree__checkbox{flex:0 0 auto;height:var(--sd-tree-control-size);margin:0 4px 0 0;transform:scale(.85);transform-origin:center;--mdc-checkbox-selected-checkmark-color: #ffffff;--mdc-checkbox-selected-focus-icon-color: var(--sd-primary, #2a66f4);--mdc-checkbox-selected-hover-icon-color: var(--sd-primary, #2a66f4);--mdc-checkbox-selected-icon-color: var(--sd-primary, #2a66f4);--mdc-checkbox-selected-pressed-icon-color: var(--sd-primary, #2a66f4)}.sd-tree__item-icon{flex:0 0 auto;width:20px;height:20px;margin:0 8px 0 0;font-size:20px;line-height:20px}.sd-tree__content{display:-webkit-box;min-width:0;min-height:var(--sd-tree-control-size);padding:4px 0;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:20px}.sd-tree__content--custom{display:block;max-height:none;-webkit-line-clamp:unset}.sd-tree__label{font-size:14px;font-weight:500}.sd-tree__command-trigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:center;width:24px;height:24px;padding:0;margin-left:8px;line-height:24px;opacity:0;transition:opacity .12s ease}.sd-tree__row:hover .sd-tree__command-trigger,.sd-tree__command-trigger[aria-expanded=true]{opacity:1}.sd-tree__command-trigger mat-icon.c-icon,.sd-tree__command-menu-icon{width:16px;height:16px;font-size:16px;line-height:16px}.sd-tree__command-trigger mat-icon.c-icon,.sd-tree__command-menu-icon--default{color:var(--sd-black400)!important}::ng-deep .mat-mdc-menu-panel.sd-tree__command-menu .mat-mdc-menu-item.sd-tree__command-menu-item,::ng-deep .mat-menu-panel.sd-tree__command-menu .mat-menu-item.sd-tree__command-menu-item{min-height:40px;padding:0 12px}::ng-deep .mat-mdc-menu-panel.sd-tree__command-menu .mat-mdc-menu-item.sd-tree__command-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-panel.sd-tree__command-menu .mat-mdc-menu-item.sd-tree__command-menu-item .mdc-list-item__primary-text,::ng-deep .mat-menu-panel.sd-tree__command-menu .mat-menu-item.sd-tree__command-menu-item{width:100%;min-width:0}.sd-tree__command-menu-content{display:flex;align-items:center;gap:6px;width:100%;min-width:0;line-height:20px}.sd-tree__command-menu-icon{display:flex;align-items:center;justify-content:center;flex:0 0 16px;margin:0!important;padding:0;text-align:center;overflow:hidden}.sd-tree__command-title{display:block;min-width:0;line-height:20px}.c-bg-length{display:flex;flex-direction:column;align-items:flex-start;position:static;width:auto;min-width:48px;height:48px;padding:12px 8px;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:500;line-height:24px;text-align:center}.c-message{position:static;min-width:200px;height:20px;margin:0 0 0 8px;color:#000;font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.sd-tree__qa-actions{align-items:center;gap:4px;margin-right:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], selectedItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedItemsChange: [{ type: i0.Output, args: ["selectedItemsChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], expandChange: [{ type: i0.Output, args: ["expandChange"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdTreeItemDefDirective), { isSignal: true }] }] } });
+function normalizeText(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[\u0111\u0110]/g, match => (match === '\u0110' ? 'D' : 'd'))
+        .toLowerCase()
+        .trim();
+}
+function sanitizeId(value) {
+    return value.replace(/[^a-zA-Z0-9_-]/g, '-');
+}
+function isPromiseLike(value) {
+    return !!value && typeof value.then === 'function';
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdTree, SdTreeItemDefDirective };
+//# sourceMappingURL=sdcorejs-angular-components-tree.mjs.map