@sdcorejs/angular 20.0.1 → 20.0.3

package/fesm2022/sdcorejs-angular-components-history.mjs

@@ -14,11 +14,11 @@ class ViewDateTimePipe {
         }
         return DateUtilities.toFormat(value, 'HH:mm dd/MM/yyyy');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ViewDateTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: ViewDateTimePipe, isStandalone: true, name: "viewDateTime" });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ViewDateTimePipe, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ViewDateTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.24", ngImport: i0, type: ViewDateTimePipe, isStandalone: true, name: "viewDateTime" });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ViewDateTimePipe, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ViewDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ViewDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'viewDateTime',
@@ -33,10 +33,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
 
 class SdHistoryItem {
     items = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdHistoryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdHistoryItem, isStandalone: true, selector: "sd-history", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"sd-history\">\n  <div class=\"history-container\">\n    <div class=\"history-line\"></div>\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\n      <div class=\"dot\"></div>\n      <div class=\"card\">\n        <div class=\"header\">\n          <div class=\"title-wrapper\">\n            <span class=\"title\">{{ item.title }}</span>\n            <span class=\"status\">\n                @if (item?.status) {\n                  <sd-badge\n                  [icon]=\"item.status?.icon\"\n                  [title]=\"item.status?.title\"\n                  [color]=\"item.status?.color\"></sd-badge>\n                }\n            </span>\n          </div>\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\n        </div>\n        <div class=\"meta\">\n          @if (item?.actor) {\n            <span>{{ 'core.component.history.by' | translate }} <strong>&#64;{{ item.actor }}</strong></span>\n          }\n          @if (item?.source) {\n            <span> &#183; {{ item.source }}</span>\n          }\n        </div>\n        <div class=\"description\">\n          {{ item?.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sd-history{padding:16px}.history-container{position:relative;padding-left:20px;font-size:14px;line-height:20px;min-width:470px;max-width:100%}.history-line{position:absolute;left:8px;top:0;bottom:0;width:2px;background-color:#94b0ff}.history-item{position:relative;margin-bottom:16px;padding-left:10px}.history-item .dot{position:absolute;left:-16px;top:12px;width:12px;height:12px;background-color:#94b0ff;border-radius:50%}.history-item .card{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;padding:8px 8px 8px 16px}.history-item .card .header{display:flex;justify-content:space-between;align-items:center}.history-item .card .header .title-wrapper{display:flex;align-items:flex-start;padding-right:8px}.history-item .card .header .title{margin-right:8px;color:#757575}.history-item .card .header .status{display:flex;align-items:center}.history-item .card .header .status mat-icon{margin-right:4px}.history-item .card .header .date{color:#757575;font-size:12px;line-height:16px}.history-item .card .meta{color:#757575;margin-top:4px}.history-item .card .meta strong{color:#000}.history-item .card .description{margin-top:4px;color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: ViewDateTimePipe, name: "viewDateTime" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdHistoryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdHistoryItem, isStandalone: true, selector: "sd-history", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"sd-history\">\n  <div class=\"history-container\">\n    <div class=\"history-line\"></div>\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\n      <div class=\"dot\"></div>\n      <div class=\"card\">\n        <div class=\"header\">\n          <div class=\"title-wrapper\">\n            <span class=\"title\">{{ item.title }}</span>\n            <span class=\"status\">\n                @if (item?.status) {\n                  <sd-badge\n                  [icon]=\"item.status?.icon\"\n                  [title]=\"item.status?.title\"\n                  [color]=\"item.status?.color\"></sd-badge>\n                }\n            </span>\n          </div>\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\n        </div>\n        <div class=\"meta\">\n          @if (item?.actor) {\n            <span>{{ 'core.component.history.by' | translate }} <strong>&#64;{{ item.actor }}</strong></span>\n          }\n          @if (item?.source) {\n            <span> &#183; {{ item.source }}</span>\n          }\n        </div>\n        <div class=\"description\">\n          {{ item?.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sd-history{padding:16px}.history-container{position:relative;padding-left:20px;font-size:14px;line-height:20px;min-width:470px;max-width:100%}.history-line{position:absolute;left:8px;top:0;bottom:0;width:2px;background-color:#94b0ff}.history-item{position:relative;margin-bottom:16px;padding-left:10px}.history-item .dot{position:absolute;left:-16px;top:12px;width:12px;height:12px;background-color:#94b0ff;border-radius:50%}.history-item .card{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;padding:8px 8px 8px 16px}.history-item .card .header{display:flex;justify-content:space-between;align-items:center}.history-item .card .header .title-wrapper{display:flex;align-items:flex-start;padding-right:8px}.history-item .card .header .title{margin-right:8px;color:#757575}.history-item .card .header .status{display:flex;align-items:center}.history-item .card .header .status mat-icon{margin-right:4px}.history-item .card .header .date{color:#757575;font-size:12px;line-height:16px}.history-item .card .meta{color:#757575;margin-top:4px}.history-item .card .meta strong{color:#000}.history-item .card .description{margin-top:4px;color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: ViewDateTimePipe, name: "viewDateTime" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdHistoryItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdHistoryItem, decorators: [{
             type: Component,
             args: [{ selector: 'sd-history', imports: [CommonModule, SdBadge, ViewDateTimePipe, TranslatePipe], template: "<div class=\"sd-history\">\n  <div class=\"history-container\">\n    <div class=\"history-line\"></div>\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\n      <div class=\"dot\"></div>\n      <div class=\"card\">\n        <div class=\"header\">\n          <div class=\"title-wrapper\">\n            <span class=\"title\">{{ item.title }}</span>\n            <span class=\"status\">\n                @if (item?.status) {\n                  <sd-badge\n                  [icon]=\"item.status?.icon\"\n                  [title]=\"item.status?.title\"\n                  [color]=\"item.status?.color\"></sd-badge>\n                }\n            </span>\n          </div>\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\n        </div>\n        <div class=\"meta\">\n          @if (item?.actor) {\n            <span>{{ 'core.component.history.by' | translate }} <strong>&#64;{{ item.actor }}</strong></span>\n          }\n          @if (item?.source) {\n            <span> &#183; {{ item.source }}</span>\n          }\n        </div>\n        <div class=\"description\">\n          {{ item?.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sd-history{padding:16px}.history-container{position:relative;padding-left:20px;font-size:14px;line-height:20px;min-width:470px;max-width:100%}.history-line{position:absolute;left:8px;top:0;bottom:0;width:2px;background-color:#94b0ff}.history-item{position:relative;margin-bottom:16px;padding-left:10px}.history-item .dot{position:absolute;left:-16px;top:12px;width:12px;height:12px;background-color:#94b0ff;border-radius:50%}.history-item .card{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;padding:8px 8px 8px 16px}.history-item .card .header{display:flex;justify-content:space-between;align-items:center}.history-item .card .header .title-wrapper{display:flex;align-items:flex-start;padding-right:8px}.history-item .card .header .title{margin-right:8px;color:#757575}.history-item .card .header .status{display:flex;align-items:center}.history-item .card .header .status mat-icon{margin-right:4px}.history-item .card .header .date{color:#757575;font-size:12px;line-height:16px}.history-item .card .meta{color:#757575;margin-top:4px}.history-item .card .meta strong{color:#000}.history-item .card .description{margin-top:4px;color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { items: [{

package/fesm2022/sdcorejs-angular-components-import-excel.mjs

@@ -44,11 +44,11 @@ class ColumnHiddenPipe {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnHiddenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: ColumnHiddenPipe, isStandalone: true, name: "columnHidden" });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnHiddenPipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ColumnHiddenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.24", ngImport: i0, type: ColumnHiddenPipe, isStandalone: true, name: "columnHidden" });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ColumnHiddenPipe });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnHiddenPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ColumnHiddenPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnHidden'
@@ -95,10 +95,10 @@ class ColumnTransformPipe {
                 return value ?? '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnTransformPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: ColumnTransformPipe, isStandalone: true, name: "columnTransform" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ColumnTransformPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.24", ngImport: i0, type: ColumnTransformPipe, isStandalone: true, name: "columnTransform" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnTransformPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ColumnTransformPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnTransform',
@@ -537,12 +537,12 @@ class SdImportExcel {
     onClosed = () => {
         this.sdClosed.emit();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdImportExcel, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SdExcelService }, { token: i2.SdNotifyService }, { token: ColumnHiddenPipe }, { token: i4.SdLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdImportExcel, isStandalone: true, selector: "sd-import-excel", inputs: { option: "option" }, outputs: { sdClosed: "sdClosed" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdImportExcel, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SdExcelService }, { token: i2.SdNotifyService }, { token: ColumnHiddenPipe }, { token: i4.SdLoadingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdImportExcel, isStandalone: true, selector: "sd-import-excel", inputs: { option: "option" }, outputs: { sdClosed: "sdClosed" }, providers: [
             ColumnHiddenPipe
         ], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "@if (option) {\n  <sd-modal [title]=\"option.title || ('core.component.import-excel.title' | translate)\" (sdClosed)=\"onClosed()\" #modal>\n    <div class=\"d-flex align-items-center mb-12\" style=\"min-height: 32px\">\n      @if (excelItems.length) {\n        <div class=\"d-flex\">\n          <sd-button class=\"mr-2\" (click)=\"view('ALL')\" icon=\"cached\" [title]=\"'core.component.import-excel.see-all' | translate\" size=\"sm\" type=\"outline\"></sd-button>\n\n          <sd-button\n            class=\"mr-2\"\n            (click)=\"view('SUCCESS')\"\n            icon=\"done\"\n            title=\"{{ numberOfSuccess }}\"\n            [tooltip]=\"'core.component.import-excel.valid-rows' | translate\"\n            size=\"sm\"\n            color=\"success\">\n          </sd-button>\n\n          <sd-button\n            class=\"mr-2\"\n            (click)=\"view('WARNING')\"\n            icon=\"warning\"\n            title=\"{{ numberOfWarning }}\"\n            [tooltip]=\"'core.component.import-excel.error-rows' | translate\"\n            size=\"sm\"\n            color=\"warning\">\n          </sd-button>\n\n          <sd-button\n            (click)=\"view('ERROR')\"\n            icon=\"error\"\n            title=\"{{ numberOfError }}\"\n            color=\"error\"\n            [tooltip]=\"'core.component.import-excel.warning-rows' | translate\"\n            size=\"sm\">\n          </sd-button>\n        </div>\n      }\n    </div>\n\n    <div class=\"sd-box border rounded\">\n      <div class=\"sd-box-body p-0\">\n        <div class=\"table-responsive\">\n          <table class=\"sd-table\">\n            <thead>\n              <tr>\n                <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\n                @if (filteredItems.length) {\n                  <th class=\"text-center\" style=\"min-width: 250px; width: 250px\">{{ 'core.component.import-excel.status' | translate }}</th>\n                }\n                @for (column of option.columns; track column.field) {\n                  @if (column | columnHidden) {\n                    <th [ngStyle]=\"{ 'min-width': column.width || '300px', width: column.width || '300px' }\" [matTooltip]=\"column.title\">\n                      <span class=\"c-ellipsis\">\n                        {{ column.title }}\n                      </span>\n                    </th>\n                  }\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n              @if (viewItems.length) {\n                @for (item of viewItems; track item.meta.excelIndex) {\n                  <tr>\n                    <td class=\"text-center c-sticky-left px-4\">\n                      <sd-badge\n                        type=\"tag\"\n                        [title]=\"item.meta.excelIndex\"\n                        [success]=\"!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\n                        [warning]=\"!!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\n                        [error]=\"!!item.meta.errorMessages.length\" />\n                    </td>\n\n                    <td style=\"min-width: 250px; width: 250px\">\n                      <div\n                        class=\"text-wrap\"\n                        [innerHTML]=\"\n                          item.meta.errorMessages[0] || item.meta.warningMessages[0] || ('<span class=\\'text-success\\'>' + ('core.component.import-excel.valid-data' | translate) + '</span>')\n                        \"></div>\n                    </td>\n\n                    @for (column of option.columns; track column.field) {\n                      @if (column | columnHidden) {\n                        <td\n                          class=\"align-middle\"\n                          [ngClass]=\"{\n                            'bg-warning-light': item.meta.warning[column.field] && !item.meta.error[column.field],\n                            'bg-error-light': item.meta.error[column.field]\n                          }\"\n                          [matTooltip]=\"item.meta.error[column.field] || item.meta.warning[column.field]\"\n                          [ngStyle]=\"{ 'min-width': column.width || '300px' }\"\n                          matTooltipPosition=\"above\">\n                          <div class=\"c-ellipsis\">\n                            @if (column.type !== 'array') {\n                              <span [innerHTML]=\"item | columnTransform: column | async\"></span>\n                            }\n\n                            @if (column.type === 'array') {\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\n\n                              <div class=\"d-flex align-items-center justify-content-between\">\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\n\n                                @if (arrayItems?.length) {\n                                  <button\n                                    mat-icon-button\n                                    [matMenuTriggerFor]=\"menu\"\n                                    class=\"c-mat-menu\"\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\n                                  </button>\n\n                                  <mat-menu #menu=\"matMenu\">\n                                    <div\n                                      class=\"px-3 py-2\"\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\n                                      (click)=\"$event.stopPropagation()\"\n                                      aria-hidden=\"true\">\n                                      @for (val of arrayItems; track $index) {\n                                        <div class=\"border-bottom py-2 text-wrap\" [innerHTML]=\"val\"></div>\n                                      }\n                                    </div>\n                                  </mat-menu>\n                                }\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              } @else {\n                <tr>\n                  <td [attr.colspan]=\"option.columns.length + 2\" class=\"p-0 border-0 bg-white\">\n                    <div\n                      class=\"empty-state-wrapper\"\n                      (click)=\"downloadTemplate()\"\n                      [matTooltip]=\"'core.component.import-excel.download-template-tooltip' | translate\"\n                      aria-hidden=\"true\">\n                      <mat-icon class=\"empty-icon\">cloud_download</mat-icon>\n\n                      <h4>{{ 'core.component.import-excel.no-data-upload' | translate }}</h4>\n                      <span class=\"text-small text-link\"> {{ 'core.component.import-excel.click-here-template' | translate }} </span>\n\n                      @if (isDownloadTemplate) {\n                        <div class=\"mt-3\">\n                          <mat-spinner diameter=\"24\" mode=\"indeterminate\"></mat-spinner>\n                        </div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      <div class=\"sd-box-footer border-top\">\n        <div class=\"d-flex align-items-center justify-content-end\">\n          <mat-paginator [length]=\"filteredItems.length || 0\" hidePageSize showFirstLastButtons></mat-paginator>\n        </div>\n      </div>\n    </div>\n    <sd-button sdFooterLeft (click)=\"upload()\" prefixIcon=\"file_upload\" [title]=\"'core.component.import-excel.upload' | translate\" size=\"sm\" color=\"info\" [loading]=\"uploading\">\n    </sd-button>\n    <div class=\"d-flex align-items-center\" sdFooter>\n      @if (filteredItems.length) {\n        <sd-button class=\"mr-4\" (click)=\"export()\" prefixIcon=\"get_app\" [title]=\"'core.component.import-excel.download' | translate\" size=\"sm\" color=\"success\" type=\"outline\">\n        </sd-button>\n      }\n      <sd-button\n        (click)=\"accept()\"\n        [title]=\"'core.component.import-excel.confirm-save' | translate\"\n        [disabled]=\"(numberOfSuccess === 0 && numberOfWarning === 0) || numberOfError > 0 || isUploaded\"\n        color=\"primary\"\n        type=\"fill\"\n        size=\"sm\">\n      </sd-button>\n    </div>\n  </sd-modal>\n}\n", styles: [".table-responsive{position:relative;min-height:50vh;height:50vh;overflow:auto;border:1px solid #dee2e6}.sd-table{width:100%;border-collapse:collapse;margin-bottom:0;font-size:14px}.sd-table thead th{position:sticky;top:0;background-color:#f8f9fa;border-bottom:2px solid #dee2e6;border-top:1px solid #dee2e6;padding:8px 6px;white-space:nowrap;z-index:10;font-weight:600}.sd-table thead th.c-sticky-left{z-index:20}.sd-table tbody td{vertical-align:middle;padding:6px;border-top:1px solid #dee2e6}.sd-table tbody tr:nth-of-type(odd){background-color:#0000000a}.sd-table tbody tr:nth-of-type(2n){background-color:#fff}.sd-table tbody tr:hover,.sd-table tbody tr:hover .c-sticky-left{background-color:#ececec}.sd-table tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.sd-table tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.c-sticky-left{position:sticky;left:0;border-right:1px solid #dee2e6!important;border-left:none!important;z-index:5}.empty-state-wrapper{height:100%;min-height:40vh;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background-color:#f8f9fa;border:2px dashed #cbd5e0;border-radius:8px;margin:16px;transition:all .2s ease-in-out;color:#6c757d}.empty-state-wrapper:hover{background-color:#e3f2fd;border-color:#2196f3;color:#1976d2}.empty-state-wrapper:hover .empty-icon{transform:scale(1.1);color:#1976d2}.empty-state-wrapper:hover .text-link{text-decoration:underline}.empty-state-wrapper .empty-icon{font-size:64px;height:64px;width:64px;margin-bottom:16px;color:#a0aec0;transition:transform .2s}.empty-state-wrapper h4{font-weight:500;margin-bottom:4px}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding:0 4px}.c-mat-menu{border:none;min-width:unset;padding:0 8px}.c-mat-menu mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;vertical-align:middle}.cursor-pointer{cursor:pointer}:host ::ng-deep .mat-paginator-container{min-height:36px;height:36px;padding:0 8px}:host ::ng-deep .mat-paginator-range-label{margin:0 10px}:host ::ng-deep .mat-icon-button{width:32px;height:32px;line-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { 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: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: ColumnTransformPipe, name: "columnTransform" }, { kind: "pipe", type: ColumnHiddenPipe, name: "columnHidden" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdImportExcel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdImportExcel, decorators: [{
             type: Component,
             args: [{ selector: 'sd-import-excel', imports: [
                         CommonModule,

package/fesm2022/sdcorejs-angular-components-inform.mjs

@@ -11,10 +11,10 @@ import { TranslatePipe } from '@sdcorejs/angular/i18n';
  * Khi có phần tử mang [sdInformAction], component ẩn link `actionLabel` mặc định.
  */
 class SdInformActionDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInformActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: SdInformActionDirective, isStandalone: true, selector: "[sdInformAction]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdInformActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: SdInformActionDirective, isStandalone: true, selector: "[sdInformAction]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInformActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdInformActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdInformAction]',
@@ -174,10 +174,10 @@ class SdInform {
         event.stopPropagation();
         this.sdAction.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInform, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdInform, isStandalone: true, selector: "sd-inform", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdAction: "sdAction" }, queries: [{ propertyName: "actionSlot", first: true, predicate: SdInformActionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!dismissed()) {\n  @let ic = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (ic) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n    }\n\n    @let al = actionLabel();\n    <div class=\"c-inform-content\">\n      @if (title(); as t) {\n        <div class=\"c-inform-title\">{{ t }}</div>\n      }\n      @if (description(); as d) {\n        <div\n          #body\n          class=\"c-inform-body\"\n          [class.is-clamped]=\"clampLines() !== null\"\n          [style.-webkit-line-clamp]=\"clampLines()\">\n          {{ d }}\n        </div>\n      }\n      @if (showToggle()) {\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\n        </button>\n      }\n\n      @if (hasActionSlot()) {\n        <div class=\"c-inform-action\">\n          <ng-content select=\"[sdInformAction]\"></ng-content>\n        </div>\n      } @else if (al) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ al }}\n        </button>\n      }\n    </div>\n\n    @if (closable()) {\n      <button\n        type=\"button\"\n        class=\"c-inform-close\"\n        [attr.aria-label]=\"'core.common.close' | translate\"\n        (click)=\"onClose($event)\">\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdInform, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdInform, isStandalone: true, selector: "sd-inform", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdAction: "sdAction" }, queries: [{ propertyName: "actionSlot", first: true, predicate: SdInformActionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!dismissed()) {\n  @let ic = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (ic) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n    }\n\n    @let al = actionLabel();\n    <div class=\"c-inform-content\">\n      @if (title(); as t) {\n        <div class=\"c-inform-title\">{{ t }}</div>\n      }\n      @if (description(); as d) {\n        <div\n          #body\n          class=\"c-inform-body\"\n          [class.is-clamped]=\"clampLines() !== null\"\n          [style.-webkit-line-clamp]=\"clampLines()\">\n          {{ d }}\n        </div>\n      }\n      @if (showToggle()) {\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\n        </button>\n      }\n\n      @if (hasActionSlot()) {\n        <div class=\"c-inform-action\">\n          <ng-content select=\"[sdInformAction]\"></ng-content>\n        </div>\n      } @else if (al) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ al }}\n        </button>\n      }\n    </div>\n\n    @if (closable()) {\n      <button\n        type=\"button\"\n        class=\"c-inform-close\"\n        [attr.aria-label]=\"'core.common.close' | translate\"\n        (click)=\"onClose($event)\">\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInform, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdInform, decorators: [{
             type: Component,
             args: [{ selector: 'sd-inform', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, TranslatePipe], template: "@if (!dismissed()) {\n  @let ic = effectiveIcon();\n  <div\n    class=\"c-inform\"\n    [attr.role]=\"liveRole()\"\n    [ngClass]=\"colorClasses()\"\n    [attr.data-autoId]=\"autoId() || null\"\n    [attr.data-autoid]=\"autoId() || null\">\n\n    @if (ic) {\n      <mat-icon class=\"c-inform-icon c-material-icon\" aria-hidden=\"true\" [ngClass]=\"fontSetClasses()\">{{ ic }}</mat-icon>\n    }\n\n    @let al = actionLabel();\n    <div class=\"c-inform-content\">\n      @if (title(); as t) {\n        <div class=\"c-inform-title\">{{ t }}</div>\n      }\n      @if (description(); as d) {\n        <div\n          #body\n          class=\"c-inform-body\"\n          [class.is-clamped]=\"clampLines() !== null\"\n          [style.-webkit-line-clamp]=\"clampLines()\">\n          {{ d }}\n        </div>\n      }\n      @if (showToggle()) {\n        <button type=\"button\" class=\"c-inform-toggle\" (click)=\"toggleExpanded()\">\n          {{ (expanded() ? 'core.component.inform.show-less' : 'core.component.inform.show-more') | translate }}\n        </button>\n      }\n\n      @if (hasActionSlot()) {\n        <div class=\"c-inform-action\">\n          <ng-content select=\"[sdInformAction]\"></ng-content>\n        </div>\n      } @else if (al) {\n        <button type=\"button\" class=\"c-inform-action c-inform-action-link\" (click)=\"onAction($event)\">\n          {{ al }}\n        </button>\n      }\n    </div>\n\n    @if (closable()) {\n      <button\n        type=\"button\"\n        class=\"c-inform-close\"\n        [attr.aria-label]=\"'core.common.close' | translate\"\n        (click)=\"onClose($event)\">\n        <mat-icon class=\"material-icons\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-inform{display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:#fff}.c-inform.c-primary{border-color:var(--sd-primary);background:var(--sd-primary-light)}.c-inform.c-primary .c-inform-icon,.c-inform.c-primary .c-inform-title{color:var(--sd-primary)}.c-inform.c-secondary{border-color:var(--sd-secondary);background:var(--sd-secondary-light)}.c-inform.c-secondary .c-inform-icon,.c-inform.c-secondary .c-inform-title{color:var(--sd-secondary)}.c-inform.c-info{border-color:var(--sd-info);background:var(--sd-info-light)}.c-inform.c-info .c-inform-icon,.c-inform.c-info .c-inform-title{color:var(--sd-info)}.c-inform.c-success{border-color:var(--sd-success);background:var(--sd-success-light)}.c-inform.c-success .c-inform-icon,.c-inform.c-success .c-inform-title{color:var(--sd-success)}.c-inform.c-warning{border-color:var(--sd-warning);background:var(--sd-warning-light)}.c-inform.c-warning .c-inform-icon,.c-inform.c-warning .c-inform-title{color:var(--sd-warning)}.c-inform.c-error{border-color:var(--sd-error);background:var(--sd-error-light)}.c-inform.c-error .c-inform-icon,.c-inform.c-error .c-inform-title{color:var(--sd-error)}.c-inform .c-inform-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;line-height:20px}.c-inform .c-inform-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.c-inform .c-inform-title{font-weight:600;font-size:14px;line-height:20px}.c-inform .c-inform-body{font-size:14px;line-height:20px;color:var(--sd-black500);overflow-wrap:break-word}.c-inform .c-inform-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{align-self:flex-start;margin-top:4px;padding:0;border:none;background:none;cursor:pointer;font-size:14px;line-height:20px}.c-inform .c-inform-toggle,.c-inform .c-inform-action-link{color:var(--sd-info)}.c-inform .c-inform-action-link:hover{text-decoration:underline}.c-inform .c-inform-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;padding:0;border:none;background:transparent;cursor:pointer;color:var(--sd-black400);transition:background-color 80ms ease,color 80ms ease}.c-inform .c-inform-close:hover{background:#0000000f;color:var(--sd-error)}.c-inform .c-inform-close mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], fontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSet", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], lineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClamp", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }], sdAction: [{ type: i0.Output, args: ["sdAction"] }], bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], actionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdInformActionDirective), { isSignal: true }] }] } });

package/fesm2022/sdcorejs-angular-components-mini-editor.mjs

@@ -287,8 +287,8 @@ class SdMiniEditor {
     /** ControlValueAccessor callbacks */
     #onChange = () => { };
     #onTouched = () => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, host: { properties: { "style.--sd-mini-editor-max-height": "this.maxEditorHeight" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, host: { properties: { "style.--sd-mini-editor-max-height": "this.maxEditorHeight" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdMiniEditor),
@@ -296,7 +296,7 @@ class SdMiniEditor {
             },
         ], ngImport: i0, template: "<sd-ckeditor-styles />\n<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\n", styles: [".sd-mini-editor{display:block}::ng-deep .ck-powered-by-balloon{display:none!important}::ng-deep .ck-mentions .ck-button.ck-on{background:var(--sd-primary)!important;color:#fff!important}::ng-deep .ck-mentions .ck-button.ck-on *{color:#fff!important}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__editable_inline{border:var(--ck-focus-ring);border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:var(--sd-mini-editor-max-height);overflow:auto}:host ::ng-deep .ck-toolbar{border-radius:0;border:0!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}:host ::ng-deep .ck-custom-mention{font-weight:600;padding:0 2px;display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none;color:#2962ff}:host ::ng-deep .ck-custom-mention:before{content:attr(data-marker)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdMiniEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdMiniEditor, decorators: [{
             type: Component,
             args: [{ selector: 'sd-mini-editor', standalone: true, imports: [CommonModule, CKEditorModule, SdCKEditorStyles], providers: [
                         {

package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs

@@ -0,0 +1,158 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, booleanAttribute, output, inject, ChangeDetectorRef, DestroyRef, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/cdk/portal';
+import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { SdLoadingService } from '@sdcorejs/angular/services';
+import * as uuid from 'uuid';
+
+class SdModalResizable {
+    id = `I${uuid.v4()}`;
+    portal = viewChild.required(CdkPortal);
+    editable = input(false, ...(ngDevMode ? [{ debugName: "editable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    width = input('480px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    editingChanged = output();
+    #embeddedViewRef;
+    #ref = inject(ChangeDetectorRef);
+    #loadingService = inject(SdLoadingService);
+    #destroyRef = inject(DestroyRef);
+    isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
+    isOpened = signal(false, ...(ngDevMode ? [{ debugName: "isOpened" }] : []));
+    isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isMinimum = signal(false, ...(ngDevMode ? [{ debugName: "isMinimum" }] : []));
+    isMaximum = signal(false, ...(ngDevMode ? [{ debugName: "isMaximum" }] : []));
+    constructor() {
+        afterNextRender(() => {
+            // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →
+            // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích
+            // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).
+            const outlet = new DomPortalOutlet(document.body);
+            this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());
+            this.#detectChanges();
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#embeddedViewRef?.destroy();
+        });
+    }
+    open = () => {
+        this.isOpened.set(true);
+        this.#detectChanges();
+        const element = this.#getElement();
+        if (element && !element.classList.contains('c-minium')) {
+            setTimeout(() => {
+                const maximumWidth = element.offsetWidth;
+                if (maximumWidth > 0) {
+                    element.dataset['width'] = maximumWidth.toString();
+                }
+                element.classList.remove('c-closed');
+            }, 100);
+        }
+        this.maximize();
+    };
+    close = () => {
+        this.isOpened.set(false);
+        this.#detectChanges();
+        setTimeout(() => {
+            const element = this.#getElement();
+            element?.style.setProperty('width', '0px');
+            element?.style.setProperty('right', '0px');
+            element?.classList.remove('c-minium');
+            element?.classList.add('c-closed');
+        }, 100);
+        this.stopLoading();
+        this.#arrangePanels();
+    };
+    minimize = () => {
+        this.isMinimum.set(true);
+        this.#detectChanges();
+        this.#arrangePanels();
+    };
+    maximize = () => {
+        this.isMinimum.set(false);
+        this.#detectChanges();
+        this.#arrangePanels();
+    };
+    toggleMaximum = () => {
+        this.isMaximum.update(isMaximum => !isMaximum);
+        this.#detectChanges();
+        this.#arrangePanels();
+    };
+    startLoading = () => {
+        this.isLoading.set(true);
+        this.#detectChanges();
+        this.#loadingService.stop(`#${this.id}`);
+        this.#loadingService.start(`#${this.id}`);
+    };
+    stopLoading = () => {
+        this.isLoading.set(false);
+        this.#detectChanges();
+        this.#loadingService.stop(`#${this.id}`);
+    };
+    toggleEditable() {
+        this.isEditing.update(isEditing => !isEditing);
+        this.#detectChanges();
+        this.editingChanged.emit(this.isEditing());
+    }
+    onFocus = () => {
+        this.isHover.set(true);
+    };
+    onBlur = () => {
+        this.isHover.set(false);
+    };
+    #arrangePanels = () => {
+        setTimeout(() => {
+            let totalRight = 0;
+            const minimumWidth = 300;
+            document.querySelectorAll('.modal-resizable').forEach(item => {
+                if (item.classList.contains('c-minium')) {
+                    item.style.setProperty('width', `${minimumWidth}px`);
+                    item.style.setProperty('right', `${totalRight}px`);
+                    totalRight += minimumWidth + 8;
+                    return;
+                }
+                if (item.classList.contains('c-closed')) {
+                    return;
+                }
+                const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);
+                if (Number.isNaN(expandedWidth)) {
+                    return;
+                }
+                if (item.classList.contains('c-fullscreen')) {
+                    item.style.setProperty('width', 'calc(100% - 16px)');
+                    item.style.setProperty('right', '8px');
+                }
+                else {
+                    item.style.setProperty('width', `${expandedWidth}px`);
+                    item.style.setProperty('right', `${totalRight}px`);
+                }
+                totalRight += expandedWidth + 8;
+            });
+        }, 200);
+    };
+    #getElement() {
+        return document.getElementById(this.id);
+    }
+    #detectChanges() {
+        this.#ref.markForCheck();
+        this.#embeddedViewRef?.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdModalResizable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdModalResizable, isStandalone: true, selector: "sd-modal-resizable", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editingChanged: "editingChanged" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\n              <mat-icon>remove</mat-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\n              <mat-icon>remove</mat-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\n              <mat-icon>open_in_full</mat-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\n              <mat-icon>fullscreen_exit</mat-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <ng-content select=\"[sdFooter]\"></ng-content>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon .mat-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 0}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdModalResizable, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-modal-resizable', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule], template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\n              <mat-icon>remove</mat-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\n              <mat-icon>remove</mat-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\n              <mat-icon>open_in_full</mat-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\n              <mat-icon>fullscreen_exit</mat-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <ng-content select=\"[sdFooter]\"></ng-content>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon .mat-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 0}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { portal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortal), { isSignal: true }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], editingChanged: [{ type: i0.Output, args: ["editingChanged"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdModalResizable };
+//# sourceMappingURL=sdcorejs-angular-components-modal-resizable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdcorejs-angular-components-modal-resizable.mjs","sources":["../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sdcorejs-angular/components/modal-resizable/sdcorejs-angular-components-modal-resizable.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  afterNextRender,\n  booleanAttribute,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport * as uuid from 'uuid';\n\n@Component({\n  selector: 'sd-modal-resizable',\n  templateUrl: './modal-resizable.component.html',\n  styleUrls: ['./modal-resizable.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule],\n})\nexport class SdModalResizable {\n  readonly id = `I${uuid.v4()}`;\n  readonly portal = viewChild.required(CdkPortal);\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  readonly width = input<string>('480px');\n  readonly editingChanged = output<boolean>();\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n  readonly #ref = inject(ChangeDetectorRef);\n  readonly #loadingService = inject(SdLoadingService);\n  readonly #destroyRef = inject(DestroyRef);\n  readonly isEditing = signal(false);\n  readonly isOpened = signal(false);\n  readonly isHover = signal(false);\n  readonly isLoading = signal(false);\n  readonly isMinimum = signal(false);\n  readonly isMaximum = signal(false);\n\n  constructor() {\n    afterNextRender(() => {\n      // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →\n      // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích\n      // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).\n      const outlet = new DomPortalOutlet(document.body);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n      this.#detectChanges();\n    });\n\n    this.#destroyRef.onDestroy(() => {\n      this.#embeddedViewRef?.destroy();\n    });\n  }\n\n  open = () => {\n    this.isOpened.set(true);\n    this.#detectChanges();\n\n    const element = this.#getElement();\n    if (element && !element.classList.contains('c-minium')) {\n      setTimeout(() => {\n        const maximumWidth = element.offsetWidth;\n        if (maximumWidth > 0) {\n          element.dataset['width'] = maximumWidth.toString();\n        }\n        element.classList.remove('c-closed');\n      }, 100);\n    }\n\n    this.maximize();\n  };\n\n  close = () => {\n    this.isOpened.set(false);\n    this.#detectChanges();\n    setTimeout(() => {\n      const element = this.#getElement();\n      element?.style.setProperty('width', '0px');\n      element?.style.setProperty('right', '0px');\n      element?.classList.remove('c-minium');\n      element?.classList.add('c-closed');\n    }, 100);\n    this.stopLoading();\n\n    this.#arrangePanels();\n  };\n\n  minimize = () => {\n    this.isMinimum.set(true);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  maximize = () => {\n    this.isMinimum.set(false);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  toggleMaximum = () => {\n    this.isMaximum.update(isMaximum => !isMaximum);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  startLoading = () => {\n    this.isLoading.set(true);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  stopLoading = () => {\n    this.isLoading.set(false);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  toggleEditable() {\n    this.isEditing.update(isEditing => !isEditing);\n    this.#detectChanges();\n    this.editingChanged.emit(this.isEditing());\n  }\n\n  onFocus = () => {\n    this.isHover.set(true);\n  };\n\n  onBlur = () => {\n    this.isHover.set(false);\n  };\n\n  #arrangePanels = () => {\n    setTimeout(() => {\n      let totalRight = 0;\n      const minimumWidth = 300;\n      document.querySelectorAll<HTMLElement>('.modal-resizable').forEach(item => {\n        if (item.classList.contains('c-minium')) {\n          item.style.setProperty('width', `${minimumWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n          totalRight += minimumWidth + 8;\n          return;\n        }\n\n        if (item.classList.contains('c-closed')) {\n          return;\n        }\n\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\n        if (Number.isNaN(expandedWidth)) {\n          return;\n        }\n\n        if (item.classList.contains('c-fullscreen')) {\n          item.style.setProperty('width', 'calc(100% - 16px)');\n          item.style.setProperty('right', '8px');\n        } else {\n          item.style.setProperty('width', `${expandedWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n        }\n        totalRight += expandedWidth + 8;\n      });\n    }, 200);\n  };\n\n  #getElement() {\n    return document.getElementById(this.id);\n  }\n\n  #detectChanges() {\n    this.#ref.markForCheck();\n    this.#embeddedViewRef?.detectChanges();\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\n              <mat-icon>remove</mat-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\n              <mat-icon>remove</mat-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\n              <mat-icon>open_in_full</mat-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\n              <mat-icon>fullscreen_exit</mat-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <ng-content select=\"[sdFooter]\"></ng-content>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -92,10 +92,10 @@ class SdModal {
         this.#bottomSheetRef?.dismiss();
         this.#dialogRef?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
             args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], modalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalClass", required: false }] }], lazyLoadContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadContent", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }] } });