npm - @sd-angular/core - Versions diffs - 19.0.31 → 19.0.32 - Mend

@sd-angular/core 19.0.31 → 19.0.32

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

Files changed (65) hide show

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

@@ -1,3 +1,4 @@
+import { SdDataState } from '@sd-angular/core/components/data-state';
 import * as i0 from '@angular/core';
 import { Pipe, Injectable, EventEmitter, inject, Output, ViewChild, Input, Component } from '@angular/core';
 import * as i7 from '@angular/material/paginator';
@@ -118,6 +119,26 @@ class SdImportExcel {
     // originItems: SdExcelItem[] = [];
     hasDescription = false;
     showing = 'ALL';
+    filters = [
+        { value: 'ALL', label: 'core.component.import-excel.filter-all', icon: 'list_alt' },
+        { value: 'SUCCESS', label: 'core.component.import-excel.filter-success', icon: 'check_circle_outline' },
+        { value: 'WARNING', label: 'core.component.import-excel.filter-warning', icon: 'warning_amber' },
+        { value: 'ERROR', label: 'core.component.import-excel.filter-error', icon: 'error_outline' },
+    ];
+    filterCount = (value) => {
+        if (value === 'SUCCESS')
+            return this.numberOfSuccess;
+        if (value === 'WARNING')
+            return this.numberOfWarning;
+        if (value === 'ERROR')
+            return this.numberOfError;
+        return this.excelItems.length;
+    };
+    // why: callback có thể trả cùng thông báo nhiều lần; chỉ gộp phần hiển thị, giữ nguyên kết quả validation.
+    validationMessages = (item) => ({
+        errors: [...new Set(item.meta.errorMessages)],
+        warnings: [...new Set(item.meta.warningMessages)],
+    });
     filteredItems = [];
     viewItems = [];
     numberOfSuccess = 0;
@@ -127,6 +148,11 @@ class SdImportExcel {
     #paginator;
     #paginatorSub;
     set paginator(paginator) {
+        if (!paginator) {
+            this.#paginatorSub?.unsubscribe();
+            this.#paginator = undefined;
+            return;
+        }
         if (paginator && this.#paginator !== paginator) {
             this.#paginator = paginator;
             this.#paginatorSub?.unsubscribe(); // Clear cũ
@@ -168,10 +194,13 @@ class SdImportExcel {
         this.numberOfError = 0;
         this.numberOfWarning = 0;
         this.showing = 'ALL';
+        this.file = undefined;
+        this.isUploaded = false;
     };
     #reload = () => {
-        const pageIndex = this.#paginator.pageIndex;
-        const pageSize = this.#paginator.pageSize;
+        const pageIndex = this.#paginator?.pageIndex ?? 0;
+        // why: lần đọc tệp đầu tiên chưa render paginator; dùng cùng pageSize của preview.
+        const pageSize = this.#paginator?.pageSize || 10;
         this.filteredItems = this.excelItems.filter(item => {
             const { errorMessages, warningMessages } = item.meta;
             if (this.showing === 'SUCCESS') {
@@ -249,7 +278,8 @@ class SdImportExcel {
                     }
                 });
             }
-            this.#paginator.pageIndex = 0;
+            if (this.#paginator)
+                this.#paginator.pageIndex = 0;
             this.#reload();
             this.ref.detectChanges();
             this.isUploaded = false;
@@ -342,7 +372,10 @@ class SdImportExcel {
                         continue;
                     }
                     if (column.checkValueInArray && item[column.field] && !column.values.some(e => e.toString() === item[column.field].toString())) {
-                        error[column.field] = this.#i18n.t('core.component.import-excel.value-not-in-list', { value: item[column.field], list: column.values.join() });
+                        error[column.field] = this.#i18n.t('core.component.import-excel.value-not-in-list', {
+                            value: item[column.field],
+                            list: column.values.join(),
+                        });
                         errorMessages.push(`<strong>[${column.title || column.field}]</strong> ${error[column.field]}`);
                         continue;
                     }
@@ -356,29 +389,44 @@ class SdImportExcel {
                     }
                     if (format && item[column.field]) {
                         if (typeof val !== 'string') {
-                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', { value: val ?? '', format: column.format ?? '' });
+                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', {
+                                value: val ?? '',
+                                format: column.format ?? '',
+                            });
                             errorMessages.push(`<strong>[${column.title || column.field}]</strong> ${error[column.field]}`);
                             continue;
                         }
                         if (type === 'date' && !this.#isValidDate(format, val)) {
-                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', { value: val ?? '', format: column.format ?? '' });
+                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', {
+                                value: val ?? '',
+                                format: column.format ?? '',
+                            });
                             errorMessages.push(`<strong>[${column.title || column.field}]</strong> ${error[column.field]}`);
                             continue;
                         }
                         if (type === 'time' && !this.#isValidTime(format, val)) {
-                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', { value: val ?? '', format: column.format ?? '' });
+                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', {
+                                value: val ?? '',
+                                format: column.format ?? '',
+                            });
                             errorMessages.push(`<strong>[${column.title || column.field}]</strong> ${error[column.field]}`);
                             continue;
                         }
                         if (type === 'datetime' && !this.#isValidDateTime(format, val)) {
-                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', { value: val ?? '', format: column.format ?? '' });
+                            error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', {
+                                value: val ?? '',
+                                format: column.format ?? '',
+                            });
                             errorMessages.push(`<strong>[${column.title || column.field}]</strong> ${error[column.field]}`);
                             continue;
                         }
                         item[column.field] = DateUtilities.parseFrom(val, format);
                     }
                     if (item[column.field] && !DateUtilities.isDate(item[column.field])) {
-                        error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', { value: val ?? '', format: column.format ?? '' });
+                        error[column.field] = this.#i18n.t('core.component.import-excel.invalid-date-format', {
+                            value: val ?? '',
+                            format: column.format ?? '',
+                        });
                         errorMessages.push(`<strong>[${column.title || column.field}]</strong> ${error[column.field]}`);
                         continue;
                     }
@@ -426,7 +474,8 @@ class SdImportExcel {
     };
     view = (showing = 'ALL') => {
         this.showing = showing;
-        this.#paginator.pageIndex = 0;
+        if (this.#paginator)
+            this.#paginator.pageIndex = 0;
         this.#reload();
     };
     downloadTemplate = async () => {
@@ -496,7 +545,9 @@ class SdImportExcel {
                 }
                 return {
                     ...result,
-                    sdMessage: (e.meta.errorMessages.join(', ') || e.meta.warningMessages.join(', ') || this.#i18n.t('core.component.import-excel.success'))
+                    sdMessage: (e.meta.errorMessages.join(', ') ||
+                        e.meta.warningMessages.join(', ') ||
+                        this.#i18n.t('core.component.import-excel.success'))
                         ?.replace(/<strong>/g, '')
                         .replace(/<\/strong>/g, '')
                         .replace(/<br>/g, '\n'),
@@ -538,13 +589,12 @@ class SdImportExcel {
         this.sdClosed.emit();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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: "19.2.21", 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: "pipe", type: i5.AsyncPipe, name: "async" }, { 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: "pipe", type: ColumnTransformPipe, name: "columnTransform" }, { kind: "pipe", type: ColumnHiddenPipe, name: "columnHidden" }, { 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: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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\n    [title]=\"option.title || ('core.component.import-excel.title' | translate)\"\n    width=\"min(1120px, calc(100vw - 32px))\"\n    (sdClosed)=\"onClosed()\"\n    #modal>\n    <div class=\"sd-import-workspace\" [attr.aria-busy]=\"uploading\">\n      @if (uploading) {\n        <sd-data-state state=\"loading\" [title]=\"'core.component.import-excel.loading' | translate\" message=\"\" />\n      } @else if (!excelItems.length) {\n        <div class=\"sd-import-entry\">\n          <sd-data-state\n            state=\"empty\"\n            icon=\"upload_file\"\n            [title]=\"'core.component.import-excel.title' | translate\"\n            [message]=\"'core.component.import-excel.choose-hint' | translate: { limit: option.limit || 1000 }\" />\n          <div class=\"sd-import-entry-actions\">\n            <sd-button\n              data-import-action=\"choose\"\n              (click)=\"upload()\"\n              prefixIcon=\"upload_file\"\n              [title]=\"'core.component.import-excel.choose-file' | translate\"\n              color=\"primary\"\n              type=\"fill\"\n              size=\"sm\" />\n            <sd-button\n              data-import-action=\"template\"\n              (click)=\"downloadTemplate()\"\n              prefixIcon=\"download\"\n              [title]=\"'core.component.import-excel.template' | translate\"\n              color=\"secondary\"\n              type=\"link\"\n              size=\"sm\"\n              [loading]=\"isDownloadTemplate\" />\n          </div>\n        </div>\n      } @else {\n        <div class=\"sd-import-file\">\n          <span class=\"sd-import-file-icon\" aria-hidden=\"true\"><mat-icon>description</mat-icon></span>\n          <div class=\"sd-import-file-info\">\n            <strong>{{ file?.name || option.fileName || ('core.component.import-excel.title' | translate) }}</strong>\n            <span>{{ 'core.component.import-excel.row-count' | translate: { count: excelItems.length } }}</span>\n          </div>\n          <sd-button\n            (click)=\"upload()\"\n            prefixIcon=\"upload_file\"\n            [title]=\"'core.component.import-excel.replace-file' | translate\"\n            color=\"secondary\"\n            type=\"link\"\n            size=\"sm\" />\n        </div>\n\n        <div class=\"sd-import-filters\" role=\"group\" [attr.aria-label]=\"'core.component.import-excel.status' | translate\">\n          @for (filter of filters; track filter.value) {\n            <button\n              type=\"button\"\n              class=\"sd-import-filter\"\n              [class]=\"'sd-import-filter sd-import-filter--' + filter.value.toLowerCase()\"\n              [attr.data-import-filter]=\"filter.value\"\n              [attr.aria-pressed]=\"showing === filter.value\"\n              (click)=\"view(filter.value)\">\n              <mat-icon aria-hidden=\"true\">{{ filter.icon }}</mat-icon>\n              <span>{{ filter.label | translate }}</span\n              ><span class=\"sd-import-filter-count\">{{ filterCount(filter.value) }}</span>\n            </button>\n          }\n        </div>\n\n        @if (viewItems.length) {\n          <div class=\"table-responsive\" tabindex=\"0\" role=\"region\" [attr.aria-label]=\"'core.component.import-excel.preview' | translate\">\n            <table class=\"sd-table\">\n              <thead>\n                <tr>\n                  <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\n                  <th class=\"sd-import-status\">{{ 'core.component.import-excel.status' | translate }}</th>\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\">{{ column.title }}</span>\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\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                    <td class=\"sd-import-status\">\n                      @let messages = validationMessages(item);\n                      @let issueCount = messages.errors.length + messages.warnings.length;\n                      @if (issueCount) {\n                        <details class=\"sd-import-issues\">\n                          <summary>\n                            <span [innerHTML]=\"item.meta.errorMessages[0] || item.meta.warningMessages[0]\"></span>\n                            <span class=\"sd-import-issue-count\">{{\n                              'core.component.import-excel.issue-count' | translate: { count: issueCount }\n                            }}</span>\n                          </summary>\n                          <ul>\n                            @for (message of messages.errors; track $index) {\n                              <li class=\"sd-import-error\">\n                                <span class=\"sd-import-issue-label\">{{ 'core.component.import-excel.filter-error' | translate }}:</span>\n                                <span [innerHTML]=\"message\"></span>\n                              </li>\n                            }\n                            @for (message of messages.warnings; track $index) {\n                              <li class=\"sd-import-warning\">\n                                <span class=\"sd-import-issue-label\">{{ 'core.component.import-excel.filter-warning' | translate }}:</span>\n                                <span [innerHTML]=\"message\"></span>\n                              </li>\n                            }\n                          </ul>\n                        </details>\n                      } @else {\n                        <span class=\"sd-import-valid\">{{ 'core.component.import-excel.valid-data' | translate }}</span>\n                      }\n                    </td>\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                            } @else {\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\n                              <div class=\"d-flex align-items-center justify-content-between\">\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\n                                @if (arrayItems?.length) {\n                                  <button\n                                    mat-icon-button\n                                    [matMenuTriggerFor]=\"menu\"\n                                    class=\"c-mat-menu\"\n                                    [attr.aria-label]=\"column.title\"\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\n                                  </button>\n                                  <mat-menu #menu=\"matMenu\">\n                                    <div\n                                      class=\"px-3 py-2 text-wrap\"\n                                      role=\"group\"\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\n                                      (click)=\"$event.stopPropagation()\"\n                                      (keydown.enter)=\"$event.stopPropagation()\">\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              </tbody>\n            </table>\n          </div>\n        } @else {\n          <sd-data-state\n            class=\"sd-import-no-results\"\n            state=\"empty\"\n            compact\n            [title]=\"'core.component.import-excel.no-filter-results' | translate\"\n            [message]=\"'core.component.import-excel.no-filter-results-hint' | translate\"\n            [actionLabel]=\"'core.component.import-excel.see-all' | translate\"\n            (sdAction)=\"view('ALL')\" />\n        }\n        <mat-paginator\n          class=\"sd-import-paginator\"\n          [hidden]=\"!filteredItems.length\"\n          [length]=\"filteredItems.length\"\n          [pageSize]=\"10\"\n          hidePageSize />\n\n        <div class=\"sd-import-footer\">\n          @if (numberOfError) {\n            <p class=\"sd-import-blocked\" role=\"status\">\n              {{ 'core.component.import-excel.blocked-errors' | translate: { count: numberOfError } }}\n            </p>\n          } @else if (isUploaded) {\n            <p class=\"sd-import-submitted\" role=\"status\">{{ 'core.component.import-excel.submitted' | translate }}</p>\n          }\n          <div class=\"sd-import-footer-actions\">\n            <sd-button\n              (click)=\"export()\"\n              prefixIcon=\"download\"\n              [disabled]=\"!filteredItems.length\"\n              [title]=\"'core.component.import-excel.download' | translate\"\n              size=\"sm\"\n              color=\"secondary\"\n              type=\"link\" />\n            <sd-button\n              data-import-action=\"accept\"\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          </div>\n        </div>\n      }\n    </div>\n  </sd-modal>\n}\n", styles: [":host{display:block}.sd-import-workspace{min-width:0;color:var(--sd-text, #24272b)}.sd-import-entry{padding:24px 0 32px}.sd-import-entry-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 12px}.sd-import-file{display:flex;align-items:center;gap:12px;padding-bottom:16px}.sd-import-file-icon{display:flex;align-items:center;justify-content:center;flex:0 0 36px;height:36px;border-radius:10px;color:var(--sd-primary, #005cbb);background:var(--sd-primary-light, #e5effa)}.sd-import-file-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.sd-import-file-info strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.sd-import-file-info>span{font-size:12px;color:var(--sd-text-secondary, #62676d)}.sd-import-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px}.sd-import-filter{--filter-color: var(--sd-primary, #005cbb);--filter-bg: var(--sd-primary-light, #e5effa);display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 10px;border:1px solid var(--sd-border, #dfe2e7);border-radius:8px;background:var(--sd-surface, #fff);color:var(--sd-text-secondary, #62676d);cursor:pointer;font:inherit;font-size:13px}.sd-import-filter--success{--filter-color: var(--sd-success, #2b7d39);--filter-bg: var(--sd-success-light, #e4f3e6)}.sd-import-filter--warning{--filter-color: var(--sd-warning-dark, #8a5700);--filter-bg: var(--sd-warning-light, #fff3d8)}.sd-import-filter--error{--filter-color: var(--sd-error, #bc3030);--filter-bg: var(--sd-error-light, #fce8e8)}.sd-import-filter[aria-pressed=true]{background:var(--filter-bg);color:var(--filter-color);border-color:var(--filter-color);font-weight:600}.sd-import-filter:hover{background:var(--filter-bg);color:var(--filter-color)}.sd-import-filter:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-import-filter sd-icon,.sd-import-filter mat-icon{width:18px;height:18px;font-size:18px}.sd-import-filter-count{font-variant-numeric:tabular-nums;min-width:16px;text-align:center}.table-responsive{position:relative;max-height:50vh;overflow:auto;border:1px solid var(--sd-border, #dfe2e7);border-radius:8px}.table-responsive:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}.sd-table thead th{position:sticky;top:0;padding:10px 8px;white-space:nowrap;z-index:2;font-weight:600;background:var(--sd-surface-variant, #f6f7f9);border-bottom:1px solid var(--sd-border, #dfe2e7)}.sd-table thead th.c-sticky-left{z-index:3}.sd-table tbody td{padding:10px 8px;border-bottom:1px solid var(--sd-border, #e8eaed);vertical-align:top}.sd-table tbody tr:last-child td{border-bottom:0}.sd-table tbody tr{background:var(--sd-surface, #fff)}.sd-table tbody tr:hover{background:var(--sd-surface-variant, #f6f7f9)}.c-sticky-left{position:sticky;left:0;background:inherit;z-index:1;border-right:1px solid var(--sd-border, #e8eaed)}.sd-import-status{min-width:240px;width:240px;max-width:320px;white-space:normal!important;overflow-wrap:anywhere}.sd-import-issues summary{cursor:pointer;line-height:1.5}.sd-import-issues summary:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px;border-radius:3px}.sd-import-issues ul{padding-left:18px;margin:8px 0 0}.sd-import-issues li+li{margin-top:6px}.sd-import-issue-count{display:block;color:var(--sd-primary, #005cbb);font-size:12px;margin-top:4px}.sd-import-issue-label{font-weight:600}.sd-import-error,.sd-import-blocked{color:var(--sd-error, #bc3030)}.sd-import-warning{color:var(--sd-warning-dark, #8a5700)}.sd-import-valid,.sd-import-submitted{color:var(--sd-success, #2b7d39)}.sd-import-no-results{display:block;padding:24px 0;border:1px solid var(--sd-border, #dfe2e7);border-radius:8px}.sd-import-footer{padding:12px 0 0;border-top:1px solid var(--sd-border, #dfe2e7)}.sd-import-footer p{margin:0 0 10px;font-size:13px;line-height:1.5}.sd-import-footer-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}.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}.sd-import-paginator{background:transparent}.sd-import-paginator ::ng-deep .mat-mdc-paginator-container{padding:0;min-height:48px}.sd-import-paginator ::ng-deep .mat-mdc-paginator-range-label{white-space:nowrap;margin:0 12px 0 0}@media(max-width:600px){.sd-import-entry{padding:4px 0 16px}.sd-import-file{flex-wrap:wrap;gap:8px}.sd-import-file>sd-button{margin-left:auto}.sd-import-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sd-import-filter{min-height:40px;padding:6px;gap:5px}.sd-import-footer-actions sd-button{flex:1;min-width:0}.sd-import-footer-actions ::ng-deep sd-button button{width:100%;min-height:40px}}@media(max-width:400px){.sd-import-footer-actions{display:grid;grid-template-columns:minmax(0,1fr)}.sd-import-status{min-width:180px;width:180px}}\n"], dependencies: [{ kind: "component", type: SdDataState, selector: "sd-data-state", inputs: ["state", "title", "message", "icon", "fontSet", "retryable", "retryLabel", "actionLabel", "compact", "fullPage"], outputs: ["sdRetry", "sdAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { 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: "pipe", type: ColumnTransformPipe, name: "columnTransform" }, { kind: "pipe", type: ColumnHiddenPipe, name: "columnHidden" }, { 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: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdImportExcel, decorators: [{
             type: Component,
             args: [{ selector: 'sd-import-excel', imports: [
+                        SdDataState,
                         CommonModule,
                         FormsModule,
                         MatSlideToggleModule,
@@ -558,10 +608,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatIconModule,
                         MatMenuModule,
                         MatProgressSpinner,
-                        SdBadge, TranslatePipe
-                    ], providers: [
-                        ColumnHiddenPipe
-                    ], 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"] }]
+                        SdBadge,
+                        TranslatePipe,
+                    ], providers: [ColumnHiddenPipe], template: "@if (option) {\n  <sd-modal\n    [title]=\"option.title || ('core.component.import-excel.title' | translate)\"\n    width=\"min(1120px, calc(100vw - 32px))\"\n    (sdClosed)=\"onClosed()\"\n    #modal>\n    <div class=\"sd-import-workspace\" [attr.aria-busy]=\"uploading\">\n      @if (uploading) {\n        <sd-data-state state=\"loading\" [title]=\"'core.component.import-excel.loading' | translate\" message=\"\" />\n      } @else if (!excelItems.length) {\n        <div class=\"sd-import-entry\">\n          <sd-data-state\n            state=\"empty\"\n            icon=\"upload_file\"\n            [title]=\"'core.component.import-excel.title' | translate\"\n            [message]=\"'core.component.import-excel.choose-hint' | translate: { limit: option.limit || 1000 }\" />\n          <div class=\"sd-import-entry-actions\">\n            <sd-button\n              data-import-action=\"choose\"\n              (click)=\"upload()\"\n              prefixIcon=\"upload_file\"\n              [title]=\"'core.component.import-excel.choose-file' | translate\"\n              color=\"primary\"\n              type=\"fill\"\n              size=\"sm\" />\n            <sd-button\n              data-import-action=\"template\"\n              (click)=\"downloadTemplate()\"\n              prefixIcon=\"download\"\n              [title]=\"'core.component.import-excel.template' | translate\"\n              color=\"secondary\"\n              type=\"link\"\n              size=\"sm\"\n              [loading]=\"isDownloadTemplate\" />\n          </div>\n        </div>\n      } @else {\n        <div class=\"sd-import-file\">\n          <span class=\"sd-import-file-icon\" aria-hidden=\"true\"><mat-icon>description</mat-icon></span>\n          <div class=\"sd-import-file-info\">\n            <strong>{{ file?.name || option.fileName || ('core.component.import-excel.title' | translate) }}</strong>\n            <span>{{ 'core.component.import-excel.row-count' | translate: { count: excelItems.length } }}</span>\n          </div>\n          <sd-button\n            (click)=\"upload()\"\n            prefixIcon=\"upload_file\"\n            [title]=\"'core.component.import-excel.replace-file' | translate\"\n            color=\"secondary\"\n            type=\"link\"\n            size=\"sm\" />\n        </div>\n\n        <div class=\"sd-import-filters\" role=\"group\" [attr.aria-label]=\"'core.component.import-excel.status' | translate\">\n          @for (filter of filters; track filter.value) {\n            <button\n              type=\"button\"\n              class=\"sd-import-filter\"\n              [class]=\"'sd-import-filter sd-import-filter--' + filter.value.toLowerCase()\"\n              [attr.data-import-filter]=\"filter.value\"\n              [attr.aria-pressed]=\"showing === filter.value\"\n              (click)=\"view(filter.value)\">\n              <mat-icon aria-hidden=\"true\">{{ filter.icon }}</mat-icon>\n              <span>{{ filter.label | translate }}</span\n              ><span class=\"sd-import-filter-count\">{{ filterCount(filter.value) }}</span>\n            </button>\n          }\n        </div>\n\n        @if (viewItems.length) {\n          <div class=\"table-responsive\" tabindex=\"0\" role=\"region\" [attr.aria-label]=\"'core.component.import-excel.preview' | translate\">\n            <table class=\"sd-table\">\n              <thead>\n                <tr>\n                  <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\n                  <th class=\"sd-import-status\">{{ 'core.component.import-excel.status' | translate }}</th>\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\">{{ column.title }}</span>\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\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                    <td class=\"sd-import-status\">\n                      @let messages = validationMessages(item);\n                      @let issueCount = messages.errors.length + messages.warnings.length;\n                      @if (issueCount) {\n                        <details class=\"sd-import-issues\">\n                          <summary>\n                            <span [innerHTML]=\"item.meta.errorMessages[0] || item.meta.warningMessages[0]\"></span>\n                            <span class=\"sd-import-issue-count\">{{\n                              'core.component.import-excel.issue-count' | translate: { count: issueCount }\n                            }}</span>\n                          </summary>\n                          <ul>\n                            @for (message of messages.errors; track $index) {\n                              <li class=\"sd-import-error\">\n                                <span class=\"sd-import-issue-label\">{{ 'core.component.import-excel.filter-error' | translate }}:</span>\n                                <span [innerHTML]=\"message\"></span>\n                              </li>\n                            }\n                            @for (message of messages.warnings; track $index) {\n                              <li class=\"sd-import-warning\">\n                                <span class=\"sd-import-issue-label\">{{ 'core.component.import-excel.filter-warning' | translate }}:</span>\n                                <span [innerHTML]=\"message\"></span>\n                              </li>\n                            }\n                          </ul>\n                        </details>\n                      } @else {\n                        <span class=\"sd-import-valid\">{{ 'core.component.import-excel.valid-data' | translate }}</span>\n                      }\n                    </td>\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                            } @else {\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\n                              <div class=\"d-flex align-items-center justify-content-between\">\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\n                                @if (arrayItems?.length) {\n                                  <button\n                                    mat-icon-button\n                                    [matMenuTriggerFor]=\"menu\"\n                                    class=\"c-mat-menu\"\n                                    [attr.aria-label]=\"column.title\"\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\n                                  </button>\n                                  <mat-menu #menu=\"matMenu\">\n                                    <div\n                                      class=\"px-3 py-2 text-wrap\"\n                                      role=\"group\"\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\n                                      (click)=\"$event.stopPropagation()\"\n                                      (keydown.enter)=\"$event.stopPropagation()\">\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              </tbody>\n            </table>\n          </div>\n        } @else {\n          <sd-data-state\n            class=\"sd-import-no-results\"\n            state=\"empty\"\n            compact\n            [title]=\"'core.component.import-excel.no-filter-results' | translate\"\n            [message]=\"'core.component.import-excel.no-filter-results-hint' | translate\"\n            [actionLabel]=\"'core.component.import-excel.see-all' | translate\"\n            (sdAction)=\"view('ALL')\" />\n        }\n        <mat-paginator\n          class=\"sd-import-paginator\"\n          [hidden]=\"!filteredItems.length\"\n          [length]=\"filteredItems.length\"\n          [pageSize]=\"10\"\n          hidePageSize />\n\n        <div class=\"sd-import-footer\">\n          @if (numberOfError) {\n            <p class=\"sd-import-blocked\" role=\"status\">\n              {{ 'core.component.import-excel.blocked-errors' | translate: { count: numberOfError } }}\n            </p>\n          } @else if (isUploaded) {\n            <p class=\"sd-import-submitted\" role=\"status\">{{ 'core.component.import-excel.submitted' | translate }}</p>\n          }\n          <div class=\"sd-import-footer-actions\">\n            <sd-button\n              (click)=\"export()\"\n              prefixIcon=\"download\"\n              [disabled]=\"!filteredItems.length\"\n              [title]=\"'core.component.import-excel.download' | translate\"\n              size=\"sm\"\n              color=\"secondary\"\n              type=\"link\" />\n            <sd-button\n              data-import-action=\"accept\"\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          </div>\n        </div>\n      }\n    </div>\n  </sd-modal>\n}\n", styles: [":host{display:block}.sd-import-workspace{min-width:0;color:var(--sd-text, #24272b)}.sd-import-entry{padding:24px 0 32px}.sd-import-entry-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 12px}.sd-import-file{display:flex;align-items:center;gap:12px;padding-bottom:16px}.sd-import-file-icon{display:flex;align-items:center;justify-content:center;flex:0 0 36px;height:36px;border-radius:10px;color:var(--sd-primary, #005cbb);background:var(--sd-primary-light, #e5effa)}.sd-import-file-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.sd-import-file-info strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.sd-import-file-info>span{font-size:12px;color:var(--sd-text-secondary, #62676d)}.sd-import-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px}.sd-import-filter{--filter-color: var(--sd-primary, #005cbb);--filter-bg: var(--sd-primary-light, #e5effa);display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 10px;border:1px solid var(--sd-border, #dfe2e7);border-radius:8px;background:var(--sd-surface, #fff);color:var(--sd-text-secondary, #62676d);cursor:pointer;font:inherit;font-size:13px}.sd-import-filter--success{--filter-color: var(--sd-success, #2b7d39);--filter-bg: var(--sd-success-light, #e4f3e6)}.sd-import-filter--warning{--filter-color: var(--sd-warning-dark, #8a5700);--filter-bg: var(--sd-warning-light, #fff3d8)}.sd-import-filter--error{--filter-color: var(--sd-error, #bc3030);--filter-bg: var(--sd-error-light, #fce8e8)}.sd-import-filter[aria-pressed=true]{background:var(--filter-bg);color:var(--filter-color);border-color:var(--filter-color);font-weight:600}.sd-import-filter:hover{background:var(--filter-bg);color:var(--filter-color)}.sd-import-filter:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-import-filter sd-icon,.sd-import-filter mat-icon{width:18px;height:18px;font-size:18px}.sd-import-filter-count{font-variant-numeric:tabular-nums;min-width:16px;text-align:center}.table-responsive{position:relative;max-height:50vh;overflow:auto;border:1px solid var(--sd-border, #dfe2e7);border-radius:8px}.table-responsive:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}.sd-table thead th{position:sticky;top:0;padding:10px 8px;white-space:nowrap;z-index:2;font-weight:600;background:var(--sd-surface-variant, #f6f7f9);border-bottom:1px solid var(--sd-border, #dfe2e7)}.sd-table thead th.c-sticky-left{z-index:3}.sd-table tbody td{padding:10px 8px;border-bottom:1px solid var(--sd-border, #e8eaed);vertical-align:top}.sd-table tbody tr:last-child td{border-bottom:0}.sd-table tbody tr{background:var(--sd-surface, #fff)}.sd-table tbody tr:hover{background:var(--sd-surface-variant, #f6f7f9)}.c-sticky-left{position:sticky;left:0;background:inherit;z-index:1;border-right:1px solid var(--sd-border, #e8eaed)}.sd-import-status{min-width:240px;width:240px;max-width:320px;white-space:normal!important;overflow-wrap:anywhere}.sd-import-issues summary{cursor:pointer;line-height:1.5}.sd-import-issues summary:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px;border-radius:3px}.sd-import-issues ul{padding-left:18px;margin:8px 0 0}.sd-import-issues li+li{margin-top:6px}.sd-import-issue-count{display:block;color:var(--sd-primary, #005cbb);font-size:12px;margin-top:4px}.sd-import-issue-label{font-weight:600}.sd-import-error,.sd-import-blocked{color:var(--sd-error, #bc3030)}.sd-import-warning{color:var(--sd-warning-dark, #8a5700)}.sd-import-valid,.sd-import-submitted{color:var(--sd-success, #2b7d39)}.sd-import-no-results{display:block;padding:24px 0;border:1px solid var(--sd-border, #dfe2e7);border-radius:8px}.sd-import-footer{padding:12px 0 0;border-top:1px solid var(--sd-border, #dfe2e7)}.sd-import-footer p{margin:0 0 10px;font-size:13px;line-height:1.5}.sd-import-footer-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}.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}.sd-import-paginator{background:transparent}.sd-import-paginator ::ng-deep .mat-mdc-paginator-container{padding:0;min-height:48px}.sd-import-paginator ::ng-deep .mat-mdc-paginator-range-label{white-space:nowrap;margin:0 12px 0 0}@media(max-width:600px){.sd-import-entry{padding:4px 0 16px}.sd-import-file{flex-wrap:wrap;gap:8px}.sd-import-file>sd-button{margin-left:auto}.sd-import-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sd-import-filter{min-height:40px;padding:6px;gap:5px}.sd-import-footer-actions sd-button{flex:1;min-width:0}.sd-import-footer-actions ::ng-deep sd-button button{width:100%;min-height:40px}}@media(max-width:400px){.sd-import-footer-actions{display:grid;grid-template-columns:minmax(0,1fr)}.sd-import-status{min-width:180px;width:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SdExcelService }, { type: i2.SdNotifyService }, { type: ColumnHiddenPipe }, { type: i4.SdLoadingService }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]