npm - @sdcorejs/angular - Versions diffs - 20.0.10 → 20.1.0 - Mend

@sdcorejs/angular 20.0.10 → 20.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

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

	@@ -1 +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 { MatIconModule } from '@angular/material/icon';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\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: [CommonModule, MatIconModule, 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 <mat-icon>remove</mat-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 <mat-icon>remove</mat-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 <mat-icon>open_in_full</mat-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 <mat-icon>fullscreen_exit</mat-icon>\n </button>\n }\n <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\n <mat-icon>close</mat-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 <ng-content select=\"[sdFooter]\"></ng-content>\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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"}
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 <ng-content select=\"[sdFooter]\"></ng-content>\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 CHANGED Viewed

@@ -1,14 +1,13 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, viewChild, input, computed, booleanAttribute, output, inject, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, viewChild, input, computed, booleanAttribute, output, inject, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 import { BrowserUtilities } from '@sdcorejs/utils/fns';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
 class SdModal {
     static index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
@@ -72,7 +71,7 @@ class SdModal {
         this.#resolvedWidth = this.#resolveWidth();
         if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {
             this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {
-                panelClass: this.modalClass(),
+                panelClass: this.#resolvePanelClass('sd-modal-bottom-sheet-panel'),
                 disableClose: this.disableBackdropClose(),
             });
             this.#bottomSheetRef
@@ -87,7 +86,7 @@ class SdModal {
             this.#dialogRef = this.#dialog.open(this.templateRef(), {
                 width: this.#resolvedWidth,
                 maxWidth: this.#resolvedWidth,
-                panelClass: this.modalClass(),
+                panelClass: this.#resolvePanelClass('sd-modal-panel'),
                 disableClose: this.disableBackdropClose(),
             });
             this.#dialogRef
@@ -103,12 +102,31 @@ class SdModal {
         this.#bottomSheetRef?.dismiss();
         this.#dialogRef?.close();
     };
+    #resolvePanelClass(baseClass) {
+        const customClass = this.modalClass();
+        const classes = [baseClass];
+        if (typeof customClass === 'string') {
+            classes.push(...customClass.split(/\s+/).filter(Boolean));
+            return classes;
+        }
+        if (Array.isArray(customClass)) {
+            classes.push(...customClass.filter(Boolean));
+            return classes;
+        }
+        if (customClass && typeof customClass === 'object') {
+            Object.entries(customClass).forEach(([className, enabled]) => {
+                if (enabled)
+                    classes.push(className);
+            });
+        }
+        return classes;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 } }, outputs: { sdClosed: "sdClosed" }, 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 class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></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                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.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-black400);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-black100);color:var(--sd-black500)}.sd-modal-close-btn:active{background:var(--sd-black200)}.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 mat-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 } }, outputs: { sdClosed: "sdClosed" }, 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);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;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: "20.3.25", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></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                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.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-black400);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-black100);color:var(--sd-black500)}.sd-modal-close-btn:active{background:var(--sd-black200)}.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 mat-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\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-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);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;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: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], modalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalClass", required: false }] }], lazyLoadContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadContent", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }] } });
 /**

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

	@@ -1 +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 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 { MatIconModule } from '@angular/material/icon';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\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: [CommonModule, MatIconModule, 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\n sdClosed = output<void>();\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\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.modalClass() as string \| string[],\n disableClose: this.disableBackdropClose(),\n });\n this.#bottomSheetRef\n .afterDismissed()\n .pipe(takeUntilDestroyed(this.#destroyRef))\n .subscribe(() => {\n this.isOpened.set(false);\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.modalClass() as string \| string[],\n disableClose: this.disableBackdropClose(),\n });\n this.#dialogRef\n .afterClosed()\n .pipe(takeUntilDestroyed(this.#destroyRef))\n .subscribe(() => {\n this.isOpened.set(false);\n this.sdClosed.emit();\n });\n }\n };\n\n close = (): void => {\n this.#bottomSheetRef?.dismiss();\n this.#dialogRef?.close();\n };\n}\n","<ng-template #templateRef>\n <div class=\"sd-modal-root\"\n [attr.data-autoId]=\"autoId()\"\n [attr.data-opened]=\"dataOpened()\">\n @if (!lazyLoadContent() \|\| alreadyOpened()) {\n <!-- Header -->\n <!-- Dùng scss thuần -->\n @if (title()) {\n <div class=\"d-flex align-items-center p-16\">\n <ng-content select=\"[sdHeaderLeft]\">\n <div class=\"T18M\">{{ title() }}</div>\n </ng-content>\n <div class=\"d-flex align-items-center ml-auto\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n <ng-content select=\"[sdHeader]\"></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 <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n </div>\n }\n <!-- <mat-divider></mat-divider> -->\n <!-- Body -->\n <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n <ng-content></ng-content>\n </div>\n <!-- Footer -->\n <!-- <mat-divider></mat-divider> -->\n <div class=\"d-flex align-items-center p-8\" #footer>\n <ng-content select=\"[sdFooterLeft]\"></ng-content>\n <div class=\"ml-auto\">\n <ng-content select=\"[sdFooterRight]\"></ng-content>\n <ng-content select=\"[sdFooter]\"></ng-content>\n </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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"}
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';\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\n sdClosed = output<void>();\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\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(),\n });\n this.#bottomSheetRef\n .afterDismissed()\n .pipe(takeUntilDestroyed(this.#destroyRef))\n .subscribe(() => {\n this.isOpened.set(false);\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(),\n });\n this.#dialogRef\n .afterClosed()\n .pipe(takeUntilDestroyed(this.#destroyRef))\n .subscribe(() => {\n this.isOpened.set(false);\n this.sdClosed.emit();\n });\n }\n };\n\n close = (): void => {\n this.#bottomSheetRef?.dismiss();\n this.#dialogRef?.close();\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 CHANGED Viewed

@@ -2,8 +2,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 * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
 class SdOrgChartItemDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
@@ -93,13 +92,13 @@ class SdOrgChart {
         return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-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, #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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdOrgChart, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-org-chart', standalone: true, imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            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          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-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, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-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  <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"] }]
         }], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdOrgChartItemDefDirective), { isSignal: true }] }] } });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-org-chart.mjs","sources":["../../../projects/sdcorejs-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.html","../../../projects/sdcorejs-angular/components/org-chart/sdcorejs-angular-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\n\n@Directive({\n selector: '[sdOrgChartItemDef]',\n})\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\n static ngTemplateContextGuard<T extends SdOrgChartItem>(\n _dir: SdOrgChartItemDefDirective<T>,\n _ctx: unknown\n ): _ctx is SdOrgChartItemContext<T> {\n return true;\n }\n\n readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, TemplateRef, booleanAttribute, computed, contentChild, input, signal } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\n\n@Component({\n selector: 'sd-org-chart',\n standalone: true,\n imports: [CommonModule, MatIconModule],\n templateUrl: './org-chart.component.html',\n styleUrl: './org-chart.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-autoid]': 'autoId()',\n },\n})\nexport class SdOrgChart {\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\n readonly option = input<SdOrgChartOption \| undefined>(undefined);\n readonly autoId = computed(() => {\n const scope = this.option()?.autoId ?? this.autoIdInput();\n return scope ? `components-org-chart-${scope}` : undefined;\n });\n\n readonly items = input<SdOrgChartItem[] \| undefined>(undefined);\n readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> \| undefined \| null>(undefined);\n readonly collapsible = input(true, { transform: booleanAttribute });\n\n readonly itemDef = contentChild(SdOrgChartItemDefDirective);\n readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\n readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\n\n readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> \| undefined>(() => {\n return this.itemDef()?.templateRef \|\| this.option()?.itemTemplate \|\| this.itemTemplate() \|\| undefined;\n });\n\n readonly #expandedState = signal<Record<string, boolean>>({});\n\n readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\n\n hasChildren = (item: SdOrgChartItem): boolean => {\n return this.childrenOf(item).length > 0;\n };\n\n childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\n return item.children \|\| [];\n };\n\n isExpanded = (item: SdOrgChartItem): boolean => {\n if (!this.resolvedCollapsible()) {\n return true;\n }\n\n const key = this.#itemKey(item);\n const state = this.#expandedState();\n return state[key] ?? item.expanded ?? true;\n };\n\n toggle = (item: SdOrgChartItem, event?: Event): void => {\n event?.stopPropagation();\n\n if (!this.resolvedCollapsible() \|\| !this.hasChildren(item)) {\n return;\n }\n\n const key = this.#itemKey(item);\n const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\n this.#expandedState.update(state => ({\n ...state,\n [key]: expanded,\n }));\n this.option()?.onToggle?.({ item, expanded });\n };\n\n createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem \| null): SdOrgChartItemContext => {\n const hasChildren = this.hasChildren(item);\n const expanded = this.isExpanded(item);\n\n return {\n $implicit: item,\n item,\n depth,\n parent,\n expanded,\n hasChildren,\n isLeaf: !hasChildren,\n toggle: () => this.toggle(item),\n };\n };\n\n nodeAutoId = (item: SdOrgChartItem, part: 'node' \| 'image' \| 'title' \| 'description' \| 'toggle'): string \| undefined => {\n const base = this.autoId();\n if (!base) {\n return undefined;\n }\n\n return `${base}-${part}-${this.#autoIdKey(item)}`;\n };\n\n #itemKey = (item: SdOrgChartItem): string => {\n return String(item.id);\n };\n\n #autoIdKey = (item: SdOrgChartItem): string => {\n return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\n };\n}\n","@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n <ul class=\"sd-org-chart__tree\">\n @for (item of _resolvedItems; track trackByItem($index, item)) {\n <ng-container\n ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n }\n </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n @let _children = childrenOf(item);\n @let _hasChildren = _children.length > 0;\n @let _expanded = isExpanded(item);\n @let _context = createContext(item, depth, parent);\n\n <li\n class=\"sd-org-chart__node\"\n [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n <div class=\"sd-org-chart__node-shell\">\n <div\n class=\"sd-org-chart__card\"\n [class.sd-org-chart__card--no-image]=\"!item.image\"\n [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n [attr.data-node-id]=\"item.id\"\n [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n [attr.data-depth]=\"depth\"\n [style.--sd-org-node-color]=\"item.color \|\| null\">\n @if (templateRef) {\n <ng-container ngTemplateOutlet=\"templateRef; context: _context\" />\n } @else {\n @if (item.image) {\n <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n }\n <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n @if (item.description) {\n <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n }\n }\n </div>\n\n @if (_hasChildren && collapsible()) {\n <button\n type=\"button\"\n class=\"sd-org-chart__toggle\"\n [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n [attr.aria-expanded]=\"_expanded\"\n [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n (click)=\"toggle(item, $event)\">\n <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n </button>\n }\n </div>\n\n @if (_hasChildren && _expanded) {\n <ul class=\"sd-org-chart__children\" role=\"group\">\n @for (child of _children; track trackByItem($index, child)) {\n <ng-container\n ngTemplateOutlet=\"\n nodeTemplate;\n context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n \" />\n }\n </ul>\n }\n </li>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;MAMa,0BAA0B,CAAA;AACrC,IAAA,OAAO,sBAAsB,CAC3B,IAAmC,EACnC,IAAa,EAAA;AAEb,QAAA,OAAO,IAAI;IACb;AAES,IAAA,WAAW,GAA0C,MAAM,CAAC,WAAW,CAAC;wGARtE,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAHtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAChC,iBAAA;;;MCYY,UAAU,CAAA;AACZ,IAAA,WAAW,GAAG,KAAK,CAA4B,SAAS,+CAAI,KAAK,EAAE,QAAQ,EAAA,CAAA,GAAA,CAAjB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAC;AAC9E,IAAA,MAAM,GAAG,KAAK,CAA+B,SAAS,kDAAC;AACvD,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;QACzD,OAAO,KAAK,GAAG,CAAA,qBAAA,EAAwB,KAAK,CAAA,CAAE,GAAG,SAAS;AAC5D,IAAA,CAAC,kDAAC;AAEO,IAAA,KAAK,GAAG,KAAK,CAA+B,SAAS,iDAAC;AACtD,IAAA,YAAY,GAAG,KAAK,CAAwD,SAAS,wDAAC;AACtF,IAAA,WAAW,GAAG,KAAK,CAAC,IAAI,+CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AAE1D,IAAA,OAAO,GAAG,YAAY,CAAC,0BAA0B,mDAAC;IAClD,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,yDAAC;AAC1E,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,+DAAC;AAEtF,IAAA,oBAAoB,GAAG,QAAQ,CAAiD,MAAK;QAC5F,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,YAAY,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,SAAS;AACvG,IAAA,CAAC,gEAAC;AAEO,IAAA,cAAc,GAAG,MAAM,CAA0B,EAAE,0DAAC;IAEpD,WAAW,GAAG,CAAC,MAAc,EAAE,IAAoB,KAAK,IAAI,CAAC,EAAE;AAExE,IAAA,WAAW,GAAG,CAAC,IAAoB,KAAa;QAC9C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;AACzC,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,KAAsB;AACtD,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,EAAE;AAC5B,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,KAAa;AAC7C,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE;AAC/B,YAAA,OAAO,IAAI;QACb;QAEA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC/B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE;QACnC,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI;AAC5C,IAAA,CAAC;AAED,IAAA,MAAM,GAAG,CAAC,IAAoB,EAAE,KAAa,KAAU;QACrD,KAAK,EAAE,eAAe,EAAE;AAExB,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YAC1D;QACF;QAEA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC/B,QAAA,MAAM,QAAQ,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;QACvE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,KAAK;AACnC,YAAA,GAAG,KAAK;YACR,CAAC,GAAG,GAAG,QAAQ;AAChB,SAAA,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAC/C,IAAA,CAAC;IAED,aAAa,GAAG,CAAC,IAAoB,EAAE,KAAa,EAAE,MAA6B,KAA2B;QAC5G,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAEtC,OAAO;AACL,YAAA,SAAS,EAAE,IAAI;YACf,IAAI;YACJ,KAAK;YACL,MAAM;YACN,QAAQ;YACR,WAAW;YACX,MAAM,EAAE,CAAC,WAAW;YACpB,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;SAChC;AACH,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,EAAE,IAA2D,KAAwB;AACrH,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE;QAC1B,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,OAAO,SAAS;QAClB;AAEA,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA,CAAE;AACnD,IAAA,CAAC;AAED,IAAA,QAAQ,GAAG,CAAC,IAAoB,KAAY;AAC1C,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,UAAU,GAAG,CAAC,IAAoB,KAAY;AAC5C,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAC5D,IAAA,CAAC;wGAzFU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,k0BAYW,0BAA0B,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7B5D,u9FAwEA,EAAA,MAAA,EAAA,CAAA,qmGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED/DY,YAAY,qMAAE,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,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQ1B,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,CAAC,EAAA,eAAA,EAGrB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,oBAAoB,EAAE,UAAU;AACjC,qBAAA,EAAA,QAAA,EAAA,u9FAAA,EAAA,MAAA,EAAA,CAAA,qmGAAA,CAAA,EAAA;ikBAc+B,0BAA0B,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE7B5D;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-org-chart.mjs","sources":["../../../projects/sdcorejs-angular/components/org-chart/src/org-chart-item-def.directive.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.ts","../../../projects/sdcorejs-angular/components/org-chart/src/org-chart.component.html","../../../projects/sdcorejs-angular/components/org-chart/sdcorejs-angular-components-org-chart.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { SdOrgChartItem, SdOrgChartItemContext } from './org-chart.model';\n\n@Directive({\n selector: '[sdOrgChartItemDef]',\n})\nexport class SdOrgChartItemDefDirective<T extends SdOrgChartItem = SdOrgChartItem> {\n static ngTemplateContextGuard<T extends SdOrgChartItem>(\n _dir: SdOrgChartItemDefDirective<T>,\n _ctx: unknown\n ): _ctx is SdOrgChartItemContext<T> {\n return true;\n }\n\n readonly templateRef: TemplateRef<SdOrgChartItemContext<T>> = inject(TemplateRef);\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, TemplateRef, booleanAttribute, computed, contentChild, input, signal } from '@angular/core';\nimport { SdOrgChartItemDefDirective } from './org-chart-item-def.directive';\nimport { SdOrgChartItem, SdOrgChartItemContext, SdOrgChartOption } from './org-chart.model';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n@Component({\n selector: 'sd-org-chart',\n standalone: true,\n imports: [SdIcon, CommonModule],\n templateUrl: './org-chart.component.html',\n styleUrl: './org-chart.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-autoid]': 'autoId()',\n },\n})\nexport class SdOrgChart {\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\n readonly option = input<SdOrgChartOption \| undefined>(undefined);\n readonly autoId = computed(() => {\n const scope = this.option()?.autoId ?? this.autoIdInput();\n return scope ? `components-org-chart-${scope}` : undefined;\n });\n\n readonly items = input<SdOrgChartItem[] \| undefined>(undefined);\n readonly itemTemplate = input<TemplateRef<SdOrgChartItemContext> \| undefined \| null>(undefined);\n readonly collapsible = input(true, { transform: booleanAttribute });\n\n readonly itemDef = contentChild(SdOrgChartItemDefDirective);\n readonly resolvedItems = computed(() => this.option()?.items ?? this.items() ?? []);\n readonly resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible());\n\n readonly resolvedItemTemplate = computed<TemplateRef<SdOrgChartItemContext> \| undefined>(() => {\n return this.itemDef()?.templateRef \|\| this.option()?.itemTemplate \|\| this.itemTemplate() \|\| undefined;\n });\n\n readonly #expandedState = signal<Record<string, boolean>>({});\n\n readonly trackByItem = (_index: number, item: SdOrgChartItem) => item.id;\n\n hasChildren = (item: SdOrgChartItem): boolean => {\n return this.childrenOf(item).length > 0;\n };\n\n childrenOf = (item: SdOrgChartItem): SdOrgChartItem[] => {\n return item.children \|\| [];\n };\n\n isExpanded = (item: SdOrgChartItem): boolean => {\n if (!this.resolvedCollapsible()) {\n return true;\n }\n\n const key = this.#itemKey(item);\n const state = this.#expandedState();\n return state[key] ?? item.expanded ?? true;\n };\n\n toggle = (item: SdOrgChartItem, event?: Event): void => {\n event?.stopPropagation();\n\n if (!this.resolvedCollapsible() \|\| !this.hasChildren(item)) {\n return;\n }\n\n const key = this.#itemKey(item);\n const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);\n this.#expandedState.update(state => ({\n ...state,\n [key]: expanded,\n }));\n this.option()?.onToggle?.({ item, expanded });\n };\n\n createContext = (item: SdOrgChartItem, depth: number, parent: SdOrgChartItem \| null): SdOrgChartItemContext => {\n const hasChildren = this.hasChildren(item);\n const expanded = this.isExpanded(item);\n\n return {\n $implicit: item,\n item,\n depth,\n parent,\n expanded,\n hasChildren,\n isLeaf: !hasChildren,\n toggle: () => this.toggle(item),\n };\n };\n\n nodeAutoId = (item: SdOrgChartItem, part: 'node' \| 'image' \| 'title' \| 'description' \| 'toggle'): string \| undefined => {\n const base = this.autoId();\n if (!base) {\n return undefined;\n }\n\n return `${base}-${part}-${this.#autoIdKey(item)}`;\n };\n\n #itemKey = (item: SdOrgChartItem): string => {\n return String(item.id);\n };\n\n #autoIdKey = (item: SdOrgChartItem): string => {\n return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');\n };\n}\n","@let _resolvedItems = resolvedItems();\n@let _resolvedItemTemplate = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n <ul class=\"sd-org-chart__tree\">\n @for (item of _resolvedItems; track trackByItem($index, item)) {\n <ng-container\n ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _resolvedItemTemplate }\" />\n }\n </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n @let _children = childrenOf(item);\n @let _hasChildren = _children.length > 0;\n @let _expanded = isExpanded(item);\n @let _context = createContext(item, depth, parent);\n\n <li\n class=\"sd-org-chart__node\"\n [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n <div class=\"sd-org-chart__node-shell\">\n <div\n class=\"sd-org-chart__card\"\n [class.sd-org-chart__card--no-image]=\"!item.image\"\n [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n [attr.data-node-id]=\"item.id\"\n [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n [attr.data-depth]=\"depth\"\n [style.--sd-org-node-color]=\"item.color \|\| null\">\n @if (templateRef) {\n <ng-container ngTemplateOutlet=\"templateRef; context: _context\" />\n } @else {\n @if (item.image) {\n <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n }\n <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n @if (item.description) {\n <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n }\n }\n </div>\n\n @if (_hasChildren && collapsible()) {\n <button\n type=\"button\"\n class=\"sd-org-chart__toggle\"\n [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n [attr.aria-expanded]=\"_expanded\"\n [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n (click)=\"toggle(item, $event)\">\n <sd-icon [name]=\"_expanded ? 'expand_more' : 'chevron_right'\"></sd-icon>\n </button>\n }\n </div>\n\n @if (_hasChildren && _expanded) {\n <ul class=\"sd-org-chart__children\" role=\"group\">\n @for (child of _children; track trackByItem($index, child)) {\n <ng-container\n ngTemplateOutlet=\"\n nodeTemplate;\n context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n \" />\n }\n </ul>\n }\n </li>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}