@sd-angular/core 19.0.0-beta.90 → 19.0.0-beta.92

package/assets/scss/core/utilities/_position.scss

@@ -0,0 +1,8 @@
+// --------------------------------------------------------------------------
+// Position
+// --------------------------------------------------------------------------
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed    { position: fixed !important; }
+.position-sticky   { position: sticky !important; }
+.position-static   { position: static !important; }

package/assets/scss/core/utilities/_sizing.scss

@@ -0,0 +1,28 @@
+// --------------------------------------------------------------------------
+// Sizing – Width & Height  (px-based, 0–200)
+//   w-0 … w-200 | h-0 … h-200
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .w-#{$i} { width: #{$i}px !important; }
+  .h-#{$i} { height: #{$i}px !important; }
+}
+
+// Percentage / keyword shorthands
+.w-full   { width: 100% !important; }
+.w-100    { width: 100% !important; } // Bootstrap compat alias
+.w-auto   { width: auto !important; }
+.w-screen { width: 100vw !important; }
+.w-fit    { width: fit-content !important; }
+
+.h-full   { height: 100% !important; }
+.h-100    { height: 100% !important; } // Bootstrap compat alias
+.h-auto   { height: auto !important; }
+.h-screen { height: 100vh !important; }
+.h-fit    { height: fit-content !important; }
+
+.min-h-full   { min-height: 100% !important; }
+.min-h-screen { min-height: 100vh !important; }
+.min-w-full   { min-width: 100% !important; }
+
+.max-h-full   { max-height: 100% !important; }
+.max-w-full   { max-width: 100% !important; }

package/assets/scss/core/utilities/_spacing.scss

@@ -0,0 +1,31 @@
+// --------------------------------------------------------------------------
+// Spacing – Margin & Padding  (px-based, 0–200)
+//   m-0 … m-200 | mt-* | mr-* | mb-* | ml-* | mx-* | my-*
+//   p-0 … p-200 | pt-* | pr-* | pb-* | pl-* | px-* | py-*
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .m-#{$i}  { margin: #{$i}px !important; }
+  .mt-#{$i} { margin-top: #{$i}px !important; }
+  .mr-#{$i} { margin-right: #{$i}px !important; }
+  .mb-#{$i} { margin-bottom: #{$i}px !important; }
+  .ml-#{$i} { margin-left: #{$i}px !important; }
+  .mx-#{$i} { margin-left: #{$i}px !important; margin-right: #{$i}px !important; }
+  .my-#{$i} { margin-top: #{$i}px !important; margin-bottom: #{$i}px !important; }
+
+  .p-#{$i}  { padding: #{$i}px !important; }
+  .pt-#{$i} { padding-top: #{$i}px !important; }
+  .pr-#{$i} { padding-right: #{$i}px !important; }
+  .pb-#{$i} { padding-bottom: #{$i}px !important; }
+  .pl-#{$i} { padding-left: #{$i}px !important; }
+  .px-#{$i} { padding-left: #{$i}px !important; padding-right: #{$i}px !important; }
+  .py-#{$i} { padding-top: #{$i}px !important; padding-bottom: #{$i}px !important; }
+}
+
+// Auto margin helpers
+.m-auto  { margin: auto !important; }
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

package/assets/scss/core/utilities/_typography.scss

@@ -0,0 +1,99 @@
+// --------------------------------------------------------------------------
+// SCSS variables — dùng nội bộ trong scss, không output CSS
+//   Đặt tên theo thang đọc được: fw = font-weight, fs = font-size
+// --------------------------------------------------------------------------
+$fw-lighter: 400;
+$fw-normal:  500;
+$fw-bold:    600;
+
+$fs-xs:     11.2px;
+$fs-small:  14px;
+$fs-normal: 16px;
+$fs-regular: 18px;
+$fs-medium: 21px;
+$fs-large:  24px;
+$fs-xl:     28px;
+$fs-xxl:    38px;
+$fs-xxxl:   42px;
+
+// --------------------------------------------------------------------------
+// Design token classes — hệ thống typography của SD Angular
+//   Quy ước: T{size}{weight}  |  M = Medium (500), R = Regular (400)
+//   Mỗi class bao gồm font-size + font-weight + line-height chuẩn hóa
+// --------------------------------------------------------------------------
+.T48M { font-size: 48px; font-weight: 500; line-height: 56px; }
+.T48R { font-size: 48px; font-weight: 400; line-height: 56px; }
+
+.T32M { font-size: 32px; font-weight: 500; line-height: 48px; }
+.T32R { font-size: 32px; font-weight: 400; line-height: 48px; }
+
+.T24M { font-size: 24px; font-weight: 500; line-height: 28px; }
+.T24R { font-size: 20px; font-weight: 400; line-height: 28px; }
+
+.T20M { font-size: 20px; font-weight: 500; line-height: 28px; }
+.T20R { font-size: 20px; font-weight: 400; line-height: 28px; }
+
+.T18M { font-size: 18px; font-weight: 500; line-height: 28px; }
+.T18R { font-size: 18px; font-weight: 400; line-height: 28px; }
+
+.T16M { font-size: 16px; font-weight: 500; line-height: 24px; }
+.T16R { font-size: 16px; font-weight: 400; line-height: 24px; }
+
+.T14M { font-size: 14px; font-weight: 500; line-height: 20px; }
+.T14R { font-size: 14px; font-weight: 400; line-height: 20px; }
+
+.T12M { font-size: 12px; font-weight: 500; line-height: 16px; }
+// !important vì T12R thường bị override bởi material components
+.T12R { font-size: 12px !important; font-weight: 400; line-height: 16px; }
+
+.T10M { font-size: 10px; font-weight: 500; line-height: 12px; }
+.T10R { font-size: 10px; font-weight: 400; line-height: 12px; }
+
+// --------------------------------------------------------------------------
+// Font-size utilities  (px-based, 0–200)
+//   fs-0 … fs-200 — dùng khi cần ghi đè nhanh, không dùng thay token
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .fs-#{$i} { font-size: #{$i}px !important; }
+}
+
+// --------------------------------------------------------------------------
+// Font-weight utilities
+// --------------------------------------------------------------------------
+.font-weight-light   { font-weight: 300 !important; }
+.font-weight-normal  { font-weight: 400 !important; }
+.font-weight-medium  { font-weight: 500 !important; }
+.font-weight-bold    { font-weight: 600 !important; }
+.font-weight-bolder  { font-weight: 700 !important; }
+
+// --------------------------------------------------------------------------
+// Text alignment
+// --------------------------------------------------------------------------
+.text-left    { text-align: left !important; }
+.text-center  { text-align: center !important; }
+.text-right   { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+// --------------------------------------------------------------------------
+// Text wrapping & overflow
+// --------------------------------------------------------------------------
+.text-wrap   { white-space: normal !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-ellipsis {
+  // Hiển thị "..." khi text tràn — cần container có width cố định
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+.text-break {
+  // Xuống dòng từng ký tự khi tràn — dùng cho URL, hash, code dài
+  overflow-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+// --------------------------------------------------------------------------
+// Text transform
+// --------------------------------------------------------------------------
+.text-uppercase  { text-transform: uppercase !important; }
+.text-lowercase  { text-transform: lowercase !important; }
+.text-capitalize { text-transform: capitalize !important; }

package/assets/scss/sd-core.scss

@@ -1,13 +1,11 @@
 @use '../fonts/fonts.scss';
-@use './core/bootstrap.scss';
-@use './core/cursor.scss';
+// Tạm thời giữ bootstrap.scss để so sánh — xóa sau khi confirm _base.scss OK
+// @use './core/bootstrap.scss';
+@use './core/utilities/base';  // Reset / Reboot — phải load trước tất cả
+@use './core/utilities';
 @use './core/color.scss';
 @use './core/form.scss';
 @use './core/scrollbar.scss';
-@use './core/typography.scss';
-@use './core/print.scss';
-@use './core/elevation.scss';
-@use './core/grid.scss';
 @use './themes/default.scss';
 @use './themes/material-theme.scss';
 

package/components/badge/src/badge.component.d.ts

@@ -39,7 +39,6 @@ export declare class SdBadge {
         'c-error': boolean;
     }>;
     iconSizeAndFontClasses: import("@angular/core").Signal<{
-        'c-xs': boolean;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
@@ -55,7 +54,6 @@ export declare class SdBadge {
         'c-success': boolean;
         'c-warning': boolean;
         'c-error': boolean;
-        'c-xs': boolean;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
@@ -71,7 +69,6 @@ export declare class SdBadge {
         'c-success': boolean;
         'c-warning': boolean;
         'c-error': boolean;
-        'c-xs': boolean;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;

package/components/table/src/directives/index.d.ts

@@ -2,3 +2,4 @@ export * from './sd-table-column-filter-def.directive';
 export * from './sticky-shadow.directive';
 export * from './sd-table-title-def.directive';
 export * from './sd-table-cell-def.directive';
+export * from './sd-column-resize.directive';

package/components/table/src/directives/sd-column-resize.directive.d.ts

@@ -0,0 +1,13 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdColumnResizeDirective implements OnDestroy {
+    #private;
+    sdColumnResize: import("@angular/core").InputSignal<boolean>;
+    minWidth: import("@angular/core").InputSignal<string | undefined>;
+    maxWidth: import("@angular/core").InputSignal<string | undefined>;
+    resizeEnd: import("@angular/core").OutputEmitterRef<string>;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdColumnResizeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdColumnResizeDirective, "[sdColumnResize]", never, { "sdColumnResize": { "alias": "sdColumnResize"; "required": true; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; }, never, never, true, never>;
+}

package/components/table/src/models/table-option-config.model.d.ts

@@ -1,6 +1,7 @@
 import { SdTableColumn } from './table-column.model';
 export interface TableOptionConfig {
     visible?: boolean;
+    resizable?: boolean;
 }
 export interface OriginColumn {
     field: string;

package/components/table/src/services/config.service.d.ts

@@ -7,10 +7,15 @@ export declare class ConfigService {
     #private;
     private storageService;
     tableConfiguration: ISdTableConfiguration;
+    widthChange$: import("rxjs").Observable<{
+        field: string;
+        width: string;
+    }>;
     constructor(storageService: SdStorageService, tableConfiguration: ISdTableConfiguration);
     loadConfiguredTable: (option: SdTableOption) => ConfiguredTable;
     loadConfigurationResult: (option: SdTableOption, configuration: ConfiguredTable) => ConfiguredTableResult;
     init: (tableOption: SdTableOption) => SdStorage<ConfiguredTable>;
+    persistColumnWidth: (field: string, width: string) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfigService, [null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ConfigService>;
 }

package/components/table/src/table.component.d.ts

@@ -94,6 +94,7 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     get dataItems(): T[];
     get selectedItems(): T[];
     detectChanges: () => void;
+    onColumnResize: (field: string, width: string) => void;
     onOperatorChange: (column: SdTableColumn, operator: SdOperator) => void;
     trackBy: (index: number, item: SdTableItem) => string;
     isReorderDisabled(item: SdTableItem<T>): boolean;

package/fesm2022/sd-angular-core-components-badge.mjs

@@ -86,7 +86,6 @@ class SdBadge {
         const s = this.size();
         const f = this.fontSet();
         return {
-            'c-xs': s === 'xs',
             'c-sm': s === 'sm',
             'c-md': s === 'md',
             'c-lg': s === 'lg',

package/fesm2022/sd-angular-core-components-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\n\r\n// Export các Type để dùng chung\r\nexport type SdBadgeType = 'tag' | 'round' | 'icon';\r\n\r\n@Component({\r\n  selector: 'sd-badge',\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n  defaultIcon = 'fiber_manual_record';\r\n\r\n  // ==========================================\r\n  // 1. SIGNAL INPUTS\r\n  // ==========================================\r\n  type = input<SdBadgeType, SdBadgeType | undefined | null>('icon', {\r\n    transform: value => value || 'icon',\r\n  });\r\n\r\n  color = input<SdColor, SdColor | undefined | null>('secondary', {\r\n    transform: value => value || 'secondary',\r\n  });\r\n\r\n  primary = input(false, { transform: booleanAttribute });\r\n  secondary = input(false, { transform: booleanAttribute });\r\n  success = input(false, { transform: booleanAttribute });\r\n  info = input(false, { transform: booleanAttribute });\r\n  warning = input(false, { transform: booleanAttribute });\r\n  error = input(false, { transform: booleanAttribute });\r\n\r\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>('material-icons', {\r\n    transform: value => value || 'material-icons',\r\n  });\r\n\r\n  title = input<string | number | undefined | null>();\r\n  description = input<string | undefined | null>();\r\n  tooltip = input<string | undefined | null>();\r\n  icon = input<string | undefined | null>();\r\n\r\n  size = input<SdSize, SdSize | undefined | null>('sm', {\r\n    transform: value => value || 'sm',\r\n  });\r\n\r\n  // ==========================================\r\n  // 2. OUTPUT\r\n  // ==========================================\r\n  @Output() click = new EventEmitter<Event>();\r\n\r\n  onClick = (event: Event) => {\r\n    event.stopPropagation();\r\n    this.click.emit(event);\r\n  };\r\n\r\n  // ==========================================\r\n  // 3. COMPUTED STATE\r\n  // ==========================================\r\n\r\n  effectiveColor = computed(() => {\r\n    if (this.primary()) return 'primary';\r\n    if (this.secondary()) return 'secondary';\r\n    if (this.success()) return 'success';\r\n    if (this.info()) return 'info';\r\n    if (this.warning()) return 'warning';\r\n    if (this.error()) return 'error';\r\n    return this.color();\r\n  });\r\n\r\n  baseColorClasses = computed(() => {\r\n    const c = this.effectiveColor();\r\n    return {\r\n      'c-primary': c === 'primary',\r\n      'c-secondary': c === 'secondary',\r\n      'c-info': c === 'info',\r\n      'c-success': c === 'success',\r\n      'c-warning': c === 'warning',\r\n      'c-error': c === 'error',\r\n    };\r\n  });\r\n\r\n  iconColorClasses = computed(() => {\r\n    const c = this.effectiveColor();\r\n    return {\r\n      'c-primary': c === 'primary',\r\n      'c-black400': c === 'secondary',\r\n      'c-info': c === 'info',\r\n      'c-success': c === 'success',\r\n      'c-warning': c === 'warning',\r\n      'c-error': c === 'error',\r\n    };\r\n  });\r\n\r\n  iconSizeAndFontClasses = computed(() => {\r\n    const s = this.size();\r\n    const f = this.fontSet();\r\n    return {\r\n      'c-xs': s === 'xs',\r\n      'c-sm': s === 'sm',\r\n      'c-md': s === 'md',\r\n      'c-lg': s === 'lg',\r\n      'material-icons': f === 'material-icons',\r\n      'material-icons-outlined': f === 'material-icons-outlined',\r\n      'material-icons-round': f === 'material-icons-round',\r\n      'material-icons-sharp': f === 'material-icons-sharp',\r\n    };\r\n  });\r\n\r\n  // GỘP CLASS CHO BADGE TYPE = 'TAG'\r\n  tagIconCombinedClasses = computed(() => ({\r\n    ...this.iconSizeAndFontClasses(),\r\n    ...this.baseColorClasses(),\r\n  }));\r\n\r\n  // GỘP CLASS CHO BADGE TYPE = 'ICON'\r\n  iconCombinedClasses = computed(() => ({\r\n    ...this.iconSizeAndFontClasses(),\r\n    ...this.iconColorClasses(),\r\n  }));\r\n}\r\n","@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() || defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ titleText }}\r\n  </div>\r\n} @else if (badgeType === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon()) {\r\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n          {{ iconName }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n        {{ iconName }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\n\r\n// Export các Type để dùng chung\r\nexport type SdBadgeType = 'tag' | 'round' | 'icon';\r\n\r\n@Component({\r\n  selector: 'sd-badge',\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n  defaultIcon = 'fiber_manual_record';\r\n\r\n  // ==========================================\r\n  // 1. SIGNAL INPUTS\r\n  // ==========================================\r\n  type = input<SdBadgeType, SdBadgeType | undefined | null>('icon', {\r\n    transform: value => value || 'icon',\r\n  });\r\n\r\n  color = input<SdColor, SdColor | undefined | null>('secondary', {\r\n    transform: value => value || 'secondary',\r\n  });\r\n\r\n  primary = input(false, { transform: booleanAttribute });\r\n  secondary = input(false, { transform: booleanAttribute });\r\n  success = input(false, { transform: booleanAttribute });\r\n  info = input(false, { transform: booleanAttribute });\r\n  warning = input(false, { transform: booleanAttribute });\r\n  error = input(false, { transform: booleanAttribute });\r\n\r\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>('material-icons', {\r\n    transform: value => value || 'material-icons',\r\n  });\r\n\r\n  title = input<string | number | undefined | null>();\r\n  description = input<string | undefined | null>();\r\n  tooltip = input<string | undefined | null>();\r\n  icon = input<string | undefined | null>();\r\n\r\n  size = input<SdSize, SdSize | undefined | null>('sm', {\r\n    transform: value => value || 'sm',\r\n  });\r\n\r\n  // ==========================================\r\n  // 2. OUTPUT\r\n  // ==========================================\r\n  @Output() click = new EventEmitter<Event>();\r\n\r\n  onClick = (event: Event) => {\r\n    event.stopPropagation();\r\n    this.click.emit(event);\r\n  };\r\n\r\n  // ==========================================\r\n  // 3. COMPUTED STATE\r\n  // ==========================================\r\n\r\n  effectiveColor = computed(() => {\r\n    if (this.primary()) return 'primary';\r\n    if (this.secondary()) return 'secondary';\r\n    if (this.success()) return 'success';\r\n    if (this.info()) return 'info';\r\n    if (this.warning()) return 'warning';\r\n    if (this.error()) return 'error';\r\n    return this.color();\r\n  });\r\n\r\n  baseColorClasses = computed(() => {\r\n    const c = this.effectiveColor();\r\n    return {\r\n      'c-primary': c === 'primary',\r\n      'c-secondary': c === 'secondary',\r\n      'c-info': c === 'info',\r\n      'c-success': c === 'success',\r\n      'c-warning': c === 'warning',\r\n      'c-error': c === 'error',\r\n    };\r\n  });\r\n\r\n  iconColorClasses = computed(() => {\r\n    const c = this.effectiveColor();\r\n    return {\r\n      'c-primary': c === 'primary',\r\n      'c-black400': c === 'secondary',\r\n      'c-info': c === 'info',\r\n      'c-success': c === 'success',\r\n      'c-warning': c === 'warning',\r\n      'c-error': c === 'error',\r\n    };\r\n  });\r\n\r\n  iconSizeAndFontClasses = computed(() => {\r\n    const s = this.size();\r\n    const f = this.fontSet();\r\n    return {\r\n      'c-sm': s === 'sm',\r\n      'c-md': s === 'md',\r\n      'c-lg': s === 'lg',\r\n      'material-icons': f === 'material-icons',\r\n      'material-icons-outlined': f === 'material-icons-outlined',\r\n      'material-icons-round': f === 'material-icons-round',\r\n      'material-icons-sharp': f === 'material-icons-sharp',\r\n    };\r\n  });\r\n\r\n  // GỘP CLASS CHO BADGE TYPE = 'TAG'\r\n  tagIconCombinedClasses = computed(() => ({\r\n    ...this.iconSizeAndFontClasses(),\r\n    ...this.baseColorClasses(),\r\n  }));\r\n\r\n  // GỘP CLASS CHO BADGE TYPE = 'ICON'\r\n  iconCombinedClasses = computed(() => ({\r\n    ...this.iconSizeAndFontClasses(),\r\n    ...this.iconColorClasses(),\r\n  }));\r\n}\r\n","@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() || defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ titleText }}\r\n  </div>\r\n} @else if (badgeType === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon()) {\r\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n          {{ iconName }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n        {{ iconName }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -538,7 +538,7 @@ class SdImportExcel {
     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) {\r\n  <sd-modal [title]=\"option.title || 'Nh\u1EADp d\u1EEF li\u1EC7u Excel'\" (sdClosed)=\"onClosed()\" #modal>\r\n    <div class=\"row mx-0 mb-3 align-items-center\" style=\"min-height: 32px\">\r\n      @if (excelItems.length) {\r\n        <div class=\"d-flex\">\r\n          <sd-button class=\"mr-2\" (click)=\"view('ALL')\" icon=\"cached\" title=\"Xem t\u1EA5t c\u1EA3\" size=\"sm\" type=\"outline\"></sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('SUCCESS')\"\r\n            icon=\"done\"\r\n            title=\"{{ numberOfSuccess }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u h\u1EE3p l\u1EC7\"\r\n            size=\"sm\"\r\n            color=\"success\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('WARNING')\"\r\n            icon=\"warning\"\r\n            title=\"{{ numberOfWarning }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 l\u1ED7i\"\r\n            size=\"sm\"\r\n            color=\"warning\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            (click)=\"view('ERROR')\"\r\n            icon=\"error\"\r\n            title=\"{{ numberOfError }}\"\r\n            color=\"error\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 c\u1EA3nh b\u00E1o\"\r\n            size=\"sm\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sd-box border rounded\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered mb-0\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\r\n                @if (filteredItems.length) {\r\n                  <th class=\"text-center\" style=\"min-width: 250px; width: 250px\">Tr\u1EA1ng th\u00E1i</th>\r\n                }\r\n                @for (column of option.columns; track column.field) {\r\n                  @if (column | columnHidden) {\r\n                    <th [ngStyle]=\"{ 'min-width': column.width || '300px', width: column.width || '300px' }\" [matTooltip]=\"column.title\">\r\n                      <span class=\"c-ellipsis\">\r\n                        {{ column.title }}\r\n                      </span>\r\n                    </th>\r\n                  }\r\n                }\r\n              </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n              @if (viewItems.length) {\r\n                @for (item of viewItems; track item.meta.excelIndex) {\r\n                  <tr>\r\n                    <td class=\"text-center c-sticky-left px-4\">\r\n                      <sd-badge\r\n                        type=\"tag\"\r\n                        [title]=\"item.meta.excelIndex\"\r\n                        [success]=\"!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [warning]=\"!!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [error]=\"!!item.meta.errorMessages.length\" />\r\n                    </td>\r\n\r\n                    <td style=\"min-width: 250px; width: 250px\">\r\n                      <div\r\n                        class=\"text-wrap\"\r\n                        [innerHTML]=\"\r\n                          item.meta.errorMessages[0] || item.meta.warningMessages[0] || '<span class=\\'text-success\\'>D\u1EEF li\u1EC7u h\u1EE3p l\u1EC7</span>'\r\n                        \"></div>\r\n                    </td>\r\n\r\n                    @for (column of option.columns; track column.field) {\r\n                      @if (column | columnHidden) {\r\n                        <td\r\n                          class=\"align-middle\"\r\n                          [ngClass]=\"{\r\n                            'bg-warning-light': item.meta.warning[column.field] && !item.meta.error[column.field],\r\n                            'bg-error-light': item.meta.error[column.field]\r\n                          }\"\r\n                          [matTooltip]=\"item.meta.error[column.field] || item.meta.warning[column.field]\"\r\n                          [ngStyle]=\"{ 'min-width': column.width || '300px' }\"\r\n                          matTooltipPosition=\"above\">\r\n                          <div class=\"c-ellipsis\">\r\n                            @if (column.type !== 'array') {\r\n                              <span [innerHTML]=\"item | columnTransform: column | async\"></span>\r\n                            }\r\n\r\n                            @if (column.type === 'array') {\r\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\r\n\r\n                              <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\r\n\r\n                                @if (arrayItems?.length) {\r\n                                  <button\r\n                                    mat-icon-button\r\n                                    [matMenuTriggerFor]=\"menu\"\r\n                                    class=\"c-mat-menu\"\r\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\r\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\r\n                                  </button>\r\n\r\n                                  <mat-menu #menu=\"matMenu\">\r\n                                    <div\r\n                                      class=\"px-3 py-2\"\r\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      aria-hidden=\"true\">\r\n                                      @for (val of arrayItems; track $index) {\r\n                                        <div class=\"border-bottom py-2 text-wrap\" [innerHTML]=\"val\"></div>\r\n                                      }\r\n                                    </div>\r\n                                  </mat-menu>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n                      }\r\n                    }\r\n                  </tr>\r\n                }\r\n              } @else {\r\n                <tr>\r\n                  <td [attr.colspan]=\"option.columns.length + 2\" class=\"p-0 border-0 bg-white\">\r\n                    <div\r\n                      class=\"empty-state-wrapper\"\r\n                      (click)=\"downloadTemplate()\"\r\n                      matTooltip=\"Nh\u1EA5n \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu v\u1EC1 m\u00E1y\"\r\n                      aria-hidden=\"true\">\r\n                      <mat-icon class=\"empty-icon\">cloud_download</mat-icon>\r\n\r\n                      <h4>Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u t\u1EA3i l\u00EAn</h4>\r\n                      <span class=\"text-small text-link\"> Nh\u1EA5n v\u00E0o \u0111\u00E2y \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu </span>\r\n\r\n                      @if (isDownloadTemplate) {\r\n                        <div class=\"mt-3\">\r\n                          <mat-spinner diameter=\"24\" mode=\"indeterminate\"></mat-spinner>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"sd-box-footer border-top\">\r\n        <div class=\"d-flex align-items-center justify-content-end\">\r\n          <mat-paginator [length]=\"filteredItems.length || 0\" hidePageSize showFirstLastButtons></mat-paginator>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <sd-button sdFooterLeft (click)=\"upload()\" prefixIcon=\"file_upload\" title=\"T\u1EA3i l\u00EAn\" size=\"sm\" color=\"info\" [loading]=\"uploading\">\r\n    </sd-button>\r\n    <div class=\"d-flex align-items-center\" sdFooter>\r\n      @if (filteredItems.length) {\r\n        <sd-button class=\"mr-4\" (click)=\"export()\" prefixIcon=\"get_app\" title=\"T\u1EA3i v\u1EC1\" size=\"sm\" color=\"success\" type=\"outline\">\r\n        </sd-button>\r\n      }\r\n      <sd-button\r\n        (click)=\"accept()\"\r\n        title=\"X\u00E1c nh\u1EADn & L\u01B0u\"\r\n        [disabled]=\"(numberOfSuccess === 0 && numberOfWarning === 0) || numberOfError > 0 || isUploaded\"\r\n        color=\"primary\"\r\n        type=\"fill\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </div>\r\n  </sd-modal>\r\n}\r\n", styles: [".table-responsive{position:relative;min-height:50vh;height:50vh;overflow:auto;border:1px solid #dee2e6}.table{margin-bottom:0}.table thead th{position:sticky;top:0;background-color:#f8f9fa;border-bottom:2px solid #dee2e6;padding-top:8px;padding-bottom:8px;white-space:nowrap;z-index:10}.table thead th.c-sticky-left{z-index:20}.table tbody td{vertical-align:middle;padding-top:6px;padding-bottom:6px}.c-sticky-left{position:sticky;left:0;border-right:1px solid #dee2e6!important;border-left:none!important;z-index:5}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-hover tbody tr:hover .c-sticky-left{background-color:#ececec}.table-striped tbody tr:nth-of-type(odd){background-color:#0000000d}.table-striped tbody tr:nth-of-type(2n){background-color:#fff}.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: ["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"] }] });
+        ], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "@if (option) {\r\n  <sd-modal [title]=\"option.title || 'Nh\u1EADp d\u1EEF li\u1EC7u Excel'\" (sdClosed)=\"onClosed()\" #modal>\r\n    <div class=\"d-flex align-items-center mb-12\" style=\"min-height: 32px\">\r\n      @if (excelItems.length) {\r\n        <div class=\"d-flex\">\r\n          <sd-button class=\"mr-2\" (click)=\"view('ALL')\" icon=\"cached\" title=\"Xem t\u1EA5t c\u1EA3\" size=\"sm\" type=\"outline\"></sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('SUCCESS')\"\r\n            icon=\"done\"\r\n            title=\"{{ numberOfSuccess }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u h\u1EE3p l\u1EC7\"\r\n            size=\"sm\"\r\n            color=\"success\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('WARNING')\"\r\n            icon=\"warning\"\r\n            title=\"{{ numberOfWarning }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 l\u1ED7i\"\r\n            size=\"sm\"\r\n            color=\"warning\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            (click)=\"view('ERROR')\"\r\n            icon=\"error\"\r\n            title=\"{{ numberOfError }}\"\r\n            color=\"error\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 c\u1EA3nh b\u00E1o\"\r\n            size=\"sm\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sd-box border rounded\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"sd-table\">\r\n            <thead>\r\n              <tr>\r\n                <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\r\n                @if (filteredItems.length) {\r\n                  <th class=\"text-center\" style=\"min-width: 250px; width: 250px\">Tr\u1EA1ng th\u00E1i</th>\r\n                }\r\n                @for (column of option.columns; track column.field) {\r\n                  @if (column | columnHidden) {\r\n                    <th [ngStyle]=\"{ 'min-width': column.width || '300px', width: column.width || '300px' }\" [matTooltip]=\"column.title\">\r\n                      <span class=\"c-ellipsis\">\r\n                        {{ column.title }}\r\n                      </span>\r\n                    </th>\r\n                  }\r\n                }\r\n              </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n              @if (viewItems.length) {\r\n                @for (item of viewItems; track item.meta.excelIndex) {\r\n                  <tr>\r\n                    <td class=\"text-center c-sticky-left px-4\">\r\n                      <sd-badge\r\n                        type=\"tag\"\r\n                        [title]=\"item.meta.excelIndex\"\r\n                        [success]=\"!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [warning]=\"!!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [error]=\"!!item.meta.errorMessages.length\" />\r\n                    </td>\r\n\r\n                    <td style=\"min-width: 250px; width: 250px\">\r\n                      <div\r\n                        class=\"text-wrap\"\r\n                        [innerHTML]=\"\r\n                          item.meta.errorMessages[0] || item.meta.warningMessages[0] || '<span class=\\'text-success\\'>D\u1EEF li\u1EC7u h\u1EE3p l\u1EC7</span>'\r\n                        \"></div>\r\n                    </td>\r\n\r\n                    @for (column of option.columns; track column.field) {\r\n                      @if (column | columnHidden) {\r\n                        <td\r\n                          class=\"align-middle\"\r\n                          [ngClass]=\"{\r\n                            'bg-warning-light': item.meta.warning[column.field] && !item.meta.error[column.field],\r\n                            'bg-error-light': item.meta.error[column.field]\r\n                          }\"\r\n                          [matTooltip]=\"item.meta.error[column.field] || item.meta.warning[column.field]\"\r\n                          [ngStyle]=\"{ 'min-width': column.width || '300px' }\"\r\n                          matTooltipPosition=\"above\">\r\n                          <div class=\"c-ellipsis\">\r\n                            @if (column.type !== 'array') {\r\n                              <span [innerHTML]=\"item | columnTransform: column | async\"></span>\r\n                            }\r\n\r\n                            @if (column.type === 'array') {\r\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\r\n\r\n                              <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\r\n\r\n                                @if (arrayItems?.length) {\r\n                                  <button\r\n                                    mat-icon-button\r\n                                    [matMenuTriggerFor]=\"menu\"\r\n                                    class=\"c-mat-menu\"\r\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\r\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\r\n                                  </button>\r\n\r\n                                  <mat-menu #menu=\"matMenu\">\r\n                                    <div\r\n                                      class=\"px-3 py-2\"\r\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      aria-hidden=\"true\">\r\n                                      @for (val of arrayItems; track $index) {\r\n                                        <div class=\"border-bottom py-2 text-wrap\" [innerHTML]=\"val\"></div>\r\n                                      }\r\n                                    </div>\r\n                                  </mat-menu>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n                      }\r\n                    }\r\n                  </tr>\r\n                }\r\n              } @else {\r\n                <tr>\r\n                  <td [attr.colspan]=\"option.columns.length + 2\" class=\"p-0 border-0 bg-white\">\r\n                    <div\r\n                      class=\"empty-state-wrapper\"\r\n                      (click)=\"downloadTemplate()\"\r\n                      matTooltip=\"Nh\u1EA5n \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu v\u1EC1 m\u00E1y\"\r\n                      aria-hidden=\"true\">\r\n                      <mat-icon class=\"empty-icon\">cloud_download</mat-icon>\r\n\r\n                      <h4>Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u t\u1EA3i l\u00EAn</h4>\r\n                      <span class=\"text-small text-link\"> Nh\u1EA5n v\u00E0o \u0111\u00E2y \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu </span>\r\n\r\n                      @if (isDownloadTemplate) {\r\n                        <div class=\"mt-3\">\r\n                          <mat-spinner diameter=\"24\" mode=\"indeterminate\"></mat-spinner>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"sd-box-footer border-top\">\r\n        <div class=\"d-flex align-items-center justify-content-end\">\r\n          <mat-paginator [length]=\"filteredItems.length || 0\" hidePageSize showFirstLastButtons></mat-paginator>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <sd-button sdFooterLeft (click)=\"upload()\" prefixIcon=\"file_upload\" title=\"T\u1EA3i l\u00EAn\" size=\"sm\" color=\"info\" [loading]=\"uploading\">\r\n    </sd-button>\r\n    <div class=\"d-flex align-items-center\" sdFooter>\r\n      @if (filteredItems.length) {\r\n        <sd-button class=\"mr-4\" (click)=\"export()\" prefixIcon=\"get_app\" title=\"T\u1EA3i v\u1EC1\" size=\"sm\" color=\"success\" type=\"outline\">\r\n        </sd-button>\r\n      }\r\n      <sd-button\r\n        (click)=\"accept()\"\r\n        title=\"X\u00E1c nh\u1EADn & L\u01B0u\"\r\n        [disabled]=\"(numberOfSuccess === 0 && numberOfWarning === 0) || numberOfError > 0 || isUploaded\"\r\n        color=\"primary\"\r\n        type=\"fill\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </div>\r\n  </sd-modal>\r\n}\r\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: ["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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdImportExcel, decorators: [{
             type: Component,
@@ -559,7 +559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdBadge
                     ], providers: [
                         ColumnHiddenPipe
-                    ], template: "@if (option) {\r\n  <sd-modal [title]=\"option.title || 'Nh\u1EADp d\u1EEF li\u1EC7u Excel'\" (sdClosed)=\"onClosed()\" #modal>\r\n    <div class=\"row mx-0 mb-3 align-items-center\" style=\"min-height: 32px\">\r\n      @if (excelItems.length) {\r\n        <div class=\"d-flex\">\r\n          <sd-button class=\"mr-2\" (click)=\"view('ALL')\" icon=\"cached\" title=\"Xem t\u1EA5t c\u1EA3\" size=\"sm\" type=\"outline\"></sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('SUCCESS')\"\r\n            icon=\"done\"\r\n            title=\"{{ numberOfSuccess }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u h\u1EE3p l\u1EC7\"\r\n            size=\"sm\"\r\n            color=\"success\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('WARNING')\"\r\n            icon=\"warning\"\r\n            title=\"{{ numberOfWarning }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 l\u1ED7i\"\r\n            size=\"sm\"\r\n            color=\"warning\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            (click)=\"view('ERROR')\"\r\n            icon=\"error\"\r\n            title=\"{{ numberOfError }}\"\r\n            color=\"error\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 c\u1EA3nh b\u00E1o\"\r\n            size=\"sm\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sd-box border rounded\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered mb-0\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\r\n                @if (filteredItems.length) {\r\n                  <th class=\"text-center\" style=\"min-width: 250px; width: 250px\">Tr\u1EA1ng th\u00E1i</th>\r\n                }\r\n                @for (column of option.columns; track column.field) {\r\n                  @if (column | columnHidden) {\r\n                    <th [ngStyle]=\"{ 'min-width': column.width || '300px', width: column.width || '300px' }\" [matTooltip]=\"column.title\">\r\n                      <span class=\"c-ellipsis\">\r\n                        {{ column.title }}\r\n                      </span>\r\n                    </th>\r\n                  }\r\n                }\r\n              </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n              @if (viewItems.length) {\r\n                @for (item of viewItems; track item.meta.excelIndex) {\r\n                  <tr>\r\n                    <td class=\"text-center c-sticky-left px-4\">\r\n                      <sd-badge\r\n                        type=\"tag\"\r\n                        [title]=\"item.meta.excelIndex\"\r\n                        [success]=\"!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [warning]=\"!!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [error]=\"!!item.meta.errorMessages.length\" />\r\n                    </td>\r\n\r\n                    <td style=\"min-width: 250px; width: 250px\">\r\n                      <div\r\n                        class=\"text-wrap\"\r\n                        [innerHTML]=\"\r\n                          item.meta.errorMessages[0] || item.meta.warningMessages[0] || '<span class=\\'text-success\\'>D\u1EEF li\u1EC7u h\u1EE3p l\u1EC7</span>'\r\n                        \"></div>\r\n                    </td>\r\n\r\n                    @for (column of option.columns; track column.field) {\r\n                      @if (column | columnHidden) {\r\n                        <td\r\n                          class=\"align-middle\"\r\n                          [ngClass]=\"{\r\n                            'bg-warning-light': item.meta.warning[column.field] && !item.meta.error[column.field],\r\n                            'bg-error-light': item.meta.error[column.field]\r\n                          }\"\r\n                          [matTooltip]=\"item.meta.error[column.field] || item.meta.warning[column.field]\"\r\n                          [ngStyle]=\"{ 'min-width': column.width || '300px' }\"\r\n                          matTooltipPosition=\"above\">\r\n                          <div class=\"c-ellipsis\">\r\n                            @if (column.type !== 'array') {\r\n                              <span [innerHTML]=\"item | columnTransform: column | async\"></span>\r\n                            }\r\n\r\n                            @if (column.type === 'array') {\r\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\r\n\r\n                              <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\r\n\r\n                                @if (arrayItems?.length) {\r\n                                  <button\r\n                                    mat-icon-button\r\n                                    [matMenuTriggerFor]=\"menu\"\r\n                                    class=\"c-mat-menu\"\r\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\r\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\r\n                                  </button>\r\n\r\n                                  <mat-menu #menu=\"matMenu\">\r\n                                    <div\r\n                                      class=\"px-3 py-2\"\r\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      aria-hidden=\"true\">\r\n                                      @for (val of arrayItems; track $index) {\r\n                                        <div class=\"border-bottom py-2 text-wrap\" [innerHTML]=\"val\"></div>\r\n                                      }\r\n                                    </div>\r\n                                  </mat-menu>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n                      }\r\n                    }\r\n                  </tr>\r\n                }\r\n              } @else {\r\n                <tr>\r\n                  <td [attr.colspan]=\"option.columns.length + 2\" class=\"p-0 border-0 bg-white\">\r\n                    <div\r\n                      class=\"empty-state-wrapper\"\r\n                      (click)=\"downloadTemplate()\"\r\n                      matTooltip=\"Nh\u1EA5n \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu v\u1EC1 m\u00E1y\"\r\n                      aria-hidden=\"true\">\r\n                      <mat-icon class=\"empty-icon\">cloud_download</mat-icon>\r\n\r\n                      <h4>Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u t\u1EA3i l\u00EAn</h4>\r\n                      <span class=\"text-small text-link\"> Nh\u1EA5n v\u00E0o \u0111\u00E2y \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu </span>\r\n\r\n                      @if (isDownloadTemplate) {\r\n                        <div class=\"mt-3\">\r\n                          <mat-spinner diameter=\"24\" mode=\"indeterminate\"></mat-spinner>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"sd-box-footer border-top\">\r\n        <div class=\"d-flex align-items-center justify-content-end\">\r\n          <mat-paginator [length]=\"filteredItems.length || 0\" hidePageSize showFirstLastButtons></mat-paginator>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <sd-button sdFooterLeft (click)=\"upload()\" prefixIcon=\"file_upload\" title=\"T\u1EA3i l\u00EAn\" size=\"sm\" color=\"info\" [loading]=\"uploading\">\r\n    </sd-button>\r\n    <div class=\"d-flex align-items-center\" sdFooter>\r\n      @if (filteredItems.length) {\r\n        <sd-button class=\"mr-4\" (click)=\"export()\" prefixIcon=\"get_app\" title=\"T\u1EA3i v\u1EC1\" size=\"sm\" color=\"success\" type=\"outline\">\r\n        </sd-button>\r\n      }\r\n      <sd-button\r\n        (click)=\"accept()\"\r\n        title=\"X\u00E1c nh\u1EADn & L\u01B0u\"\r\n        [disabled]=\"(numberOfSuccess === 0 && numberOfWarning === 0) || numberOfError > 0 || isUploaded\"\r\n        color=\"primary\"\r\n        type=\"fill\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </div>\r\n  </sd-modal>\r\n}\r\n", styles: [".table-responsive{position:relative;min-height:50vh;height:50vh;overflow:auto;border:1px solid #dee2e6}.table{margin-bottom:0}.table thead th{position:sticky;top:0;background-color:#f8f9fa;border-bottom:2px solid #dee2e6;padding-top:8px;padding-bottom:8px;white-space:nowrap;z-index:10}.table thead th.c-sticky-left{z-index:20}.table tbody td{vertical-align:middle;padding-top:6px;padding-bottom:6px}.c-sticky-left{position:sticky;left:0;border-right:1px solid #dee2e6!important;border-left:none!important;z-index:5}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-hover tbody tr:hover .c-sticky-left{background-color:#ececec}.table-striped tbody tr:nth-of-type(odd){background-color:#0000000d}.table-striped tbody tr:nth-of-type(2n){background-color:#fff}.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"] }]
+                    ], template: "@if (option) {\r\n  <sd-modal [title]=\"option.title || 'Nh\u1EADp d\u1EEF li\u1EC7u Excel'\" (sdClosed)=\"onClosed()\" #modal>\r\n    <div class=\"d-flex align-items-center mb-12\" style=\"min-height: 32px\">\r\n      @if (excelItems.length) {\r\n        <div class=\"d-flex\">\r\n          <sd-button class=\"mr-2\" (click)=\"view('ALL')\" icon=\"cached\" title=\"Xem t\u1EA5t c\u1EA3\" size=\"sm\" type=\"outline\"></sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('SUCCESS')\"\r\n            icon=\"done\"\r\n            title=\"{{ numberOfSuccess }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u h\u1EE3p l\u1EC7\"\r\n            size=\"sm\"\r\n            color=\"success\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            class=\"mr-2\"\r\n            (click)=\"view('WARNING')\"\r\n            icon=\"warning\"\r\n            title=\"{{ numberOfWarning }}\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 l\u1ED7i\"\r\n            size=\"sm\"\r\n            color=\"warning\">\r\n          </sd-button>\r\n\r\n          <sd-button\r\n            (click)=\"view('ERROR')\"\r\n            icon=\"error\"\r\n            title=\"{{ numberOfError }}\"\r\n            color=\"error\"\r\n            tooltip=\"S\u1ED1 d\u00F2ng d\u1EEF li\u1EC7u c\u00F3 c\u1EA3nh b\u00E1o\"\r\n            size=\"sm\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sd-box border rounded\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"sd-table\">\r\n            <thead>\r\n              <tr>\r\n                <th class=\"text-center c-sticky-left\" style=\"width: 50px\">#</th>\r\n                @if (filteredItems.length) {\r\n                  <th class=\"text-center\" style=\"min-width: 250px; width: 250px\">Tr\u1EA1ng th\u00E1i</th>\r\n                }\r\n                @for (column of option.columns; track column.field) {\r\n                  @if (column | columnHidden) {\r\n                    <th [ngStyle]=\"{ 'min-width': column.width || '300px', width: column.width || '300px' }\" [matTooltip]=\"column.title\">\r\n                      <span class=\"c-ellipsis\">\r\n                        {{ column.title }}\r\n                      </span>\r\n                    </th>\r\n                  }\r\n                }\r\n              </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n              @if (viewItems.length) {\r\n                @for (item of viewItems; track item.meta.excelIndex) {\r\n                  <tr>\r\n                    <td class=\"text-center c-sticky-left px-4\">\r\n                      <sd-badge\r\n                        type=\"tag\"\r\n                        [title]=\"item.meta.excelIndex\"\r\n                        [success]=\"!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [warning]=\"!!item.meta.warningMessages.length && !item.meta.errorMessages.length\"\r\n                        [error]=\"!!item.meta.errorMessages.length\" />\r\n                    </td>\r\n\r\n                    <td style=\"min-width: 250px; width: 250px\">\r\n                      <div\r\n                        class=\"text-wrap\"\r\n                        [innerHTML]=\"\r\n                          item.meta.errorMessages[0] || item.meta.warningMessages[0] || '<span class=\\'text-success\\'>D\u1EEF li\u1EC7u h\u1EE3p l\u1EC7</span>'\r\n                        \"></div>\r\n                    </td>\r\n\r\n                    @for (column of option.columns; track column.field) {\r\n                      @if (column | columnHidden) {\r\n                        <td\r\n                          class=\"align-middle\"\r\n                          [ngClass]=\"{\r\n                            'bg-warning-light': item.meta.warning[column.field] && !item.meta.error[column.field],\r\n                            'bg-error-light': item.meta.error[column.field]\r\n                          }\"\r\n                          [matTooltip]=\"item.meta.error[column.field] || item.meta.warning[column.field]\"\r\n                          [ngStyle]=\"{ 'min-width': column.width || '300px' }\"\r\n                          matTooltipPosition=\"above\">\r\n                          <div class=\"c-ellipsis\">\r\n                            @if (column.type !== 'array') {\r\n                              <span [innerHTML]=\"item | columnTransform: column | async\"></span>\r\n                            }\r\n\r\n                            @if (column.type === 'array') {\r\n                              @let arrayItems = item.data[column.field]?.split(column.divideString);\r\n\r\n                              <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <span>{{ arrayItems?.length || 0 }} {{ column.unitString }}</span>\r\n\r\n                                @if (arrayItems?.length) {\r\n                                  <button\r\n                                    mat-icon-button\r\n                                    [matMenuTriggerFor]=\"menu\"\r\n                                    class=\"c-mat-menu\"\r\n                                    style=\"width: 24px; height: 24px; line-height: 24px\">\r\n                                    <mat-icon style=\"font-size: 18px\">open_in_new</mat-icon>\r\n                                  </button>\r\n\r\n                                  <mat-menu #menu=\"matMenu\">\r\n                                    <div\r\n                                      class=\"px-3 py-2\"\r\n                                      style=\"max-width: 300px; max-height: 250px; overflow: auto\"\r\n                                      (click)=\"$event.stopPropagation()\"\r\n                                      aria-hidden=\"true\">\r\n                                      @for (val of arrayItems; track $index) {\r\n                                        <div class=\"border-bottom py-2 text-wrap\" [innerHTML]=\"val\"></div>\r\n                                      }\r\n                                    </div>\r\n                                  </mat-menu>\r\n                                }\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n                      }\r\n                    }\r\n                  </tr>\r\n                }\r\n              } @else {\r\n                <tr>\r\n                  <td [attr.colspan]=\"option.columns.length + 2\" class=\"p-0 border-0 bg-white\">\r\n                    <div\r\n                      class=\"empty-state-wrapper\"\r\n                      (click)=\"downloadTemplate()\"\r\n                      matTooltip=\"Nh\u1EA5n \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu v\u1EC1 m\u00E1y\"\r\n                      aria-hidden=\"true\">\r\n                      <mat-icon class=\"empty-icon\">cloud_download</mat-icon>\r\n\r\n                      <h4>Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u t\u1EA3i l\u00EAn</h4>\r\n                      <span class=\"text-small text-link\"> Nh\u1EA5n v\u00E0o \u0111\u00E2y \u0111\u1EC3 t\u1EA3i t\u1EC7p m\u1EABu </span>\r\n\r\n                      @if (isDownloadTemplate) {\r\n                        <div class=\"mt-3\">\r\n                          <mat-spinner diameter=\"24\" mode=\"indeterminate\"></mat-spinner>\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"sd-box-footer border-top\">\r\n        <div class=\"d-flex align-items-center justify-content-end\">\r\n          <mat-paginator [length]=\"filteredItems.length || 0\" hidePageSize showFirstLastButtons></mat-paginator>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <sd-button sdFooterLeft (click)=\"upload()\" prefixIcon=\"file_upload\" title=\"T\u1EA3i l\u00EAn\" size=\"sm\" color=\"info\" [loading]=\"uploading\">\r\n    </sd-button>\r\n    <div class=\"d-flex align-items-center\" sdFooter>\r\n      @if (filteredItems.length) {\r\n        <sd-button class=\"mr-4\" (click)=\"export()\" prefixIcon=\"get_app\" title=\"T\u1EA3i v\u1EC1\" size=\"sm\" color=\"success\" type=\"outline\">\r\n        </sd-button>\r\n      }\r\n      <sd-button\r\n        (click)=\"accept()\"\r\n        title=\"X\u00E1c nh\u1EADn & L\u01B0u\"\r\n        [disabled]=\"(numberOfSuccess === 0 && numberOfWarning === 0) || numberOfError > 0 || isUploaded\"\r\n        color=\"primary\"\r\n        type=\"fill\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </div>\r\n  </sd-modal>\r\n}\r\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SdExcelService }, { type: i2.SdNotifyService }, { type: ColumnHiddenPipe }, { type: i4.SdLoadingService }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]