npm - @sd-angular/core - Versions diffs - 19.0.0-beta.83 → 19.0.0-beta.84 - Mend

@sd-angular/core 19.0.0-beta.83 → 19.0.0-beta.84

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 (62) hide show

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

@@ -54,10 +54,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 class SdTabelCellDefDirective {
     sdTableCellDef = input();
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabelCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: SdTabelCellDefDirective, isStandalone: true, selector: "[sdTableCellDef]", inputs: { sdTableCellDef: { classPropertyName: "sdTableCellDef", publicName: "sdTableCellDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabelCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdTabelCellDefDirective, isStandalone: true, selector: "[sdTableCellDef]", inputs: { sdTableCellDef: { classPropertyName: "sdTableCellDef", publicName: "sdTableCellDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabelCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTabelCellDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableCellDef]',
@@ -66,10 +66,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class SdMaterialSubInformationDefDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdMaterialSubInformationDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SdMaterialSubInformationDefDirective, isStandalone: true, selector: "[sdTableExpandDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMaterialSubInformationDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SdMaterialSubInformationDefDirective, isStandalone: true, selector: "[sdTableExpandDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdMaterialSubInformationDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMaterialSubInformationDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableExpandDef]',
@@ -83,10 +83,10 @@ class SdTableFilterDefDirective {
     sdTableFilterDef = input();
     defaultShowing = input(false, { transform: booleanAttribute });
     templateRef = inject((TemplateRef), { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: SdTableFilterDefDirective, isStandalone: true, selector: "[sdTableFilterDef]", inputs: { sdTableFilterDef: { classPropertyName: "sdTableFilterDef", publicName: "sdTableFilterDef", isSignal: true, isRequired: false, transformFunction: null }, defaultShowing: { classPropertyName: "defaultShowing", publicName: "defaultShowing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdTableFilterDefDirective, isStandalone: true, selector: "[sdTableFilterDef]", inputs: { sdTableFilterDef: { classPropertyName: "sdTableFilterDef", publicName: "sdTableFilterDef", isSignal: true, isRequired: false, transformFunction: null }, defaultShowing: { classPropertyName: "defaultShowing", publicName: "defaultShowing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableFilterDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableFilterDef]',
@@ -96,10 +96,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class SdTableTitleDefDirective {
     sdTableTitleDef = input();
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableTitleDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: SdTableTitleDefDirective, isStandalone: true, selector: "[sdTableTitleDef]", inputs: { sdTableTitleDef: { classPropertyName: "sdTableTitleDef", publicName: "sdTableTitleDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableTitleDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdTableTitleDefDirective, isStandalone: true, selector: "[sdTableTitleDef]", inputs: { sdTableTitleDef: { classPropertyName: "sdTableTitleDef", publicName: "sdTableTitleDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableTitleDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableTitleDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableTitleDef]',
@@ -109,10 +109,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class SdMaterialFooterDefDirective {
     sdTableFooterDef = input();
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdMaterialFooterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: SdMaterialFooterDefDirective, isStandalone: true, selector: "[sdTableFooterDef]", inputs: { sdTableFooterDef: { classPropertyName: "sdTableFooterDef", publicName: "sdTableFooterDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMaterialFooterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdMaterialFooterDefDirective, isStandalone: true, selector: "[sdTableFooterDef]", inputs: { sdTableFooterDef: { classPropertyName: "sdTableFooterDef", publicName: "sdTableFooterDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdMaterialFooterDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMaterialFooterDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableFooterDef]',
@@ -221,10 +221,10 @@ class ColumnFilterComponent {
         this.operatorChange.emit(this.#inlineOperator);
         this.ref.markForCheck();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { _autoId: ["autoId", "_autoId"], _value: ["value", "_value"], _inlineOperator: ["inlineOperator", "_inlineOperator"], _columnFilter: ["columnFilter", "_columnFilter"], cacheValues: "cacheValues", _column: ["column", "_column"] }, outputs: { inlineOperatorChange: "inlineOperatorChange", operatorChange: "operatorChange", filterChange: "filterChange" }, ngImport: i0, template: "@let template = column?.filter?.filterDef;\r\n@let context = { columnFilter: columnFilter, autoId: autoId + column.field };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    column.type === 'string' ||\r\n    column.type === 'number' ||\r\n    column.type === 'boolean' ||\r\n    column.type === 'values' ||\r\n    column.type === 'lazy-values' ||\r\n    column.type === 'date' ||\r\n    column.type === 'datetime' ||\r\n    column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <sd-button\r\n        class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n        fontSet=\"material-symbols-outlined\"\r\n        [prefixIcon]=\"inlineSymbol\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        type=\"link\">\r\n      </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n            operator.symbol\r\n          }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (template) {\r\n      <ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\r\n    } \r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (column.type === 'string') {\r\n        <sd-input\r\n          *ngIf=\"column.type === 'string'\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (column.type === 'number') {\r\n        @if (!column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"autoId + column.field\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (column.filter?.type === 'split-number') {\r\n          <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n            <sd-input-number\r\n              [autoId]=\"autoId + '-from-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].from\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-input-number>\r\n            <div class=\"mx-4\">-</div>\r\n            <sd-input-number\r\n              [autoId]=\"autoId + '-to-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].to\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-input-number>\r\n          </div>\r\n        }\r\n      } @else if (column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"[\r\n            { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"items\"\r\n          [valueField]=\"column.option.valueField\"\r\n          [displayField]=\"column.option.displayField\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"items\"\r\n          [valueField]=\"column.option.valueField\"\r\n          [displayField]=\"column.option.displayField\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n        @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"autoId + column.field\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (column.filter?.type === 'split-date') {\r\n          <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n            <sd-date\r\n              [autoId]=\"autoId + '-from-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              type=\"date\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].from\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-date>\r\n            <div class=\"mx-4\">-</div>\r\n            <sd-date\r\n              [autoId]=\"autoId + '-to-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              type=\"date\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].to\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-date>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"autoId + column.field\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { _autoId: ["autoId", "_autoId"], _value: ["value", "_value"], _inlineOperator: ["inlineOperator", "_inlineOperator"], _columnFilter: ["columnFilter", "_columnFilter"], cacheValues: "cacheValues", _column: ["column", "_column"] }, outputs: { inlineOperatorChange: "inlineOperatorChange", operatorChange: "operatorChange", filterChange: "filterChange" }, ngImport: i0, template: "@let template = column?.filter?.filterDef;\r\n@let context = { columnFilter: columnFilter, autoId: autoId + column.field };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    column.type === 'string' ||\r\n    column.type === 'number' ||\r\n    column.type === 'boolean' ||\r\n    column.type === 'values' ||\r\n    column.type === 'lazy-values' ||\r\n    column.type === 'date' ||\r\n    column.type === 'datetime' ||\r\n    column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <sd-button\r\n        class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n        fontSet=\"material-symbols-outlined\"\r\n        [prefixIcon]=\"inlineSymbol\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        type=\"link\">\r\n      </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n            operator.symbol\r\n          }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (template) {\r\n      <ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\r\n    } \r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (column.type === 'string') {\r\n        <sd-input\r\n          *ngIf=\"column.type === 'string'\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (column.type === 'number') {\r\n        @if (!column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"autoId + column.field\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (column.filter?.type === 'split-number') {\r\n          <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n            <sd-input-number\r\n              [autoId]=\"autoId + '-from-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].from\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-input-number>\r\n            <div class=\"mx-4\">-</div>\r\n            <sd-input-number\r\n              [autoId]=\"autoId + '-to-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].to\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-input-number>\r\n          </div>\r\n        }\r\n      } @else if (column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"[\r\n            { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"items\"\r\n          [valueField]=\"column.option.valueField\"\r\n          [displayField]=\"column.option.displayField\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"items\"\r\n          [valueField]=\"column.option.valueField\"\r\n          [displayField]=\"column.option.displayField\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n        @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"autoId + column.field\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (column.filter?.type === 'split-date') {\r\n          <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n            <sd-date\r\n              [autoId]=\"autoId + '-from-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              type=\"date\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].from\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-date>\r\n            <div class=\"mx-4\">-</div>\r\n            <sd-date\r\n              [autoId]=\"autoId + '-to-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              type=\"date\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].to\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-date>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"autoId + column.field\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'column-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatMenuModule, MatIconModule, SdButton, SdInput, SdInputNumber, SdSelect, SdDate, SdDateRange, SdBadge], template: "@let template = column?.filter?.filterDef;\r\n@let context = { columnFilter: columnFilter, autoId: autoId + column.field };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    column.type === 'string' ||\r\n    column.type === 'number' ||\r\n    column.type === 'boolean' ||\r\n    column.type === 'values' ||\r\n    column.type === 'lazy-values' ||\r\n    column.type === 'date' ||\r\n    column.type === 'datetime' ||\r\n    column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <sd-button\r\n        class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n        fontSet=\"material-symbols-outlined\"\r\n        [prefixIcon]=\"inlineSymbol\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        type=\"link\">\r\n      </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n            operator.symbol\r\n          }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (template) {\r\n      <ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\r\n    } \r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (column.type === 'string') {\r\n        <sd-input\r\n          *ngIf=\"column.type === 'string'\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (column.type === 'number') {\r\n        @if (!column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"autoId + column.field\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (column.filter?.type === 'split-number') {\r\n          <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n            <sd-input-number\r\n              [autoId]=\"autoId + '-from-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].from\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-input-number>\r\n            <div class=\"mx-4\">-</div>\r\n            <sd-input-number\r\n              [autoId]=\"autoId + '-to-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].to\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-input-number>\r\n          </div>\r\n        }\r\n      } @else if (column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"[\r\n            { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"items\"\r\n          [valueField]=\"column.option.valueField\"\r\n          [displayField]=\"column.option.displayField\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"autoId + column.field\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [items]=\"items\"\r\n          [valueField]=\"column.option.valueField\"\r\n          [displayField]=\"column.option.displayField\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n        @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"autoId + column.field\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (column.filter?.type === 'split-date') {\r\n          <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n            <sd-date\r\n              [autoId]=\"autoId + '-from-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              type=\"date\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].from\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-date>\r\n            <div class=\"mx-4\">-</div>\r\n            <sd-date\r\n              [autoId]=\"autoId + '-to-' + column.field\"\r\n              style=\"flex: 1 1 0%; min-width: 0\"\r\n              type=\"date\"\r\n              size=\"sm\"\r\n              [(model)]=\"columnFilter[column.field].to\"\r\n              (sdChange)=\"onFilterChange()\"\r\n              [disabled]=\"column.filter?.disabled\"\r\n              hideInlineError>\r\n            </sd-date>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"autoId + column.field\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _autoId: [{
@@ -263,10 +263,10 @@ class ColumnTitleComponent {
         }
         return this.titleDef()?.templateRef;
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ColumnTitleComponent, isStandalone: true, selector: "column-title", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, titleDef: { classPropertyName: "titleDef", publicName: "titleDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _column = column();\r\n@let _templateRef = templateRef();\r\n\r\n@if (_templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"_templateRef\"></ng-container>\r\n} @else {\r\n  {{ _column.title }}\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnTitleComponent, isStandalone: true, selector: "column-title", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, titleDef: { classPropertyName: "titleDef", publicName: "titleDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _column = column();\r\n@let _templateRef = templateRef();\r\n\r\n@if (_templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"_templateRef\"></ng-container>\r\n} @else {\r\n  {{ _column.title }}\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'column-title', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "@let _column = column();\r\n@let _templateRef = templateRef();\r\n\r\n@if (_templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"_templateRef\"></ng-container>\r\n} @else {\r\n  {{ _column.title }}\r\n}\r\n" }]
         }] });
@@ -286,10 +286,10 @@ class FilterValuesPipe {
         }
         return [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: FilterValuesPipe, isStandalone: true, name: "filterValues" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FilterValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: FilterValuesPipe, isStandalone: true, name: "filterValues" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterValuesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FilterValuesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterValues',
@@ -424,10 +424,10 @@ class ExternalFilterComponent {
             inlineExternal: { ...this.inlineExternal },
         });
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n  @if (!isMobileOrTablet && externalFilters.length) {\r\n    <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'clearFilter'\"\r\n          [disabled]=\"!filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n          @for (externalFilter of externalFilters; track externalFilter.field) {\r\n            <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of externalFilters; track item.field) {\r\n          @if (inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n                  \"></ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"autoId + 'onSubmit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            title=\"T\u00ECm ki\u1EBFm\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n  </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { 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: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { 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: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n  @if (!isMobileOrTablet && externalFilters.length) {\r\n    <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'clearFilter'\"\r\n          [disabled]=\"!filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n          @for (externalFilter of externalFilters; track externalFilter.field) {\r\n            <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of externalFilters; track item.field) {\r\n          @if (inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n                  \"></ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"autoId + 'onSubmit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            title=\"T\u00ECm ki\u1EBFm\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n  </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { 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: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { 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: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'external-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
@@ -519,10 +519,10 @@ class ActionFilterPipe {
         }
         return results.map(result => this.#convert(result));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ActionFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ActionFilterPipe, isStandalone: true, name: "actionFilter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ActionFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: ActionFilterPipe, isStandalone: true, name: "actionFilter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ActionFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ActionFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'actionFilter',
@@ -552,10 +552,10 @@ class SelectorActionComponent {
             action.click(this.selectedTableItems()?.map(e => e.data));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectorActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectorActionComponent, isStandalone: true, selector: "selector-action", inputs: { tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null }, selectedTableItems: { classPropertyName: "selectedTableItems", publicName: "selectedTableItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: "@let actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\r\n<sd-quick-action [isOpened]=\"isOpened()\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedTableItems()?.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">\r\n      {{ message() }}\r\n    </div>\r\n  </div>\r\n  @if (actions && actions.length > 0) {\r\n    <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n      <ng-container *ngFor=\"let action of actions\">\r\n        @if (action.variant === 'normal') {\r\n          <sd-button\r\n            class=\"ml-4\"\r\n            [tooltip]=\"action.tooltip\"\r\n            [prefixIcon]=\"action.icon\"\r\n            [color]=\"action.color\"\r\n            [type]=\"action.type || 'light'\"\r\n            [fontSet]=\"action.fontSet\"\r\n            [title]=\"action.title\"\r\n            (click)=\"onClickAction(action)\"></sd-button>\r\n        } @else if (action.variant === 'children') {\r\n          <sd-button\r\n            class=\"ml-4\"\r\n            [tooltip]=\"action.tooltip\"\r\n            [prefixIcon]=\"action.icon || 'more_vert'\"\r\n            [color]=\"action.color || 'secondary'\"\r\n            [type]=\"action.type || 'light'\"\r\n            [fontSet]=\"action.fontSet\"\r\n            [title]=\"action.title\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n          </sd-button>\r\n          <mat-menu #menu=\"matMenu\">\r\n            <span>\r\n              <button *ngFor=\"let child of action.children\" mat-menu-item (click)=\"onClickAction(child)\">\r\n                @if (child.icon) {\r\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons'\" class=\"c-icon\">{{ child.icon }} </mat-icon>\r\n                }\r\n                <span> {{ child.title }}</span>\r\n              </button>\r\n            </span>\r\n          </mat-menu>\r\n        }\r\n      </ng-container>\r\n      <sd-button class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-quick-action>\r\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.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: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["isOpened"] }, { kind: "pipe", type: ActionFilterPipe, name: "actionFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectorActionComponent, isStandalone: true, selector: "selector-action", inputs: { tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null }, selectedTableItems: { classPropertyName: "selectedTableItems", publicName: "selectedTableItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: "@let actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\r\n<sd-quick-action [isOpened]=\"isOpened()\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedTableItems()?.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">\r\n      {{ message() }}\r\n    </div>\r\n  </div>\r\n  @if (actions && actions.length > 0) {\r\n    <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n      <ng-container *ngFor=\"let action of actions\">\r\n        @if (action.variant === 'normal') {\r\n          <sd-button\r\n            class=\"ml-4\"\r\n            [tooltip]=\"action.tooltip\"\r\n            [prefixIcon]=\"action.icon\"\r\n            [color]=\"action.color\"\r\n            [type]=\"action.type || 'light'\"\r\n            [fontSet]=\"action.fontSet\"\r\n            [title]=\"action.title\"\r\n            (click)=\"onClickAction(action)\"></sd-button>\r\n        } @else if (action.variant === 'children') {\r\n          <sd-button\r\n            class=\"ml-4\"\r\n            [tooltip]=\"action.tooltip\"\r\n            [prefixIcon]=\"action.icon || 'more_vert'\"\r\n            [color]=\"action.color || 'secondary'\"\r\n            [type]=\"action.type || 'light'\"\r\n            [fontSet]=\"action.fontSet\"\r\n            [title]=\"action.title\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n          </sd-button>\r\n          <mat-menu #menu=\"matMenu\">\r\n            <span>\r\n              <button *ngFor=\"let child of action.children\" mat-menu-item (click)=\"onClickAction(child)\">\r\n                @if (child.icon) {\r\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons'\" class=\"c-icon\">{{ child.icon }} </mat-icon>\r\n                }\r\n                <span> {{ child.title }}</span>\r\n              </button>\r\n            </span>\r\n          </mat-menu>\r\n        }\r\n      </ng-container>\r\n      <sd-button class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-quick-action>\r\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.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: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["isOpened"] }, { kind: "pipe", type: ActionFilterPipe, name: "actionFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectorActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'selector-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatMenuModule, SdButton, SdQuickAction, ActionFilterPipe], template: "@let actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\r\n<sd-quick-action [isOpened]=\"isOpened()\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedTableItems()?.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">\r\n      {{ message() }}\r\n    </div>\r\n  </div>\r\n  @if (actions && actions.length > 0) {\r\n    <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n      <ng-container *ngFor=\"let action of actions\">\r\n        @if (action.variant === 'normal') {\r\n          <sd-button\r\n            class=\"ml-4\"\r\n            [tooltip]=\"action.tooltip\"\r\n            [prefixIcon]=\"action.icon\"\r\n            [color]=\"action.color\"\r\n            [type]=\"action.type || 'light'\"\r\n            [fontSet]=\"action.fontSet\"\r\n            [title]=\"action.title\"\r\n            (click)=\"onClickAction(action)\"></sd-button>\r\n        } @else if (action.variant === 'children') {\r\n          <sd-button\r\n            class=\"ml-4\"\r\n            [tooltip]=\"action.tooltip\"\r\n            [prefixIcon]=\"action.icon || 'more_vert'\"\r\n            [color]=\"action.color || 'secondary'\"\r\n            [type]=\"action.type || 'light'\"\r\n            [fontSet]=\"action.fontSet\"\r\n            [title]=\"action.title\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n          </sd-button>\r\n          <mat-menu #menu=\"matMenu\">\r\n            <span>\r\n              <button *ngFor=\"let child of action.children\" mat-menu-item (click)=\"onClickAction(child)\">\r\n                @if (child.icon) {\r\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons'\" class=\"c-icon\">{{ child.icon }} </mat-icon>\r\n                }\r\n                <span> {{ child.title }}</span>\r\n              </button>\r\n            </span>\r\n          </mat-menu>\r\n        }\r\n      </ng-container>\r\n      <sd-button class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\r\n    </div>\r\n  }\r\n</sd-quick-action>\r\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { clear: [{
@@ -740,10 +740,10 @@ class ConfigService {
             columns,
         };
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.SdStorageService }, { token: SD_TABLE_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.SdStorageService }, { token: SD_TABLE_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.SdStorageService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -803,10 +803,10 @@ class ConfigComponent {
     handleMouseUp() {
         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: i11.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: i11.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", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "size", "form", "label", "color", "disabled", "model", "hideInlineError", "required"], outputs: ["modelChange", "sdChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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.21", 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: i11.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: i11.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", "hideClose", "disableBackdropClose"], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'config', standalone: true, imports: [
                         CommonModule,
@@ -837,10 +837,10 @@ class ToStringPipe {
     transform(value) {
         return value !== null && value !== undefined ? String(value) : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ToStringPipe, isStandalone: true, name: "asString" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: ToStringPipe, isStandalone: true, name: "asString" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToStringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToStringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'asString',
@@ -885,10 +885,10 @@ class ViewComponent {
     toggle = () => {
         this.isCollapsed.update(current => !current);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ViewComponent, isStandalone: true, selector: "view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, 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 _column = column();\r\n@let _item = item();\r\n@let _autoId = autoId();\r\n\r\n@let view = _item.meta.display[_column.field];\r\n@let _truncateEnable = truncateEnable();\r\n@let _truncateWidth = truncateWidth();\r\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\r\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === '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]=\"_truncateWidth\"\r\n        [class.c-ellipsis-html]=\"_truncateEnable\"\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(' + _truncateWidth + ' * 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 (_truncateEnable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"_truncateWidth\"\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(' + _truncateWidth + ' * 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]=\"_truncateWidth\"\r\n          [class.c-ellipsis]=\"_truncateEnable\"\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 (_truncateEnable) {\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]=\"_truncateWidth\"\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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ViewComponent, isStandalone: true, selector: "view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, 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 _column = column();\r\n@let _item = item();\r\n@let _autoId = autoId();\r\n\r\n@let view = _item.meta.display[_column.field];\r\n@let _truncateEnable = truncateEnable();\r\n@let _truncateWidth = truncateWidth();\r\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\r\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === '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]=\"_truncateWidth\"\r\n        [class.c-ellipsis-html]=\"_truncateEnable\"\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(' + _truncateWidth + ' * 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 (_truncateEnable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"_truncateWidth\"\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(' + _truncateWidth + ' * 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]=\"_truncateWidth\"\r\n          [class.c-ellipsis]=\"_truncateEnable\"\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 (_truncateEnable) {\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]=\"_truncateWidth\"\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: ViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let _column = column();\r\n@let _item = item();\r\n@let _autoId = autoId();\r\n\r\n@let view = _item.meta.display[_column.field];\r\n@let _truncateEnable = truncateEnable();\r\n@let _truncateWidth = truncateWidth();\r\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\r\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === '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]=\"_truncateWidth\"\r\n        [class.c-ellipsis-html]=\"_truncateEnable\"\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(' + _truncateWidth + ' * 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 (_truncateEnable) {\r\n        <div\r\n          #contentContainer\r\n          [style.max-width]=\"_truncateWidth\"\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(' + _truncateWidth + ' * 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]=\"_truncateWidth\"\r\n          [class.c-ellipsis]=\"_truncateEnable\"\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 (_truncateEnable) {\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]=\"_truncateWidth\"\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: () => [] });
@@ -949,10 +949,10 @@ class DesktopCellComponent {
             }
         });
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DesktopCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DesktopCellComponent, isStandalone: true, selector: "desktop-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, cellDef: { classPropertyName: "cellDef", publicName: "cellDef", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _column = column();\r\n@let _item = item();\r\n@let _autoId = autoId();\r\n\r\n@let _truncateEnable = truncateEnable();\r\n@let _truncateWidth = truncateWidth();\r\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\r\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\r\n\r\n@let _templateRef = templateRef();\r\n@let context =\r\n  {\r\n    item: _item.data,\r\n    column: _column,\r\n    autoId: _autoId,\r\n  };\r\n\r\n@if (_templateRef) {\r\n  <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n  @if (_truncateEnable) {\r\n    <div\r\n      #contentContainer\r\n      [style.max-width]=\"_truncateWidth\"\r\n      [class.c-ellipsis-html]=\"isCollapsed()\"\r\n      [sdTooltip]=\"isExpandByTooltip ? htmlTooltip : ''\">\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n    </div>\r\n\r\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"tooltip\" -->\r\n    <ng-template #htmlTooltip>\r\n      <div\r\n        [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\r\n        style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n        <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n      </div>\r\n    </ng-template>\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\">\r\n        {{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}\r\n      </button>\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n  }\r\n} @else {\r\n  <view [column]=\"column()\" [item]=\"item()\" [autoId]=\"context.autoId\" />\r\n}\r\n", styles: [".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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "component", type: ViewComponent, selector: "view", inputs: ["autoId", "column", "item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DesktopCellComponent, isStandalone: true, selector: "desktop-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, cellDef: { classPropertyName: "cellDef", publicName: "cellDef", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _column = column();\r\n@let _item = item();\r\n@let _autoId = autoId();\r\n\r\n@let _truncateEnable = truncateEnable();\r\n@let _truncateWidth = truncateWidth();\r\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\r\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\r\n\r\n@let _templateRef = templateRef();\r\n@let context =\r\n  {\r\n    item: _item.data,\r\n    column: _column,\r\n    autoId: _autoId,\r\n  };\r\n\r\n@if (_templateRef) {\r\n  <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n  @if (_truncateEnable) {\r\n    <div\r\n      #contentContainer\r\n      [style.max-width]=\"_truncateWidth\"\r\n      [class.c-ellipsis-html]=\"isCollapsed()\"\r\n      [sdTooltip]=\"isExpandByTooltip ? htmlTooltip : ''\">\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n    </div>\r\n\r\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"tooltip\" -->\r\n    <ng-template #htmlTooltip>\r\n      <div\r\n        [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\r\n        style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n        <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n      </div>\r\n    </ng-template>\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\">\r\n        {{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}\r\n      </button>\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n  }\r\n} @else {\r\n  <view [column]=\"column()\" [item]=\"item()\" [autoId]=\"context.autoId\" />\r\n}\r\n", styles: [".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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "component", type: ViewComponent, selector: "view", inputs: ["autoId", "column", "item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DesktopCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desktop-cell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdTooltipDirective, ViewComponent], template: "@let _column = column();\r\n@let _item = item();\r\n@let _autoId = autoId();\r\n\r\n@let _truncateEnable = truncateEnable();\r\n@let _truncateWidth = truncateWidth();\r\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\r\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\r\n\r\n@let _templateRef = templateRef();\r\n@let context =\r\n  {\r\n    item: _item.data,\r\n    column: _column,\r\n    autoId: _autoId,\r\n  };\r\n\r\n@if (_templateRef) {\r\n  <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n  @if (_truncateEnable) {\r\n    <div\r\n      #contentContainer\r\n      [style.max-width]=\"_truncateWidth\"\r\n      [class.c-ellipsis-html]=\"isCollapsed()\"\r\n      [sdTooltip]=\"isExpandByTooltip ? htmlTooltip : ''\">\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n    </div>\r\n\r\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"tooltip\" -->\r\n    <ng-template #htmlTooltip>\r\n      <div\r\n        [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\r\n        style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n        <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n      </div>\r\n    </ng-template>\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\">\r\n        {{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}\r\n      </button>\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\r\n  }\r\n} @else {\r\n  <view [column]=\"column()\" [item]=\"item()\" [autoId]=\"context.autoId\" />\r\n}\r\n", styles: [".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: () => [] });
@@ -968,10 +968,10 @@ class SdCommandDisablePipe {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCommandDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdCommandDisablePipe, isStandalone: true, name: "commandDisable" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCommandDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdCommandDisablePipe, isStandalone: true, name: "commandDisable" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCommandDisablePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCommandDisablePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'commandDisable',
@@ -1111,10 +1111,10 @@ class SdCommandFilterPipe {
         const title = this.#title(item, command);
         return `${icon || 'noicon'}-${StringUtilities.changeAliasLowerCase(title) || 'notitle'}`;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCommandFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdCommandFilterPipe, isStandalone: true, name: "commandFilter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCommandFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdCommandFilterPipe, isStandalone: true, name: "commandFilter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCommandFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCommandFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'commandFilter',
@@ -1131,10 +1131,10 @@ class SdCommandTitlePipe {
         }
         return command.title(item.data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCommandTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdCommandTitlePipe, isStandalone: true, name: "commandTitle" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCommandTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdCommandTitlePipe, isStandalone: true, name: "commandTitle" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCommandTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCommandTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'commandTitle',
@@ -1159,10 +1159,10 @@ class SdDesktopCommand {
     set _commands(commands) {
         this.commands = commands || [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCommand, isStandalone: true, selector: "sd-desktop-command", inputs: { _autoId: ["autoId", "_autoId"], _item: ["item", "_item"], itemIndex: "itemIndex", _commands: ["commands", "_commands"] }, ngImport: i0, template: "@let filteredCommands = item | commandFilter: commands | async;\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoId]=\"autoId + command.key + '-' + (itemKey || itemIndex)\"\n        (click)=\"command.click(item.data)\"\n        [matTooltip]=\"command | commandTitle: item\"\n        aria-hidden=\"true\"\n        [disabled]=\"item | commandDisable: command\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">{{ command.icon }}</mat-icon>\n      </button>\n    } @else {\n      <button [attr.data-autoId]=\"autoId + command.key + '-' + (itemKey || itemIndex)\" [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\n        @if (command.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ command.icon }} </mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            <button\n              [attr.data-autoId]=\"autoId + childCommand.key + '-' + (itemKey || itemIndex)\"\n              mat-menu-item\n              (click)=\"childCommand.click(item.data)\"\n              [disabled]=\"item | commandDisable: childCommand\">\n              @if (!childCommand.htmlTemplate) {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">{{ childCommand.icon }} </mat-icon>\n                  <span> {{ childCommand.title }}</span>\n                </div>\n              } @else {\n                <div [innerHTML]=\"childCommand.htmlTemplate(item.data)\"></div>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SdCommandDisablePipe, name: "commandDisable" }, { kind: "pipe", type: SdCommandFilterPipe, name: "commandFilter" }, { kind: "pipe", type: SdCommandTitlePipe, name: "commandTitle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDesktopCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdDesktopCommand, isStandalone: true, selector: "sd-desktop-command", inputs: { _autoId: ["autoId", "_autoId"], _item: ["item", "_item"], itemIndex: "itemIndex", _commands: ["commands", "_commands"] }, ngImport: i0, template: "@let filteredCommands = item | commandFilter: commands | async;\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoId]=\"autoId + command.key + '-' + (itemKey || itemIndex)\"\n        (click)=\"command.click(item.data)\"\n        [matTooltip]=\"command | commandTitle: item\"\n        aria-hidden=\"true\"\n        [disabled]=\"item | commandDisable: command\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">{{ command.icon }}</mat-icon>\n      </button>\n    } @else {\n      <button [attr.data-autoId]=\"autoId + command.key + '-' + (itemKey || itemIndex)\" [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\n        @if (command.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ command.icon }} </mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            <button\n              [attr.data-autoId]=\"autoId + childCommand.key + '-' + (itemKey || itemIndex)\"\n              mat-menu-item\n              (click)=\"childCommand.click(item.data)\"\n              [disabled]=\"item | commandDisable: childCommand\">\n              @if (!childCommand.htmlTemplate) {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">{{ childCommand.icon }} </mat-icon>\n                  <span> {{ childCommand.title }}</span>\n                </div>\n              } @else {\n                <div [innerHTML]=\"childCommand.htmlTemplate(item.data)\"></div>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SdCommandDisablePipe, name: "commandDisable" }, { kind: "pipe", type: SdCommandFilterPipe, name: "commandFilter" }, { kind: "pipe", type: SdCommandTitlePipe, name: "commandTitle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCommand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDesktopCommand, decorators: [{
             type: Component,
             args: [{ selector: 'sd-desktop-command', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
@@ -1469,10 +1469,10 @@ 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,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA6CAYAAAAHkoFsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABCiSURBVHgB7VtLj2VVFV5rn0tXJ902ktjppgEJ0iRAGgUsiQk/wJGPhBgxxJg4ZqYDRjqXmSMTTRyYGGYOYODE+AiI4RFaIDSgNII8BIzBQDdQdc/eru/71j637IKuOt0VGegJ1H2cffbda+31+Na3dpv9D18+Z/BzL/ztgeJezVrlw+6ju7XW8J21Ev/74GNreF+ae6utlFpiiHsZMRLj4k8tHvcLn6uYI2aL9xXjqtX4HA+55q14P8Rv4YePHL7sB7ZHV5k1urVSaxtClKFhyRYSNPOQqcQfzOUhSugHklSv8eq1hjSx8rEOLcfEg6XGBFAN1sA5+B7ThK4KNyVkj9fCNeZvzFzvngoP4WgrDYvighqFxTZCiFbGWHwbsVESqPK1lgKVSIgh9FZiOBRQugI0c0tB43PlZ/d8vmqtsyx1p2sxZ3CV9p37CxXQnOObkBsbWmH1xt2yOjbIi+3HomND427RW6v42nkDCqBjwNLhH6HPQv+pUFAMbXARTApr2tOdnyW8aefhudxFp7O6XDoExcqrVDMaNELDraM83cpQESwaNtPo5iWUJl+GKcQOx/8GN+dGw/fxeaB6EGagoT28ZmkSPie/azTxlr6o19ji2GvohP6JjY3Fj3ABbiq3daDS4vka30FYrzLnUBGMJuag2dM9sPvQUxgNrKqEWe2p2c8Sfuw+Df+GAuCvGayoBAaxSj+t8dpk2V6pkDpIga7flE+UDJaDy6ocOoxnOabRZaDHSkVWxYePR/jC5TnN03KxtgpEIQOc06kU7DwUYHSPVIBTKORCOLAr8EthfL5qp+M/KcD73IXPtmofn89nqsrYBi/gZ4bkBveGsTZleVf+dqXAijAHJw/rQS432QNiABwizCJdpUIBYfs1LWTU9wwEggJ7eM3SZO15GoENPtlo/hBZPmraTZ/SYCtENyMDuLcRO+9KX9BgSxwAK2lKldzlWrs7wVUKf0dZ4+NLdZYBzpiQw3rh1Q05nvmvNQXDZkJ0RjeA7RcMcw0IU5aVM9lVWAQxY9FfGk7MVQb4PIBCGldBuPHy6t//+U0bI5kMgfowehzasC/ySHxVLsFr7ELce9vG315z2WVv753wkJWmzhjN5Cw7Z9av2lG8tUHhypnFYgeZ+Og4sf3IgM3p7EiN0AJArf6LXF7g8sQJSvNIngOgBTa/1i8KW0SCGDHY2rhc1sEXdbm5iYfquLT6yYWdjJXsnfAnbrjm9o+6d+rUi1+Kff0uBG7KxonYGoVrehmRtgaaiQXSa2NxVQCNtUBtiWAz3zvDQ5q9AR0ZjQQ6M6ZFwYJwrbaEvTTrGGIX11yzP+9MLr81bbFkQPBHmuPeKlUQAQ0DANvkAo0WAMkR81AWuaocai1HxLeR6xn1VAtI1tAJiyT4T1yqBj74wHeMD3uWOkbspqv4YLbi3C1jBHe+EMgA9FIjLA9dGUFZP9MEdr3AdbdiBSbaQtDU06B3HCDADaeIaYZMw2s7r5k7/+ifnr9jKHas5X5RpQXRB3Vc/K0joSj8C86r71W2ItIUjBn9OBbBHI6QlTYsw6XDwk0htECq2+99sfhj24y3i/Kt2LHDwv0AzBjIsFmqfIJRsbE8gOw95aJm0HjgAMKAZYxZxI3Y+l0JH0PviJ+9DUiiCWHTbyu3I0EoLJkbUSs3DWuB7rU+eaSxXqnafcQ9onMnOHGG7FGI3n9x/Nor7tuyjkdffOn178fENwApsRqkAvhf7HNTUQhRWSF2nTR9QA5GRoEXML/A9PbvJHtGFxN0JH7OnGsTblfJyZRGM1bezRInc7PL+1jPZzmjWrynRiE4Exw+eHC4/9yFbLy//BWiP/ACY0cFlHYWC6I7BIUrEWRVOazwD+MqQp1V6HOXMJiDaiPoSojKEFJyAgkkNMfXSSkt8f2U+5172zokxULHRgJD5EWCnmZnjx49embbQvYvzoypKMQOhf3qElKECHF+romvtAzGhMKCqKr2xRo2fJdm/4Wbr7/zw24+/uRzP4+XdbmoiJUqLTBvmTSHH2PC0VMZ5wV7K7muFUQFkj10nvUwwEFiU+mL6E7YI0KjCGOTPfAqXsW6myjNoK4IlaztIuLtkOpo5hmdhc6xtCw89F4hjfVqU2nGIM7B2nU5g1xli5L+84qAe6BWoZia2YLQP+gvHxD8iYURiSsTuog/mBPrBlQD/Mx44GVj3LjYVMfbg2I7zTEBCbF5WZWySFFczfR58nU9W7zHivjuqdOnj5z7S3X0g5ZulySPu3d+IPg/YyxiLcD3I0KiqkE+z7K4V4O7Y3zOu/MBx34dOPVVMUgByYahMhu3JcGLq7r7chMMk2lzh13oQ0rBnhC+qQD4cIWP4xKIBgLTymhPoL4Y44HwQ1jWC8Iywr5GkNfEmvK3m4kls7WLNPvbbr7+Z7bDdfLpP38VLpkpZqBCalJ6hPp671vK4QN2YNs8IcKRpMSg3crYJkUxpIDjCBRfwgfAi4ESQ5ir4PVKYmH+Qk2mdxd5fg8Qnq8Y1/yiqTpzxQxXJphcoJXNzTNHz52lKnoTzeIZlcONmJjIMZFgY5wrSYsrtYrybtAKMwvl2gXCu3jhnWGu1+ODan4WsBTUJrzgSqOx2E3fjrtDqoNSFOBqh68r/6+ir8UbgNCFKZDhxe+OA+MBUmOmQd/YGdsv/vDY0/fHsKtcPHRVR0bbkGlbqE2lEv28JWifIKx4nJqkvq/YXWYmRm68xsAxarrim+3y+O7k1oXEHh9so6XiVAor6QFMZoLn91n1YUlJ65Y2+RYCBuolkoI7Ch+ruzqevKqJYBO8laMKhUfZ2Yi5CaWIevN+5fuqGOwENy4YwNRHNm6UBVgnbrBLiYPOMaBkaPkuKbLUYFM9LCuoYjcR/xDaWlNJS+RLnkThx5CkdhReCEwkBcGMfoZKSG6CqdSFL1pidu6tLN6yAccFqvuWnkiUqCissqwogFfb/MS5C4l21uUmEzcyQ6KHxI2QBof+AzIOnJx231haBQzO4sZVBWA/2rLsnOcj2pcHYqGHsgYXiaQqBZ5Fc2aGZpFlX7dONIq3ZLGuDcoGjGeN2RIMc1uFUJCbaSXDsE141SQZqQkjgOqiBHYVS5a1vXBAIw9QiuU6eEfFkGjvmG7fTrLb4vbbTtxju7weeeLUNxKlJd6nZFRR5y9SMUo6GpP5vxbhAlrD9skVQFwZrhVtv2pHcj/UkIhBlQrNROwwR0hgkmAqh31jVzs/42IxTm7WBKwoLxk6RSBx71tr+aaWnhAvZWSf79h24e1yuEkwB9huo9sRtNAmGYCtyCssLW2UGRDzTqoRDbQrjntWqmuryk8VXa8AFR3RVioKGFwAU4WnwpLe7qnvim1z13aI3UimjTZVjknJ4b1gNudadYY8sUDOOzBFRGj4sHR67jWvaYFNqdNhAsQHILrRlMeFwtMpO0RNX9YDMgJY5fpTz7x45003XnPfgw8++4lLP7X2nZD+UFOl1oVF7TJ2qtyI3RIoSeqsElV9gQNk5TSORJn7bPj86dMvH14sIqYPi3h+E+LS+t56ffnE+voVZ3eRDVfXw48/8yYZSBL2wleyUJKNLTGCgqQoCAhDfKNqT2mU6QuLLcO/FDD9oEpeYQcJRrWNptzZdF/PMQiqN9DH1twJzp8ltubSWhq6QPLbAu3ce+WVh5+ftfPMbuzHtSxNyTB7hmntBCkNyyRoQ0sqjDFA5JYWKNR2qYIg7cV6m1suLYvKcjixj2hsdsfUKMweHwBRtr+b+ELSf+L8yTq2mmxA6GBjY+Smz2xXRe+AdJKL3sruaptaTQxrGROMWASfGQOyHFZDw89sbtj3Pnvjteub7218zW34yRZKLPF9L4lZJbpgbOvtsdLHk8z0zjoJGtYV1+H9iIwSr2Dc2prS4IXw9lidNlboTTuWJ4kUryxrfiYAQmYOK9r30MK96zdf9xtMduut178WLz998tQL6zHvLdluyCRBMxtJJzeb4HTr7LC4MyFLKaTyOEgDgbv2ww/2LV/aXw9wynf55x1O/o93Ns7OF55mbIC7QbwgGKmfLOrIhQOT3LLOffEgQuJCpiOva4vxsW0aNXsg/tyqeCkd51EMlmyijUnSjr1uVyJI2iz5gsq1lGCuz7533aevfut84syv6trq0JAnm5tdSgKQ1qaSdlXVCaeL7Y3Fvbe8ZHuqMzsk8kNjV6xwm5hhmhGrutZPb6ha3DJe5wPCzPftAuHZjItaVTBr7DWJtMnslqQqF0SezbrAxoajD3qWTNDdMfjbfd5nn3352Pvjxl1qy7RsSfI8nwm7svE5kaJlRZnBFB4KP363yapiKDqcUdVVO7OTPLNS3UOPPHkmC5XVAcJeAdLsVAxNZS8/l57ueuqr2a1+Jeb4ZXwO7s6/EvcP9BppSmtEjyhcfUqDlu1x08A6LvbfddNnjrxhF3DNPIqm4tEY9FzkqXIubrvQ15SYkn3uZaqAUPbVoKirIvvc7dmSYDoUkNEeKp8zixoPPqA8ZkIDjixZWbqfnYdVLlj4rNOKyljV6TRjVsS8WbNXHynRxuz+qANWehZQ4ZOEY2+KmKCwdGwKdROaEx+g0po/Amhbyjjxgv8N4bPaShJWS9bBLBZUJfnmmpmQqYcmnvW4MoJqfMSPPHZpyR2YpfX0EO4EOCqhPeHxxA6nhYUE95x67q/o2SEOTa6ByQa1xVmBiOgY2QxCxh2GxTsXcAhRHRpXAKviywVlmYoyBzMgdfJWPt97dWQgkzBJgpNrhdmjTzcqbppMW2rPAichtXgVnVFzuwXfLRWNx3ym6fgeTURssDNtVHFMESvq8o3ZB5JUybXs8WUPPg8NaXfYRBy2NC4S7ZlITu9HCnqzg4C4HyoW38fU2KZGaaa1KWXKwwRmeppzz9jAA495zndilvMV+LrqwCRMbT62Fz8HUmmQGRPDVnHuHKOgZRJKNE+b/DurPzUfkqdSuuQW9XYW6STP4BIvr8Wsr/qAI72eZ12kGZrAwDjCswTOiMiQRO2RjZJVWslCTAGlvjlPeB2uLy3VbHmKyjM6p2JIPIhl6s0KT2ImfXdCcbKAPHuraC7UUFdpHcPK/Z87ce2PbY+vuYcQk05KvxdVCdOrna7KbncR9d3HswK0pLLp8+w2KrwL7QdfF9oaOU6dX0v0XPPgzp5fcwNep5BobVXAg7Ekd6tMMVlMpmVWaKvEnGnCLOtYpbgkUFOBxMia01YNgb2+Zk36u4dPtu0zuFAb9zfRH4ELdZPkg6KvkCpeV0jQtvwzE5XrBAFj8tdVvL29Ek70ik+nllipM21ZnvLhOR4SfUoUPix/dOL48b+cT56LP4omn83jVMQB6fsANiXJTXUUrBMevSTN/n3juTpGdbIwaHjCBTxpz/j6yrh/DIQCMbPpdI6zR6HUVdnBUHBzxeODOy19VqrzZGC72NP3mQXykFDJlgboE36u6vErU/QssOXcDxWoNEgyZCJI4rlsgGbj0voZoTyZrfP7OceQVSZ1ttzcawJzatgkLN2iF5PatfuyXxmEmnRjVny975b4RznReBZDViLBrJOiSVpSK/zHFkxbaowk2LEt1T8tjuTRJbvw6Hlm77a1D6OFKwAKbabdmdJ9dl5cDKzUlv8mR2J0lKas0HRnalqo6dfzRcg75leyPxVMiZrZuWHATbbHl9ELtv9fH339G/7DwlISq4BTAAAAAElFTkSuQmCC)}.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", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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.21", 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", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPopupExport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPopupExport, decorators: [{
             type: Component,
             args: [{ selector: 'sd-popup-export', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatTableModule, MatIconModule, MatChipsModule, SdButton, SdInput, SdModal], 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SdLoadingService }, { type: i1$1.SdExcelService }, { type: i1$1.SdNotifyService }, { type: i1$1.SdConfirmService }], propDecorators: { modal: [{
@@ -1493,10 +1493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class SdTableColumnFilterDefDirective {
     sdTableColumnFilterDef = input();
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableColumnFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: SdTableColumnFilterDefDirective, isStandalone: true, selector: "[sdTableColumnFilterDef]", inputs: { sdTableColumnFilterDef: { classPropertyName: "sdTableColumnFilterDef", publicName: "sdTableColumnFilterDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableColumnFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdTableColumnFilterDefDirective, isStandalone: true, selector: "[sdTableColumnFilterDef]", inputs: { sdTableColumnFilterDef: { classPropertyName: "sdTableColumnFilterDef", publicName: "sdTableColumnFilterDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableColumnFilterDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableColumnFilterDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableColumnFilterDef]',
@@ -1599,10 +1599,10 @@ class StickyShadowDirective {
                 this.#setShadow(container, colClass, 'sticky-shadow-left', true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StickyShadowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: StickyShadowDirective, isStandalone: true, selector: "[stickyShadow]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StickyShadowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: StickyShadowDirective, isStandalone: true, selector: "[stickyShadow]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StickyShadowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StickyShadowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stickyShadow]',
@@ -1661,10 +1661,10 @@ class SdGroupPipe {
         }
         return results;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdGroupPipe, isStandalone: true, name: "sdGroup" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdGroupPipe, isStandalone: true, name: "sdGroup" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdGroupPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sdGroup',
@@ -1723,10 +1723,10 @@ class SdSelectionDisabledPipe {
         }
         return true;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionDisabledPipe, isStandalone: true, name: "selectionDisabled" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionDisabledPipe, isStandalone: true, name: "selectionDisabled" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionDisabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionDisabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectionDisabled',
@@ -1759,10 +1759,10 @@ class SdSelectionVisibleSelectAllPipe {
         }
         return false;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, isStandalone: true, name: "selectionVisibleSelectAll" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, isStandalone: true, name: "selectionVisibleSelectAll" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectionVisibleSelectAll',
@@ -1838,10 +1838,10 @@ class SdSelectionVisiblePipe {
         // nếu các action đều thuộc groupedActions và rowData ko phải là dòng group
         return rowData.meta.selector.actions.some(action => !groupedActions.includes(action));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionVisiblePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionVisiblePipe, isStandalone: true, name: "selectionVisible" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisiblePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisiblePipe, isStandalone: true, name: "selectionVisible" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSelectionVisiblePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisiblePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectionVisible',
@@ -2096,10 +2096,10 @@ class TableExportService {
             return [];
         return option.export?.columns?.filter(e => !e.export?.disabled) || [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableExportService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableExportService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableExportService, decorators: [{
             type: Injectable
         }] });
@@ -2304,10 +2304,10 @@ class TableFormatService {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableFormatService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableFormatService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableFormatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableFormatService, decorators: [{
             type: Injectable
         }] });
@@ -2522,10 +2522,10 @@ class SdTableFilterService {
             columnOperator,
         };
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableFilterService, deps: [{ token: i1$1.SdStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableFilterService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterService, deps: [{ token: i1$1.SdStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTableFilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.SdStorageService }] });
@@ -2544,10 +2544,10 @@ class MatPaginatorIntlCro extends MatPaginatorIntl {
         const to = from + (length - page * pageSize > pageSize ? pageSize : length - page * pageSize) - 1;
         return `${from}-${to}/${NumberUtilities.toISO(length)}`;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatPaginatorIntlCro, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatPaginatorIntlCro });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatPaginatorIntlCro, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatPaginatorIntlCro });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatPaginatorIntlCro, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatPaginatorIntlCro, decorators: [{
             type: Injectable
         }] });
 class SdTable extends SdBaseSecureComponent {
@@ -3504,8 +3504,8 @@ class SdTable extends SdBaseSecureComponent {
         }
         return req;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTable, isStandalone: true, selector: "sd-table", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdTable, isStandalone: true, selector: "sd-table", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             DatePipe,
             DecimalPipe,
             CdkColumnDef,
@@ -3525,7 +3525,7 @@ class SdTable extends SdBaseSecureComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTable, decorators: [{
             type: Component,
             args: [{ selector: 'sd-table', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('detailExpand', [