@sdcorejs/angular 20.1.6 → 20.2.0

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

@@ -6,6 +6,8 @@ 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 i6 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
 import * as i4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i5 from '@angular/material/progress-spinner';
@@ -13,7 +15,7 @@ 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';
-import { TranslatePipe } from '@sdcorejs/angular/i18n';
+import { I18nService, SdTranslatePipe } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
 class SdTreeItemDefDirective {
@@ -34,8 +36,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 const DEFAULT_STATIC_TREE = { loadType: 'static' };
 const EMPTY_TREE_ITEMS = [];
+/** Shared empty lookup — chế độ không cascade khỏi phải dựng Map mới mỗi lần recompute. */
+const EMPTY_DESCENDANT_COUNTS = new Map();
 class SdTree {
     #host = inject(ElementRef);
+    #i18n = inject(I18nService);
     autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
     option = input(undefined, ...(ngDevMode ? [{ debugName: "option" }] : []));
     /** Migration bridge. New usage should put the data source in `option.items`. */
@@ -87,6 +92,12 @@ class SdTree {
     #lazyLoadIds = new Map();
     normalizedFilterText = computed(() => normalizeText(this.#filterText()), ...(ngDevMode ? [{ debugName: "normalizedFilterText" }] : []));
     selectionVisible = computed(() => this.resolvedSelectable() && this.resolvedSelector()?.visible === true, ...(ngDevMode ? [{ debugName: "selectionVisible" }] : []));
+    /**
+     * why: `selector.single` giới hạn đúng một node, nên ô chọn phải là radio — checkbox là ký hiệu
+     * của "chọn nhiều" và người dùng chỉ phát hiện ra giới hạn sau khi tick node thứ hai và thấy node
+     * đầu tự bỏ chọn. `<sd-tree-select>` không multiple sẽ tự rơi vào nhánh này.
+     */
+    selectionSingle = computed(() => this.resolvedSelector()?.single === true, ...(ngDevMode ? [{ debugName: "selectionSingle" }] : []));
     selectedIdSet = computed(() => {
         const selectedItems = this.option()?.selectedItems ?? this.selectedItemsInput();
         return selectedItems ? this.#idsFromSelectedItems(selectedItems) : this.#selectedIds();
@@ -117,7 +128,9 @@ class SdTree {
         const message = this.resolvedSelector()?.message;
         if (typeof message === 'function')
             return message(items);
-        return message || `Đã chọn ${items.length} mục`;
+        // why: số lượng phải là tham số nội suy, không nối chuỗi — mỗi ngôn ngữ đặt con số ở vị trí khác
+        // nhau ('Đã chọn 3 mục' / '3 item(s) selected' / '已选择 3 项').
+        return message || this.#i18n.t('core.component.tree.selected-count', { count: items.length });
     }, ...(ngDevMode ? [{ debugName: "selectionMessage" }] : []));
     visibleSelectionActions = computed(() => {
         const items = this.selectedItems();
@@ -136,6 +149,12 @@ class SdTree {
         const base = this.autoId();
         return base ? `${base}-clear-selection` : null;
     }, ...(ngDevMode ? [{ debugName: "clearSelectionAutoId" }] : []));
+    /**
+     * why: chọn node mà selector KHÔNG khai action nào thì thanh quick-action chỉ còn bộ đếm + nút ✕.
+     * Nó nổi đè lên cây để nói lại đúng thứ checkbox đã nói. Đó cũng là lý do `<sd-tree-select>` —
+     * vốn chỉ chọn rồi bấm "Áp dụng" ở footer modal, không có action nào — không còn thấy thanh này.
+     */
+    selectionQuickActionOpened = computed(() => this.selectedCount() > 0 && this.selectionActionViews().length > 0, ...(ngDevMode ? [{ debugName: "selectionQuickActionOpened" }] : []));
     /**
      * 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.
@@ -148,7 +167,11 @@ class SdTree {
         const nodes = this.visibleNodes();
         const requestedActiveId = this.activeNodeId();
         const activeId = nodes.some(node => node.id === requestedActiveId) ? requestedActiveId : nodes[0]?.id;
-        return nodes.map(node => this.#toViewNode(node, selectedIds, selectedItems, selector, commands, node.id === activeId));
+        // why: đếm 1 lượt bottom-up cho CẢ cây rồi tra theo id. Bản cũ gọi `#flattenAll(node.children)`
+        // cho TỪNG node hiển thị ngay trong map này → O(n²) kèm một mảng mới mỗi node mỗi lần
+        // recompute. Chỉ cascade 'descendants' mới cần số liệu này nên các chế độ khác bỏ qua hẳn.
+        const selectedDescendants = selector?.cascade === 'descendants' ? this.#countSelectedDescendants(this.rootNodes(), selectedIds) : EMPTY_DESCENDANT_COUNTS;
+        return nodes.map(node => this.#toViewNode(node, selectedIds, selectedItems, selector, commands, node.id === activeId, selectedDescendants));
     }, ...(ngDevMode ? [{ debugName: "visibleViewNodes" }] : []));
     trackByNode = (_index, node) => node.id;
     constructor() {
@@ -273,7 +296,11 @@ class SdTree {
         void this.toggle(node);
     }
     errorMessage(error) {
-        return error instanceof Error ? error.message : String(error || 'Unable to load tree data');
+        if (error instanceof Error)
+            return error.message;
+        // why: thông điệp mặc định khi lỗi không mang message — chuỗi này hiện ra cho người dùng cuối
+        // nên phải theo ngôn ngữ đang chọn, không cứng tiếng Anh.
+        return error ? String(error) : this.#i18n.t('core.component.tree.load-error');
     }
     onRowFocus(node) {
         this.activeNodeId.set(node.id);
@@ -407,7 +434,7 @@ class SdTree {
         this.#loadingState.set({});
         this.#lazyErrorState.set({});
     }
-    #toViewNode(node, selectedIds, selectedItems, selector, commands, active) {
+    #toViewNode(node, selectedIds, selectedItems, selector, commands, active, selectedDescendants) {
         const selected = selectedIds.has(node.id);
         const selectionDisabled = selector?.disabled ? selector.disabled(node.data, selectedItems) : false;
         const viewNode = {
@@ -415,9 +442,11 @@ class SdTree {
             icon: this.#iconOf(node),
             selected,
             selectionDisabled,
-            selectionIndeterminate: this.#isSelectionIndeterminate(node, selectedIds, selector),
+            selectionIndeterminate: this.#isSelectionIndeterminate(node, selectedIds, selector, selectedDescendants),
             toggleDisabled: !node.hasChildren || node.isLoading,
-            toggleLabel: node.loadError ? 'Retry loading tree item' : node.isExpanded ? 'Collapse tree item' : 'Expand tree item',
+            // why: nhãn nút gập/mở là tên khả truy cập cho screen reader — trước đây hardcode tiếng Anh
+            // trong một component mà template đã dùng key `core.component.tree.retry`, tức lẫn hai ngôn ngữ.
+            toggleLabel: this.#i18n.t(node.loadError ? 'core.component.tree.retry-item' : node.isExpanded ? 'core.component.tree.collapse' : 'core.component.tree.expand'),
             ariaExpanded: node.hasChildren ? node.isExpanded : null,
             autoIds: this.#nodeAutoIds(node),
             commands: this.#commandViews(node, commands),
@@ -479,10 +508,14 @@ class SdTree {
         const maxDepth = option.maxDepth;
         if (maxDepth !== undefined && level > maxDepth)
             return [];
+        // why: node NẰM ĐÚNG ở maxDepth không bao giờ có con (đệ quy dừng ở level + 1), nên phải kẹp
+        // `hasChildren` về false. Trước đây `hasChildren` vẫn đọc từ children THÔ → chevron bật, bấm
+        // vào expand ra rỗng mà vẫn bắn `expandChange` (và lazy vẫn gọi `onExpandChildren`).
+        const atMaxDepth = maxDepth !== undefined && level >= maxDepth;
+        const tree = this;
         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 hasChildren = !atMaxDepth && (rawChildren.length > 0 || this.#hasLazyChildren(item));
             const node = {
                 treeItem: item,
                 data: item.data,
@@ -492,9 +525,20 @@ class SdTree {
                 parent,
                 children: [],
                 hasChildren,
-                isExpanded,
-                isLoading: this.#loadingState()[item.id] ?? false,
-                loadError: this.#lazyErrorState()[item.id],
+                // why: state UI (expand / loading / lazy error) được đọc THEO ID lúc truy cập chứ không
+                // đóng băng lúc build. Nhờ vậy `rootNodes` chỉ phụ thuộc cấu trúc (`#rootItems`,
+                // `#lazyChildren`, option) — mở một node không còn cấp phát lại TOÀN BỘ cây rồi kéo theo
+                // `visibleNodes` + `visibleViewNodes` map lại từ đầu. Consumer nào đọc các field này bên
+                // trong computed/template vẫn nhận đúng dependency signal, nên phản ứng không đổi.
+                get isExpanded() {
+                    return tree.#expandedState()[item.id] ?? item.expanded ?? tree.#defaultExpanded(level);
+                },
+                get isLoading() {
+                    return tree.#loadingState()[item.id] ?? false;
+                },
+                get loadError() {
+                    return tree.#lazyErrorState()[item.id];
+                },
             };
             node.children = this.#buildNodes(rawChildren, level + 1, node);
             return node;
@@ -589,10 +633,28 @@ class SdTree {
             current = current.parent;
         }
     }
-    #isSelectionIndeterminate(node, selectedIds, selector) {
+    /**
+     * `node.id` → số node ĐƯỢC CHỌN nằm trong subtree của nó (không tính chính nó).
+     * Một lượt duyệt bottom-up cho cả cây, thay cho việc flatten lại subtree của từng node.
+     */
+    #countSelectedDescendants(nodes, selectedIds) {
+        const counts = new Map();
+        const walk = (node) => {
+            let total = 0;
+            for (const child of node.children) {
+                total += walk(child) + (selectedIds.has(child.id) ? 1 : 0);
+            }
+            counts.set(node.id, total);
+            return total;
+        };
+        for (const node of nodes)
+            walk(node);
+        return counts;
+    }
+    #isSelectionIndeterminate(node, selectedIds, selector, selectedDescendants) {
         if (selector?.cascade !== 'descendants' || selectedIds.has(node.id))
             return false;
-        return this.#flattenAll(node.children).some(child => selectedIds.has(child.id));
+        return (selectedDescendants.get(node.id) ?? 0) > 0;
     }
     #focusVisibleNode(index) {
         if (index < 0)
@@ -652,7 +714,7 @@ class SdTree {
         return typeof resolver === 'function' ? resolver(item) : !!resolver;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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", loadError: "loadError" }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: (SdTreeItemDefDirective), descendants: true, isSignal: true }], ngImport: i0, template: "@let _resolvedItemTemplate = resolvedItemTemplate();\n@let _selectionVisible = selectionVisible();\n@let _selectedCount = selectedCount();\n@let _selectionMessage = selectionMessage();\n@let _selectionActionViews = selectionActionViews();\n@let _rootError = rootError();\n\n@if (rootLoading()) {\n  <div class=\"sd-tree__root-loading\" role=\"status\" aria-live=\"polite\">\n    <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" />\n  </div>\n} @else if (_rootError) {\n  <div class=\"sd-tree__root-error\" role=\"alert\">\n    <span>{{ errorMessage(_rootError) }}</span>\n    <button type=\"button\" data-tree-retry (click)=\"retry()\">{{ 'core.component.tree.retry' | translate }}</button>\n  </div>\n} @else {\n  <div class=\"sd-tree\" role=\"tree\" [attr.aria-busy]=\"rootLoading()\" [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        [tabIndex]=\"node.tabIndex\"\n        [class.sd-tree__row--selected]=\"node.selected\"\n        [style.--sd-tree-level]=\"node.level\"\n        [attr.aria-level]=\"node.level + 1\"\n        [attr.aria-expanded]=\"node.ariaExpanded\"\n        [attr.aria-selected]=\"_selectionVisible ? node.selected : null\"\n        [attr.aria-checked]=\"_selectionVisible ? (node.selectionIndeterminate ? 'mixed' : node.selected) : null\"\n        [attr.data-autoid]=\"node.autoIds.row\"\n        (focus)=\"onRowFocus(node)\"\n        (keydown)=\"onRowKeydown(node, $event)\">\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            [attr.data-tree-node-retry]=\"node.loadError ? node.id : null\"\n            (click)=\"toggle(node, $event)\">\n            @if (node.isLoading) {\n              <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\" />\n            } @else if (node.loadError) {\n              <sd-icon name=\"refresh\"></sd-icon>\n            } @else if (node.hasChildren) {\n              <sd-icon [name]=\"node.isExpanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n            }\n          </button>\n\n          @if (_selectionVisible) {\n            <mat-checkbox\n              class=\"sd-tree__checkbox\"\n              [checked]=\"node.selected\"\n              [indeterminate]=\"node.selectionIndeterminate\"\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            <sd-icon class=\"sd-tree__item-icon\" color=\"primary\" [attr.data-autoid]=\"node.autoIds.icon\" [name]=\"node.icon\"></sd-icon>\n          }\n\n          <div class=\"sd-tree__content\" [class.sd-tree__content--custom]=\"_resolvedItemTemplate\" [attr.data-autoid]=\"node.autoIds.label\">\n            @if (_resolvedItemTemplate) {\n              <ng-container *ngTemplateOutlet=\"_resolvedItemTemplate; 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            <sd-icon class=\"c-icon\" name=\"more_vert\"></sd-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                  <sd-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                    [name]=\"command.icon\"></sd-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\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 _selectionActionViews; 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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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, #005cbb) 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:focus-visible{z-index:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.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 sd-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, #005cbb);--mdc-checkbox-selected-hover-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-pressed-icon-color: var(--sd-primary, #005cbb)}.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 sd-icon.c-icon,.sd-tree__command-menu-icon{width:16px;height:16px;font-size:16px;line-height:16px}.sd-tree__command-trigger sd-icon.c-icon,.sd-tree__command-menu-icon--default{color:var(--sd-text-secondary)!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}.sd-tree__root-loading,.sd-tree__root-error{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:16px}.sd-tree__root-error{flex-direction:column;color:var(--sd-error, #d92d20)}.sd-tree__root-error button{min-height:36px;padding:6px 12px;border:1px solid currentcolor;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { 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: MatMenuModule }, { kind: "component", type: i4.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: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.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: i5.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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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", loadError: "loadError" }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: (SdTreeItemDefDirective), descendants: true, isSignal: true }], ngImport: i0, template: "@let _resolvedItemTemplate = resolvedItemTemplate();\n@let _selectionVisible = selectionVisible();\n@let _selectionSingle = selectionSingle();\n@let _selectionMessage = selectionMessage();\n@let _selectionActionViews = selectionActionViews();\n@let _selectionQuickActionOpened = selectionQuickActionOpened();\n@let _rootError = rootError();\n\n@if (rootLoading()) {\n  <div class=\"sd-tree__root-loading\" role=\"status\" aria-live=\"polite\">\n    <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" />\n  </div>\n} @else if (_rootError) {\n  <div class=\"sd-tree__root-error\" role=\"alert\">\n    <span>{{ errorMessage(_rootError) }}</span>\n    <button type=\"button\" data-tree-retry (click)=\"retry()\">{{ 'core.component.tree.retry' | sdTranslate }}</button>\n  </div>\n} @else {\n  <div class=\"sd-tree\" role=\"tree\" [attr.aria-busy]=\"rootLoading()\" [style.--sd-tree-indent-size]=\"indentSize() + 'px'\">\n    @for (node of visibleViewNodes(); track node.id) {\n      <!-- why: `[tabIndex]` l\u00E0 property DOM (camelCase) \u2014 n\u00F3 set \u0111\u00FAng gi\u00E1 tr\u1ECB nh\u01B0ng KH\u00D4NG sinh\n           attribute `tabindex` trong markup, n\u00EAn m\u1ECDi th\u1EE9 \u0111\u1ECDc markup (lint a11y, snapshot test,\n           devtools inspect) \u0111\u1EC1u th\u1EA5y row l\u00E0 kh\u00F4ng focusable. \u0110\u1ED5i sang `[attr.tabindex]`. -->\n      <div\n        class=\"sd-tree__row\"\n        role=\"treeitem\"\n        [attr.tabindex]=\"node.tabIndex\"\n        [class.sd-tree__row--selected]=\"node.selected\"\n        [style.--sd-tree-level]=\"node.level\"\n        [attr.aria-level]=\"node.level + 1\"\n        [attr.aria-expanded]=\"node.ariaExpanded\"\n        [attr.aria-selected]=\"_selectionVisible ? node.selected : null\"\n        [attr.aria-checked]=\"_selectionVisible ? (node.selectionIndeterminate ? 'mixed' : node.selected) : null\"\n        [attr.data-autoid]=\"node.autoIds.row\"\n        (focus)=\"onRowFocus(node)\"\n        (keydown)=\"onRowKeydown(node, $event)\">\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            [attr.data-tree-node-retry]=\"node.loadError ? node.id : null\"\n            (click)=\"toggle(node, $event)\">\n            @if (node.isLoading) {\n              <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\" />\n            } @else if (node.loadError) {\n              <sd-icon name=\"refresh\"></sd-icon>\n            } @else if (node.hasChildren) {\n              <sd-icon [name]=\"node.isExpanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n            }\n          </button>\n\n          <!-- why: `selector.single` cho ph\u00E9p \u0111\u00FAng M\u1ED8T node, m\u00E0 checkbox l\u1EA1i l\u00E0 k\u00FD hi\u1EC7u c\u1EE7a\n               \"ch\u1ECDn nhi\u1EC1u\" \u2014 ng\u01B0\u1EDDi d\u00F9ng tick node th\u1EE9 hai r\u1ED3i m\u1EDBi ph\u00E1t hi\u1EC7n node \u0111\u1EA7u t\u1EF1 b\u1ECF. Radio\n               n\u00F3i tr\u01B0\u1EDBc \u0111i\u1EC1u \u0111\u00F3. Kh\u00F4ng gom v\u00E0o <mat-radio-group>: group chi\u1EBFm Arrow Up/Down cho\n               vi\u1EC7c chuy\u1EC3n l\u1EF1a ch\u1ECDn, trong khi h\u00E0ng c\u00E2y \u0111\u00E3 d\u00F9ng \u0111\u00FAng hai ph\u00EDm \u0111\u00F3 \u0111\u1EC3 \u0111i\u1EC1u h\u01B0\u1EDBng. -->\n          @if (_selectionVisible) {\n            @if (_selectionSingle) {\n              <mat-radio-button\n                class=\"sd-tree__radio\"\n                [checked]=\"node.selected\"\n                [disabled]=\"node.selectionDisabled\"\n                [attr.data-autoid]=\"node.autoIds.checkbox\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleSelection(node)\" />\n            } @else {\n              <mat-checkbox\n                class=\"sd-tree__checkbox\"\n                [checked]=\"node.selected\"\n                [indeterminate]=\"node.selectionIndeterminate\"\n                [disabled]=\"node.selectionDisabled\"\n                [attr.data-autoid]=\"node.autoIds.checkbox\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleSelection(node)\" />\n            }\n          }\n\n          @if (node.icon) {\n            <sd-icon class=\"sd-tree__item-icon\" color=\"primary\" [attr.data-autoid]=\"node.autoIds.icon\" [name]=\"node.icon\"></sd-icon>\n          }\n\n          <div class=\"sd-tree__content\" [class.sd-tree__content--custom]=\"_resolvedItemTemplate\" [attr.data-autoid]=\"node.autoIds.label\">\n            @if (_resolvedItemTemplate) {\n              <ng-container *ngTemplateOutlet=\"_resolvedItemTemplate; 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            <sd-icon class=\"c-icon\" name=\"more_vert\"></sd-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                  <sd-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                    [name]=\"command.icon\"></sd-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\n<sd-quick-action [opened]=\"_selectionQuickActionOpened\">\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 _selectionActionViews; 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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}:host{--sd-tree-row-height: 44px;--sd-tree-control-size: 28px;--sd-tree-checkbox-size: 16px;--sd-tree-indent-size: 20px;--sd-tree-selected-bg: color-mix(in srgb, var(--sd-primary, #005cbb) 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:flex-start;min-height:var(--sd-tree-row-height);box-sizing:border-box;padding:8px 4px 8px 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:focus-visible{z-index:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.sd-tree__row--selected{background:var(--sd-tree-selected-bg)}.sd-tree__main{display:flex;align-items:flex-start;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 sd-icon{width:20px;height:20px;font-size:20px;line-height:20px}.sd-tree__checkbox{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);margin:0 4px 0 0;--mdc-checkbox-state-layer-size: var(--sd-tree-control-size);--mdc-checkbox-selected-checkmark-color: #ffffff;--mdc-checkbox-selected-focus-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-hover-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-pressed-icon-color: var(--sd-primary, #005cbb)}.sd-tree__checkbox ::ng-deep .mdc-checkbox{flex:0 0 var(--sd-tree-checkbox-size);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size);padding:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2)}.sd-tree__checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{top:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);left:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size)}.sd-tree__radio{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);margin:0 4px 0 0;--mdc-radio-state-layer-size: var(--sd-tree-control-size);--mdc-radio-selected-icon-color: var(--sd-primary, #005cbb) !important;--mdc-radio-selected-focus-icon-color: var(--sd-primary, #005cbb) !important;--mdc-radio-selected-hover-icon-color: var(--sd-primary, #005cbb) !important;--mdc-radio-selected-pressed-icon-color: var(--sd-primary, #005cbb) !important;--mat-radio-selected-icon-color: var(--sd-primary, #005cbb) !important;--mat-radio-checked-state-layer-color: var(--sd-primary, #005cbb) !important}.sd-tree__radio ::ng-deep .mdc-radio{flex:0 0 var(--sd-tree-checkbox-size);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size);padding:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2)}.sd-tree__radio ::ng-deep .mdc-radio .mdc-radio__background,.sd-tree__radio ::ng-deep .mdc-radio .mdc-radio__native-control{top:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);left:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size)}.sd-tree__radio ::ng-deep .mdc-form-field>label{display:none}.sd-tree__item-icon{flex:0 0 auto;width:20px;height:20px;min-height:var(--sd-tree-control-size);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:flex-start;width:24px;height:var(--sd-tree-control-size);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 sd-icon.c-icon,.sd-tree__command-menu-icon{width:16px;height:16px;font-size:16px;line-height:16px}.sd-tree__command-trigger sd-icon.c-icon,.sd-tree__command-menu-icon--default{color:var(--sd-text-secondary)!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;padding:0;text-align:center}.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:8px 0 0 8px}.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}.sd-tree__root-loading,.sd-tree__root-error{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:16px}.sd-tree__root-error{flex-direction:column;color:var(--sd-error, #d92d20)}.sd-tree__root-error button{min-height:36px;padding:6px 12px;border:1px solid currentcolor;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { 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: MatMenuModule }, { kind: "component", type: i4.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: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.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: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdTree, decorators: [{
             type: Component,
@@ -663,13 +725,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         MatCheckboxModule,
                         MatMenuModule,
                         MatProgressSpinnerModule,
+                        MatRadioModule,
                         MatTooltipModule,
                         SdButton,
                         SdQuickAction,
-                        TranslatePipe,
+                        SdTranslatePipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-autoid]': 'autoId()',
-                    }, template: "@let _resolvedItemTemplate = resolvedItemTemplate();\n@let _selectionVisible = selectionVisible();\n@let _selectedCount = selectedCount();\n@let _selectionMessage = selectionMessage();\n@let _selectionActionViews = selectionActionViews();\n@let _rootError = rootError();\n\n@if (rootLoading()) {\n  <div class=\"sd-tree__root-loading\" role=\"status\" aria-live=\"polite\">\n    <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" />\n  </div>\n} @else if (_rootError) {\n  <div class=\"sd-tree__root-error\" role=\"alert\">\n    <span>{{ errorMessage(_rootError) }}</span>\n    <button type=\"button\" data-tree-retry (click)=\"retry()\">{{ 'core.component.tree.retry' | translate }}</button>\n  </div>\n} @else {\n  <div class=\"sd-tree\" role=\"tree\" [attr.aria-busy]=\"rootLoading()\" [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        [tabIndex]=\"node.tabIndex\"\n        [class.sd-tree__row--selected]=\"node.selected\"\n        [style.--sd-tree-level]=\"node.level\"\n        [attr.aria-level]=\"node.level + 1\"\n        [attr.aria-expanded]=\"node.ariaExpanded\"\n        [attr.aria-selected]=\"_selectionVisible ? node.selected : null\"\n        [attr.aria-checked]=\"_selectionVisible ? (node.selectionIndeterminate ? 'mixed' : node.selected) : null\"\n        [attr.data-autoid]=\"node.autoIds.row\"\n        (focus)=\"onRowFocus(node)\"\n        (keydown)=\"onRowKeydown(node, $event)\">\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            [attr.data-tree-node-retry]=\"node.loadError ? node.id : null\"\n            (click)=\"toggle(node, $event)\">\n            @if (node.isLoading) {\n              <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\" />\n            } @else if (node.loadError) {\n              <sd-icon name=\"refresh\"></sd-icon>\n            } @else if (node.hasChildren) {\n              <sd-icon [name]=\"node.isExpanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n            }\n          </button>\n\n          @if (_selectionVisible) {\n            <mat-checkbox\n              class=\"sd-tree__checkbox\"\n              [checked]=\"node.selected\"\n              [indeterminate]=\"node.selectionIndeterminate\"\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            <sd-icon class=\"sd-tree__item-icon\" color=\"primary\" [attr.data-autoid]=\"node.autoIds.icon\" [name]=\"node.icon\"></sd-icon>\n          }\n\n          <div class=\"sd-tree__content\" [class.sd-tree__content--custom]=\"_resolvedItemTemplate\" [attr.data-autoid]=\"node.autoIds.label\">\n            @if (_resolvedItemTemplate) {\n              <ng-container *ngTemplateOutlet=\"_resolvedItemTemplate; 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            <sd-icon class=\"c-icon\" name=\"more_vert\"></sd-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                  <sd-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                    [name]=\"command.icon\"></sd-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\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 _selectionActionViews; 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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!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, #005cbb) 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:focus-visible{z-index:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.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 sd-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, #005cbb);--mdc-checkbox-selected-hover-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-pressed-icon-color: var(--sd-primary, #005cbb)}.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 sd-icon.c-icon,.sd-tree__command-menu-icon{width:16px;height:16px;font-size:16px;line-height:16px}.sd-tree__command-trigger sd-icon.c-icon,.sd-tree__command-menu-icon--default{color:var(--sd-text-secondary)!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}.sd-tree__root-loading,.sd-tree__root-error{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:16px}.sd-tree__root-error{flex-direction:column;color:var(--sd-error, #d92d20)}.sd-tree__root-error button{min-height:36px;padding:6px 12px;border:1px solid currentcolor;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}\n"] }]
+                    }, template: "@let _resolvedItemTemplate = resolvedItemTemplate();\n@let _selectionVisible = selectionVisible();\n@let _selectionSingle = selectionSingle();\n@let _selectionMessage = selectionMessage();\n@let _selectionActionViews = selectionActionViews();\n@let _selectionQuickActionOpened = selectionQuickActionOpened();\n@let _rootError = rootError();\n\n@if (rootLoading()) {\n  <div class=\"sd-tree__root-loading\" role=\"status\" aria-live=\"polite\">\n    <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\" />\n  </div>\n} @else if (_rootError) {\n  <div class=\"sd-tree__root-error\" role=\"alert\">\n    <span>{{ errorMessage(_rootError) }}</span>\n    <button type=\"button\" data-tree-retry (click)=\"retry()\">{{ 'core.component.tree.retry' | sdTranslate }}</button>\n  </div>\n} @else {\n  <div class=\"sd-tree\" role=\"tree\" [attr.aria-busy]=\"rootLoading()\" [style.--sd-tree-indent-size]=\"indentSize() + 'px'\">\n    @for (node of visibleViewNodes(); track node.id) {\n      <!-- why: `[tabIndex]` l\u00E0 property DOM (camelCase) \u2014 n\u00F3 set \u0111\u00FAng gi\u00E1 tr\u1ECB nh\u01B0ng KH\u00D4NG sinh\n           attribute `tabindex` trong markup, n\u00EAn m\u1ECDi th\u1EE9 \u0111\u1ECDc markup (lint a11y, snapshot test,\n           devtools inspect) \u0111\u1EC1u th\u1EA5y row l\u00E0 kh\u00F4ng focusable. \u0110\u1ED5i sang `[attr.tabindex]`. -->\n      <div\n        class=\"sd-tree__row\"\n        role=\"treeitem\"\n        [attr.tabindex]=\"node.tabIndex\"\n        [class.sd-tree__row--selected]=\"node.selected\"\n        [style.--sd-tree-level]=\"node.level\"\n        [attr.aria-level]=\"node.level + 1\"\n        [attr.aria-expanded]=\"node.ariaExpanded\"\n        [attr.aria-selected]=\"_selectionVisible ? node.selected : null\"\n        [attr.aria-checked]=\"_selectionVisible ? (node.selectionIndeterminate ? 'mixed' : node.selected) : null\"\n        [attr.data-autoid]=\"node.autoIds.row\"\n        (focus)=\"onRowFocus(node)\"\n        (keydown)=\"onRowKeydown(node, $event)\">\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            [attr.data-tree-node-retry]=\"node.loadError ? node.id : null\"\n            (click)=\"toggle(node, $event)\">\n            @if (node.isLoading) {\n              <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\" />\n            } @else if (node.loadError) {\n              <sd-icon name=\"refresh\"></sd-icon>\n            } @else if (node.hasChildren) {\n              <sd-icon [name]=\"node.isExpanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n            }\n          </button>\n\n          <!-- why: `selector.single` cho ph\u00E9p \u0111\u00FAng M\u1ED8T node, m\u00E0 checkbox l\u1EA1i l\u00E0 k\u00FD hi\u1EC7u c\u1EE7a\n               \"ch\u1ECDn nhi\u1EC1u\" \u2014 ng\u01B0\u1EDDi d\u00F9ng tick node th\u1EE9 hai r\u1ED3i m\u1EDBi ph\u00E1t hi\u1EC7n node \u0111\u1EA7u t\u1EF1 b\u1ECF. Radio\n               n\u00F3i tr\u01B0\u1EDBc \u0111i\u1EC1u \u0111\u00F3. Kh\u00F4ng gom v\u00E0o <mat-radio-group>: group chi\u1EBFm Arrow Up/Down cho\n               vi\u1EC7c chuy\u1EC3n l\u1EF1a ch\u1ECDn, trong khi h\u00E0ng c\u00E2y \u0111\u00E3 d\u00F9ng \u0111\u00FAng hai ph\u00EDm \u0111\u00F3 \u0111\u1EC3 \u0111i\u1EC1u h\u01B0\u1EDBng. -->\n          @if (_selectionVisible) {\n            @if (_selectionSingle) {\n              <mat-radio-button\n                class=\"sd-tree__radio\"\n                [checked]=\"node.selected\"\n                [disabled]=\"node.selectionDisabled\"\n                [attr.data-autoid]=\"node.autoIds.checkbox\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleSelection(node)\" />\n            } @else {\n              <mat-checkbox\n                class=\"sd-tree__checkbox\"\n                [checked]=\"node.selected\"\n                [indeterminate]=\"node.selectionIndeterminate\"\n                [disabled]=\"node.selectionDisabled\"\n                [attr.data-autoid]=\"node.autoIds.checkbox\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleSelection(node)\" />\n            }\n          }\n\n          @if (node.icon) {\n            <sd-icon class=\"sd-tree__item-icon\" color=\"primary\" [attr.data-autoid]=\"node.autoIds.icon\" [name]=\"node.icon\"></sd-icon>\n          }\n\n          <div class=\"sd-tree__content\" [class.sd-tree__content--custom]=\"_resolvedItemTemplate\" [attr.data-autoid]=\"node.autoIds.label\">\n            @if (_resolvedItemTemplate) {\n              <ng-container *ngTemplateOutlet=\"_resolvedItemTemplate; 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            <sd-icon class=\"c-icon\" name=\"more_vert\"></sd-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                  <sd-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                    [name]=\"command.icon\"></sd-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\n<sd-quick-action [opened]=\"_selectionQuickActionOpened\">\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 _selectionActionViews; 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-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}:host{--sd-tree-row-height: 44px;--sd-tree-control-size: 28px;--sd-tree-checkbox-size: 16px;--sd-tree-indent-size: 20px;--sd-tree-selected-bg: color-mix(in srgb, var(--sd-primary, #005cbb) 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:flex-start;min-height:var(--sd-tree-row-height);box-sizing:border-box;padding:8px 4px 8px 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:focus-visible{z-index:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.sd-tree__row--selected{background:var(--sd-tree-selected-bg)}.sd-tree__main{display:flex;align-items:flex-start;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 sd-icon{width:20px;height:20px;font-size:20px;line-height:20px}.sd-tree__checkbox{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);margin:0 4px 0 0;--mdc-checkbox-state-layer-size: var(--sd-tree-control-size);--mdc-checkbox-selected-checkmark-color: #ffffff;--mdc-checkbox-selected-focus-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-hover-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-icon-color: var(--sd-primary, #005cbb);--mdc-checkbox-selected-pressed-icon-color: var(--sd-primary, #005cbb)}.sd-tree__checkbox ::ng-deep .mdc-checkbox{flex:0 0 var(--sd-tree-checkbox-size);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size);padding:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2)}.sd-tree__checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{top:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);left:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size)}.sd-tree__radio{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);margin:0 4px 0 0;--mdc-radio-state-layer-size: var(--sd-tree-control-size);--mdc-radio-selected-icon-color: var(--sd-primary, #005cbb) !important;--mdc-radio-selected-focus-icon-color: var(--sd-primary, #005cbb) !important;--mdc-radio-selected-hover-icon-color: var(--sd-primary, #005cbb) !important;--mdc-radio-selected-pressed-icon-color: var(--sd-primary, #005cbb) !important;--mat-radio-selected-icon-color: var(--sd-primary, #005cbb) !important;--mat-radio-checked-state-layer-color: var(--sd-primary, #005cbb) !important}.sd-tree__radio ::ng-deep .mdc-radio{flex:0 0 var(--sd-tree-checkbox-size);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size);padding:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2)}.sd-tree__radio ::ng-deep .mdc-radio .mdc-radio__background,.sd-tree__radio ::ng-deep .mdc-radio .mdc-radio__native-control{top:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);left:calc((var(--sd-tree-control-size) - var(--sd-tree-checkbox-size)) / 2);width:var(--sd-tree-checkbox-size);height:var(--sd-tree-checkbox-size)}.sd-tree__radio ::ng-deep .mdc-form-field>label{display:none}.sd-tree__item-icon{flex:0 0 auto;width:20px;height:20px;min-height:var(--sd-tree-control-size);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:flex-start;width:24px;height:var(--sd-tree-control-size);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 sd-icon.c-icon,.sd-tree__command-menu-icon{width:16px;height:16px;font-size:16px;line-height:16px}.sd-tree__command-trigger sd-icon.c-icon,.sd-tree__command-menu-icon--default{color:var(--sd-text-secondary)!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;padding:0;text-align:center}.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:8px 0 0 8px}.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}.sd-tree__root-loading,.sd-tree__root-error{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:16px}.sd-tree__root-error{flex-direction:column;color:var(--sd-error, #d92d20)}.sd-tree__root-error button{min-height:36px;padding:6px 12px;border:1px solid currentcolor;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}\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"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdTreeItemDefDirective), { isSignal: true }] }] } });
 function normalizeText(value) {
     return value