npm - @sd-angular/core - Versions diffs - 19.0.0-beta.74 → 19.0.0-beta.76 - Mend

@sd-angular/core 19.0.0-beta.74 → 19.0.0-beta.76

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 (22) 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.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';\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n TemplateRef,\n booleanAttribute,\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 { SdUtilities } from '@sd-angular/core/utilities';\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/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 title = input<string, string \| null \| undefined>('', { transform: (v) => v ?? '' });\n color = input<SdColor, SdColor \| null \| undefined>('primary', { transform: (v) => v ?? 'primary' });\n width = input<SdSize \| string, SdSize \| 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\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 = SdUtilities.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(), { panelClass: this.modalClass() as string \| string[] });\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: true, // mặc định ko cho đóng modal khi click out side\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>\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 <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-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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"}
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", "modalClass", "lazyLoadContent"], 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 });
+    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":";;;;;;;;MAsBa,cAAc,CAAA;AAQL,IAAA,EAAA;AAPA,IAAA,KAAK;AACf,IAAA,KAAK,GAAG,IAAI,YAAY,EAAQ;IAE1C,KAAK,GAAW,SAAS;IACzB,iBAAiB,GAAwC,OAAO;IAChE,WAAW,GAAG,CAAC;IACf,MAAM,GAAY,EAAE;AACpB,IAAA,WAAA,CAAoB,EAAqB,EAAA;QAArB,IAAA,CAAA,EAAE,GAAF,EAAE;IAAsB;AAE5C,IAAA,WAAW,GAAG,OAAO,UAA6B,KAAI;AACpD,QAAA,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC;;QAE5C,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAG,CAAwB,OAAM,SAAS,KAAG;AACvE,YAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;gBACjC,OAAO,KAAK,CAAC,SAAS;AACnB,qBAAA,IAAI,CAAC,OAAM,CAAC,KAAG;AACd,oBAAA,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,IAAI,EAAE;;oBAE3B,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACvC,oBAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oBAChE,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;AACvC,oBAAA,MAAM,KAAK,GAAU;AACnB,wBAAA,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE;AACb,wBAAA,OAAO,EAAE,GAAG,CAAC,eAAe,CAAC,IAAK,CAAC;AACnC,wBAAA,GAAG,EAAE,SAAS;wBACd,IAAI,EAAE,IAAK,CAAC,IAAI;wBAChB,IAAI,EAAE,IAAK,CAAC,IAAI;qBACjB;AACD,oBAAA,OAAO,KAAK;AACd,gBAAA,CAAC;qBACA,KAAK,CAAC,GAAG,IAAG;AACX,oBAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;AAClB,oBAAA,OAAO,IAAI;AACb,gBAAA,CAAC,CAAC;YACN;iBAAO;AACL,gBAAA,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE;AAC5C,oBAAA,MAAM,KAAK,GAAU;AACnB,wBAAA,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE;AACb,wBAAA,OAAO,EAAE,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC;wBACvC,IAAI,EAAE,SAAS,CAAC,IAAI;wBACpB,IAAI,EAAE,SAAS,CAAC,IAAI;qBACrB;AACD,oBAAA,OAAO,KAAK;gBACd;AACA,gBAAA,OAAO,IAAI;YACb;AACF,QAAA,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC;AAC7E,IAAA,CAAC;;AAGD,IAAA,IAAI,GAAG,OAAO,UAAgD,KAAI;QAChE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC9B;QACF;AACA,QAAA,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;QAClC,IAAI,CAAC,MAAM,EAAE;AACb,QAAA,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;AAClB,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;AACxB,IAAA,CAAC;AAED,IAAA,qBAAqB,GAAG,CAAC,KAAa,KAAI;AACxC,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;AACxB,IAAA,CAAC;AAED,IAAA,kBAAkB,GAAG,CAAC,SAAiB,KAAI;QACzC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM;AAC3F,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,CAAC;AACrE,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;AACxB,IAAA,CAAC;IAED,OAAO,GAAG,MAAK;AACb,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AACnB,IAAA,CAAC;AAED,IAAA,WAAW,GAAG,CAAC,KAAa,EAAE,IAA6C,KAAI;AAC7E,QAAA,MAAM,MAAM,GAAW,gBAAgB,GAAG,KAAK;QAC/C,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ;QACF;AACA,QAAA,MAAM,SAAS,GAA0B,IAAI,IAAI,OAAO;AACxD,QAAA,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAClE,IAAA,CAAC;IAED,MAAM,GAAG,MAAK;AACZ,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC;AACtB,IAAA,CAAC;wGAzFU,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACd,OAAO,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBpB,ghEAyCA,EAAA,MAAA,EAAA,CAAA,k1BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDxBY,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,sBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAKhD,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EACnB,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAG3C,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ghEAAA,EAAA,MAAA,EAAA,CAAA,k1BAAA,CAAA,EAAA;sFAG3B,KAAK,EAAA,CAAA;sBAAxB,SAAS;uBAAC,OAAO;gBACR,KAAK,EAAA,CAAA;sBAAd;;;AExBH;;AAEG;;;;"}