@sdcorejs/angular 19.1.6 → 19.2.1

package/fesm2022/sdcorejs-angular-components-org-chart.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, input, computed, booleanAttribute, contentChild, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, input, computed, booleanAttribute, contentChild, signal, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
 class SdOrgChartItemDefDirective {
@@ -19,6 +19,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+/** Shared empty children list — leaf nodes reuse this ref instead of a new `[]` per call. */
+const EMPTY_ORG_CHART_ITEMS = [];
 class SdOrgChart {
     autoIdInput = input(undefined, { alias: 'autoId' });
     option = input(undefined);
@@ -36,12 +38,39 @@ class SdOrgChart {
         return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;
     });
     #expandedState = signal({});
+    /**
+     * Node object → template context, memo hoá trong một `computed`.
+     *
+     * why: `createContext()` được gọi thẳng từ template (`@let _context = createContext(...)`) nên
+     * trước đây MỖI node cấp phát một context MỚI ở MỖI chu kỳ change detection, rồi đưa vào
+     * `*ngTemplateOutlet` — đúng bug class cấp-phát-mỗi-CD (`ngTemplateOutletContext` đổi ref mỗi
+     * CD → outlet ghi lại context liên tục). Computed chỉ phụ thuộc CẤU TRÚC items (không phụ thuộc
+     * trạng thái expand — xem `#buildContext`), nên giữa hai lần CD ref context là như nhau.
+     */
+    #contextByItem = computed(() => {
+        // why: khoá theo CHÍNH object node, KHÔNG theo `item.id`. Hai node trùng `id` ở hai nhánh khác
+        // nhau là hợp lệ (id chỉ cần duy nhất trong phạm vi consumer quan tâm), nhưng khoá theo id thì
+        // chúng dùng CHUNG một context — node thứ hai nhận `depth`/`parent` của node thứ nhất và
+        // template `sdOrgChartItemDef` render sai dữ liệu.
+        const map = new Map();
+        const walk = (items, depth, parent) => {
+            for (const item of items) {
+                map.set(item, this.#buildContext(item, depth, parent));
+                const children = this.childrenOf(item);
+                if (children.length > 0)
+                    walk(children, depth + 1, item);
+            }
+        };
+        walk(this.resolvedItems(), 0, null);
+        return map;
+    });
     trackByItem = (_index, item) => item.id;
     hasChildren = (item) => {
         return this.childrenOf(item).length > 0;
     };
+    /** why: trả về hằng số dùng chung thay vì `[]` mới, để leaf không cấp phát mỗi lần CD gọi tới. */
     childrenOf = (item) => {
-        return item.children || [];
+        return item.children || EMPTY_ORG_CHART_ITEMS;
     };
     isExpanded = (item) => {
         if (!this.resolvedCollapsible()) {
@@ -64,27 +93,45 @@ class SdOrgChart {
         }));
         this.option()?.onToggle?.({ item, expanded });
     };
+    /**
+     * Template context của một node. Ref ổn định giữa các lần CD nhờ `#contextByItem`.
+     * Item không nằm trong `resolvedItems()` (gọi thủ công từ bên ngoài) thì dựng mới — trường hợp
+     * này không nằm trên đường render nên không gây churn.
+     */
     createContext = (item, depth, parent) => {
+        const context = this.#contextByItem().get(item);
+        if (!context)
+            return this.#buildContext(item, depth, parent);
+        // why: `expanded` phải làm TƯƠI mỗi lần đọc và mutate TẠI CHỖ. Nếu để `#contextByItem` đọc
+        // `#expandedState` thì mở/đóng MỘT node sẽ vứt và dựng lại context của TOÀN BỘ chart —
+        // memo hoá thô hơn hẳn thứ nó bảo vệ. Mutate tại chỗ giữ nguyên ref nên `ngTemplateOutlet`
+        // không phải ghi lại context.
+        context.expanded = this.isExpanded(item);
+        return context;
+    };
+    nodeAutoId = (item, part) => {
+        const base = this.autoId();
+        if (!base) {
+            return undefined;
+        }
+        return `${base}-${part}-${this.#autoIdKey(item)}`;
+    };
+    #buildContext = (item, depth, parent) => {
         const hasChildren = this.hasChildren(item);
-        const expanded = this.isExpanded(item);
         return {
             $implicit: item,
             item,
             depth,
             parent,
-            expanded,
+            // why: `untracked` để `#contextByItem` KHÔNG phụ thuộc `#expandedState`. Không có nó thì
+            // toggle một node làm computed chạy lại và dựng mới context của mọi node. Giá trị thật được
+            // `createContext()` làm tươi tại chỗ mỗi lần đọc.
+            expanded: untracked(() => this.isExpanded(item)),
             hasChildren,
             isLeaf: !hasChildren,
             toggle: () => this.toggle(item),
         };
     };
-    nodeAutoId = (item, part) => {
-        const base = this.autoId();
-        if (!base) {
-            return undefined;
-        }
-        return `${base}-${part}-${this.#autoIdKey(item)}`;
-    };
     #itemKey = (item) => {
         return String(item.id);
     };
@@ -92,13 +139,13 @@ class SdOrgChart {
         return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdOrgChart, isStandalone: true, selector: "sd-org-chart", 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 }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: SdOrgChartItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      @if (_hasChildren && collapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-org-chart__toggle sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdOrgChart, isStandalone: true, selector: "sd-org-chart", 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 }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: SdOrgChartItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <!-- why: role=\"treeitem\" B\u1EAET BU\u1ED8C ph\u1EA3i c\u00F3 aria-selected \u2014 thi\u1EBFu n\u00F3 screen reader kh\u00F4ng bi\u1EBFt\n       node \u0111ang \u1EDF tr\u1EA1ng th\u00E1i n\u00E0o v\u00E0 b\u1ECF qua lu\u00F4n ng\u1EEF ngh\u0129a tree. Org-chart l\u00E0 s\u01A1 \u0111\u1ED3 ch\u1EC9-\u0111\u1ECDc, kh\u00F4ng\n       c\u00F3 kh\u00E1i ni\u1EC7m ch\u1ECDn node, n\u00EAn khai b\u00E1o t\u0129nh \"false\" (\u0111\u00FAng s\u1EF1 th\u1EADt) thay v\u00EC b\u1ECF tr\u1ED1ng.\n       aria-level b\u1ED5 sung \u0111\u1EC3 screen reader \u0111\u1ECDc \u0111\u01B0\u1EE3c \u0111\u1ED9 s\u00E2u c\u1EE7a node trong s\u01A1 \u0111\u1ED3. -->\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-level]=\"depth + 1\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\"\n    aria-selected=\"false\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      <!-- why: gate theo resolvedCollapsible() ch\u1EE9 KH\u00D4NG theo input th\u00F4 collapsible(). V\u1EDBi\n           `[option]=\"{ collapsible: false }\"` th\u00EC input th\u00F4 v\u1EABn l\u00E0 m\u1EB7c \u0111\u1ECBnh true \u2192 chevron v\u1EABn\n           render nh\u01B0ng toggle() \u0111\u00E3 ch\u1EB7n n\u00EAn b\u1EA5m kh\u00F4ng c\u00F3 t\u00E1c d\u1EE5ng. -->\n      @if (_hasChildren && resolvedCollapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-org-chart__toggle sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOrgChart, decorators: [{
             type: Component,
             args: [{ selector: 'sd-org-chart', standalone: true, imports: [SdIcon, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-autoid]': 'autoId()',
-                    }, template: "@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      @if (_hasChildren && collapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-org-chart__toggle sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
+                    }, template: "@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <!-- why: role=\"treeitem\" B\u1EAET BU\u1ED8C ph\u1EA3i c\u00F3 aria-selected \u2014 thi\u1EBFu n\u00F3 screen reader kh\u00F4ng bi\u1EBFt\n       node \u0111ang \u1EDF tr\u1EA1ng th\u00E1i n\u00E0o v\u00E0 b\u1ECF qua lu\u00F4n ng\u1EEF ngh\u0129a tree. Org-chart l\u00E0 s\u01A1 \u0111\u1ED3 ch\u1EC9-\u0111\u1ECDc, kh\u00F4ng\n       c\u00F3 kh\u00E1i ni\u1EC7m ch\u1ECDn node, n\u00EAn khai b\u00E1o t\u0129nh \"false\" (\u0111\u00FAng s\u1EF1 th\u1EADt) thay v\u00EC b\u1ECF tr\u1ED1ng.\n       aria-level b\u1ED5 sung \u0111\u1EC3 screen reader \u0111\u1ECDc \u0111\u01B0\u1EE3c \u0111\u1ED9 s\u00E2u c\u1EE7a node trong s\u01A1 \u0111\u1ED3. -->\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-level]=\"depth + 1\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\"\n    aria-selected=\"false\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      <!-- why: gate theo resolvedCollapsible() ch\u1EE9 KH\u00D4NG theo input th\u00F4 collapsible(). V\u1EDBi\n           `[option]=\"{ collapsible: false }\"` th\u00EC input th\u00F4 v\u1EABn l\u00E0 m\u1EB7c \u0111\u1ECBnh true \u2192 chevron v\u1EABn\n           render nh\u01B0ng toggle() \u0111\u00E3 ch\u1EB7n n\u00EAn b\u1EA5m kh\u00F4ng c\u00F3 t\u00E1c d\u1EE5ng. -->\n      @if (_hasChildren && resolvedCollapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-org-chart__toggle sd-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
         }] });
 
 /**

package/fesm2022/sdcorejs-angular-components-org-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-org-chart.mjs","sources":["../../../projects/sdcorejs-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.html","../../../projects/sdcorejs-angular/components/org-chart/sdcorejs-angular-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\n\n@Directive({\n  selector: '[sdOrgChartItemDef]',\n})\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\n  static ngTemplateContextGuard<T extends SdOrgChartItem>(\n    _dir: SdOrgChartItemDefDirective<T>,\n    _ctx: unknown\n  ): _ctx is SdOrgChartItemContext<T> {\n    return true;\n  }\n\n  readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, TemplateRef, booleanAttribute, computed, contentChild, input, signal } from '@angular/core';\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n@Component({\n  selector: 'sd-org-chart',\n  standalone: true,\n  imports: [SdIcon, CommonModule],\n  templateUrl: './org-chart.component.html',\n  styleUrl: './org-chart.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-autoid]': 'autoId()',\n  },\n})\nexport class SdOrgChart {\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly option = input<SdOrgChartOption | undefined>(undefined);\n  readonly autoId = computed(() => {\n    const scope = this.option()?.autoId ?? this.autoIdInput();\n    return scope ? `components-org-chart-${scope}` : undefined;\n  });\n\n  readonly items = input<SdOrgChartItem[] | undefined>(undefined);\n  readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> | undefined | null>(undefined);\n  readonly collapsible = input(true, { transform: booleanAttribute });\n\n  readonly itemDef = contentChild(SdOrgChartItemDefDirective);\n  readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\n  readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\n\n  readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> | undefined>(() => {\n    return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;\n  });\n\n  readonly #expandedState = signal<Record<string, boolean>>({});\n\n  readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\n\n  hasChildren = (item: SdOrgChartItem): boolean => {\n    return this.childrenOf(item).length > 0;\n  };\n\n  childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\n    return item.children || [];\n  };\n\n  isExpanded = (item: SdOrgChartItem): boolean => {\n    if (!this.resolvedCollapsible()) {\n      return true;\n    }\n\n    const key = this.#itemKey(item);\n    const state = this.#expandedState();\n    return state[key] ?? item.expanded ?? true;\n  };\n\n  toggle = (item: SdOrgChartItem, event?: Event): void => {\n    event?.stopPropagation();\n\n    if (!this.resolvedCollapsible() || !this.hasChildren(item)) {\n      return;\n    }\n\n    const key = this.#itemKey(item);\n    const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\n    this.#expandedState.update(state => ({\n      ...state,\n      [key]: expanded,\n    }));\n    this.option()?.onToggle?.({ item, expanded });\n  };\n\n  createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem | null): SdOrgChartItemContext => {\n    const hasChildren = this.hasChildren(item);\n    const expanded = this.isExpanded(item);\n\n    return {\n      $implicit: item,\n      item,\n      depth,\n      parent,\n      expanded,\n      hasChildren,\n      isLeaf: !hasChildren,\n      toggle: () => this.toggle(item),\n    };\n  };\n\n  nodeAutoId = (item: SdOrgChartItem, part: 'node' | 'image' | 'title' | 'description' | 'toggle'): string | undefined => {\n    const base = this.autoId();\n    if (!base) {\n      return undefined;\n    }\n\n    return `${base}-${part}-${this.#autoIdKey(item)}`;\n  };\n\n  #itemKey = (item: SdOrgChartItem): string => {\n    return String(item.id);\n  };\n\n  #autoIdKey = (item: SdOrgChartItem): string => {\n    return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\n  };\n}\n","@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      @if (_hasChildren && collapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sdcorejs-angular-components-org-chart.mjs","sources":["../../../projects/sdcorejs-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.html","../../../projects/sdcorejs-angular/components/org-chart/sdcorejs-angular-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\n\n@Directive({\n  selector: '[sdOrgChartItemDef]',\n})\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\n  static ngTemplateContextGuard<T extends SdOrgChartItem>(\n    _dir: SdOrgChartItemDefDirective<T>,\n    _ctx: unknown\n  ): _ctx is SdOrgChartItemContext<T> {\n    return true;\n  }\n\n  readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  contentChild,\n  input,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n/** Shared empty children list — leaf nodes reuse this ref instead of a new `[]` per call. */\nconst EMPTY_ORG_CHART_ITEMS: SdOrgChartItem[] = [];\n\n@Component({\n  selector: 'sd-org-chart',\n  standalone: true,\n  imports: [SdIcon, CommonModule],\n  templateUrl: './org-chart.component.html',\n  styleUrl: './org-chart.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-autoid]': 'autoId()',\n  },\n})\nexport class SdOrgChart {\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly option = input<SdOrgChartOption | undefined>(undefined);\n  readonly autoId = computed(() => {\n    const scope = this.option()?.autoId ?? this.autoIdInput();\n    return scope ? `components-org-chart-${scope}` : undefined;\n  });\n\n  readonly items = input<SdOrgChartItem[] | undefined>(undefined);\n  readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> | undefined | null>(undefined);\n  readonly collapsible = input(true, { transform: booleanAttribute });\n\n  readonly itemDef = contentChild(SdOrgChartItemDefDirective);\n  readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\n  readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\n\n  readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> | undefined>(() => {\n    return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;\n  });\n\n  readonly #expandedState = signal<Record<string, boolean>>({});\n\n  /**\n   * Node object → template context, memo hoá trong một `computed`.\n   *\n   * why: `createContext()` được gọi thẳng từ template (`@let _context = createContext(...)`) nên\n   * trước đây MỖI node cấp phát một context MỚI ở MỖI chu kỳ change detection, rồi đưa vào\n   * `*ngTemplateOutlet` — đúng bug class cấp-phát-mỗi-CD (`ngTemplateOutletContext` đổi ref mỗi\n   * CD → outlet ghi lại context liên tục). Computed chỉ phụ thuộc CẤU TRÚC items (không phụ thuộc\n   * trạng thái expand — xem `#buildContext`), nên giữa hai lần CD ref context là như nhau.\n   */\n  readonly #contextByItem = computed<Map<SdOrgChartItem, SdOrgChartItemContext>>(() => {\n    // why: khoá theo CHÍNH object node, KHÔNG theo `item.id`. Hai node trùng `id` ở hai nhánh khác\n    // nhau là hợp lệ (id chỉ cần duy nhất trong phạm vi consumer quan tâm), nhưng khoá theo id thì\n    // chúng dùng CHUNG một context — node thứ hai nhận `depth`/`parent` của node thứ nhất và\n    // template `sdOrgChartItemDef` render sai dữ liệu.\n    const map = new Map<SdOrgChartItem, SdOrgChartItemContext>();\n    const walk = (items: SdOrgChartItem[], depth: number, parent: SdOrgChartItem | null): void => {\n      for (const item of items) {\n        map.set(item, this.#buildContext(item, depth, parent));\n        const children = this.childrenOf(item);\n        if (children.length > 0) walk(children, depth + 1, item);\n      }\n    };\n    walk(this.resolvedItems(), 0, null);\n    return map;\n  });\n\n  readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\n\n  hasChildren = (item: SdOrgChartItem): boolean => {\n    return this.childrenOf(item).length > 0;\n  };\n\n  /** why: trả về hằng số dùng chung thay vì `[]` mới, để leaf không cấp phát mỗi lần CD gọi tới. */\n  childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\n    return item.children || EMPTY_ORG_CHART_ITEMS;\n  };\n\n  isExpanded = (item: SdOrgChartItem): boolean => {\n    if (!this.resolvedCollapsible()) {\n      return true;\n    }\n\n    const key = this.#itemKey(item);\n    const state = this.#expandedState();\n    return state[key] ?? item.expanded ?? true;\n  };\n\n  toggle = (item: SdOrgChartItem, event?: Event): void => {\n    event?.stopPropagation();\n\n    if (!this.resolvedCollapsible() || !this.hasChildren(item)) {\n      return;\n    }\n\n    const key = this.#itemKey(item);\n    const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\n    this.#expandedState.update(state => ({\n      ...state,\n      [key]: expanded,\n    }));\n    this.option()?.onToggle?.({ item, expanded });\n  };\n\n  /**\n   * Template context của một node. Ref ổn định giữa các lần CD nhờ `#contextByItem`.\n   * Item không nằm trong `resolvedItems()` (gọi thủ công từ bên ngoài) thì dựng mới — trường hợp\n   * này không nằm trên đường render nên không gây churn.\n   */\n  createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem | null): SdOrgChartItemContext => {\n    const context = this.#contextByItem().get(item);\n    if (!context) return this.#buildContext(item, depth, parent);\n    // why: `expanded` phải làm TƯƠI mỗi lần đọc và mutate TẠI CHỖ. Nếu để `#contextByItem` đọc\n    // `#expandedState` thì mở/đóng MỘT node sẽ vứt và dựng lại context của TOÀN BỘ chart —\n    // memo hoá thô hơn hẳn thứ nó bảo vệ. Mutate tại chỗ giữ nguyên ref nên `ngTemplateOutlet`\n    // không phải ghi lại context.\n    context.expanded = this.isExpanded(item);\n    return context;\n  };\n\n  nodeAutoId = (item: SdOrgChartItem, part: 'node' | 'image' | 'title' | 'description' | 'toggle'): string | undefined => {\n    const base = this.autoId();\n    if (!base) {\n      return undefined;\n    }\n\n    return `${base}-${part}-${this.#autoIdKey(item)}`;\n  };\n\n  #buildContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem | null): SdOrgChartItemContext => {\n    const hasChildren = this.hasChildren(item);\n\n    return {\n      $implicit: item,\n      item,\n      depth,\n      parent,\n      // why: `untracked` để `#contextByItem` KHÔNG phụ thuộc `#expandedState`. Không có nó thì\n      // toggle một node làm computed chạy lại và dựng mới context của mọi node. Giá trị thật được\n      // `createContext()` làm tươi tại chỗ mỗi lần đọc.\n      expanded: untracked(() => this.isExpanded(item)),\n      hasChildren,\n      isLeaf: !hasChildren,\n      toggle: () => this.toggle(item),\n    };\n  };\n\n  #itemKey = (item: SdOrgChartItem): string => {\n    return String(item.id);\n  };\n\n  #autoIdKey = (item: SdOrgChartItem): string => {\n    return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\n  };\n}\n","@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _resolvedItems; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <!-- why: role=\"treeitem\" BẮT BUỘC phải có aria-selected — thiếu nó screen reader không biết\n       node đang ở trạng thái nào và bỏ qua luôn ngữ nghĩa tree. Org-chart là sơ đồ chỉ-đọc, không\n       có khái niệm chọn node, nên khai báo tĩnh \"false\" (đúng sự thật) thay vì bỏ trống.\n       aria-level bổ sung để screen reader đọc được độ sâu của node trong sơ đồ. -->\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-level]=\"depth + 1\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\"\n    aria-selected=\"false\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      <!-- why: gate theo resolvedCollapsible() chứ KHÔNG theo input thô collapsible(). Với\n           `[option]=\"{ collapsible: false }\"` thì input thô vẫn là mặc định true → chevron vẫn\n           render nhưng toggle() đã chặn nên bấm không có tác dụng. -->\n      @if (_hasChildren && resolvedCollapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}