@sdcorejs/angular 20.0.9 → 20.0.11

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

@@ -34,11 +34,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdHistoryItem {
     items = [];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdHistoryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 sd-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.25", 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"] }]
+            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 sd-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: [{
                 type: Input
             }] } });

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

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-history.mjs","sources":["../../../projects/sdcorejs-angular/components/history/pipes/view-date.pipe.ts","../../../projects/sdcorejs-angular/components/history/src/history.component.ts","../../../projects/sdcorejs-angular/components/history/src/history.component.html","../../../projects/sdcorejs-angular/components/history/sdcorejs-angular-components-history.ts"],"sourcesContent":["import { Injectable, Pipe, PipeTransform } from '@angular/core';\nimport { DateUtilities } from '@sdcorejs/angular/utilities';\nimport { EMPTY_STR } from '@sdcorejs/utils/constants';\n\n@Pipe({\n  name: 'viewDateTime',\n  standalone: true,\n})\n@Injectable({\n  providedIn: 'root',\n})\nexport class ViewDateTimePipe implements PipeTransform {\n  transform(value: any): string {\n    if (!value || !DateUtilities.isDate(value)) {\n      return EMPTY_STR;\n    }\n    return DateUtilities.toFormat(value, 'HH:mm dd/MM/yyyy');\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { SdBadge } from '@sdcorejs/angular/components/badge';\nimport { SdHistoryItemType } from '../models/history.model';\nimport { ViewDateTimePipe } from '../pipes/view-date.pipe';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\n\n@Component({\n  selector: 'sd-history',\n  imports: [CommonModule, SdBadge, ViewDateTimePipe, TranslatePipe],\n  templateUrl: './history.component.html',\n  styleUrl: './history.component.scss',\n})\nexport class SdHistoryItem {\n  @Input() items: SdHistoryItemType[] = [];\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;MAWa,gBAAgB,CAAA;AAC3B,IAAA,SAAS,CAAC,KAAU,EAAA;QAClB,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AAC1C,YAAA,OAAO,SAAS;QAClB;QACA,OAAO,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IAC1D;wGANW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,cAFf,MAAM,EAAA,CAAA;;4FAEP,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,cAAc;AACpB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;kBACA,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCGY,aAAa,CAAA;IACf,KAAK,GAAwB,EAAE;wGAD7B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb1B,msCAmCA,EAAA,MAAA,EAAA,CAAA,qvCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1BY,YAAY,4JAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,IAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;4FAIrD,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,YAAY,EAAE,OAAO,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,msCAAA,EAAA,MAAA,EAAA,CAAA,qvCAAA,CAAA,EAAA;;sBAKhE;;;AEdH;;AAEG;;;;"}
+{"version":3,"file":"sdcorejs-angular-components-history.mjs","sources":["../../../projects/sdcorejs-angular/components/history/pipes/view-date.pipe.ts","../../../projects/sdcorejs-angular/components/history/src/history.component.ts","../../../projects/sdcorejs-angular/components/history/src/history.component.html","../../../projects/sdcorejs-angular/components/history/sdcorejs-angular-components-history.ts"],"sourcesContent":["import { Injectable, Pipe, PipeTransform } from '@angular/core';\nimport { DateUtilities } from '@sdcorejs/angular/utilities';\nimport { EMPTY_STR } from '@sdcorejs/utils/constants';\n\n@Pipe({\n  name: 'viewDateTime',\n  standalone: true,\n})\n@Injectable({\n  providedIn: 'root',\n})\nexport class ViewDateTimePipe implements PipeTransform {\n  transform(value: any): string {\n    if (!value || !DateUtilities.isDate(value)) {\n      return EMPTY_STR;\n    }\n    return DateUtilities.toFormat(value, 'HH:mm dd/MM/yyyy');\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { SdBadge } from '@sdcorejs/angular/components/badge';\nimport { SdHistoryItemType } from '../models/history.model';\nimport { ViewDateTimePipe } from '../pipes/view-date.pipe';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\n\n@Component({\n  selector: 'sd-history',\n  imports: [CommonModule, SdBadge, ViewDateTimePipe, TranslatePipe],\n  templateUrl: './history.component.html',\n  styleUrl: './history.component.scss',\n})\nexport class SdHistoryItem {\n  @Input() items: SdHistoryItemType[] = [];\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;MAWa,gBAAgB,CAAA;AAC3B,IAAA,SAAS,CAAC,KAAU,EAAA;QAClB,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AAC1C,YAAA,OAAO,SAAS;QAClB;QACA,OAAO,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IAC1D;wGANW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,cAFf,MAAM,EAAA,CAAA;;4FAEP,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,cAAc;AACpB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;kBACA,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCGY,aAAa,CAAA;IACf,KAAK,GAAwB,EAAE;wGAD7B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb1B,msCAmCA,EAAA,MAAA,EAAA,CAAA,ovCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1BY,YAAY,4JAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,IAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;4FAIrD,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,YAAY,EAAE,OAAO,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,msCAAA,EAAA,MAAA,EAAA,CAAA,ovCAAA,CAAA,EAAA;;sBAKhE;;;AEdH;;AAEG;;;;"}

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

@@ -10,9 +10,7 @@ import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SdButton } from '@sdcorejs/angular/components/button';
-import * as i8 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i9 from '@angular/material/menu';
+import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { SdModal } from '@sdcorejs/angular/components/modal';
 import { DateUtilities, NumberUtilities } from '@sdcorejs/angular/utilities';
@@ -20,6 +18,7 @@ import * as i1 from '@angular/platform-browser';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { SdBadge } from '@sdcorejs/angular/components/badge';
 import { I18nService, TranslatePipe } from '@sdcorejs/angular/i18n';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
 import * as i1$1 from '@sdcorejs/angular/services/excel';
 import * as i2 from '@sdcorejs/angular/services/notify';
 import * as i4 from '@sdcorejs/angular/services/loading';
@@ -36,10 +35,10 @@ class ColumnHiddenPipe {
         if (column.hidden === undefined) {
             return true;
         }
-        if (typeof (column.hidden) === 'boolean') {
+        if (typeof column.hidden === 'boolean') {
             return !column.hidden;
         }
-        if (typeof (column.hidden) === 'function') {
+        if (typeof column.hidden === 'function') {
             return !column.hidden();
         }
         return false;
@@ -51,7 +50,7 @@ class ColumnHiddenPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnHiddenPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'columnHidden'
+                    name: 'columnHidden',
                 }]
         }, {
             type: Injectable
@@ -342,7 +341,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 +358,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;
                     }
@@ -496,7 +513,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'),
@@ -531,20 +550,18 @@ class SdImportExcel {
             return false;
         }
         const time = dates[1];
-        const regex = /^(0[0-9]|1[0-9]|2[0-3])(\:)(0[0-9]|[0-5][0-9])$/;
+        const regex = /^(0[0-9]|1[0-9]|2[0-3]):(0[0-9]|[0-5][0-9])$/;
         return regex.test(time);
     };
     onClosed = () => {
         this.sdClosed.emit();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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.25", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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                                    <sd-icon style=\"font-size: 18px\" name=\"open_in_new\"></sd-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                      <sd-icon class=\"empty-icon\" name=\"cloud_download\"></sd-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 sd-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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { 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: MatMenuModule }, { kind: "component", type: i8.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: i8.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.25", ngImport: i0, type: SdImportExcel, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-import-excel', imports: [
+            args: [{ selector: 'sd-import-excel', imports: [SdIcon,
                         CommonModule,
                         FormsModule,
                         MatSlideToggleModule,
@@ -555,13 +572,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         SdModal,
                         ColumnTransformPipe,
                         ColumnHiddenPipe,
-                        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 [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                                    <sd-icon style=\"font-size: 18px\" name=\"open_in_new\"></sd-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                      <sd-icon class=\"empty-icon\" name=\"cloud_download\"></sd-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 sd-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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SdExcelService }, { type: i2.SdNotifyService }, { type: ColumnHiddenPipe }, { type: i4.SdLoadingService }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]