@sdcorejs/angular 19.1.6 → 19.2.0

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":";;;;;;MAMa,0BAA0B,CAAA;AACrC,IAAA,OAAO,sBAAsB,CAC3B,IAAmC,EACnC,IAAa,EAAA;AAEb,QAAA,OAAO,IAAI;IACb;AAES,IAAA,WAAW,GAA0C,MAAM,CAAC,WAAW,CAAC;wGARtE,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAHtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAChC,iBAAA;;;MCYY,UAAU,CAAA;IACZ,WAAW,GAAG,KAAK,CAA4B,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC9E,IAAA,MAAM,GAAG,KAAK,CAA+B,SAAS,CAAC;AACvD,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;QACzD,OAAO,KAAK,GAAG,CAAA,qBAAA,EAAwB,KAAK,CAAA,CAAE,GAAG,SAAS;AAC5D,IAAA,CAAC,CAAC;AAEO,IAAA,KAAK,GAAG,KAAK,CAA+B,SAAS,CAAC;AACtD,IAAA,YAAY,GAAG,KAAK,CAAwD,SAAS,CAAC;IACtF,WAAW,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE1D,IAAA,OAAO,GAAG,YAAY,CAAC,0BAA0B,CAAC;IAClD,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;AAC1E,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;AAEtF,IAAA,oBAAoB,GAAG,QAAQ,CAAiD,MAAK;QAC5F,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,YAAY,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,SAAS;AACvG,IAAA,CAAC,CAAC;AAEO,IAAA,cAAc,GAAG,MAAM,CAA0B,EAAE,CAAC;IAEpD,WAAW,GAAG,CAAC,MAAc,EAAE,IAAoB,KAAK,IAAI,CAAC,EAAE;AAExE,IAAA,WAAW,GAAG,CAAC,IAAoB,KAAa;QAC9C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;AACzC,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,KAAsB;AACtD,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,EAAE;AAC5B,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,KAAa;AAC7C,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE;AAC/B,YAAA,OAAO,IAAI;QACb;QAEA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC/B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE;QACnC,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI;AAC5C,IAAA,CAAC;AAED,IAAA,MAAM,GAAG,CAAC,IAAoB,EAAE,KAAa,KAAU;QACrD,KAAK,EAAE,eAAe,EAAE;AAExB,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YAC1D;QACF;QAEA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC/B,QAAA,MAAM,QAAQ,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;QACvE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,KAAK;AACnC,YAAA,GAAG,KAAK;YACR,CAAC,GAAG,GAAG,QAAQ;AAChB,SAAA,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAC/C,IAAA,CAAC;IAED,aAAa,GAAG,CAAC,IAAoB,EAAE,KAAa,EAAE,MAA6B,KAA2B;QAC5G,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAEtC,OAAO;AACL,YAAA,SAAS,EAAE,IAAI;YACf,IAAI;YACJ,KAAK;YACL,MAAM;YACN,QAAQ;YACR,WAAW;YACX,MAAM,EAAE,CAAC,WAAW;YACpB,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;SAChC;AACH,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,EAAE,IAA2D,KAAwB;AACrH,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE;QAC1B,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,OAAO,SAAS;QAClB;AAEA,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA,CAAE;AACnD,IAAA,CAAC;AAED,IAAA,QAAQ,GAAG,CAAC,IAAoB,KAAY;AAC1C,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,KAAY;AAC5C,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAC5D,IAAA,CAAC;wGAzFU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,k0BAYW,0BAA0B,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7B5D,29FAwEA,EAAA,MAAA,EAAA,CAAA,omGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED/DY,MAAM,uKAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQnB,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,MAAM,EAAE,YAAY,CAAC,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,oBAAoB,EAAE,UAAU;AACjC,qBAAA,EAAA,QAAA,EAAA,29FAAA,EAAA,MAAA,EAAA,CAAA,omGAAA,CAAA,EAAA;;;AEfH;;AAEG;;;;"}
+{"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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"}