npm - @sd-angular/core - Versions diffs - 19.0.0-beta.8 → 19.0.0-beta.80 - Mend

@sd-angular/core 19.0.0-beta.8 → 19.0.0-beta.80

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 (292) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal/modal.component.html","../../../projects/sd-angular/components/modal/index.ts","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n TemplateRef,\n ViewChild\n} from '@angular/core';\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 { SdUtilities } from '@sd-angular/core/utilities';\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\nimport { Subscription } from 'rxjs';\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 implements OnInit, OnDestroy {\n static index = 0;\n @ViewChild('templateRef') templateRef!: TemplateRef<any>;\n @Input() title?: string;\n @Input() color: SdColor = 'primary';\n @Input() width: SdSize \| string = 'md';\n @Input() height = 'auto';\n @Input() view?: 'dialog' \| 'bottom-sheet';\n @Input() lazyLoadContent = true;\n @Output() sdClosed = new EventEmitter();\n @ViewChild('modal') modal!: ElementRef;\n isOpened = false;\n alreadyOpened = false;\n #isMobile = false;\n #bottomSheetRef!: MatBottomSheetRef<any>;\n #dialogRef!: MatDialogRef<any>;\n private subcription = new Subscription();\n constructor(\n private ref: ChangeDetectorRef,\n private dialog: MatDialog,\n private bottomSheet: MatBottomSheet\n ) {\n this.#isMobile = SdUtilities.isMobile();\n }\n ngOnInit(): void {\n this.width = this.width \|\| '80vw';\n if (!this.#isMobile) {\n switch (this.width) {\n case 'lg':\n this.width = '80vw';\n break;\n case 'md':\n this.width = '60vw';\n break;\n case 'sm':\n this.width = '40vw';\n break;\n case 'sx':\n this.width = '20vw';\n break;\n }\n }\n }\n\n ngOnDestroy() {\n this.subcription.unsubscribe();\n }\n\n open = (): void => {\n if (this.isOpened) {\n return;\n }\n this.ref.markForCheck();\n this.alreadyOpened = true;\n this.isOpened = true;\n if ((!this.view && this.#isMobile) \|\| this.view === 'bottom-sheet') {\n this.#bottomSheetRef = this.bottomSheet.open(this.templateRef);\n this.subcription.add(\n this.#bottomSheetRef.afterDismissed().subscribe(() => {\n this.isOpened = false;\n this.sdClosed.emit();\n })\n );\n } else {\n this.#dialogRef = this.dialog.open(this.templateRef, {\n width: this.width,\n maxWidth: this.width,\n disableClose: true, // mặc định ko cho đóng modal khi click out side\n });\n this.subcription.add(\n this.#dialogRef.afterClosed().subscribe(() => {\n this.isOpened = false;\n this.sdClosed.emit();\n })\n );\n }\n };\n\n close = (): void => {\n this.ref.markForCheck();\n this.#bottomSheetRef?.dismiss();\n this.#dialogRef?.close();\n };\n}\n","<ng-template #templateRef>\r\n @if (!lazyLoadContent \|\| alreadyOpened) {\r\n <!-- Header -->\r\n <!-- Dùng scss thuần -->\r\n @if (title) {\r\n <div class=\"d-flex align-items-center p-16\">\r\n <div class=\"T18M\">{{ title }}</div>\r\n <div class=\"d-flex align-items-center ml-auto\">\r\n <ng-content select=\"[sdHeader]\"></ng-content>\r\n <mat-icon class=\"text-secondary pointer\" fontIcon=\"close\" (click)=\"close()\"></mat-icon>\r\n </div>\r\n </div>\r\n }\r\n <!-- <mat-divider></mat-divider> -->\r\n <!-- Body -->\r\n <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh;\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- Footer -->\r\n <!-- <mat-divider></mat-divider> -->\r\n <div class=\"d-flex align-items-center p-16\" #footer>\r\n <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n <div class=\"ml-auto\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<!-- <ng-template #templateRef>\r\n @if(!lazyLoadContent \|\| alreadyOpened) {\r\n <sd-modal-header ngIf=\"title\">\r\n <span [innerHtml]=\"title\"></span>\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n <mat-icon fontIcon=\"close\"></mat-icon>\r\n </button>\r\n </div>\r\n </sd-modal-header>\r\n }\r\n <ng-container ngIf=\"!lazyLoadContent \|\| alreadyOpened\">\r\n <sd-modal-header ngIf=\"title\">\r\n <span [innerHtml]=\"title\"></span>\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n <mat-icon fontIcon=\"close\"></mat-icon>\r\n </button>\r\n </div>\r\n </sd-modal-header>\r\n <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-full mh-full\">\r\n <ng-content></ng-content>\r\n </div>\r\n </ng-container>\r\n</ng-template> -->\r\n","export from './src/modal/modal.component';\n// export * from './src/modal/modal-header/modal-header.component';\n// export * from './src/modal/modal-body/modal-body.component';\n// export * from './src/modal/modal-footer/modal-footer.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n DestroyRef,\r\n ElementRef,\r\n TemplateRef,\r\n booleanAttribute,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdUtilities } from '@sd-angular/core/utilities';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\n\r\n@Component({\r\n selector: 'sd-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrls: ['./modal.component.scss'],\r\n // encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\r\n})\r\nexport class SdModal {\r\n static index = signal(0);\r\n\r\n templateRef = viewChild.required<TemplateRef<any>>('templateRef');\r\n modal = viewChild<ElementRef>('modal');\r\n\r\n title = input<string, string \| null \| undefined>('', { transform: (v) => v ?? '' });\r\n color = input<SdColor, SdColor \| null \| undefined>('primary', { transform: (v) => v ?? 'primary' });\r\n width = input<SdSize \| string, SdSize \| string \| null \| undefined>('md', { transform: (v) => v ?? 'md' });\r\n height = input<string, string \| null \| undefined>('auto', { transform: (v) => v ?? 'auto' });\r\n view = input<'dialog' \| 'bottom-sheet' \| undefined, 'dialog' \| 'bottom-sheet' \| null \| undefined>(undefined, { transform: (v) => v ?? undefined });\r\n modalClass = input<string \| string[] \| Record<string, boolean>, string \| string[] \| Record<string, boolean> \| null \| undefined>('', { transform: (v) => v ?? '' });\r\n lazyLoadContent = input(true, { transform: booleanAttribute });\r\n hideClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\r\n disableBackdropClose = input<boolean, boolean \| ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\r\n\r\n sdClosed = output<void>();\r\n\r\n isOpened = signal(false);\r\n alreadyOpened = signal(false);\r\n\r\n #isMobile = false;\r\n #resolvedWidth = 'md';\r\n #bottomSheetRef!: MatBottomSheetRef<any>;\r\n #dialogRef!: MatDialogRef<any>;\r\n\r\n #dialog = inject(MatDialog);\r\n #bottomSheet = inject(MatBottomSheet);\r\n #destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n this.#isMobile = SdUtilities.isMobile();\r\n }\r\n\r\n #resolveWidth(): string {\r\n const w = this.width() \|\| '80vw';\r\n if (this.#isMobile) return w;\r\n switch (w) {\r\n case 'lg': return '80vw';\r\n case 'md': return '60vw';\r\n case 'sm': return '40vw';\r\n case 'sx': return '20vw';\r\n default: return w;\r\n }\r\n }\r\n\r\n open = (): void => {\r\n if (this.isOpened()) {\r\n return;\r\n }\r\n this.alreadyOpened.set(true);\r\n this.isOpened.set(true);\r\n this.#resolvedWidth = this.#resolveWidth();\r\n\r\n if ((!this.view() && this.#isMobile) \|\| this.view() === 'bottom-sheet') {\r\n this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\r\n panelClass: this.modalClass() as string \| string[],\r\n disableClose: this.disableBackdropClose()\r\n });\r\n this.#bottomSheetRef.afterDismissed()\r\n .pipe(takeUntilDestroyed(this.#destroyRef))\r\n .subscribe(() => {\r\n this.isOpened.set(false);\r\n this.sdClosed.emit();\r\n });\r\n } else {\r\n this.#dialogRef = this.#dialog.open(this.templateRef(), {\r\n width: this.#resolvedWidth,\r\n maxWidth: this.#resolvedWidth,\r\n panelClass: this.modalClass() as string \| string[],\r\n disableClose: this.disableBackdropClose(),\r\n });\r\n this.#dialogRef.afterClosed()\r\n .pipe(takeUntilDestroyed(this.#destroyRef))\r\n .subscribe(() => {\r\n this.isOpened.set(false);\r\n this.sdClosed.emit();\r\n });\r\n }\r\n };\r\n\r\n close = (): void => {\r\n this.#bottomSheetRef?.dismiss();\r\n this.#dialogRef?.close();\r\n };\r\n}\r\n","<ng-template #templateRef>\r\n @if (!lazyLoadContent() \|\| alreadyOpened()) {\r\n <!-- Header -->\r\n <!-- Dùng scss thuần -->\r\n @if (title()) {\r\n <div class=\"d-flex align-items-center p-16\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n <div class=\"T18M\">{{ title() }}</div>\r\n </ng-content>\r\n <div class=\"d-flex align-items-center ml-auto\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n <ng-content select=\"[sdHeader]\"></ng-content>\r\n @if (!hideClose()) {\r\n <mat-icon class=\"text-secondary pointer\" fontIcon=\"close\" (click)=\"close()\"></mat-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <mat-divider></mat-divider> -->\r\n <!-- Body -->\r\n <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- Footer -->\r\n <!-- <mat-divider></mat-divider> -->\r\n <div class=\"d-flex align-items-center p-8\" #footer>\r\n <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n <div class=\"ml-auto\">\r\n <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<!-- <ng-template #templateRef>\r\n @if(!lazyLoadContent \|\| alreadyOpened) {\r\n <sd-modal-header ngIf=\"title\">\r\n <span [innerHtml]=\"title\"></span>\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n <mat-icon fontIcon=\"close\"></mat-icon>\r\n </button>\r\n </div>\r\n </sd-modal-header>\r\n }\r\n <ng-container ngIf=\"!lazyLoadContent \|\| alreadyOpened\">\r\n <sd-modal-header ngIf=\"title\">\r\n <span [innerHtml]=\"title\"></span>\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n <mat-icon fontIcon=\"close\"></mat-icon>\r\n </button>\r\n </div>\r\n </sd-modal-header>\r\n <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-full mh-full\">\r\n <ng-content></ng-content>\r\n </div>\r\n </ng-container>\r\n</ng-template> -->\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-preview.mjs CHANGED Viewed

@@ -93,7 +93,7 @@ class SdPreviewImage {
         this.activeIndex = 0;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPreviewImage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdPreviewImage, isStandalone: true, selector: "sd-preview-image", outputs: { close: "close" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n  <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n    <!-- Main image -->\r\n    @if (images.length) {\r\n      <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n        <div class=\"thumbnail-container\">\r\n          @for (image of images; track image.id; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"thumbnail-wrapper\"\r\n              (click)=\"onClickThumbnailImage(i)\"\r\n              [ngStyle]=\"{\r\n                border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n              }\">\r\n              @if (image.src) {\r\n                <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              } @else {\r\n                <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"main-image-container\" #mainImage>\r\n          @let activedImage = images[activeIndex];\r\n          @if (activedImage.src) {\r\n            <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n          } @else {\r\n            <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n          }\r\n          <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n          <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n        <i class=\"icon-no-image mb-16\"></i>\r\n        <div>Kh\u00F4ng c\u00F3 th\u00F4ng tin \u1EA3nh</div>\r\n      </div>\r\n    }\r\n  </div>\r\n</sd-modal>\r\n", styles: [".image-gallery{display:flex;width:100%;max-height:60vh;min-height:60vh}.image-gallery .main-image-container{flex:1;position:relative}.image-gallery .main-image-container .next-icon{position:absolute;top:45%;right:10px;cursor:pointer;color:#000;z-index:9999}.image-gallery .main-image-container .back-icon{position:absolute;top:45%;left:0;cursor:pointer;color:#000;z-index:9999}.image-gallery .thumbnail-container{width:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}.image-gallery .thumbnail-wrapper{position:relative;width:100px;aspect-ratio:1;flex:0 0 auto;overflow:hidden;padding:0;border:none;background:transparent}.image-gallery .thumbnail-wrapper .thumbnail-img{object-fit:cover;width:100%;height:100%;display:block}.image-gallery .main-image{object-fit:contain;width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdPreviewImage, isStandalone: true, selector: "sd-preview-image", outputs: { close: "close" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n  <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n    <!-- Main image -->\r\n    @if (images.length) {\r\n      <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n        <div class=\"thumbnail-container\">\r\n          @for (image of images; track image.id; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"thumbnail-wrapper\"\r\n              (click)=\"onClickThumbnailImage(i)\"\r\n              [ngStyle]=\"{\r\n                border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n              }\">\r\n              @if (image.src) {\r\n                <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              } @else {\r\n                <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"main-image-container\" #mainImage>\r\n          @let activedImage = images[activeIndex];\r\n          @if (activedImage.src) {\r\n            <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n          } @else {\r\n            <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n          }\r\n          <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n          <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n        <i class=\"icon-no-image mb-16\"></i>\r\n        <div>Kh\u00F4ng c\u00F3 th\u00F4ng tin \u1EA3nh</div>\r\n      </div>\r\n    }\r\n  </div>\r\n</sd-modal>\r\n", styles: [".image-gallery{display:flex;width:100%;max-height:60vh;min-height:60vh}.image-gallery .main-image-container{flex:1;position:relative}.image-gallery .main-image-container .next-icon{position:absolute;top:45%;right:10px;cursor:pointer;color:#000;z-index:9999}.image-gallery .main-image-container .back-icon{position:absolute;top:45%;left:0;cursor:pointer;color:#000;z-index:9999}.image-gallery .thumbnail-container{width:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}.image-gallery .thumbnail-wrapper{position:relative;width:100px;aspect-ratio:1;flex:0 0 auto;overflow:hidden;padding:0;border:none;background:transparent}.image-gallery .thumbnail-wrapper .thumbnail-img{object-fit:cover;width:100%;height:100%;display:block}.image-gallery .main-image{object-fit:contain;width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPreviewImage, decorators: [{
             type: Component,

package/fesm2022/sd-angular-core-components-preview.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-preview.mjs","sources":["../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.ts","../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.html","../../../projects/sd-angular/components/preview/sd-angular-core-components-preview.ts"],"sourcesContent":["import { CommonModule, NgOptimizedImage } from '@angular/common';\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';\r\nimport { SdButton } from '@sd-angular/core/components/button';\r\nimport { SdModal } from '@sd-angular/core/components/modal';\r\nimport * as uuid from 'uuid';\r\n\r\ninterface Image {\r\n id: string;\r\n // Vì NgOptimizedImage không thể sử dụng với blobSrc nên đối với url từ cdn sẽ vẫn lưu ở src\r\n blobSrc: string;\r\n src?: string;\r\n name: string;\r\n size: number;\r\n}\r\n\r\n@Component({\r\n selector: 'sd-preview-image',\r\n imports: [SdModal, SdButton, CommonModule, NgOptimizedImage],\r\n templateUrl: './preview-image.component.html',\r\n styleUrl: './preview-image.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdPreviewImage {\r\n @ViewChild(SdModal) modal!: SdModal;\r\n @Output() close = new EventEmitter<void>();\r\n\r\n title: string = 'Xem ảnh';\r\n thumbnailPosition: 'right' \| 'left' \| 'bottom' \| 'top' = 'right';\r\n activeIndex = 0;\r\n images: Image[] = [];\r\n constructor(private cd: ChangeDetectorRef) {}\r\n\r\n #loadImages = async (urlOrFiles: (string \| File)[]) => {\r\n urlOrFiles = urlOrFiles.filter(url => !!url);\r\n // Xử lý nếu là url thì thực hiện fetch lấy blob rồi từ blob => file\r\n const promises = urlOrFiles.map<Promise<Image \| null>>(async urlOrFile => {\r\n if (typeof urlOrFile === 'string') {\r\n return fetch(urlOrFile)\r\n .then(async r => {\r\n const blob = await r.blob();\r\n // Lấy filename dựa vào url src\r\n const baseSrc = urlOrFile.split('?')[0];\r\n const filename = baseSrc.substring(baseSrc.lastIndexOf('/') + 1);\r\n const file = new File([blob], filename);\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(file!),\r\n src: urlOrFile,\r\n name: file!.name,\r\n size: file!.size,\r\n };\r\n return image;\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n return null;\r\n });\r\n } else {\r\n if (urlOrFile.type.split('/')[0] === 'image') {\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(urlOrFile),\r\n name: urlOrFile.name,\r\n size: urlOrFile.size,\r\n };\r\n return image;\r\n }\r\n return null;\r\n }\r\n });\r\n this.images = (await Promise.all(promises)).filter(image => image !== null);\r\n };\r\n\r\n // Nên sử dụng urlOrFiles ở tham số khi open thay vì dùng @Input để component sử dụng sẽ chỉ cần map ở hàm khi gọi open thay vì phải mất công map mọi lúc để binding vào @Input\r\n open = async (urlOrFiles: (string \| File)[] \| undefined \| null) => {\r\n if (!Array.isArray(urlOrFiles)) {\r\n return;\r\n }\r\n await this.#loadImages(urlOrFiles);\r\n this.#reset();\r\n this.modal?.open();\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClickThumbnailImage = (index: number) => {\r\n this.activeIndex = index;\r\n this.cd.markForCheck();\r\n };\r\n\r\n updateCurrentImage = (direction: 1 \| -1) => {\r\n this.activeIndex = (this.activeIndex + direction + this.images.length) % this.images.length;\r\n this.#scrollView(this.activeIndex, direction === 1 ? 'start' : 'end');\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClose = () => {\r\n this.close.emit();\r\n };\r\n\r\n #scrollView = (index: number, type?: 'center' \| 'end' \| 'nearest' \| 'start') => {\r\n const nameId: string = 'thumbnailImage' + index;\r\n const element = document.getElementById(nameId);\r\n if (!element) {\r\n return;\r\n }\r\n const blockType: ScrollLogicalPosition = type \|\| 'start';\r\n element.scrollIntoView({ behavior: 'smooth', block: blockType });\r\n };\r\n\r\n #reset = () => {\r\n this.activeIndex = 0;\r\n };\r\n}\r\n","<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n <!-- Main image -->\r\n @if (images.length) {\r\n <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n <div class=\"thumbnail-container\">\r\n @for (image of images; track image.id; let i = $index) {\r\n <button\r\n type=\"button\"\r\n class=\"thumbnail-wrapper\"\r\n (click)=\"onClickThumbnailImage(i)\"\r\n [ngStyle]=\"{\r\n border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n }\">\r\n @if (image.src) {\r\n <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n } @else {\r\n <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n }\r\n </button>\r\n }\r\n </div>\r\n <div class=\"main-image-container\" #mainImage>\r\n @let activedImage = images[activeIndex];\r\n @if (activedImage.src) {\r\n <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n } @else {\r\n <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n }\r\n <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n <i class=\"icon-no-image mb-16\"></i>\r\n <div>Không có thông tin ảnh</div>\r\n </div>\r\n }\r\n </div>\r\n</sd-modal>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-preview.mjs","sources":["../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.ts","../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.html","../../../projects/sd-angular/components/preview/sd-angular-core-components-preview.ts"],"sourcesContent":["import { CommonModule, NgOptimizedImage } from '@angular/common';\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';\r\nimport { SdButton } from '@sd-angular/core/components/button';\r\nimport { SdModal } from '@sd-angular/core/components/modal';\r\nimport * as uuid from 'uuid';\r\n\r\ninterface Image {\r\n id: string;\r\n // Vì NgOptimizedImage không thể sử dụng với blobSrc nên đối với url từ cdn sẽ vẫn lưu ở src\r\n blobSrc: string;\r\n src?: string;\r\n name: string;\r\n size: number;\r\n}\r\n\r\n@Component({\r\n selector: 'sd-preview-image',\r\n imports: [SdModal, SdButton, CommonModule, NgOptimizedImage],\r\n templateUrl: './preview-image.component.html',\r\n styleUrl: './preview-image.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdPreviewImage {\r\n @ViewChild(SdModal) modal!: SdModal;\r\n @Output() close = new EventEmitter<void>();\r\n\r\n title: string = 'Xem ảnh';\r\n thumbnailPosition: 'right' \| 'left' \| 'bottom' \| 'top' = 'right';\r\n activeIndex = 0;\r\n images: Image[] = [];\r\n constructor(private cd: ChangeDetectorRef) {}\r\n\r\n #loadImages = async (urlOrFiles: (string \| File)[]) => {\r\n urlOrFiles = urlOrFiles.filter(url => !!url);\r\n // Xử lý nếu là url thì thực hiện fetch lấy blob rồi từ blob => file\r\n const promises = urlOrFiles.map<Promise<Image \| null>>(async urlOrFile => {\r\n if (typeof urlOrFile === 'string') {\r\n return fetch(urlOrFile)\r\n .then(async r => {\r\n const blob = await r.blob();\r\n // Lấy filename dựa vào url src\r\n const baseSrc = urlOrFile.split('?')[0];\r\n const filename = baseSrc.substring(baseSrc.lastIndexOf('/') + 1);\r\n const file = new File([blob], filename);\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(file!),\r\n src: urlOrFile,\r\n name: file!.name,\r\n size: file!.size,\r\n };\r\n return image;\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n return null;\r\n });\r\n } else {\r\n if (urlOrFile.type.split('/')[0] === 'image') {\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(urlOrFile),\r\n name: urlOrFile.name,\r\n size: urlOrFile.size,\r\n };\r\n return image;\r\n }\r\n return null;\r\n }\r\n });\r\n this.images = (await Promise.all(promises)).filter(image => image !== null);\r\n };\r\n\r\n // Nên sử dụng urlOrFiles ở tham số khi open thay vì dùng @Input để component sử dụng sẽ chỉ cần map ở hàm khi gọi open thay vì phải mất công map mọi lúc để binding vào @Input\r\n open = async (urlOrFiles: (string \| File)[] \| undefined \| null) => {\r\n if (!Array.isArray(urlOrFiles)) {\r\n return;\r\n }\r\n await this.#loadImages(urlOrFiles);\r\n this.#reset();\r\n this.modal?.open();\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClickThumbnailImage = (index: number) => {\r\n this.activeIndex = index;\r\n this.cd.markForCheck();\r\n };\r\n\r\n updateCurrentImage = (direction: 1 \| -1) => {\r\n this.activeIndex = (this.activeIndex + direction + this.images.length) % this.images.length;\r\n this.#scrollView(this.activeIndex, direction === 1 ? 'start' : 'end');\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClose = () => {\r\n this.close.emit();\r\n };\r\n\r\n #scrollView = (index: number, type?: 'center' \| 'end' \| 'nearest' \| 'start') => {\r\n const nameId: string = 'thumbnailImage' + index;\r\n const element = document.getElementById(nameId);\r\n if (!element) {\r\n return;\r\n }\r\n const blockType: ScrollLogicalPosition = type \|\| 'start';\r\n element.scrollIntoView({ behavior: 'smooth', block: blockType });\r\n };\r\n\r\n #reset = () => {\r\n this.activeIndex = 0;\r\n };\r\n}\r\n","<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n <!-- Main image -->\r\n @if (images.length) {\r\n <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n <div class=\"thumbnail-container\">\r\n @for (image of images; track image.id; let i = $index) {\r\n <button\r\n type=\"button\"\r\n class=\"thumbnail-wrapper\"\r\n (click)=\"onClickThumbnailImage(i)\"\r\n [ngStyle]=\"{\r\n border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n }\">\r\n @if (image.src) {\r\n <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n } @else {\r\n <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n }\r\n </button>\r\n }\r\n </div>\r\n <div class=\"main-image-container\" #mainImage>\r\n @let activedImage = images[activeIndex];\r\n @if (activedImage.src) {\r\n <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n } @else {\r\n <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n }\r\n <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n <i class=\"icon-no-image mb-16\"></i>\r\n <div>Không có thông tin ảnh</div>\r\n </div>\r\n }\r\n </div>\r\n</sd-modal>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-quick-action.mjs CHANGED Viewed

@@ -15,11 +15,11 @@ class SdQuickAction {
         this.isOpened = false;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdQuickAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdQuickAction, isStandalone: true, selector: "sd-quick-action", inputs: { _isOpened: ["isOpened", "_isOpened"] }, ngImport: i0, template: "<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"isOpened\">\n  <div class=\"mr-16 text-grey\">\n    <ng-content select=\"[sdMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[sdAction]\"></ng-content>\n</div>\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px;position:fixed;min-width:400px;width:max-content;background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:all .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdQuickAction, isStandalone: true, selector: "sd-quick-action", inputs: { _isOpened: ["isOpened", "_isOpened"] }, ngImport: i0, template: "<div class=\"c-quick-action d-flex align-items-center gap-16\" [class.active]=\"isOpened\">\r\n  <div class=\"flex-1 T14R\">\r\n    <ng-content select=\"[sdMessage]\"></ng-content>\r\n  </div>\r\n  <ng-content select=\"[sdAction]\"></ng-content>\r\n</div>\r\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px;position:fixed;min-width:320px;width:max-content;background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:all .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdQuickAction, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-quick-action', standalone: true, imports: [CommonModule], template: "<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"isOpened\">\n  <div class=\"mr-16 text-grey\">\n    <ng-content select=\"[sdMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[sdAction]\"></ng-content>\n</div>\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px;position:fixed;min-width:400px;width:max-content;background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:all .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}\n"] }]
+            args: [{ selector: 'sd-quick-action', standalone: true, imports: [CommonModule], template: "<div class=\"c-quick-action d-flex align-items-center gap-16\" [class.active]=\"isOpened\">\r\n  <div class=\"flex-1 T14R\">\r\n    <ng-content select=\"[sdMessage]\"></ng-content>\r\n  </div>\r\n  <ng-content select=\"[sdAction]\"></ng-content>\r\n</div>\r\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px;position:fixed;min-width:320px;width:max-content;background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:all .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _isOpened: [{
                 type: Input,
                 args: ['isOpened']

package/fesm2022/sd-angular-core-components-quick-action.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-quick-action.mjs","sources":["../../../projects/sd-angular/components/quick-action/src/quick-action.component.ts","../../../projects/sd-angular/components/quick-action/src/quick-action.component.html","../../../projects/sd-angular/components/quick-action/sd-angular-core-components-quick-action.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'sd-quick-action',\n templateUrl: './quick-action.component.html',\n styleUrls: ['./quick-action.component.scss'],\n standalone: true,\n imports: [CommonModule],\n})\nexport class SdQuickAction {\n isOpened = false;\n @Input('isOpened') set _isOpened(isOpened: '' \| boolean \| undefined \| null) {\n this.isOpened = !!isOpened;\n }\n constructor() {}\n open = () => {\n this.isOpened = true;\n };\n\n close = () => {\n this.isOpened = false;\n };\n}\n","<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"isOpened\">\n <div class=\"mr-16 ~~text-grey~~\">\n <ng-content select=\"[sdMessage]\"></ng-content>\n </div>\n <ng-content select=\"[sdAction]\"></ng-content>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAUa,aAAa,CAAA;IACxB,QAAQ,GAAG,KAAK;IAChB,IAAuB,SAAS,CAAC,QAAyC,EAAA;AACxE,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ;IAC5B;AACA,IAAA,WAAA,GAAA,EAAe;IACf,IAAI,GAAG,MAAK;AACV,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,IAAA,CAAC;IAED,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACvB,IAAA,CAAC;wGAZU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV1B,~~sPAMA~~,EAAA,MAAA,EAAA,CAAA,8ZAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEY,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAEX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EAGf,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,~~sPAAA~~,EAAA,MAAA,EAAA,CAAA,8ZAAA,CAAA,EAAA;wDAIA,SAAS,EAAA,CAAA;sBAA/B,KAAK;uBAAC,UAAU;;;AEZnB;;AAEG;;;;"}
1	+ {"version":3,"file":"sd-angular-core-components-quick-action.mjs","sources":["../../../projects/sd-angular/components/quick-action/src/quick-action.component.ts","../../../projects/sd-angular/components/quick-action/src/quick-action.component.html","../../../projects/sd-angular/components/quick-action/sd-angular-core-components-quick-action.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'sd-quick-action',\n templateUrl: './quick-action.component.html',\n styleUrls: ['./quick-action.component.scss'],\n standalone: true,\n imports: [CommonModule],\n})\nexport class SdQuickAction {\n isOpened = false;\n @Input('isOpened') set _isOpened(isOpened: '' \| boolean \| undefined \| null) {\n this.isOpened = !!isOpened;\n }\n constructor() {}\n open = () => {\n this.isOpened = true;\n };\n\n close = () => {\n this.isOpened = false;\n };\n}\n","<div class=\"c-quick-action d-flex align-items-center gap-16\" [class.active]=\"isOpened\">\r\n <div class=\"flex-1 T14R\">\r\n <ng-content select=\"[sdMessage]\"></ng-content>\r\n </div>\r\n <ng-content select=\"[sdAction]\"></ng-content>\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAUa,aAAa,CAAA;IACxB,QAAQ,GAAG,KAAK;IAChB,IAAuB,SAAS,CAAC,QAAyC,EAAA;AACxE,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ;IAC5B;AACA,IAAA,WAAA,GAAA,EAAe;IACf,IAAI,GAAG,MAAK;AACV,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,IAAA,CAAC;IAED,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACvB,IAAA,CAAC;wGAZU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV1B,qQAMA,EAAA,MAAA,EAAA,CAAA,8ZAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEY,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAEX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EAGf,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,qQAAA,EAAA,MAAA,EAAA,CAAA,8ZAAA,CAAA,EAAA;wDAIA,SAAS,EAAA,CAAA;sBAA/B,KAAK;uBAAC,UAAU;;;AEZnB;;AAEG;;;;"}

package/fesm2022/sd-angular-core-components-section.mjs CHANGED Viewed

@@ -1,66 +1,64 @@
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdSection extends SdBaseSecureComponent {
-    title; // Tiêu đề của section
-    subTitle; // sub Tiêu đề của section
-    icon;
-    iconColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'
-    collapsed = false;
-    set _collapsed(val) {
-        this.collapsed = val === '' || !!val;
-    }
-    collapsable = false;
-    set _collapsable(val) {
-        this.collapsable = val === '' || !!val;
-    }
-    hideHeader = false;
-    set _hideHeader(val) {
-        this.hideHeader = val === '' || !!val;
+    #el = inject(ElementRef);
+    title = input(undefined);
+    subTitle = input(undefined);
+    icon = input(undefined);
+    iconColor = input('primary', { alias: 'iconColor' });
+    collapsed = model(false, { alias: 'collapsed' });
+    collapsable = input(false, { transform: booleanAttribute });
+    hideHeader = input(false, { transform: booleanAttribute });
+    noPaddingBody = input(false, { transform: booleanAttribute });
+    constructor() {
+        super();
+        effect(() => {
+            if (this.title()) {
+                this.#el.nativeElement.removeAttribute('title');
+            }
+        });
     }
     toggleCollapse = () => {
-        if (this.collapsable) {
-            this.collapsed = !this.collapsed;
+        if (this.collapsable()) {
+            this.collapsed.set(!this.collapsed());
         }
         else {
-            if (this.collapsed) {
-                this.collapsed = false;
+            if (this.collapsed()) {
+                this.collapsed.set(false);
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: "title", subTitle: "subTitle", icon: "icon", iconColor: "iconColor", _collapsed: ["collapsed", "_collapsed"], _collapsable: ["collapsable", "_collapsable"], _hideHeader: ["hideHeader", "_hideHeader"] }, usesInheritance: true, ngImport: i0, template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, noPaddingBody: { classPropertyName: "noPaddingBody", publicName: "noPaddingBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, usesInheritance: true, ngImport: i0, template: "@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n  @if (!_hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"_iconColor === 'primary'\"\r\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n              [class.text-error]=\"_iconColor === 'error'\"\r\n              [class.text-warning]=\"_iconColor === 'warning'\"\r\n              [class.text-success]=\"_iconColor === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (_title) {\r\n              <div class=\"T16M\">{{ _title }}</div>\r\n            }\r\n            @if (_subTitle) {\r\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (_collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (_collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!_collapsed || _hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], subTitle: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], _collapsed: [{
-                type: Input,
-                args: ['collapsed']
-            }], _collapsable: [{
-                type: Input,
-                args: ['collapsable']
-            }], _hideHeader: [{
-                type: Input,
-                args: ['hideHeader']
-            }] } });
+            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n  @if (!_hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"_iconColor === 'primary'\"\r\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n              [class.text-error]=\"_iconColor === 'error'\"\r\n              [class.text-warning]=\"_iconColor === 'warning'\"\r\n              [class.text-success]=\"_iconColor === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (_title) {\r\n              <div class=\"T16M\">{{ _title }}</div>\r\n            }\r\n            @if (_subTitle) {\r\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (_collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (_collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!_collapsed || _hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [] });
+class SdSectionItem {
+    label = input.required();
+    labelWidth = input('150px', {
+        transform: (val) => {
+            return val || '150px';
+        },
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSectionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SdSectionItem, isStandalone: true, selector: "sd-section-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-item\">\r\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSectionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-section-item', standalone: true, template: "<div class=\"c-item\">\r\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] }]
+        }] });
 /**
  * Generated bundle index. Do not edit.
  */
-export { SdSection };
+export { SdSection, SdSectionItem };
 //# sourceMappingURL=sd-angular-core-components-section.mjs.map

package/fesm2022/sd-angular-core-components-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\r\nimport { Component, ~~Input~~ } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n ~~@Input({~~ ~~required:~~ ~~true }~~) title?: string \| ~~null;~~ // ~~Tiêu đề của section\~~r\n ~~@Input()~~ subTitle?: string; // ~~sub~~ ~~Tiêu~~ ~~đề của section\~~r\n~~\r\n~~ ~~@Input()~~ icon?: string \| null;\r\n ~~@Input()~~ iconColor?: ~~SdColor~~ = 'primary'~~; // Màu sắc của icon~~, ~~mặc~~ ~~định~~ là '~~primary~~'\r\n collapsed = false~~;\r\n @Input('collapsed')~~ ~~set~~ ~~_collapsed(val~~: ~~boolean \|~~ '' ~~\| undefined \| null~~) {\r\n ~~this.collapsed~~ = ~~val~~ ~~===~~ '' \|\| ~~!!val~~;\r\n ~~}\r\n collapsable~~ = false~~;\r\n @Input('collapsable')~~ ~~set~~ ~~_collapsable(val~~: ~~boolean~~ ~~\| '' \| undefined \| null~~) {\r\n ~~this.collapsable~~ = ~~val~~ ~~===~~ '' \|\| ~~!!val~~;\r\n }\r\n\r\n ~~hideHeader = false~~;\r\n ~~@Input~~(~~'hideHeader'~~) ~~set~~ ~~_hideHeader~~(~~val: boolean \| '' \| undefined \| null~~) {\r\n this.~~hideHeader = val ===~~ '' ~~\|\| !!val~~;\r\n }\r\n toggleCollapse = () => {\r\n if (this.collapsable) {\r\n this.collapsed = !this.collapsed;\r\n } else {\r\n if (this.collapsed) {\r\n this.collapsed = false;\r\n }\r\n }\r\n };\r\n}\r\n","<div class=\"rounded-8 bg-white\" [class~~]=\"{ '~~c-shadow-section': !~~collapsed }~~\">\r\n @if (!~~hideHeader~~) {\r\n <div\r\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n (click)=\"toggleCollapse()\"\r\n aria-hidden=\"true\">\r\n <div class=\"d-flex align-items-center\">\r\n @if (icon) {\r\n <span\r\n class=\"mr-8 material-icons-outlined\"\r\n [class.text-primary]=\"~~iconColor~~ === 'primary'\"\r\n [class.text-secondary]=\"~~iconColor~~ === 'secondary'\"\r\n [class.text-error]=\"~~iconColor~~ === 'error'\"\r\n [class.text-warning]=\"~~iconColor~~ === 'warning'\"\r\n [class.text-success]=\"~~iconColor~~ === 'success'\">\r\n {{ icon }}\r\n </span>\r\n }\r\n <div>\r\n @if (~~title~~) {\r\n <div class=\"T16M\">{{ ~~title~~ }}</div>\r\n }\r\n @if (~~subTitle~~) {\r\n <div class=\"T12R text-secondary\">{{ ~~subTitle~~ }}</div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (~~collapsable~~) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (~~collapsed~~) {\r\n <mat-icon>expand_more</mat-icon>\r\n } @else {\r\n <mat-icon>expand_less</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (!~~collapsed~~ \|\| ~~hideHeader~~) {\r\n <!-- Nếu header bị ẩn thì không cần border top -->\r\n <div class~~=\"~~p-16 no-padding\" [style.border-top]=\"~~hideHeader~~ ? 'none' : '1px solid #e6e6e6'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;~~IACvB~~,KAAK,~~CAAiB~~;~~IACxC~~,QAAQ,~~CAAU~~;~~AAElB~~,IAAA,IAAI~~;AACJ~~,~~IAAA~~,~~SAAS~~,~~GAAa~~,SAAS,CAAC;~~IACzC~~,SAAS,GAAG,KAAK~~;IACjB~~,~~IAAwB~~,~~UAAU~~,~~CAAC~~,~~GAAoC~~,~~EAAA;QACrE~~,~~IAAI~~,CAAC,SAAS,GAAG,~~GAAG~~,KAAK,EAAE,~~IAAI~~,~~CAAC~~,CAAC~~,GAAG~~;~~IACtC;IACA~~,WAAW,GAAG,KAAK;~~IACnB~~,~~IAA0B~~,~~YAAY~~,CAAC,~~GAAoC~~,~~EAAA;QACzE~~,~~IAAI~~,CAAC,~~WAAW~~,GAAG,~~GAAG~~,KAAK,EAAE,~~IAAI~~,~~CAAC~~,CAAC,~~GAAG~~;~~IACxC~~;~~IAEA~~,~~UAAU~~,~~GAAG~~,~~KAAK~~;~~IAClB~~,~~IAAyB~~,~~WAAW~~,CAAC,~~GAAoC~~,~~EAAA~~;~~QACvE~~,IAAI,CAAC,~~UAAU,~~GAAG,~~GAAG~~,~~KAAK~~,~~EAAE~~,~~IAAI~~,CAAC,CAAC,~~GAAG~~;~~IACvC~~;~~IACA~~,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;~~AACpB~~,~~YAAA,~~IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;~~QAClC~~;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;~~AAClB~~,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;~~YACxB~~;QACF;AACF,IAAA,CAAC;~~wGA3BU~~,SAAS,EAAA,IAAA,EAAA,~~IAAA~~,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,~~CAAA~~,WAAA,EAAA,~~YAAA~~,~~CAAA~~,EAAA,~~YAAA~~,EAAA,~~CAAA~~,~~aAAA~~,EAAA,~~cAAA~~,~~CAAA~~,EAAA,WAAA,EAAA,~~CAAA~~,YAAA,EAAA,aAAA,~~CAAA~~,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZtB,~~ixDAgDA~~,EAAA,MAAA,EAAA,CAAA,~~qMAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EDtCY~~,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,CAAA;;4FAEZ,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAGb,CAAC,aAAa,CAAC,EAAA,QAAA,EAAA,~~ixDAAA~~,EAAA,MAAA,EAAA,CAAA,~~qMAAA~~,CAAA,EAAA;~~8BAGG~~,KAAK,~~EAAA~~,~~CAAA~~;~~sBAA/B~~,KAAK~~;uBAAC~~,EAAE,~~QAAQ~~,EAAE,~~IAAI~~,~~EAAE~~;~~gBAChB~~,~~QAAQ~~,~~EAAA~~,~~CAAA~~;~~sBAAhB~~;~~gBAEQ~~,~~IAAI~~,EAAA,CAAA~~;sBAAZ;gBACQ~~,~~SAAS~~,EAAA,CAAA;~~sBAAjB;gBAEuB~~,~~UAAU~~,EAAA,CAAA~~;sBAAjC~~,~~KAAK;uBAAC~~,~~WAAW;gBAIQ~~,~~YAAY~~,EAAA,CAAA~~;sBAArC~~,~~KAAK;uBAAC~~,aAAa~~;gBAKK~~,~~WAAW~~,EAAA,CAAA;~~sBAAnC~~,~~KAAK~~;~~uBAAC~~,~~YAAY~~;;;~~AE5BrB~~;;AAEG;;;;"}
1	+ {"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sd-angular/components/section/src/section-item/section-item.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n #el = inject(ElementRef);\r\n\r\n title = input<string \| undefined \| null>(undefined);\r\n subTitle = input<string \| undefined \| null>(undefined);\r\n icon = input<string \| undefined \| null>(undefined);\r\n iconColor = input<SdColor>('primary', { alias: 'iconColor' });\r\n\r\n collapsed = model<boolean>(false, { alias: 'collapsed' });\r\n collapsable = input(false, { transform: booleanAttribute });\r\n hideHeader = input(false, { transform: booleanAttribute });\r\n noPaddingBody = input(false, { transform: booleanAttribute });\r\n\r\n constructor() {\r\n super();\r\n effect(() => {\r\n if (this.title()) {\r\n this.#el.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n\r\n toggleCollapse = () => {\r\n if (this.collapsable()) {\r\n this.collapsed.set(!this.collapsed());\r\n } else {\r\n if (this.collapsed()) {\r\n this.collapsed.set(false);\r\n }\r\n }\r\n };\r\n}\r\n","@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n @if (!_hideHeader) {\r\n <div\r\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n (click)=\"toggleCollapse()\"\r\n aria-hidden=\"true\">\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n @if (icon()) {\r\n <span\r\n class=\"mr-8 material-icons-outlined\"\r\n [class.text-primary]=\"_iconColor === 'primary'\"\r\n [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n [class.text-error]=\"_iconColor === 'error'\"\r\n [class.text-warning]=\"_iconColor === 'warning'\"\r\n [class.text-success]=\"_iconColor === 'success'\">\r\n {{ icon() }}\r\n </span>\r\n }\r\n <div>\r\n @if (_title) {\r\n <div class=\"T16M\">{{ _title }}</div>\r\n }\r\n @if (_subTitle) {\r\n <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n }\r\n </div>\r\n </ng-content>\r\n </div>\r\n <div class=\"d-flex\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (_collapsable) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (_collapsed) {\r\n <mat-icon>expand_more</mat-icon>\r\n } @else {\r\n <mat-icon>expand_less</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (!_collapsed \|\| _hideHeader) {\r\n <!-- Nếu header bị ẩn thì không cần border top -->\r\n <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n","import { Component, input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sd-section-item',\r\n templateUrl: './section-item.component.html',\r\n styleUrls: ['section-item.component.scss'],\r\n standalone: true,\r\n})\r\nexport class SdSectionItem {\r\n label = input.required<string>();\r\n labelWidth = input<string, string \| null \| undefined>('150px', {\r\n transform: (val: any): string => {\r\n return val \|\| '150px';\r\n },\r\n });\r\n}\r\n","<div class=\"c-item\">\r\n <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}