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

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/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 }]