@sd-angular/core 19.0.3 → 19.0.5

package/fesm2022/sd-angular-core-components-modal-resizable.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, booleanAttribute, output, inject, ViewContainerRef, ApplicationRef, Injector, ChangeDetectorRef, DestroyRef, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, input, booleanAttribute, output, inject, ChangeDetectorRef, DestroyRef, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i3 from '@angular/cdk/portal';
 import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
@@ -18,9 +18,6 @@ class SdModalResizable {
     width = input('480px');
     editingChanged = output();
     #embeddedViewRef;
-    #viewContainerRef = inject(ViewContainerRef);
-    #ar = inject(ApplicationRef);
-    #injector = inject(Injector);
     #ref = inject(ChangeDetectorRef);
     #loadingService = inject(SdLoadingService);
     #destroyRef = inject(DestroyRef);
@@ -32,7 +29,10 @@ class SdModalResizable {
     isMaximum = signal(false);
     constructor() {
         afterNextRender(() => {
-            const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);
+            // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →
+            // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích
+            // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).
+            const outlet = new DomPortalOutlet(document.body);
             this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());
             this.#detectChanges();
         });

package/fesm2022/sd-angular-core-components-modal-resizable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-modal-resizable.mjs","sources":["../../../projects/sd-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sd-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sd-angular/components/modal-resizable/sd-angular-core-components-modal-resizable.ts"],"sourcesContent":["import {\r\n  ApplicationRef,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  DestroyRef,\r\n  EmbeddedViewRef,\r\n  Injector,\r\n  ViewContainerRef,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\n\r\n@Component({\r\n  selector: 'sd-modal-resizable',\r\n  templateUrl: './modal-resizable.component.html',\r\n  styleUrls: ['./modal-resizable.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule],\r\n})\r\nexport class SdModalResizable {\r\n  readonly id = `I${uuid.v4()}`;\r\n  readonly portal = viewChild.required(CdkPortal);\r\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n  readonly width = input<string>('480px');\r\n  readonly editingChanged = output<boolean>();\r\n  #embeddedViewRef!: EmbeddedViewRef<any>;\r\n  readonly #viewContainerRef = inject(ViewContainerRef);\r\n  readonly #ar = inject(ApplicationRef);\r\n  readonly #injector = inject(Injector);\r\n  readonly #ref = inject(ChangeDetectorRef);\r\n  readonly #loadingService = inject(SdLoadingService);\r\n  readonly #destroyRef = inject(DestroyRef);\r\n  readonly isEditing = signal(false);\r\n  readonly isOpened = signal(false);\r\n  readonly isHover = signal(false);\r\n  readonly isLoading = signal(false);\r\n  readonly isMinimum = signal(false);\r\n  readonly isMaximum = signal(false);\r\n\r\n  constructor() {\r\n    afterNextRender(() => {\r\n      const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\r\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\r\n      this.#detectChanges();\r\n    });\r\n\r\n    this.#destroyRef.onDestroy(() => {\r\n      this.#embeddedViewRef?.destroy();\r\n    });\r\n  }\r\n\r\n  open = () => {\r\n    this.isOpened.set(true);\r\n    this.#detectChanges();\r\n\r\n    const element = this.#getElement();\r\n    if (element && !element.classList.contains('c-minium')) {\r\n      setTimeout(() => {\r\n        const maximumWidth = element.offsetWidth;\r\n        if (maximumWidth > 0) {\r\n          element.dataset['width'] = maximumWidth.toString();\r\n        }\r\n        element.classList.remove('c-closed');\r\n      }, 100);\r\n    }\r\n\r\n    this.maximize();\r\n  };\r\n\r\n  close = () => {\r\n    this.isOpened.set(false);\r\n    this.#detectChanges();\r\n    setTimeout(() => {\r\n      const element = this.#getElement();\r\n      element?.style.setProperty('width', '0px');\r\n      element?.style.setProperty('right', '0px');\r\n      element?.classList.remove('c-minium');\r\n      element?.classList.add('c-closed');\r\n    }, 100);\r\n    this.stopLoading();\r\n\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  minimize = () => {\r\n    this.isMinimum.set(true);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  maximize = () => {\r\n    this.isMinimum.set(false);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  toggleMaximum = () => {\r\n    this.isMaximum.update(isMaximum => !isMaximum);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  startLoading = () => {\r\n    this.isLoading.set(true);\r\n    this.#detectChanges();\r\n    this.#loadingService.stop(`#${this.id}`);\r\n    this.#loadingService.start(`#${this.id}`);\r\n  };\r\n\r\n  stopLoading = () => {\r\n    this.isLoading.set(false);\r\n    this.#detectChanges();\r\n    this.#loadingService.stop(`#${this.id}`);\r\n  };\r\n\r\n  toggleEditable() {\r\n    this.isEditing.update(isEditing => !isEditing);\r\n    this.#detectChanges();\r\n    this.editingChanged.emit(this.isEditing());\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isHover.set(true);\r\n  };\r\n\r\n  onBlur = () => {\r\n    this.isHover.set(false);\r\n  };\r\n\r\n  #arrangePanels = () => {\r\n    setTimeout(() => {\r\n      let totalRight = 0;\r\n      const minimumWidth = 300;\r\n      document.querySelectorAll<HTMLElement>('.modal-resizable').forEach(item => {\r\n        if (item.classList.contains('c-minium')) {\r\n          item.style.setProperty('width', `${minimumWidth}px`);\r\n          item.style.setProperty('right', `${totalRight}px`);\r\n          totalRight += minimumWidth + 8;\r\n          return;\r\n        }\r\n\r\n        if (item.classList.contains('c-closed')) {\r\n          return;\r\n        }\r\n\r\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\r\n        if (Number.isNaN(expandedWidth)) {\r\n          return;\r\n        }\r\n\r\n        if (item.classList.contains('c-fullscreen')) {\r\n          item.style.setProperty('width', 'calc(100% - 16px)');\r\n          item.style.setProperty('right', '8px');\r\n        } else {\r\n          item.style.setProperty('width', `${expandedWidth}px`);\r\n          item.style.setProperty('right', `${totalRight}px`);\r\n        }\r\n        totalRight += expandedWidth + 8;\r\n      });\r\n    }, 200);\r\n  };\r\n\r\n  #getElement() {\r\n    return document.getElementById(this.id);\r\n  }\r\n\r\n  #detectChanges() {\r\n    this.#ref.markForCheck();\r\n    this.#embeddedViewRef?.detectChanges();\r\n  }\r\n}\r\n","<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"modal-resizable\"\r\n    [style.width]=\"width()\"\r\n    [class.modal-resizable--active]=\"isOpened()\"\r\n    [class.modal-resizable--loading]=\"isLoading()\"\r\n    [class.c-minium]=\"isMinimum()\"\r\n    [class.c-fullscreen]=\"isMaximum()\"\r\n    (mouseover)=\"onFocus()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseout)=\"onBlur()\"\r\n    (blur)=\"onBlur()\">\r\n    @if (isOpened()) {\r\n      <div class=\"modal-resizable__header\">\r\n        <div class=\"modal-resizable__title\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-resizable__actions\">\r\n          @if (!isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (!isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\r\n              <mat-icon>open_in_full</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\r\n              <mat-icon>fullscreen_exit</mat-icon>\r\n            </button>\r\n          }\r\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__body\">\r\n        <div class=\"modal-resizable__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-components-modal-resizable.mjs","sources":["../../../projects/sd-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sd-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sd-angular/components/modal-resizable/sd-angular-core-components-modal-resizable.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  DestroyRef,\r\n  EmbeddedViewRef,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\n\r\n@Component({\r\n  selector: 'sd-modal-resizable',\r\n  templateUrl: './modal-resizable.component.html',\r\n  styleUrls: ['./modal-resizable.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule],\r\n})\r\nexport class SdModalResizable {\r\n  readonly id = `I${uuid.v4()}`;\r\n  readonly portal = viewChild.required(CdkPortal);\r\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n  readonly width = input<string>('480px');\r\n  readonly editingChanged = output<boolean>();\r\n  #embeddedViewRef!: EmbeddedViewRef<any>;\r\n  readonly #ref = inject(ChangeDetectorRef);\r\n  readonly #loadingService = inject(SdLoadingService);\r\n  readonly #destroyRef = inject(DestroyRef);\r\n  readonly isEditing = signal(false);\r\n  readonly isOpened = signal(false);\r\n  readonly isHover = signal(false);\r\n  readonly isLoading = signal(false);\r\n  readonly isMinimum = signal(false);\r\n  readonly isMaximum = signal(false);\r\n\r\n  constructor() {\r\n    afterNextRender(() => {\r\n      // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →\r\n      // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích\r\n      // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).\r\n      const outlet = new DomPortalOutlet(document.body);\r\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\r\n      this.#detectChanges();\r\n    });\r\n\r\n    this.#destroyRef.onDestroy(() => {\r\n      this.#embeddedViewRef?.destroy();\r\n    });\r\n  }\r\n\r\n  open = () => {\r\n    this.isOpened.set(true);\r\n    this.#detectChanges();\r\n\r\n    const element = this.#getElement();\r\n    if (element && !element.classList.contains('c-minium')) {\r\n      setTimeout(() => {\r\n        const maximumWidth = element.offsetWidth;\r\n        if (maximumWidth > 0) {\r\n          element.dataset['width'] = maximumWidth.toString();\r\n        }\r\n        element.classList.remove('c-closed');\r\n      }, 100);\r\n    }\r\n\r\n    this.maximize();\r\n  };\r\n\r\n  close = () => {\r\n    this.isOpened.set(false);\r\n    this.#detectChanges();\r\n    setTimeout(() => {\r\n      const element = this.#getElement();\r\n      element?.style.setProperty('width', '0px');\r\n      element?.style.setProperty('right', '0px');\r\n      element?.classList.remove('c-minium');\r\n      element?.classList.add('c-closed');\r\n    }, 100);\r\n    this.stopLoading();\r\n\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  minimize = () => {\r\n    this.isMinimum.set(true);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  maximize = () => {\r\n    this.isMinimum.set(false);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  toggleMaximum = () => {\r\n    this.isMaximum.update(isMaximum => !isMaximum);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  startLoading = () => {\r\n    this.isLoading.set(true);\r\n    this.#detectChanges();\r\n    this.#loadingService.stop(`#${this.id}`);\r\n    this.#loadingService.start(`#${this.id}`);\r\n  };\r\n\r\n  stopLoading = () => {\r\n    this.isLoading.set(false);\r\n    this.#detectChanges();\r\n    this.#loadingService.stop(`#${this.id}`);\r\n  };\r\n\r\n  toggleEditable() {\r\n    this.isEditing.update(isEditing => !isEditing);\r\n    this.#detectChanges();\r\n    this.editingChanged.emit(this.isEditing());\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isHover.set(true);\r\n  };\r\n\r\n  onBlur = () => {\r\n    this.isHover.set(false);\r\n  };\r\n\r\n  #arrangePanels = () => {\r\n    setTimeout(() => {\r\n      let totalRight = 0;\r\n      const minimumWidth = 300;\r\n      document.querySelectorAll<HTMLElement>('.modal-resizable').forEach(item => {\r\n        if (item.classList.contains('c-minium')) {\r\n          item.style.setProperty('width', `${minimumWidth}px`);\r\n          item.style.setProperty('right', `${totalRight}px`);\r\n          totalRight += minimumWidth + 8;\r\n          return;\r\n        }\r\n\r\n        if (item.classList.contains('c-closed')) {\r\n          return;\r\n        }\r\n\r\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\r\n        if (Number.isNaN(expandedWidth)) {\r\n          return;\r\n        }\r\n\r\n        if (item.classList.contains('c-fullscreen')) {\r\n          item.style.setProperty('width', 'calc(100% - 16px)');\r\n          item.style.setProperty('right', '8px');\r\n        } else {\r\n          item.style.setProperty('width', `${expandedWidth}px`);\r\n          item.style.setProperty('right', `${totalRight}px`);\r\n        }\r\n        totalRight += expandedWidth + 8;\r\n      });\r\n    }, 200);\r\n  };\r\n\r\n  #getElement() {\r\n    return document.getElementById(this.id);\r\n  }\r\n\r\n  #detectChanges() {\r\n    this.#ref.markForCheck();\r\n    this.#embeddedViewRef?.detectChanges();\r\n  }\r\n}\r\n","<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"modal-resizable\"\r\n    [style.width]=\"width()\"\r\n    [class.modal-resizable--active]=\"isOpened()\"\r\n    [class.modal-resizable--loading]=\"isLoading()\"\r\n    [class.c-minium]=\"isMinimum()\"\r\n    [class.c-fullscreen]=\"isMaximum()\"\r\n    (mouseover)=\"onFocus()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseout)=\"onBlur()\"\r\n    (blur)=\"onBlur()\">\r\n    @if (isOpened()) {\r\n      <div class=\"modal-resizable__header\">\r\n        <div class=\"modal-resizable__title\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-resizable__actions\">\r\n          @if (!isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (!isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\r\n              <mat-icon>open_in_full</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\r\n              <mat-icon>fullscreen_exit</mat-icon>\r\n            </button>\r\n          }\r\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__body\">\r\n        <div class=\"modal-resizable__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MA8Ba,gBAAgB,CAAA;AAClB,IAAA,EAAE,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,EAAE,EAAE;AACpB,IAAA,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;IACtC,QAAQ,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAC/E,IAAA,KAAK,GAAG,KAAK,CAAS,OAAO,CAAC;IAC9B,cAAc,GAAG,MAAM,EAAW;AAC3C,IAAA,gBAAgB;AACP,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAChC,IAAA,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC1C,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACzB,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;AACxB,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;AACvB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACzB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACzB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AAElC,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;;;;YAInB,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjD,YAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAClE,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAK;AAC9B,YAAA,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE;AAClC,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAG,MAAK;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE;AAErB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,QAAA,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACtD,UAAU,CAAC,MAAK;AACd,gBAAA,MAAM,YAAY,GAAG,OAAO,CAAC,WAAW;AACxC,gBAAA,IAAI,YAAY,GAAG,CAAC,EAAE;oBACpB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,QAAQ,EAAE;gBACpD;AACA,gBAAA,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;YACtC,CAAC,EAAE,GAAG,CAAC;QACT;QAEA,IAAI,CAAC,QAAQ,EAAE;AACjB,IAAA,CAAC;IAED,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE;QACrB,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;YAClC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;YAC1C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,YAAA,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;AACrC,YAAA,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;QACpC,CAAC,EAAE,GAAG,CAAC;QACP,IAAI,CAAC,WAAW,EAAE;QAElB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,QAAQ,GAAG,MAAK;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,QAAQ,GAAG,MAAK;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,aAAa,GAAG,MAAK;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,YAAY,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;QACxC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC3C,IAAA,CAAC;IAED,WAAW,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC1C,IAAA,CAAC;IAED,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;IAC5C;IAEA,OAAO,GAAG,MAAK;AACb,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,IAAA,CAAC;IAED,MAAM,GAAG,MAAK;AACZ,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC;IAED,cAAc,GAAG,MAAK;QACpB,UAAU,CAAC,MAAK;YACd,IAAI,UAAU,GAAG,CAAC;YAClB,MAAM,YAAY,GAAG,GAAG;YACxB,QAAQ,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;gBACxE,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;oBACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI,CAAC;oBACpD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI,CAAC;AAClD,oBAAA,UAAU,IAAI,YAAY,GAAG,CAAC;oBAC9B;gBACF;gBAEA,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;oBACvC;gBACF;AAEA,gBAAA,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;AACtE,gBAAA,IAAI,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;oBAC/B;gBACF;gBAEA,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;oBAC3C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,mBAAmB,CAAC;oBACpD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;gBACxC;qBAAO;oBACL,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,CAAC;oBACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI,CAAC;gBACpD;AACA,gBAAA,UAAU,IAAI,aAAa,GAAG,CAAC;AACjC,YAAA,CAAC,CAAC;QACJ,CAAC,EAAE,GAAG,CAAC;AACT,IAAA,CAAC;IAED,WAAW,GAAA;QACT,OAAO,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IACzC;IAEA,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxB,QAAA,IAAI,CAAC,gBAAgB,EAAE,aAAa,EAAE;IACxC;wGAtJW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAEU,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChChD,oyEAuDA,EAAA,MAAA,EAAA,CAAA,k2MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED3BY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,2IAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE1E,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,mBAGb,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,oyEAAA,EAAA,MAAA,EAAA,CAAA,k2MAAA,CAAA,EAAA;;;AE5BxF;;AAEG;;;;"}

package/fesm2022/sd-angular-core-components-org-chart.mjs

@@ -0,0 +1,110 @@
+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 * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+class SdOrgChartItemDefDirective {
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOrgChartItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SdOrgChartItemDefDirective, isStandalone: true, selector: "[sdOrgChartItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOrgChartItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdOrgChartItemDef]',
+                }]
+        }] });
+
+class SdOrgChart {
+    autoIdInput = input(undefined, { alias: 'autoId' });
+    option = input(undefined);
+    autoId = computed(() => {
+        const scope = this.option()?.autoId ?? this.autoIdInput();
+        return scope ? `components-org-chart-${scope}` : undefined;
+    });
+    items = input(undefined);
+    itemTemplate = input(undefined);
+    collapsible = input(true, { transform: booleanAttribute });
+    itemDef = contentChild(SdOrgChartItemDefDirective);
+    resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);
+    resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());
+    resolvedItemTemplate = computed(() => {
+        return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;
+    });
+    #expandedState = signal({});
+    trackByItem = (_index, item) => item.id;
+    hasChildren = (item) => {
+        return this.childrenOf(item).length > 0;
+    };
+    childrenOf = (item) => {
+        return item.children || [];
+    };
+    isExpanded = (item) => {
+        if (!this.resolvedCollapsible()) {
+            return true;
+        }
+        const key = this.#itemKey(item);
+        const state = this.#expandedState();
+        return state[key] ?? item.expanded ?? true;
+    };
+    toggle = (item, event) => {
+        event?.stopPropagation();
+        if (!this.resolvedCollapsible() || !this.hasChildren(item)) {
+            return;
+        }
+        const key = this.#itemKey(item);
+        const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);
+        this.#expandedState.update(state => ({
+            ...state,
+            [key]: expanded,
+        }));
+        this.option()?.onToggle?.({ item, expanded });
+    };
+    createContext = (item, depth, parent) => {
+        const hasChildren = this.hasChildren(item);
+        const expanded = this.isExpanded(item);
+        return {
+            $implicit: item,
+            item,
+            depth,
+            parent,
+            expanded,
+            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);
+    };
+    #autoIdKey = (item) => {
+        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 _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _items; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\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, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-autoid]': 'autoId()',
+                    }, template: "@let _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _items; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\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, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdOrgChart, SdOrgChartItemDefDirective };
+//# sourceMappingURL=sd-angular-core-components-org-chart.mjs.map

package/fesm2022/sd-angular-core-components-org-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-org-chart.mjs","sources":["../../../projects/sd-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sd-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sd-angular/components/org-chart/src/org-chart.component.html","../../../projects/sd-angular/components/org-chart/sd-angular-core-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\r\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\r\n\r\n@Directive({\r\n  selector: '[sdOrgChartItemDef]',\r\n})\r\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\r\n  static ngTemplateContextGuard<T extends SdOrgChartItem>(\r\n    _dir: SdOrgChartItemDefDirective<T>,\r\n    _ctx: unknown\r\n  ): _ctx is SdOrgChartItemContext<T> {\r\n    return true;\r\n  }\r\n\r\n  readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, TemplateRef, booleanAttribute, computed, contentChild, input, signal } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\r\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\n\r\n@Component({\r\n  selector: 'sd-org-chart',\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule],\r\n  templateUrl: './org-chart.component.html',\r\n  styleUrls: ['./org-chart.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[attr.data-autoid]': 'autoId()',\r\n  },\r\n})\r\nexport class SdOrgChart {\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly option = input<SdOrgChartOption | undefined>(undefined);\n  readonly autoId = computed(() => {\n    const scope = this.option()?.autoId ?? this.autoIdInput();\n    return scope ? `components-org-chart-${scope}` : undefined;\n  });\n\n  readonly items = input<SdOrgChartItem[] | undefined>(undefined);\n  readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> | undefined | null>(undefined);\n  readonly collapsible = input(true, { transform: booleanAttribute });\n\n  readonly itemDef = contentChild(SdOrgChartItemDefDirective);\n  readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\n  readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\n\n  readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> | undefined>(() => {\n    return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;\n  });\n\r\n  readonly #expandedState = signal<Record<string, boolean>>({});\r\n\r\n  readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\r\n\r\n  hasChildren = (item: SdOrgChartItem): boolean => {\r\n    return this.childrenOf(item).length > 0;\r\n  };\r\n\r\n  childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\r\n    return item.children || [];\r\n  };\r\n\r\n  isExpanded = (item: SdOrgChartItem): boolean => {\r\n    if (!this.resolvedCollapsible()) {\n      return true;\r\n    }\r\n\r\n    const key = this.#itemKey(item);\r\n    const state = this.#expandedState();\r\n    return state[key] ?? item.expanded ?? true;\r\n  };\r\n\r\n  toggle = (item: SdOrgChartItem, event?: Event): void => {\r\n    event?.stopPropagation();\r\n\r\n    if (!this.resolvedCollapsible() || !this.hasChildren(item)) {\n      return;\n    }\n\n    const key = this.#itemKey(item);\n    const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\n    this.#expandedState.update(state => ({\n      ...state,\n      [key]: expanded,\n    }));\n    this.option()?.onToggle?.({ item, expanded });\n  };\n\r\n  createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem | null): SdOrgChartItemContext => {\r\n    const hasChildren = this.hasChildren(item);\r\n    const expanded = this.isExpanded(item);\r\n\r\n    return {\r\n      $implicit: item,\r\n      item,\r\n      depth,\r\n      parent,\r\n      expanded,\r\n      hasChildren,\r\n      isLeaf: !hasChildren,\r\n      toggle: () => this.toggle(item),\r\n    };\r\n  };\r\n\r\n  nodeAutoId = (item: SdOrgChartItem, part: 'node' | 'image' | 'title' | 'description' | 'toggle'): string | undefined => {\r\n    const base = this.autoId();\r\n    if (!base) {\r\n      return undefined;\r\n    }\r\n\r\n    return `${base}-${part}-${this.#autoIdKey(item)}`;\r\n  };\r\n\r\n  #itemKey = (item: SdOrgChartItem): string => {\r\n    return String(item.id);\r\n  };\r\n\r\n  #autoIdKey = (item: SdOrgChartItem): string => {\r\n    return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\r\n  };\r\n}\r\n","@let _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\r\n\r\n<div class=\"sd-org-chart\" role=\"tree\">\r\n  <ul class=\"sd-org-chart__tree\">\r\n    @for (item of _items; track trackByItem($index, item)) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\r\n  @let _children = childrenOf(item);\r\n  @let _hasChildren = _children.length > 0;\r\n  @let _expanded = isExpanded(item);\r\n  @let _context = createContext(item, depth, parent);\r\n\r\n  <li\r\n    class=\"sd-org-chart__node\"\r\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\r\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\r\n    <div class=\"sd-org-chart__node-shell\">\r\n      <div\r\n        class=\"sd-org-chart__card\"\r\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\r\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\r\n        [attr.data-node-id]=\"item.id\"\r\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\r\n        [attr.data-depth]=\"depth\"\r\n        [style.--sd-org-node-color]=\"item.color || null\">\r\n        @if (templateRef) {\r\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\r\n        } @else {\r\n          @if (item.image) {\r\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\r\n          }\r\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\r\n          @if (item.description) {\r\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      @if (_hasChildren && collapsible()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"sd-org-chart__toggle\"\r\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\r\n          [attr.aria-expanded]=\"_expanded\"\r\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\r\n          (click)=\"toggle(item, $event)\">\r\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (_hasChildren && _expanded) {\r\n      <ul class=\"sd-org-chart__children\" role=\"group\">\r\n        @for (child of _children; track trackByItem($index, child)) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              nodeTemplate;\r\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\r\n            \" />\r\n        }\r\n      </ul>\r\n    }\r\n  </li>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}