npm - @sd-angular/core - Versions diffs - 19.0.0-beta.70 → 19.0.0-beta.72 - Mend

@sd-angular/core 19.0.0-beta.70 → 19.0.0-beta.72

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

Files changed (57) hide show

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, EventEmitter, isSignal, Output, ChangeDetectionStrategy, Component, Pipe, input, computed, InjectionToken, Inject, Optional, Injectable, HostListener, ViewChild, inject, ChangeDetectorRef, viewChild, signal, afterNextRender, ElementRef, DestroyRef, contentChild, contentChildren, effect, untracked } from '@angular/core';
+import { Input, Directive, EventEmitter, isSignal, Output, ChangeDetectionStrategy, Component, Pipe, input, computed, InjectionToken, Inject, Optional, Injectable, HostListener, ViewChild, inject, ChangeDetectorRef, viewChild, signal, effect, ElementRef, DestroyRef, afterNextRender, contentChild, contentChildren, untracked } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i4$2 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -785,7 +785,7 @@ class ConfigComponent {
         this.dragDisabled = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SdConfirmService }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: "tableOption" }, host: { listeners: { "window:mouseup": "mouseUp($event)" } }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"sm\" [title]=\"'Thi\u1EBFt l\u1EADp b\u1EA3ng'\" #modal>\r\n  @if (configuration) {\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <!-- <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let idx = index\"></td>\r\n          </ng-container> -->\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\r\n              {{ 'Hi\u1EC3n th\u1ECB' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <div class=\"d-flex\" style=\"gap: 8px\">\r\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\r\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n                    <path\r\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\r\n                  </svg>\r\n                </div>\r\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\r\n              {{ 'Ti\u00EAu \u0111\u1EC1 c\u1ED9t' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'R\u1ED9ng' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'C\u1ED1 \u0111\u1ECBnh' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.fixed\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <ng-container matColumnDef=\"charLimited\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\r\n              {{ 'Gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.charLimited\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'charLimited']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'charLimited']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\">\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button class=\"mr-8\" (click)=\"close()\" title=\"B\u1ECF qua\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" title=\"\u00C1p d\u1EE5ng\" type=\"fill\" color=\"primary\"> </sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "size", "form", "label", "color", "disabled", "model", "hideInlineError", "required"], outputs: ["modelChange", "sdChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: "tableOption" }, host: { listeners: { "window:mouseup": "mouseUp($event)" } }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"sm\" [title]=\"'Thi\u1EBFt l\u1EADp b\u1EA3ng'\" #modal>\r\n  @if (configuration) {\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <!-- <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let idx = index\"></td>\r\n          </ng-container> -->\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\r\n              {{ 'Hi\u1EC3n th\u1ECB' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <div class=\"d-flex\" style=\"gap: 8px\">\r\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\r\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n                    <path\r\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\r\n                  </svg>\r\n                </div>\r\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\r\n              {{ 'Ti\u00EAu \u0111\u1EC1 c\u1ED9t' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'R\u1ED9ng' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'C\u1ED1 \u0111\u1ECBnh' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.fixed\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <ng-container matColumnDef=\"charLimited\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\r\n              {{ 'Gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.charLimited\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'charLimited']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'charLimited']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\">\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button class=\"mr-8\" (click)=\"close()\" title=\"B\u1ECF qua\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" title=\"\u00C1p d\u1EE5ng\" type=\"fill\" color=\"primary\"> </sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "size", "form", "label", "color", "disabled", "model", "hideInlineError", "required"], outputs: ["modelChange", "sdChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
@@ -844,7 +844,8 @@ class SdDesktopCellView {
         return data?.id?.toString() || data?.code?.toString() || data?.value?.toString();
     });
     constructor() {
-        afterNextRender(() => {
+        effect(() => {
+            this.charLimited();
             const container = this.contentContainer();
             if (container) {
                 this.#checkOverflow(container.nativeElement);
@@ -865,11 +866,11 @@ class SdDesktopCellView {
         this.isCollapsed.update(current => !current);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCellView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCellView, isStandalone: true, selector: "sd-desktop-cell-view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, charLimited: { classPropertyName: "charLimited", publicName: "charLimited", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n  @if (view.isHtml) {\r\n    @if (view.click) {\r\n      <div\r\n        [attr.data-autoId]=\"autoId()\"\r\n        (click)=\"view.click()\"\r\n        class=\"text-break cursor-pointer\"\r\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n        [style]=\"view.cellStyle\"\r\n        [style.max-width]=\"charLimited()?.width\"\r\n        [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n        [innerHTML]=\"view.data | sdSafeHtml\"\r\n        aria-hidden=\"true\"></div>\r\n\r\n      <ng-template #htmlClickTooltip>\r\n        <div\r\n          class=\"c-tooltip-inner-content\"\r\n          [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n        </div>\r\n      </ng-template>\r\n    } @else {\r\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n      @if (columnCharLimit?.enable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"charLimited()?.width\"\r\n          [class.c-ellipsis-html]=\"isCollapsed()\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n          container=\"body\"\r\n          placement=\"bottom\"\r\n          [sdTooltipDelay]=\"100\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n        <ng-template #htmlTooltip>\r\n          <div\r\n            class=\"c-tooltip-inner-content\"\r\n            [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (isExpandByMore) {\r\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n        }\r\n      } @else {\r\n        <div\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n      }\r\n      <!-- End -->\r\n    }\r\n  } @else {\r\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n    @if (view.badge) {\r\n      @if (view.data) {\r\n        <sd-badge\r\n          [attr.data-autoId]=\"autoId()\"\r\n          [type]=\"view.badge.type\"\r\n          [title]=\"view.data\"\r\n          [color]=\"view.badge.color\"\r\n          [icon]=\"view.badge.icon\"\r\n          [sdTooltip]=\"view.tooltip\"\r\n          (click)=\"!!view.click && view.click()\">\r\n        </sd-badge>\r\n      }\r\n    } @else {\r\n      @if (view.click) {\r\n        <div class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n          <a\r\n            href=\"javascript:;\"\r\n            [attr.data-autoId]=\"autoId()\"\r\n            [style.max-width]=\"charLimited()?.width\"\r\n            [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n            (click)=\"view.click()\">\r\n            {{ view.data }}\r\n          </a>\r\n        </div>\r\n      } @else {\r\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n        @if (columnCharLimit?.enable) {\r\n          <div\r\n            #contentContainer\r\n            [attr.data-autoId]=\"autoId()\"\r\n            class=\"text-break\"\r\n            [style]=\"view.cellStyle\"\r\n            [style.max-width]=\"charLimited()?.width\"\r\n            [class.c-ellipsis]=\"isCollapsed()\"\r\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n            {{ view.data }}\r\n          </div>\r\n\r\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n          @if (isExpandByMore) {\r\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n          }\r\n        } @else {\r\n          <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip\">\r\n            {{ view.data }}\r\n          </div>\r\n        }\r\n        <!-- End -->\r\n      }\r\n    }\r\n  }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "pipe", type: ToStringPipe, name: "asString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCellView, isStandalone: true, selector: "sd-desktop-cell-view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, charLimited: { classPropertyName: "charLimited", publicName: "charLimited", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n  @if (view.isHtml) {\r\n    @if (view.click) {\r\n      <div\r\n        #contentContainer\r\n        [attr.data-autoId]=\"autoId()\"\r\n        (click)=\"view.click()\"\r\n        class=\"text-break cursor-pointer\"\r\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n        [style]=\"view.cellStyle\"\r\n        [style.max-width]=\"charLimited()?.width\"\r\n        [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n        [innerHTML]=\"view.data | sdSafeHtml\"\r\n        aria-hidden=\"true\"></div>\r\n\r\n      <ng-template #htmlClickTooltip>\r\n        <div\r\n          class=\"c-tooltip-inner-content\"\r\n          [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n        </div>\r\n      </ng-template>\r\n    } @else {\r\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n      @if (columnCharLimit?.enable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"charLimited()?.width\"\r\n          [class.c-ellipsis-html]=\"isCollapsed()\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n          container=\"body\"\r\n          placement=\"bottom\"\r\n          [sdTooltipDelay]=\"100\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n        <ng-template #htmlTooltip>\r\n          <div\r\n            class=\"c-tooltip-inner-content\"\r\n            [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (isExpandByMore) {\r\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n        }\r\n      } @else {\r\n        <div\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip || ''\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n      }\r\n      <!-- End -->\r\n    }\r\n  } @else {\r\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n    @if (view.badge) {\r\n      @if (view.data) {\r\n        <sd-badge\r\n          [attr.data-autoId]=\"autoId()\"\r\n          [type]=\"view.badge.type\"\r\n          [title]=\"view.data\"\r\n          [color]=\"view.badge.color\"\r\n          [icon]=\"view.badge.icon\"\r\n          [sdTooltip]=\"view.tooltip || ''\"\r\n          (click)=\"!!view.click && view.click()\">\r\n        </sd-badge>\r\n      }\r\n    } @else {\r\n      @if (view.click) {\r\n        <div\r\n          #contentContainer\r\n          class=\"text-break\"\r\n          [style]=\"view.cellStyle\"\r\n          [style.max-width]=\"charLimited()?.width\"\r\n          [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n          <a [attr.data-autoId]=\"autoId\" href=\"javascript:;\" (click)=\"view.click()\">\r\n            {{ view.data }}\r\n          </a>\r\n        </div>\r\n      } @else {\r\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n        @if (columnCharLimit?.enable) {\r\n          <div\r\n            #contentContainer\r\n            [attr.data-autoId]=\"autoId()\"\r\n            class=\"text-break\"\r\n            [style]=\"view.cellStyle\"\r\n            [style.max-width]=\"charLimited()?.width\"\r\n            [class.c-ellipsis]=\"isCollapsed()\"\r\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n            {{ view.data }}\r\n          </div>\r\n\r\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n          @if (isExpandByMore) {\r\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n          }\r\n        } @else {\r\n          <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\r\n            {{ view.data }}\r\n          </div>\r\n        }\r\n        <!-- End -->\r\n      }\r\n    }\r\n  }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "pipe", type: ToStringPipe, name: "asString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCellView, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-desktop-cell-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n  @if (view.isHtml) {\r\n    @if (view.click) {\r\n      <div\r\n        [attr.data-autoId]=\"autoId()\"\r\n        (click)=\"view.click()\"\r\n        class=\"text-break cursor-pointer\"\r\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n        [style]=\"view.cellStyle\"\r\n        [style.max-width]=\"charLimited()?.width\"\r\n        [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n        [innerHTML]=\"view.data | sdSafeHtml\"\r\n        aria-hidden=\"true\"></div>\r\n\r\n      <ng-template #htmlClickTooltip>\r\n        <div\r\n          class=\"c-tooltip-inner-content\"\r\n          [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n        </div>\r\n      </ng-template>\r\n    } @else {\r\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n      @if (columnCharLimit?.enable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"charLimited()?.width\"\r\n          [class.c-ellipsis-html]=\"isCollapsed()\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n          container=\"body\"\r\n          placement=\"bottom\"\r\n          [sdTooltipDelay]=\"100\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n        <ng-template #htmlTooltip>\r\n          <div\r\n            class=\"c-tooltip-inner-content\"\r\n            [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (isExpandByMore) {\r\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n        }\r\n      } @else {\r\n        <div\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n      }\r\n      <!-- End -->\r\n    }\r\n  } @else {\r\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n    @if (view.badge) {\r\n      @if (view.data) {\r\n        <sd-badge\r\n          [attr.data-autoId]=\"autoId()\"\r\n          [type]=\"view.badge.type\"\r\n          [title]=\"view.data\"\r\n          [color]=\"view.badge.color\"\r\n          [icon]=\"view.badge.icon\"\r\n          [sdTooltip]=\"view.tooltip\"\r\n          (click)=\"!!view.click && view.click()\">\r\n        </sd-badge>\r\n      }\r\n    } @else {\r\n      @if (view.click) {\r\n        <div class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n          <a\r\n            href=\"javascript:;\"\r\n            [attr.data-autoId]=\"autoId()\"\r\n            [style.max-width]=\"charLimited()?.width\"\r\n            [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n            (click)=\"view.click()\">\r\n            {{ view.data }}\r\n          </a>\r\n        </div>\r\n      } @else {\r\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n        @if (columnCharLimit?.enable) {\r\n          <div\r\n            #contentContainer\r\n            [attr.data-autoId]=\"autoId()\"\r\n            class=\"text-break\"\r\n            [style]=\"view.cellStyle\"\r\n            [style.max-width]=\"charLimited()?.width\"\r\n            [class.c-ellipsis]=\"isCollapsed()\"\r\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n            {{ view.data }}\r\n          </div>\r\n\r\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n          @if (isExpandByMore) {\r\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n          }\r\n        } @else {\r\n          <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip\">\r\n            {{ view.data }}\r\n          </div>\r\n        }\r\n        <!-- End -->\r\n      }\r\n    }\r\n  }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"] }]
+            args: [{ selector: 'sd-desktop-cell-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n  @if (view.isHtml) {\r\n    @if (view.click) {\r\n      <div\r\n        #contentContainer\r\n        [attr.data-autoId]=\"autoId()\"\r\n        (click)=\"view.click()\"\r\n        class=\"text-break cursor-pointer\"\r\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n        [style]=\"view.cellStyle\"\r\n        [style.max-width]=\"charLimited()?.width\"\r\n        [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n        [innerHTML]=\"view.data | sdSafeHtml\"\r\n        aria-hidden=\"true\"></div>\r\n\r\n      <ng-template #htmlClickTooltip>\r\n        <div\r\n          class=\"c-tooltip-inner-content\"\r\n          [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n        </div>\r\n      </ng-template>\r\n    } @else {\r\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n      @if (columnCharLimit?.enable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"charLimited()?.width\"\r\n          [class.c-ellipsis-html]=\"isCollapsed()\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n          container=\"body\"\r\n          placement=\"bottom\"\r\n          [sdTooltipDelay]=\"100\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n        <ng-template #htmlTooltip>\r\n          <div\r\n            class=\"c-tooltip-inner-content\"\r\n            [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (isExpandByMore) {\r\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n        }\r\n      } @else {\r\n        <div\r\n          [attr.data-autoId]=\"autoId()\"\r\n          class=\"text-break\"\r\n          [sdTooltip]=\"view.tooltip || ''\"\r\n          [style]=\"view.cellStyle\"\r\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n      }\r\n      <!-- End -->\r\n    }\r\n  } @else {\r\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n    @if (view.badge) {\r\n      @if (view.data) {\r\n        <sd-badge\r\n          [attr.data-autoId]=\"autoId()\"\r\n          [type]=\"view.badge.type\"\r\n          [title]=\"view.data\"\r\n          [color]=\"view.badge.color\"\r\n          [icon]=\"view.badge.icon\"\r\n          [sdTooltip]=\"view.tooltip || ''\"\r\n          (click)=\"!!view.click && view.click()\">\r\n        </sd-badge>\r\n      }\r\n    } @else {\r\n      @if (view.click) {\r\n        <div\r\n          #contentContainer\r\n          class=\"text-break\"\r\n          [style]=\"view.cellStyle\"\r\n          [style.max-width]=\"charLimited()?.width\"\r\n          [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n          <a [attr.data-autoId]=\"autoId\" href=\"javascript:;\" (click)=\"view.click()\">\r\n            {{ view.data }}\r\n          </a>\r\n        </div>\r\n      } @else {\r\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n        @if (columnCharLimit?.enable) {\r\n          <div\r\n            #contentContainer\r\n            [attr.data-autoId]=\"autoId()\"\r\n            class=\"text-break\"\r\n            [style]=\"view.cellStyle\"\r\n            [style.max-width]=\"charLimited()?.width\"\r\n            [class.c-ellipsis]=\"isCollapsed()\"\r\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n            {{ view.data }}\r\n          </div>\r\n\r\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n          @if (isExpandByMore) {\r\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n          }\r\n        } @else {\r\n          <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\r\n            {{ view.data }}\r\n          </div>\r\n        }\r\n        <!-- End -->\r\n      }\r\n    }\r\n  }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"] }]
         }], ctorParameters: () => [] });
 class SdDesktopCell {
@@ -895,7 +896,8 @@ class SdDesktopCell {
     isCollapsed = signal(true);
     isOverflowing = signal(false);
     constructor() {
-        afterNextRender(() => {
+        effect(() => {
+            this.charLimited();
             const container = this.contentContainer();
             if (container) {
                 this.#checkOverflow(container.nativeElement);
@@ -1428,7 +1430,7 @@ class SdPopupExport {
         return '';
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPopupExport, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SdLoadingService }, { token: i1$1.SdExcelService }, { token: i1$1.SdNotifyService }, { token: i1$1.SdConfirmService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdPopupExport, isStandalone: true, selector: "sd-popup-export", inputs: { _tableOption: ["tableOption", "_tableOption"], configuration: "configuration" }, outputs: { export: "export" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "listGroups", first: true, predicate: ["listGroups"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"907px\" [title]=\"'Exported template'\" #modal>\n  <div class=\"row\">\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\n      <div class=\"c-empty\">\n        <img class=\"c-empty-image\" alt=\"empty-image\" />\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"files?.length\">\n      <div class=\"col-12\">\n        <div class=\"c-table\" style=\"max-height: 50vh\">\n          <table mat-table [dataSource]=\"files\">\n            <ng-container matColumnDef=\"stt\">\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\n                {{ idx + 1 }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"fileName\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\n                {{ 'File name' }}\n              </th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                {{ item.fileName }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                <div class=\"d-flex\">\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\n                    <mat-icon>download</mat-icon>\n                  </button>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\n          </table>\n        </div>\n      </div>\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\n        </sd-button>\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\n        </sd-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\n      <div class=\"col-12 mt-20\">\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\n      </div>\n      <div class=\"col-12\">\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\n          <ng-container *ngFor=\"let column of columns\">\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\n              {{ column.title }}\n            </mat-chip-option>\n          </ng-container>\n        </mat-chip-listbox>\n      </div>\n      <div class=\"col-12 row\">\n        <div class=\"col-10\">\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\n        </div>\n        <div class=\"col-2 mt-8\">\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</sd-modal>\n", styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;position:static;height:116px;background:#f6f6f6;border-radius:4px}.c-empty .c-empty-image{content:url(data:image/png;base64,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)}.c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdPopupExport, isStandalone: true, selector: "sd-popup-export", inputs: { _tableOption: ["tableOption", "_tableOption"], configuration: "configuration" }, outputs: { export: "export" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "listGroups", first: true, predicate: ["listGroups"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"907px\" [title]=\"'Exported template'\" #modal>\n  <div class=\"row\">\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\n      <div class=\"c-empty\">\n        <img class=\"c-empty-image\" alt=\"empty-image\" />\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"files?.length\">\n      <div class=\"col-12\">\n        <div class=\"c-table\" style=\"max-height: 50vh\">\n          <table mat-table [dataSource]=\"files\">\n            <ng-container matColumnDef=\"stt\">\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\n                {{ idx + 1 }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"fileName\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\n                {{ 'File name' }}\n              </th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                {{ item.fileName }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                <div class=\"d-flex\">\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\n                    <mat-icon>download</mat-icon>\n                  </button>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\n          </table>\n        </div>\n      </div>\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\n        </sd-button>\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\n        </sd-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\n      <div class=\"col-12 mt-20\">\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\n      </div>\n      <div class=\"col-12\">\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\n          <ng-container *ngFor=\"let column of columns\">\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\n              {{ column.title }}\n            </mat-chip-option>\n          </ng-container>\n        </mat-chip-listbox>\n      </div>\n      <div class=\"col-12 row\">\n        <div class=\"col-10\">\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\n        </div>\n        <div class=\"col-2 mt-8\">\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</sd-modal>\n", styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;position:static;height:116px;background:#f6f6f6;border-radius:4px}.c-empty .c-empty-image{content:url(data:image/png;base64,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)}.c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "modalClass", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPopupExport, decorators: [{
             type: Component,