npm - @sdcorejs/angular - Versions diffs - 21.0.7 → 21.0.8 - Mend

@sdcorejs/angular 21.0.7 → 21.0.8

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 (78) 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 { 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';\nimport * as uuid from 'uuid';\n\n@Component({\n selector: 'sd-modal-resizable',\n templateUrl: './modal-resizable.component.html',\n styleUrls: ['./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${uuid.v4()}`;\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 { 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 styleUrls: ['./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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"}

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

@@ -93,11 +93,11 @@ class SdModal {
         this.#dialogRef?.close();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\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}}.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: "21.2.17", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\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}}.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', 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"] }]
         }], 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 styleUrls: ['./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, { transform: (v) => v ?? undefined });\n modalClass = input<string \| string[] \| Record<string, boolean>, string \| string[] \| Record<string, boolean> \| null \| undefined>('', { transform: (v) => v ?? '' });\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': return '80vw';\n case 'md': return '60vw';\n case 'sm': return '40vw';\n case 'sx': return '20vw';\n default: 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.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.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 <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\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 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 styleUrls: ['./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, { transform: (v) => v ?? undefined });\n modalClass = input<string \| string[] \| Record<string, boolean>, string \| string[] \| Record<string, boolean> \| null \| undefined>('', { transform: (v) => v ?? '' });\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': return '80vw';\n case 'md': return '60vw';\n case 'sm': return '40vw';\n case 'sx': return '20vw';\n default: 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.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.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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"}

package/fesm2022/sdcorejs-angular-components-operator.mjs CHANGED Viewed

@@ -62,11 +62,11 @@ class SdOperator {
         this.model.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdOperator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdOperator, isStandalone: true, selector: "sd-operator", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let _current = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _current\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdOperator, isStandalone: true, selector: "sd-operator", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdOperator, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _current = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _current\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]
+            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-operator.mjs","sources":["../../../projects/sdcorejs-angular/components/operator/src/operator.component.ts","../../../projects/sdcorejs-angular/components/operator/src/operator.component.html","../../../projects/sdcorejs-angular/components/operator/sdcorejs-angular-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { OPERATORS } from '@sdcorejs/utils/constants';\nimport { Operator } from '@sdcorejs/utils/models';\nimport { I18nService } from '@sdcorejs/angular/i18n';\n\ninterface OperatorItem {\n value: Operator;\n icon: SafeHtml;\n display: string;\n}\n\n@Component({\n selector: 'sd-operator',\n templateUrl: './operator.component.html',\n styleUrls: ['./operator.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatMenuModule, MatTooltipModule],\n})\nexport class SdOperator {\n // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\n static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\n\n readonly #i18n = inject(I18nService);\n readonly #sanitizer = inject(DomSanitizer);\n\n /** Operator hiện tại — binding hai chiều [(model)]. /\n model = model<Operator \| undefined>();\n\n /* Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. /\n operators = input<Operator[]>([]);\n\n /* Vô hiệu hóa trigger (không mở được menu). /\n disabled = input(false, { transform: booleanAttribute });\n\n /* data-autoId cho e2e selector. /\n autoId = input<string>();\n\n /* Allowed operators map sang { value, icon, display } theo thứ tự input. /\n readonly items = computed<OperatorItem[]>(() => {\n const out: OperatorItem[] = [];\n for (const value of this.operators()) {\n const r = this.#resolve(value);\n if (!r) continue;\n out.push({ value, icon: this.#svg(r.icon), display: r.display });\n }\n return out;\n });\n\n /* Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. /\n readonly currentIcon = computed<SafeHtml>(() => {\n return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\n });\n\n /* Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). /\n readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\n\n // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\n // why: OPERATORS[].display là i18n KEY ('core.operator..display'), KHÔNG phải text —\n // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.\n #resolve(value: Operator \| undefined): { icon: string; display: string } \| undefined {\n if (value == null) return undefined;\n const entry = OPERATORS.find((o) => o.value === value);\n return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\n }\n\n // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\n // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\n #svg(inner: string): SafeHtml {\n return this.#sanitizer.bypassSecurityTrustHtml(\n `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\n );\n }\n\n private readonly trigger = viewChild(MatMenuTrigger);\n\n /** Open the operator menu programmatically (used by the query-bar build flow). /\n open(): void {\n this.trigger()?.openMenu();\n }\n\n /* Chọn operator từ menu. /\n select(value: Operator): void {\n this.model.set(value);\n }\n}\n","@let ~~_current~~ = model();\n\n<button\n type=\"button\"\n class=\"c-op-trigger\"\n [disabled]=\"disabled()\"\n [matMenuTriggerFor]=\"menu\"\n [matTooltip]=\"currentLabel()\"\n matTooltipPosition=\"above\"\n [attr.data-autoId]=\"autoId() ?? null\">\n <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n @for (item of items(); track item.value) {\n <button\n type=\"button\"\n mat-menu-item\n class=\"c-op-row\"\n [class.c-op-active]=\"item.value === ~~_current~~\"\n (click)=\"select(item.value)\">\n <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n <span class=\"c-op-label\">{{ item.display }}</span>\n <span class=\"c-op-code\">{{ item.value }}</span>\n </button>\n }\n</mat-menu>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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~~0zBA2BA~~,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,aAAa,6vBAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE9B,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;+BACE,aAAa,EAAA,UAAA,EAGX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,~~0zBAAA~~,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA;6fAyDL,cAAc,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE7ErD;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-operator.mjs","sources":["../../../projects/sdcorejs-angular/components/operator/src/operator.component.ts","../../../projects/sdcorejs-angular/components/operator/src/operator.component.html","../../../projects/sdcorejs-angular/components/operator/sdcorejs-angular-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { OPERATORS } from '@sdcorejs/utils/constants';\nimport { Operator } from '@sdcorejs/utils/models';\nimport { I18nService } from '@sdcorejs/angular/i18n';\n\ninterface OperatorItem {\n value: Operator;\n icon: SafeHtml;\n display: string;\n}\n\n@Component({\n selector: 'sd-operator',\n templateUrl: './operator.component.html',\n styleUrls: ['./operator.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatMenuModule, MatTooltipModule],\n})\nexport class SdOperator {\n // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\n static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\n\n readonly #i18n = inject(I18nService);\n readonly #sanitizer = inject(DomSanitizer);\n\n /** Operator hiện tại — binding hai chiều [(model)]. /\n model = model<Operator \| undefined>();\n\n /* Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. /\n operators = input<Operator[]>([]);\n\n /* Vô hiệu hóa trigger (không mở được menu). /\n disabled = input(false, { transform: booleanAttribute });\n\n /* data-autoId cho e2e selector. /\n autoId = input<string>();\n\n /* Allowed operators map sang { value, icon, display } theo thứ tự input. /\n readonly items = computed<OperatorItem[]>(() => {\n const out: OperatorItem[] = [];\n for (const value of this.operators()) {\n const r = this.#resolve(value);\n if (!r) continue;\n out.push({ value, icon: this.#svg(r.icon), display: r.display });\n }\n return out;\n });\n\n /* Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. /\n readonly currentIcon = computed<SafeHtml>(() => {\n return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\n });\n\n /* Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). /\n readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\n\n // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\n // why: OPERATORS[].display là i18n KEY ('core.operator..display'), KHÔNG phải text —\n // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.\n #resolve(value: Operator \| undefined): { icon: string; display: string } \| undefined {\n if (value == null) return undefined;\n const entry = OPERATORS.find((o) => o.value === value);\n return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\n }\n\n // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\n // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\n #svg(inner: string): SafeHtml {\n return this.#sanitizer.bypassSecurityTrustHtml(\n `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\n );\n }\n\n private readonly trigger = viewChild(MatMenuTrigger);\n\n /** Open the operator menu programmatically (used by the query-bar build flow). /\n open(): void {\n this.trigger()?.openMenu();\n }\n\n /* Chọn operator từ menu. /\n select(value: Operator): void {\n this.model.set(value);\n }\n}\n","@let _model = model();\n\n<button\n type=\"button\"\n class=\"c-op-trigger\"\n [disabled]=\"disabled()\"\n [matMenuTriggerFor]=\"menu\"\n [matTooltip]=\"currentLabel()\"\n matTooltipPosition=\"above\"\n [attr.data-autoId]=\"autoId() ?? null\">\n <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n @for (item of items(); track item.value) {\n <button\n type=\"button\"\n mat-menu-item\n class=\"c-op-row\"\n [class.c-op-active]=\"item.value === _model\"\n (click)=\"select(item.value)\">\n <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n <span class=\"c-op-label\">{{ item.display }}</span>\n <span class=\"c-op-code\">{{ item.value }}</span>\n </button>\n }\n</mat-menu>\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

@@ -93,13 +93,13 @@ class SdOrgChart {
         return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdOrgChart, isStandalone: true, selector: "sd-org-chart", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: SdOrgChartItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _items; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\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: "21.2.17", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdOrgChart, decorators: [{
             type: Component,
             args: [{ selector: 'sd-org-chart', standalone: true, imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-autoid]': 'autoId()',
-                    }, template: "@let _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _items; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\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          <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"] }]
         }], 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 styleUrls: ['./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 _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n <ul class=\"sd-org-chart__tree\">\n @for (item of _items; track trackByItem($index, item)) {\n <ng-container\n ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\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;IACZ,WAAW,GAAG,KAAK,CAA4B,SAAS,mFAAI,KAAK,EAAE,QAAQ,EAAA,CAAG;AAC9E,IAAA,MAAM,GAAG,KAAK,CAA+B,SAAS,6EAAC;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,6EAAC;AAEO,IAAA,KAAK,GAAG,KAAK,CAA+B,SAAS,4EAAC;AACtD,IAAA,YAAY,GAAG,KAAK,CAAwD,SAAS,mFAAC;IACtF,WAAW,GAAG,KAAK,CAAC,IAAI,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE1D,IAAA,OAAO,GAAG,YAAY,CAAC,0BAA0B,8EAAC;IAClD,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,oFAAC;AAC1E,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,0FAAC;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,2FAAC;AAEO,IAAA,cAAc,GAAG,MAAM,CAA0B,EAAE,qFAAC;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,q7FAwEA,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,q7FAAA,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 { 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 styleUrls: ['./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;IACZ,WAAW,GAAG,KAAK,CAA4B,SAAS,mFAAI,KAAK,EAAE,QAAQ,EAAA,CAAG;AAC9E,IAAA,MAAM,GAAG,KAAK,CAA+B,SAAS,6EAAC;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,6EAAC;AAEO,IAAA,KAAK,GAAG,KAAK,CAA+B,SAAS,4EAAC;AACtD,IAAA,YAAY,GAAG,KAAK,CAAwD,SAAS,mFAAC;IACtF,WAAW,GAAG,KAAK,CAAC,IAAI,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE1D,IAAA,OAAO,GAAG,YAAY,CAAC,0BAA0B,8EAAC;IAClD,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,oFAAC;AAC1E,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,0FAAC;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,2FAAC;AAEO,IAAA,cAAc,GAAG,MAAM,CAA0B,EAAE,qFAAC;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;;;;"}

package/fesm2022/sdcorejs-angular-components-preview.mjs CHANGED Viewed

@@ -2,10 +2,10 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, DestroyRef, input, computed, output, signal, effect, afterNextRender, HostListener, ChangeDetectionStrategy, Component, InjectionToken, viewChild, viewChildren } from '@angular/core';
+import { Utilities } from '@sdcorejs/utils/fns';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@sdcorejs/angular/i18n';
-import * as uuid from 'uuid';
 import { FormsModule } from '@angular/forms';
 import * as pdfjsLib from 'pdfjs-dist';
@@ -579,7 +579,7 @@ class SdPreviewImage {
         }
     }
     async #fromUrl(url, override) {
-        const id = uuid.v4();
+        const id = Utilities.generateUuid();
         // Lấy filename từ phần path cuối — bỏ query string.
         const baseSrc = url.split('?')[0];
         const inferredName = override?.name || baseSrc.substring(baseSrc.lastIndexOf('/') + 1) || 'image';
@@ -628,7 +628,7 @@ class SdPreviewImage {
         const blobUrl = URL.createObjectURL(file);
         this.#ownedBlobUrls.add(blobUrl);
         return {
-            id: uuid.v4(),
+            id: Utilities.generateUuid(),
             blobUrl,
             name: override?.name || file.name,
             size: file.size,