@sdcorejs/angular 19.1.6 → 19.2.0

package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-modal-resizable.mjs","sources":["../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sdcorejs-angular/components/modal-resizable/sdcorejs-angular-components-modal-resizable.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  afterNextRender,\n  booleanAttribute,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n@Component({\n  selector: 'sd-modal-resizable',\n  templateUrl: './modal-resizable.component.html',\n  styleUrl: './modal-resizable.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatDialogModule, MatButtonModule, PortalModule],\n})\nexport class SdModalResizable {\n  readonly id = `I${Utilities.generateUuid()}`;\n  readonly portal = viewChild.required(CdkPortal);\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  readonly width = input<string>('480px');\n  readonly editingChanged = output<boolean>();\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n  readonly #ref = inject(ChangeDetectorRef);\n  readonly #loadingService = inject(SdLoadingService);\n  readonly #destroyRef = inject(DestroyRef);\n  readonly isEditing = signal(false);\n  readonly isOpened = signal(false);\n  readonly isHover = signal(false);\n  readonly isLoading = signal(false);\n  readonly isMinimum = signal(false);\n  readonly isMaximum = signal(false);\n\n  constructor() {\n    afterNextRender(() => {\n      // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →\n      // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích\n      // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).\n      const outlet = new DomPortalOutlet(document.body);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n      this.#detectChanges();\n    });\n\n    this.#destroyRef.onDestroy(() => {\n      this.#embeddedViewRef?.destroy();\n    });\n  }\n\n  open = () => {\n    this.isOpened.set(true);\n    this.#detectChanges();\n\n    const element = this.#getElement();\n    if (element && !element.classList.contains('c-minium')) {\n      setTimeout(() => {\n        const maximumWidth = element.offsetWidth;\n        if (maximumWidth > 0) {\n          element.dataset['width'] = maximumWidth.toString();\n        }\n        element.classList.remove('c-closed');\n      }, 100);\n    }\n\n    this.maximize();\n  };\n\n  close = () => {\n    this.isOpened.set(false);\n    this.#detectChanges();\n    setTimeout(() => {\n      const element = this.#getElement();\n      element?.style.setProperty('width', '0px');\n      element?.style.setProperty('right', '0px');\n      element?.classList.remove('c-minium');\n      element?.classList.add('c-closed');\n    }, 100);\n    this.stopLoading();\n\n    this.#arrangePanels();\n  };\n\n  minimize = () => {\n    this.isMinimum.set(true);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  maximize = () => {\n    this.isMinimum.set(false);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  toggleMaximum = () => {\n    this.isMaximum.update(isMaximum => !isMaximum);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  startLoading = () => {\n    this.isLoading.set(true);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  stopLoading = () => {\n    this.isLoading.set(false);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  toggleEditable() {\n    this.isEditing.update(isEditing => !isEditing);\n    this.#detectChanges();\n    this.editingChanged.emit(this.isEditing());\n  }\n\n  onFocus = () => {\n    this.isHover.set(true);\n  };\n\n  onBlur = () => {\n    this.isHover.set(false);\n  };\n\n  #arrangePanels = () => {\n    setTimeout(() => {\n      let totalRight = 0;\n      const minimumWidth = 300;\n      document.querySelectorAll<HTMLElement>('.modal-resizable').forEach(item => {\n        if (item.classList.contains('c-minium')) {\n          item.style.setProperty('width', `${minimumWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n          totalRight += minimumWidth + 8;\n          return;\n        }\n\n        if (item.classList.contains('c-closed')) {\n          return;\n        }\n\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\n        if (Number.isNaN(expandedWidth)) {\n          return;\n        }\n\n        if (item.classList.contains('c-fullscreen')) {\n          item.style.setProperty('width', 'calc(100% - 16px)');\n          item.style.setProperty('right', '8px');\n        } else {\n          item.style.setProperty('width', `${expandedWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n        }\n        totalRight += expandedWidth + 8;\n      });\n    }, 200);\n  };\n\n  #getElement() {\n    return document.getElementById(this.id);\n  }\n\n  #detectChanges() {\n    this.#ref.markForCheck();\n    this.#embeddedViewRef?.detectChanges();\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\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-modal-resizable.mjs","sources":["../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.registry.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sdcorejs-angular/components/modal-resizable/sdcorejs-angular-components-modal-resizable.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Injectable, inject } from '@angular/core';\n\n/**\n * Sổ đăng ký các panel `<sd-modal-resizable>` đang sống.\n *\n * why: mỗi panel được portal ra thẳng `document.body` nên việc xếp chỗ (width/right) là bài toán\n * chung của cả stack. Trước đây `#arrangePanels` quét `document.querySelectorAll('.modal-resizable')`\n * — query đó bắt MỌI phần tử mang class này trong tài liệu, kể cả markup của component khác hoặc\n * của app dùng trùng tên class, rồi ghi đè inline style lên chúng. Registry giới hạn phạm vi ghi\n * đúng vào các instance do library tạo ra và còn sống.\n */\n@Injectable({ providedIn: 'root' })\nexport class SdModalResizableRegistry {\n  // why: dùng token DOCUMENT thay vì global `document`, đồng bộ với `preview-image` — service\n  // `providedIn:'root'` có thể được khởi tạo trong quá trình render phía server.\n  readonly #document = inject(DOCUMENT);\n\n  // Set giữ nguyên thứ tự đăng ký → thứ tự xếp chỗ ổn định, khớp thứ tự panel được mở.\n  readonly #ids = new Set<string>();\n\n  register(id: string): void {\n    this.#ids.add(id);\n  }\n\n  unregister(id: string): void {\n    this.#ids.delete(id);\n  }\n\n  /**\n   * Phần tử panel của các instance đã đăng ký và đang có mặt trong DOM.\n   * Instance đã destroy hoặc chưa attach portal sẽ bị bỏ qua.\n   */\n  panels(): HTMLElement[] {\n    const elements: HTMLElement[] = [];\n    for (const id of this.#ids) {\n      const element = this.#document.getElementById(id);\n      if (element) elements.push(element);\n    }\n    return elements;\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  afterNextRender,\n  booleanAttribute,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { SdModalResizableRegistry } from './modal-resizable.registry';\n\n/**\n * `<sd-modal-resizable>` — right-docked, non-modal panel that can be minimized, expanded or pushed\n * fullscreen. Several panels stack side by side along the right edge of the viewport, so the user\n * can keep multiple records open at once while still working with the page behind them.\n *\n * Use it for side-by-side comparison / inspector workflows. Use `<sd-modal>` when the task is\n * blocking, and `<sd-side-drawer>` when a single overlay with a backdrop is enough.\n *\n * NOTE ON DOCS: this component deliberately has **no** sibling `sd-modal-resizable.md`. Every `*.md`\n * under the library is swept into `published-docs/<version>/index.json` by `scripts/collect-docs.mjs`,\n * and `scripts/generate-showcase-example-sources.test.mjs` asserts that list is 1:1 with the\n * `publishedDocId` set in the showcase documentation registry. A published doc with no showcase page\n * therefore turns that release guard red. Keep the reference here until the component ships a\n * showcase demo + registry entry; only then add the `.md`.\n *\n * ```ts\n * import { SdModalResizable } from '@sdcorejs/angular/components/modal-resizable';\n * ```\n *\n * ```html\n * <sd-button title=\"Open detail\" type=\"fill\" color=\"primary\" (click)=\"panel.open()\"></sd-button>\n *\n * <sd-modal-resizable #panel width=\"520px\">\n *   <span sdTitle>Đơn hàng #1024</span>\n *\n *   <div sdBody class=\"panel-body\">\n *     <sd-section icon=\"receipt\" title=\"Thông tin chung\">\n *       <sd-section-item label=\"Khách hàng\">Nguyen Van An</sd-section-item>\n *     </sd-section>\n *   </div>\n *\n *   <sd-button sdFooterRight type=\"text\" title=\"Đóng\" (click)=\"panel.close()\"></sd-button>\n * </sd-modal-resizable>\n * ```\n *\n * ### Slots\n * | Selector          | Where it renders          |\n * | ----------------- | ------------------------- |\n * | `[sdTitle]`       | Header title area.        |\n * | `[sdBody]`        | Scrollable content area.  |\n * | `[sdFooterLeft]`  | Footer left action group. |\n * | `[sdFooterRight]` | Footer right action group.|\n *\n * Header, body and footer only render while the panel is open.\n *\n * ### Panel stacking\n * The panel is portalled onto `document.body` (via `CdkPortal` + `DomPortalOutlet`), so laying panels\n * out is a concern shared by all live instances rather than by a single view. Arrangement is scoped\n * through the root-provided `SdModalResizableRegistry`: each instance registers its panel id on\n * construction and unregisters it on destroy. `open`, `close`, `minimize`, `maximize` and\n * `toggleMaximum` re-run the arrangement and rewrite inline `width` / `right` **only on registered,\n * still-mounted panels**, in registration order. Consequences worth knowing:\n * - Markup of your own that happens to carry the `.modal-resizable` class is **not** touched.\n *   (Earlier builds ran `document.querySelectorAll('.modal-resizable')` and rewrote every match.)\n * - A destroyed panel immediately stops taking up a slot for the instances that outlive it.\n * - Panels marked `c-closed`, and expanded panels with no captured `data-width`, are skipped.\n *\n * ### Lifecycle / teardown\n * `open()`, `close()` and the arrangement pass each schedule a short `setTimeout` (100ms / 100ms /\n * 200ms) that mutates DOM. All of them are tracked and cleared in `DestroyRef.onDestroy`, together\n * with unregistering from the registry and destroying the portal view. Destroying the component\n * mid-animation cannot run layout work against a detached panel.\n *\n * ### Anti-patterns\n * - Rendering it inside a scroll container and expecting it to be clipped — it lives on `<body>`.\n * - Reusing the `.modal-resizable` class on your own elements to \"join\" the stack; register a real\n *   component instead.\n * - Writing inline `width` / `right` on a panel yourself — the next arrangement pass overwrites both.\n *\n * ### Tests\n * `src/modal-resizable.component.spec.ts` — portal attach, open/close/minimize/maximize math,\n * loading, editing, timer teardown, registry scoping. Run:\n * `npx ng test sdcorejs-angular --watch=false --browsers=ChromeHeadless --include='projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.spec.ts'`\n *\n * ### Related\n * `<sd-modal>` (blocking dialog / bottom-sheet), `<sd-side-drawer>` (single right-side overlay with\n * a body scroll lock), `SdLoadingService` (powers `startLoading()` / `stopLoading()`).\n */\n@Component({\n  selector: 'sd-modal-resizable',\n  templateUrl: './modal-resizable.component.html',\n  styleUrl: './modal-resizable.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatDialogModule, MatButtonModule, PortalModule],\n})\nexport class SdModalResizable {\n  /** Generated DOM id of the panel element (`I<uuid>`). */\n  readonly id = `I${Utilities.generateUuid()}`;\n  readonly portal = viewChild.required(CdkPortal);\n  /** Marks the panel as editable. Bare attribute = `true`. Default `false`. */\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  /** CSS width used while the panel is expanded (not a minimum). Default `'480px'`. */\n  readonly width = input<string>('480px');\n  /** Emitted by `toggleEditable()` with the new editing state. */\n  readonly editingChanged = output<boolean>();\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n  readonly #ref = inject(ChangeDetectorRef);\n  readonly #loadingService = inject(SdLoadingService);\n  readonly #destroyRef = inject(DestroyRef);\n  readonly #registry = inject(SdModalResizableRegistry);\n  // why: open/close/#arrangePanels đều hẹn setTimeout thao tác DOM. Gom id vào một set để\n  // onDestroy clear sạch, tránh callback chạy trên portal đã tháo (element không còn, hoặc tệ\n  // hơn: element của instance khác vừa tái sử dụng id).\n  readonly #timers = new Set<ReturnType<typeof setTimeout>>();\n  // Trạng thái panel — đọc được từ ngoài (template/consumer), chỉ component tự ghi.\n  readonly isEditing = signal(false);\n  readonly isOpened = signal(false);\n  readonly isHover = signal(false);\n  readonly isLoading = signal(false);\n  readonly isMinimum = signal(false);\n  readonly isMaximum = signal(false);\n\n  constructor() {\n    this.#registry.register(this.id);\n\n    afterNextRender(() => {\n      // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →\n      // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích\n      // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).\n      const outlet = new DomPortalOutlet(document.body);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n      this.#detectChanges();\n    });\n\n    this.#destroyRef.onDestroy(() => {\n      this.#registry.unregister(this.id);\n      for (const timer of this.#timers) clearTimeout(timer);\n      this.#timers.clear();\n      this.#embeddedViewRef?.destroy();\n    });\n  }\n\n  /** setTimeout có theo dõi — huỷ được hàng loạt trong onDestroy. */\n  #schedule(callback: () => void, delay: number): void {\n    const timer = setTimeout(() => {\n      this.#timers.delete(timer);\n      callback();\n    }, delay);\n    this.#timers.add(timer);\n  }\n\n  /** Opens the panel, captures its rendered width, and expands it. */\n  open = () => {\n    this.isOpened.set(true);\n    this.#detectChanges();\n\n    const element = this.#getElement();\n    if (element && !element.classList.contains('c-minium')) {\n      this.#schedule(() => {\n        const maximumWidth = element.offsetWidth;\n        if (maximumWidth > 0) {\n          element.dataset['width'] = maximumWidth.toString();\n        }\n        element.classList.remove('c-closed');\n      }, 100);\n    }\n\n    this.maximize();\n  };\n\n  /** Collapses the panel to zero width and stops loading. */\n  close = () => {\n    this.isOpened.set(false);\n    this.#detectChanges();\n    this.#schedule(() => {\n      const element = this.#getElement();\n      element?.style.setProperty('width', '0px');\n      element?.style.setProperty('right', '0px');\n      element?.classList.remove('c-minium');\n      element?.classList.add('c-closed');\n    }, 100);\n    this.stopLoading();\n\n    this.#arrangePanels();\n  };\n\n  /** Shrinks the panel to the 300px minimum strip. */\n  minimize = () => {\n    this.isMinimum.set(true);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  /** Restores the panel to its expanded width. */\n  maximize = () => {\n    this.isMinimum.set(false);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  /** Toggles fullscreen (`calc(100% - 16px)`). */\n  toggleMaximum = () => {\n    this.isMaximum.update(isMaximum => !isMaximum);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  /** Drives the scoped loading overlay through `SdLoadingService`. */\n  startLoading = () => {\n    this.isLoading.set(true);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  /** Stops the scoped loading overlay. */\n  stopLoading = () => {\n    this.isLoading.set(false);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  /** Flips `isEditing` and emits `editingChanged`. */\n  toggleEditable() {\n    this.isEditing.update(isEditing => !isEditing);\n    this.#detectChanges();\n    this.editingChanged.emit(this.isEditing());\n  }\n\n  /** Hover state hook bound in the template. */\n  onFocus = () => {\n    this.isHover.set(true);\n  };\n\n  /** Hover state hook bound in the template. */\n  onBlur = () => {\n    this.isHover.set(false);\n  };\n\n  #arrangePanels = () => {\n    this.#schedule(() => {\n      let totalRight = 0;\n      const minimumWidth = 300;\n      // why: chỉ xếp chỗ các panel do <sd-modal-resizable> đang sống sở hữu (registry), KHÔNG\n      // querySelectorAll('.modal-resizable') toàn document — query đó ghi đè inline width/right\n      // lên mọi phần tử trùng class, kể cả markup của component khác không liên quan.\n      this.#registry.panels().forEach(item => {\n        if (item.classList.contains('c-minium')) {\n          item.style.setProperty('width', `${minimumWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n          totalRight += minimumWidth + 8;\n          return;\n        }\n\n        if (item.classList.contains('c-closed')) {\n          return;\n        }\n\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\n        if (Number.isNaN(expandedWidth)) {\n          return;\n        }\n\n        if (item.classList.contains('c-fullscreen')) {\n          item.style.setProperty('width', 'calc(100% - 16px)');\n          item.style.setProperty('right', '8px');\n        } else {\n          item.style.setProperty('width', `${expandedWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n        }\n        totalRight += expandedWidth + 8;\n      });\n    }, 200);\n  };\n\n  #getElement() {\n    return document.getElementById(this.id);\n  }\n\n  #detectChanges() {\n    this.#ref.markForCheck();\n    this.#embeddedViewRef?.detectChanges();\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -48,6 +48,32 @@ class SdModal {
     constructor() {
         this.#isMobile = BrowserUtilities.isMobile();
     }
+    // why: PHẢI là ngOnDestroy, KHÔNG phải #destroyRef.onDestroy. Angular chạy executeOnDestroys
+    // (ngOnDestroy) TRƯỚC processCleanups (mọi callback DestroyRef.onDestroy). `sdClosed = output()`
+    // tự đăng ký một DestroyRef.onDestroy trong constructor của OutputEmitterRef ngay lúc khởi tạo
+    // field — tức TRƯỚC hook nào đăng ký trong constructor của component. Đăng ký ở constructor thì
+    // tới lượt mình chạy, emitter đã `destroyed = true` và `emit()` chỉ log cảnh báo rồi thoát.
+    ngOnDestroy() {
+        // why: overlay của MatDialog/MatBottomSheet sống trong CDK overlay container ở <body>,
+        // KHÔNG nằm trong view của <sd-modal>. Host bị destroy (điều hướng route, @if tắt nhánh…)
+        // mà không close ref thì overlay + backdrop ở lại mồ côi, che và chặn click cả trang.
+        // Dùng forceClose (không qua beforeClose) vì đã destroy thì không thể huỷ việc đóng.
+        //
+        // Emit TRƯỚC khi forceClose: afterClosed()/afterDismissed() bắn BẤT ĐỒNG BỘ, mà subscription
+        // của chúng dùng takeUntilDestroyed(#destroyRef) nên đã bị gỡ trước khi tới lượt. Không emit
+        // ở đây thì destroy một modal đang mở sẽ đóng overlay mà KHÔNG bao giờ báo (sdClosed).
+        this.#markClosed();
+        this.forceClose();
+    }
+    // why: idempotent — chốt trên isOpened(). Đường destroy emit trước, nếu sau đó
+    // afterClosed()/afterDismissed() vẫn kịp bắn thì lần thứ hai là no-op, không double-emit.
+    #markClosed = () => {
+        if (!this.isOpened())
+            return;
+        this.isOpened.set(false);
+        this.#closeRequest = undefined;
+        this.sdClosed.emit();
+    };
     #resolveWidth() {
         const w = this.width() || '80vw';
         if (this.#isMobile)
@@ -78,14 +104,7 @@ class SdModal {
                 disableClose: this.disableBackdropClose() || !!this.beforeClose(),
             });
             this.#bindGuardedDismiss(this.#bottomSheetRef);
-            this.#bottomSheetRef
-                .afterDismissed()
-                .pipe(takeUntilDestroyed(this.#destroyRef))
-                .subscribe(() => {
-                this.isOpened.set(false);
-                this.#closeRequest = undefined;
-                this.sdClosed.emit();
-            });
+            this.#bottomSheetRef.afterDismissed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);
         }
         else {
             this.#dialogRef = this.#dialog.open(this.templateRef(), {
@@ -95,14 +114,7 @@ class SdModal {
                 disableClose: this.disableBackdropClose() || !!this.beforeClose(),
             });
             this.#bindGuardedDismiss(this.#dialogRef);
-            this.#dialogRef
-                .afterClosed()
-                .pipe(takeUntilDestroyed(this.#destroyRef))
-                .subscribe(() => {
-                this.isOpened.set(false);
-                this.#closeRequest = undefined;
-                this.sdClosed.emit();
-            });
+            this.#dialogRef.afterClosed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);
         }
     };
     close = () => {
@@ -179,11 +191,11 @@ class SdModal {
         return classes;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdCloseError: "sdCloseError" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdCloseError: "sdCloseError" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-root button:focus-visible{outline:2px solid var(--sd-primary, #005cbb)!important;outline-offset:2px}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"] }]
+            args: [{ selector: 'sd-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-root button:focus-visible{outline:2px solid var(--sd-primary, #005cbb)!important;outline-offset:2px}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/sdcorejs-angular-components-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-modal.mjs","sources":["../../../projects/sdcorejs-angular/components/modal/src/modal.component.ts","../../../projects/sdcorejs-angular/components/modal/src/modal.component.html","../../../projects/sdcorejs-angular/components/modal/sdcorejs-angular-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { Observable } from 'rxjs';\n\nexport type SdModalBeforeClose = () => boolean | Promise<boolean>;\n\ninterface SdModalDismissRef {\n  backdropClick?: () => Observable<MouseEvent>;\n  keydownEvents?: () => Observable<KeyboardEvent>;\n}\n\n@Component({\n  selector: 'sd-modal',\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\n})\nexport class SdModal {\n  static index = signal(0);\n\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\n  modal = viewChild<ElementRef>('modal');\n\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\n\n  title = input<string, string | null | undefined>('', { transform: v => v ?? '' });\n  color = input<Color, Color | null | undefined>('primary', { transform: v => v ?? 'primary' });\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: v => v ?? 'md' });\n  height = input<string, string | null | undefined>('auto', { transform: v => v ?? 'auto' });\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, {\n    transform: v => v ?? undefined,\n  });\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', {\n    transform: v => v ?? '',\n  });\n  lazyLoadContent = input(true, { transform: booleanAttribute });\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\n  beforeClose = input<SdModalBeforeClose | undefined>(undefined);\n\n  sdClosed = output<void>();\n  sdCloseError = output<unknown>();\n\n  isOpened = signal(false);\n  alreadyOpened = signal(false);\n\n  #isMobile = false;\n  #resolvedWidth = 'md';\n  #bottomSheetRef!: MatBottomSheetRef<any>;\n  #dialogRef!: MatDialogRef<any>;\n  #closeRequest?: Promise<boolean>;\n\n  #dialog = inject(MatDialog);\n  #bottomSheet = inject(MatBottomSheet);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    this.#isMobile = BrowserUtilities.isMobile();\n  }\n\n  #resolveWidth(): string {\n    const w = this.width() || '80vw';\n    if (this.#isMobile) return w;\n    switch (w) {\n      case 'lg':\n        return '80vw';\n      case 'md':\n        return '60vw';\n      case 'sm':\n        return '40vw';\n      case 'sx':\n        return '20vw';\n      default:\n        return w;\n    }\n  }\n\n  open = (): void => {\n    if (this.isOpened()) {\n      return;\n    }\n    this.alreadyOpened.set(true);\n    this.isOpened.set(true);\n    this.#resolvedWidth = this.#resolveWidth();\n\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\n        panelClass: this.#resolvePanelClass('sd-modal-bottom-sheet-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#bottomSheetRef);\n      this.#bottomSheetRef\n        .afterDismissed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.#closeRequest = undefined;\n          this.sdClosed.emit();\n        });\n    } else {\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\n        width: this.#resolvedWidth,\n        maxWidth: this.#resolvedWidth,\n        panelClass: this.#resolvePanelClass('sd-modal-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#dialogRef);\n      this.#dialogRef\n        .afterClosed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.#closeRequest = undefined;\n          this.sdClosed.emit();\n        });\n    }\n  };\n\n  close = (): void => {\n    if (this.beforeClose()) {\n      void this.requestClose();\n      return;\n    }\n    this.forceClose();\n  };\n\n  requestClose = (): Promise<boolean> => {\n    const guard = this.beforeClose();\n    if (!guard) {\n      this.forceClose();\n      return Promise.resolve(true);\n    }\n    if (this.#closeRequest) return this.#closeRequest;\n\n    const request = Promise.resolve()\n      .then(() => guard())\n      .then(canClose => {\n        if (!canClose) return false;\n        this.forceClose();\n        return true;\n      })\n      .catch((error: unknown) => {\n        this.sdCloseError.emit(error);\n        return false;\n      });\n\n    this.#closeRequest = request;\n    void request.finally(() => {\n      if (this.#closeRequest === request) this.#closeRequest = undefined;\n    });\n    return request;\n  };\n\n  forceClose = (): void => {\n    this.#bottomSheetRef?.dismiss();\n    this.#dialogRef?.close();\n  };\n\n  #bindGuardedDismiss(ref: MatDialogRef<any> | MatBottomSheetRef<any>): void {\n    if (!this.beforeClose() || this.disableBackdropClose()) return;\n\n    const dismissRef = ref as SdModalDismissRef;\n    dismissRef\n      .backdropClick?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(() => this.close());\n    dismissRef\n      .keydownEvents?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe((event: KeyboardEvent) => {\n        if (event.key === 'Escape') this.close();\n      });\n  }\n\n  #resolvePanelClass(baseClass: string): string[] {\n    const customClass = this.modalClass();\n    const classes = [baseClass];\n\n    if (typeof customClass === 'string') {\n      classes.push(...customClass.split(/\\s+/).filter(Boolean));\n      return classes;\n    }\n\n    if (Array.isArray(customClass)) {\n      classes.push(...customClass.filter(Boolean));\n      return classes;\n    }\n\n    if (customClass && typeof customClass === 'object') {\n      Object.entries(customClass).forEach(([className, enabled]) => {\n        if (enabled) classes.push(className);\n      });\n    }\n\n    return classes;\n  }\n}\n","<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\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-modal.mjs","sources":["../../../projects/sdcorejs-angular/components/modal/src/modal.component.ts","../../../projects/sdcorejs-angular/components/modal/src/modal.component.html","../../../projects/sdcorejs-angular/components/modal/sdcorejs-angular-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  OnDestroy,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { Observable } from 'rxjs';\n\nexport type SdModalBeforeClose = () => boolean | Promise<boolean>;\n\ninterface SdModalDismissRef {\n  backdropClick?: () => Observable<MouseEvent>;\n  keydownEvents?: () => Observable<KeyboardEvent>;\n}\n\n@Component({\n  selector: 'sd-modal',\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\n})\nexport class SdModal implements OnDestroy {\n  static index = signal(0);\n\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\n  modal = viewChild<ElementRef>('modal');\n\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\n\n  title = input<string, string | null | undefined>('', { transform: v => v ?? '' });\n  color = input<Color, Color | null | undefined>('primary', { transform: v => v ?? 'primary' });\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: v => v ?? 'md' });\n  height = input<string, string | null | undefined>('auto', { transform: v => v ?? 'auto' });\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, {\n    transform: v => v ?? undefined,\n  });\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', {\n    transform: v => v ?? '',\n  });\n  lazyLoadContent = input(true, { transform: booleanAttribute });\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\n  beforeClose = input<SdModalBeforeClose | undefined>(undefined);\n\n  sdClosed = output<void>();\n  sdCloseError = output<unknown>();\n\n  isOpened = signal(false);\n  alreadyOpened = signal(false);\n\n  #isMobile = false;\n  #resolvedWidth = 'md';\n  #bottomSheetRef!: MatBottomSheetRef<any>;\n  #dialogRef!: MatDialogRef<any>;\n  #closeRequest?: Promise<boolean>;\n\n  #dialog = inject(MatDialog);\n  #bottomSheet = inject(MatBottomSheet);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    this.#isMobile = BrowserUtilities.isMobile();\n  }\n\n  // why: PHẢI là ngOnDestroy, KHÔNG phải #destroyRef.onDestroy. Angular chạy executeOnDestroys\n  // (ngOnDestroy) TRƯỚC processCleanups (mọi callback DestroyRef.onDestroy). `sdClosed = output()`\n  // tự đăng ký một DestroyRef.onDestroy trong constructor của OutputEmitterRef ngay lúc khởi tạo\n  // field — tức TRƯỚC hook nào đăng ký trong constructor của component. Đăng ký ở constructor thì\n  // tới lượt mình chạy, emitter đã `destroyed = true` và `emit()` chỉ log cảnh báo rồi thoát.\n  ngOnDestroy(): void {\n    // why: overlay của MatDialog/MatBottomSheet sống trong CDK overlay container ở <body>,\n    // KHÔNG nằm trong view của <sd-modal>. Host bị destroy (điều hướng route, @if tắt nhánh…)\n    // mà không close ref thì overlay + backdrop ở lại mồ côi, che và chặn click cả trang.\n    // Dùng forceClose (không qua beforeClose) vì đã destroy thì không thể huỷ việc đóng.\n    //\n    // Emit TRƯỚC khi forceClose: afterClosed()/afterDismissed() bắn BẤT ĐỒNG BỘ, mà subscription\n    // của chúng dùng takeUntilDestroyed(#destroyRef) nên đã bị gỡ trước khi tới lượt. Không emit\n    // ở đây thì destroy một modal đang mở sẽ đóng overlay mà KHÔNG bao giờ báo (sdClosed).\n    this.#markClosed();\n    this.forceClose();\n  }\n\n  // why: idempotent — chốt trên isOpened(). Đường destroy emit trước, nếu sau đó\n  // afterClosed()/afterDismissed() vẫn kịp bắn thì lần thứ hai là no-op, không double-emit.\n  #markClosed = (): void => {\n    if (!this.isOpened()) return;\n    this.isOpened.set(false);\n    this.#closeRequest = undefined;\n    this.sdClosed.emit();\n  };\n\n  #resolveWidth(): string {\n    const w = this.width() || '80vw';\n    if (this.#isMobile) return w;\n    switch (w) {\n      case 'lg':\n        return '80vw';\n      case 'md':\n        return '60vw';\n      case 'sm':\n        return '40vw';\n      case 'sx':\n        return '20vw';\n      default:\n        return w;\n    }\n  }\n\n  open = (): void => {\n    if (this.isOpened()) {\n      return;\n    }\n    this.alreadyOpened.set(true);\n    this.isOpened.set(true);\n    this.#resolvedWidth = this.#resolveWidth();\n\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\n        panelClass: this.#resolvePanelClass('sd-modal-bottom-sheet-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#bottomSheetRef);\n      this.#bottomSheetRef.afterDismissed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);\n    } else {\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\n        width: this.#resolvedWidth,\n        maxWidth: this.#resolvedWidth,\n        panelClass: this.#resolvePanelClass('sd-modal-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#dialogRef);\n      this.#dialogRef.afterClosed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);\n    }\n  };\n\n  close = (): void => {\n    if (this.beforeClose()) {\n      void this.requestClose();\n      return;\n    }\n    this.forceClose();\n  };\n\n  requestClose = (): Promise<boolean> => {\n    const guard = this.beforeClose();\n    if (!guard) {\n      this.forceClose();\n      return Promise.resolve(true);\n    }\n    if (this.#closeRequest) return this.#closeRequest;\n\n    const request = Promise.resolve()\n      .then(() => guard())\n      .then(canClose => {\n        if (!canClose) return false;\n        this.forceClose();\n        return true;\n      })\n      .catch((error: unknown) => {\n        this.sdCloseError.emit(error);\n        return false;\n      });\n\n    this.#closeRequest = request;\n    void request.finally(() => {\n      if (this.#closeRequest === request) this.#closeRequest = undefined;\n    });\n    return request;\n  };\n\n  forceClose = (): void => {\n    this.#bottomSheetRef?.dismiss();\n    this.#dialogRef?.close();\n  };\n\n  #bindGuardedDismiss(ref: MatDialogRef<any> | MatBottomSheetRef<any>): void {\n    if (!this.beforeClose() || this.disableBackdropClose()) return;\n\n    const dismissRef = ref as SdModalDismissRef;\n    dismissRef\n      .backdropClick?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(() => this.close());\n    dismissRef\n      .keydownEvents?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe((event: KeyboardEvent) => {\n        if (event.key === 'Escape') this.close();\n      });\n  }\n\n  #resolvePanelClass(baseClass: string): string[] {\n    const customClass = this.modalClass();\n    const classes = [baseClass];\n\n    if (typeof customClass === 'string') {\n      classes.push(...customClass.split(/\\s+/).filter(Boolean));\n      return classes;\n    }\n\n    if (Array.isArray(customClass)) {\n      classes.push(...customClass.filter(Boolean));\n      return classes;\n    }\n\n    if (customClass && typeof customClass === 'object') {\n      Object.entries(customClass).forEach(([className, enabled]) => {\n        if (enabled) classes.push(className);\n      });\n    }\n\n    return classes;\n  }\n}\n","<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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"] }]
         }] });
 
 /**