@sdcorejs/angular 19.0.1 → 20.0.0-rc.2

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

@@ -17,13 +17,13 @@ import * as i11 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule, DatePipe, DecimalPipe } from '@angular/common';
-import * as i2$2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormGroup, FormsModule } from '@angular/forms';
 import * as i9 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i10 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i5 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -48,39 +48,39 @@ import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SdModal } from '@sdcorejs/angular/components/modal';
 import { SdConfirmService } from '@sdcorejs/angular/services/confirm';
-import * as i4 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/tooltip';
+import * as i1$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { StringUtilities, DateUtilities as DateUtilities$1 } from '@sdcorejs/angular/utilities';
-import * as i5$1 from '@angular/material/chips';
+import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
 class SdTableCellDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    sdTableCellDef = input.required();
+    sdTableCellDef = input.required(...(ngDevMode ? [{ debugName: "sdTableCellDef" }] : []));
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdTableCellDefDirective, isStandalone: true, selector: "[sdTableCellDef]", inputs: { sdTableCellDef: { classPropertyName: "sdTableCellDef", publicName: "sdTableCellDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: SdTableCellDefDirective, isStandalone: true, selector: "[sdTableCellDef]", inputs: { sdTableCellDef: { classPropertyName: "sdTableCellDef", publicName: "sdTableCellDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableCellDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableCellDef]',
                 }]
-        }] });
+        }], propDecorators: { sdTableCellDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdTableCellDef", required: true }] }] } });
 
 class SdTableExpandDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableExpandDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SdTableExpandDefDirective, isStandalone: true, selector: "[sdTableExpandDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableExpandDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: SdTableExpandDefDirective, isStandalone: true, selector: "[sdTableExpandDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableExpandDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableExpandDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableExpandDef]',
@@ -91,34 +91,34 @@ class SdTableFilterDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    sdTableFilterDef = input.required();
-    defaultShowing = input(false, { transform: booleanAttribute });
+    sdTableFilterDef = input.required(...(ngDevMode ? [{ debugName: "sdTableFilterDef" }] : []));
+    defaultShowing = input(false, ...(ngDevMode ? [{ debugName: "defaultShowing", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     templateRef = inject(TemplateRef, { optional: true });
-    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: true, transformFunction: null }, defaultShowing: { classPropertyName: "defaultShowing", publicName: "defaultShowing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: SdTableFilterDefDirective, isStandalone: true, selector: "[sdTableFilterDef]", inputs: { sdTableFilterDef: { classPropertyName: "sdTableFilterDef", publicName: "sdTableFilterDef", isSignal: true, isRequired: true, transformFunction: null }, defaultShowing: { classPropertyName: "defaultShowing", publicName: "defaultShowing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableFilterDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableFilterDef]',
                 }]
-        }] });
+        }], propDecorators: { sdTableFilterDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdTableFilterDef", required: true }] }], defaultShowing: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultShowing", required: false }] }] } });
 
 class SdMaterialFooterDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    sdTableFooterDef = input.required();
+    sdTableFooterDef = input.required(...(ngDevMode ? [{ debugName: "sdTableFooterDef" }] : []));
     templateRef = inject(TemplateRef);
-    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: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdMaterialFooterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: SdMaterialFooterDefDirective, isStandalone: true, selector: "[sdTableFooterDef]", inputs: { sdTableFooterDef: { classPropertyName: "sdTableFooterDef", publicName: "sdTableFooterDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMaterialFooterDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdMaterialFooterDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableFooterDef]',
                 }]
-        }] });
+        }], propDecorators: { sdTableFooterDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdTableFooterDef", required: true }] }] } });
 
 /**
  * Directive cung cấp custom template render group header row trong sd-table.
@@ -140,10 +140,10 @@ class SdTableGroupDefDirective {
         return true;
     }
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableGroupDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SdTableGroupDefDirective, isStandalone: true, selector: "[sdTableGroupDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableGroupDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: SdTableGroupDefDirective, isStandalone: true, selector: "[sdTableGroupDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableGroupDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableGroupDefDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[sdTableGroupDef]' }]
         }] });
@@ -152,53 +152,53 @@ class SdTableTitleDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    sdTableTitleDef = input.required();
+    sdTableTitleDef = input.required(...(ngDevMode ? [{ debugName: "sdTableTitleDef" }] : []));
     templateRef = inject(TemplateRef);
-    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: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableTitleDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: SdTableTitleDefDirective, isStandalone: true, selector: "[sdTableTitleDef]", inputs: { sdTableTitleDef: { classPropertyName: "sdTableTitleDef", publicName: "sdTableTitleDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableTitleDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableTitleDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableTitleDef]',
                 }]
-        }] });
+        }], propDecorators: { sdTableTitleDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdTableTitleDef", required: true }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ColumnTitleComponent {
-    column = input.required();
-    titleDef = input(undefined);
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    titleDef = input(undefined, ...(ngDevMode ? [{ debugName: "titleDef" }] : []));
     templateRef = computed(() => {
         const title = this.column()?.title;
         if (typeof title === 'object') {
             return title?.templateRef || this.titleDef()?.templateRef;
         }
         return this.titleDef()?.templateRef;
-    });
-    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();\n@let _templateRef = templateRef();\n\n@if (_templateRef) {\n  <ng-container *ngTemplateOutlet=\"_templateRef\"></ng-container>\n} @else {\n  {{ _column.title }}\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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();\n@let _templateRef = templateRef();\n\n@if (_templateRef) {\n  <ng-container *ngTemplateOutlet=\"_templateRef\"></ng-container>\n} @else {\n  {{ _column.title }}\n}\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.21", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'column-title', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "@let _column = column();\n@let _templateRef = templateRef();\n\n@if (_templateRef) {\n  <ng-container *ngTemplateOutlet=\"_templateRef\"></ng-container>\n} @else {\n  {{ _column.title }}\n}\n" }]
-        }] });
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], titleDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleDef", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ColumnFilterComponent {
     // ==========================================
     // 1. SIGNAL INPUTS
     // ==========================================
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    column = input.required();
-    columnFilter = input({});
-    cacheValues = input(undefined);
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    columnFilter = input({}, ...(ngDevMode ? [{ debugName: "columnFilter" }] : []));
+    cacheValues = input(undefined, ...(ngDevMode ? [{ debugName: "cacheValues" }] : []));
     // Parent vẫn truyền `value` vào — giữ input để không phá hợp đồng (template không dùng trực tiếp).
-    value = input();
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     // 2-way bind từ parent: parent đọc/ghi operator hiện tại của column.
-    operator = model(undefined);
+    operator = model(undefined, ...(ngDevMode ? [{ debugName: "operator" }] : []));
     // Khi true (mobile context): gán column.title vào [label] của các control con
     // để parent không phải render <label> riêng. Default false (desktop inline).
-    isMobile = input(false, { transform: booleanAttribute });
+    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     // ==========================================
     // 2. SIGNAL OUTPUTS
     // ==========================================
@@ -212,9 +212,9 @@ class ColumnFilterComponent {
         const base = this.autoIdInput();
         const field = this.column()?.field ?? '';
         return base ? `${base}-inline-${field}` : '';
-    });
+    }, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
     // Cho phép parent custom filter qua templateRef (column.filter.filterDef).
-    templateRef = computed(() => this.column()?.filter?.filterDef);
+    templateRef = computed(() => this.column()?.filter?.filterDef, ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
     // Label cho control con khi isMobile=true. column.title có thể là string hoặc { title, templateRef }.
     // Trả undefined khi không phải mobile → control không hiển thị label (giữ behavior desktop cũ).
     label = computed(() => {
@@ -225,7 +225,7 @@ class ColumnFilterComponent {
         if (!title)
             return col?.field;
         return typeof title === 'string' ? title : title.title || col?.field;
-    });
+    }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     // Danh sách operator hiển thị dựa trên column config
     operators = computed(() => {
         const col = this.column();
@@ -233,11 +233,11 @@ class ColumnFilterComponent {
             return OPERATORS.filter(e => col.filter?.operator?.list?.includes?.(e.value));
         }
         return [];
-    });
+    }, ...(ngDevMode ? [{ debugName: "operators" }] : []));
     // Chỉ các Operator value cho phép — truyền vào <sd-operator [operators]>.
-    operatorValues = computed(() => this.operators().map(o => o.value));
+    operatorValues = computed(() => this.operators().map(o => o.value), ...(ngDevMode ? [{ debugName: "operatorValues" }] : []));
     // Margin wrapper operator: số + đang chọn operator → thêm mb-4 (canh baseline với sd-input-number).
-    operatorWrapperClass = computed(() => (this.column()?.type === 'number' && this.operator() ? 'mb-4 mr-2' : 'mr-2'));
+    operatorWrapperClass = computed(() => (this.column()?.type === 'number' && this.operator() ? 'mb-4 mr-2' : 'mr-2'), ...(ngDevMode ? [{ debugName: "operatorWrapperClass" }] : []));
     // Items cho sd-select khi column type = values / lazy-values
     items = computed(() => {
         const col = this.column();
@@ -254,7 +254,7 @@ class ColumnFilterComponent {
             return col.option.items;
         }
         return [];
-    });
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
     constructor() {
         // Khởi tạo default { from: null, to: null } cho split-date / split-number / daterange.
         // Chạy trước lần render đầu nên template thấy giá trị đã init — không cần markForCheck.
@@ -279,13 +279,13 @@ class ColumnFilterComponent {
     onFilterChange = () => this.filterChange.emit();
     // Blur input: commit giá trị KHÔNG trigger reload.
     onFilterCommit = () => this.filterCommit.emit();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operator: "operatorChange", filterChange: "filterChange", filterCommit: "filterCommit" }, ngImport: i0, template: "@let _column = column();\n@let _columnFilter = columnFilter();\n@let _autoId = autoId();\n@let _templateRef = templateRef();\n@let _operators = operators();\n@let _items = items();\n@let _label = label();\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\n\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\n  @if (\n    _column.type === 'string' ||\n    _column.type === 'number' ||\n    _column.type === 'boolean' ||\n    _column.type === 'values' ||\n    _column.type === 'lazy-values' ||\n    _column.type === 'date' ||\n    _column.type === 'datetime' ||\n    _column.type === 'time'\n  ) {\n    <!-- Operator filter -->\n    @if (_operators.length) {\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\n      </div>\n    }\n\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\n    @if (_templateRef) {\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\n    }\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\n    @else {\n      @if (_column.type === 'string') {\n        <sd-input\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          size=\"sm\"\n          type=\"text\"\n          [label]=\"_label\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (keyupEnter)=\"onFilterChange()\"\n          (sdBlur)=\"onFilterCommit()\"\n          (cleared)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          hideInlineError>\n        </sd-input>\n      } @else if (_column.type === 'number') {\n        @if (!_column.filter?.type) {\n          <sd-input-number\n            [autoId]=\"_autoId\"\n            style=\"flex: 1 1 0%; min-width: 0\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (keyupEnter)=\"onFilterChange()\"\n            (sdBlur)=\"onFilterCommit()\"\n            (cleared)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-input-number>\n        } @else if (_column.filter?.type === 'split-number') {\n          <ng-container\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\n          </ng-container>\n        }\n      } @else if (_column.type === 'boolean') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"[\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\n          ]\"\n          valueField=\"value\"\n          displayField=\"display\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          hideInlineError>\n          <ng-template sdItemDef let-item=\"item\">\n            @if (item.value === '1') {\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\n            } @else {\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\n            }\n          </ng-template>\n        </sd-select>\n      } @else if (_column.type === 'values') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"_items\"\n          [valueField]=\"_column.option.valueField\"\n          [displayField]=\"_column.option.displayField\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\n          hideInlineError>\n        </sd-select>\n      } @else if (_column.type === 'lazy-values') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"_items\"\n          [valueField]=\"_column.option.valueField\"\n          [displayField]=\"_column.option.displayField\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\n          hideInlineError>\n        </sd-select>\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\n          <sd-date-range\n            style=\"flex: 1 1 0%; min-width: 0\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (sdChange)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-date-range>\n        } @else if (_column.filter?.type === 'date') {\n          <sd-date\n            [autoId]=\"_autoId\"\n            style=\"flex: 1 1 0%; min-width: 0\"\n            type=\"date\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (sdChange)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-date>\n        } @else if (_column.filter?.type === 'split-date') {\n          <ng-container\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\n          </ng-container>\n        }\n      }\n    }\n  } @else {\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\n  }\n</div>\n\n<!-- ================================================ -->\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\n<!-- ================================================ -->\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\n    <sd-input-number\n      [autoId]=\"_autoId + '-from'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      size=\"sm\"\n      [label]=\"_label\"\n      [(model)]=\"_columnFilter[field].from\"\n      (sdChange)=\"onFilterChange()\"\n      (sdBlur)=\"onFilterCommit()\"\n      (cleared)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-input-number>\n    <div class=\"mx-4\">-</div>\n    <sd-input-number\n      [autoId]=\"_autoId + '-to'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      size=\"sm\"\n      [(model)]=\"_columnFilter[field].to\"\n      (sdChange)=\"onFilterChange()\"\n      (sdBlur)=\"onFilterCommit()\"\n      (cleared)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-input-number>\n  </div>\n</ng-template>\n\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\n    <sd-date\n      [autoId]=\"_autoId + '-from'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      type=\"date\"\n      size=\"sm\"\n      [label]=\"_label\"\n      [(model)]=\"_columnFilter[field].from\"\n      (sdChange)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-date>\n    <div class=\"mx-4\">-</div>\n    <sd-date\n      [autoId]=\"_autoId + '-to'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      type=\"date\"\n      size=\"sm\"\n      [(model)]=\"_columnFilter[field].to\"\n      (sdChange)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-date>\n  </div>\n</ng-template>\n", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "bare", "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", "bare", "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", "bare", "viewed", "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: "20.3.23", ngImport: i0, type: ColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operator: "operatorChange", filterChange: "filterChange", filterCommit: "filterCommit" }, ngImport: i0, template: "@let _column = column();\n@let _columnFilter = columnFilter();\n@let _autoId = autoId();\n@let _templateRef = templateRef();\n@let _operators = operators();\n@let _items = items();\n@let _label = label();\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\n\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\n  @if (\n    _column.type === 'string' ||\n    _column.type === 'number' ||\n    _column.type === 'boolean' ||\n    _column.type === 'values' ||\n    _column.type === 'lazy-values' ||\n    _column.type === 'date' ||\n    _column.type === 'datetime' ||\n    _column.type === 'time'\n  ) {\n    <!-- Operator filter -->\n    @if (_operators.length) {\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\n      </div>\n    }\n\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\n    @if (_templateRef) {\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\n    }\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\n    @else {\n      @if (_column.type === 'string') {\n        <sd-input\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          size=\"sm\"\n          type=\"text\"\n          [label]=\"_label\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (keyupEnter)=\"onFilterChange()\"\n          (sdBlur)=\"onFilterCommit()\"\n          (cleared)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          hideInlineError>\n        </sd-input>\n      } @else if (_column.type === 'number') {\n        @if (!_column.filter?.type) {\n          <sd-input-number\n            [autoId]=\"_autoId\"\n            style=\"flex: 1 1 0%; min-width: 0\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (keyupEnter)=\"onFilterChange()\"\n            (sdBlur)=\"onFilterCommit()\"\n            (cleared)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-input-number>\n        } @else if (_column.filter?.type === 'split-number') {\n          <ng-container\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\n          </ng-container>\n        }\n      } @else if (_column.type === 'boolean') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"[\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\n          ]\"\n          valueField=\"value\"\n          displayField=\"display\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          hideInlineError>\n          <ng-template sdItemDef let-item=\"item\">\n            @if (item.value === '1') {\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\n            } @else {\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\n            }\n          </ng-template>\n        </sd-select>\n      } @else if (_column.type === 'values') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"_items\"\n          [valueField]=\"_column.option.valueField\"\n          [displayField]=\"_column.option.displayField\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\n          hideInlineError>\n        </sd-select>\n      } @else if (_column.type === 'lazy-values') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"_items\"\n          [valueField]=\"_column.option.valueField\"\n          [displayField]=\"_column.option.displayField\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\n          hideInlineError>\n        </sd-select>\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\n          <sd-date-range\n            style=\"flex: 1 1 0%; min-width: 0\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (sdChange)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-date-range>\n        } @else if (_column.filter?.type === 'date') {\n          <sd-date\n            [autoId]=\"_autoId\"\n            style=\"flex: 1 1 0%; min-width: 0\"\n            type=\"date\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (sdChange)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-date>\n        } @else if (_column.filter?.type === 'split-date') {\n          <ng-container\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\n          </ng-container>\n        }\n      }\n    }\n  } @else {\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\n  }\n</div>\n\n<!-- ================================================ -->\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\n<!-- ================================================ -->\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\n    <sd-input-number\n      [autoId]=\"_autoId + '-from'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      size=\"sm\"\n      [label]=\"_label\"\n      [(model)]=\"_columnFilter[field].from\"\n      (sdChange)=\"onFilterChange()\"\n      (sdBlur)=\"onFilterCommit()\"\n      (cleared)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-input-number>\n    <div class=\"mx-4\">-</div>\n    <sd-input-number\n      [autoId]=\"_autoId + '-to'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      size=\"sm\"\n      [(model)]=\"_columnFilter[field].to\"\n      (sdChange)=\"onFilterChange()\"\n      (sdBlur)=\"onFilterCommit()\"\n      (cleared)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-input-number>\n  </div>\n</ng-template>\n\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\n    <sd-date\n      [autoId]=\"_autoId + '-from'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      type=\"date\"\n      size=\"sm\"\n      [label]=\"_label\"\n      [(model)]=\"_columnFilter[field].from\"\n      (sdChange)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-date>\n    <div class=\"mx-4\">-</div>\n    <sd-date\n      [autoId]=\"_autoId + '-to'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      type=\"date\"\n      size=\"sm\"\n      [(model)]=\"_columnFilter[field].to\"\n      (sdChange)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-date>\n  </div>\n</ng-template>\n", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "bare", "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", "bare", "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", "bare", "viewed", "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.21", ngImport: i0, type: ColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'column-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdOperator, SdInput, SdInputNumber, SdSelect, SdDate, SdDateRange, SdBadge], template: "@let _column = column();\n@let _columnFilter = columnFilter();\n@let _autoId = autoId();\n@let _templateRef = templateRef();\n@let _operators = operators();\n@let _items = items();\n@let _label = label();\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\n\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\n  @if (\n    _column.type === 'string' ||\n    _column.type === 'number' ||\n    _column.type === 'boolean' ||\n    _column.type === 'values' ||\n    _column.type === 'lazy-values' ||\n    _column.type === 'date' ||\n    _column.type === 'datetime' ||\n    _column.type === 'time'\n  ) {\n    <!-- Operator filter -->\n    @if (_operators.length) {\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\n      </div>\n    }\n\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\n    @if (_templateRef) {\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\n    }\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\n    @else {\n      @if (_column.type === 'string') {\n        <sd-input\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          size=\"sm\"\n          type=\"text\"\n          [label]=\"_label\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (keyupEnter)=\"onFilterChange()\"\n          (sdBlur)=\"onFilterCommit()\"\n          (cleared)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          hideInlineError>\n        </sd-input>\n      } @else if (_column.type === 'number') {\n        @if (!_column.filter?.type) {\n          <sd-input-number\n            [autoId]=\"_autoId\"\n            style=\"flex: 1 1 0%; min-width: 0\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (keyupEnter)=\"onFilterChange()\"\n            (sdBlur)=\"onFilterCommit()\"\n            (cleared)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-input-number>\n        } @else if (_column.filter?.type === 'split-number') {\n          <ng-container\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\n          </ng-container>\n        }\n      } @else if (_column.type === 'boolean') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"[\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\n          ]\"\n          valueField=\"value\"\n          displayField=\"display\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          hideInlineError>\n          <ng-template sdItemDef let-item=\"item\">\n            @if (item.value === '1') {\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\n            } @else {\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\n            }\n          </ng-template>\n        </sd-select>\n      } @else if (_column.type === 'values') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"_items\"\n          [valueField]=\"_column.option.valueField\"\n          [displayField]=\"_column.option.displayField\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\n          hideInlineError>\n        </sd-select>\n      } @else if (_column.type === 'lazy-values') {\n        <sd-select\n          minWidthPanel=\"200px\"\n          [autoId]=\"_autoId\"\n          style=\"flex: 1 1 0%; min-width: 0\"\n          [style.width]=\"'100%'\"\n          size=\"sm\"\n          [label]=\"_label\"\n          [items]=\"_items\"\n          [valueField]=\"_column.option.valueField\"\n          [displayField]=\"_column.option.displayField\"\n          [(model)]=\"_columnFilter[_column.field]\"\n          (sdChange)=\"onFilterChange()\"\n          [disabled]=\"_column.filter?.disabled\"\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\n          hideInlineError>\n        </sd-select>\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\n          <sd-date-range\n            style=\"flex: 1 1 0%; min-width: 0\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (sdChange)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-date-range>\n        } @else if (_column.filter?.type === 'date') {\n          <sd-date\n            [autoId]=\"_autoId\"\n            style=\"flex: 1 1 0%; min-width: 0\"\n            type=\"date\"\n            size=\"sm\"\n            [label]=\"_label\"\n            [(model)]=\"_columnFilter[_column.field]\"\n            (sdChange)=\"onFilterChange()\"\n            [disabled]=\"_column.filter?.disabled\"\n            hideInlineError>\n          </sd-date>\n        } @else if (_column.filter?.type === 'split-date') {\n          <ng-container\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\n          </ng-container>\n        }\n      }\n    }\n  } @else {\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\n  }\n</div>\n\n<!-- ================================================ -->\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\n<!-- ================================================ -->\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\n    <sd-input-number\n      [autoId]=\"_autoId + '-from'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      size=\"sm\"\n      [label]=\"_label\"\n      [(model)]=\"_columnFilter[field].from\"\n      (sdChange)=\"onFilterChange()\"\n      (sdBlur)=\"onFilterCommit()\"\n      (cleared)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-input-number>\n    <div class=\"mx-4\">-</div>\n    <sd-input-number\n      [autoId]=\"_autoId + '-to'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      size=\"sm\"\n      [(model)]=\"_columnFilter[field].to\"\n      (sdChange)=\"onFilterChange()\"\n      (sdBlur)=\"onFilterCommit()\"\n      (cleared)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-input-number>\n  </div>\n</ng-template>\n\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\n    <sd-date\n      [autoId]=\"_autoId + '-from'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      type=\"date\"\n      size=\"sm\"\n      [label]=\"_label\"\n      [(model)]=\"_columnFilter[field].from\"\n      (sdChange)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-date>\n    <div class=\"mx-4\">-</div>\n    <sd-date\n      [autoId]=\"_autoId + '-to'\"\n      style=\"flex: 1 1 0%; min-width: 0\"\n      type=\"date\"\n      size=\"sm\"\n      [(model)]=\"_columnFilter[field].to\"\n      (sdChange)=\"onFilterChange()\"\n      [disabled]=\"disabled\"\n      hideInlineError>\n    </sd-date>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], columnFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilter", required: false }] }], cacheValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "cacheValues", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], operator: [{ type: i0.Input, args: [{ isSignal: true, alias: "operator", required: false }] }, { type: i0.Output, args: ["operatorChange"] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterCommit: [{ type: i0.Output, args: ["filterCommit"] }] } });
 
 // Đối với filter loại values, items có thể là 1 mảng, có thể là 1 hàm, do đó cần xử lý nếu là hàm có thể xử lý gọi API
 class FilterValuesPipe {
@@ -302,10 +302,10 @@ class FilterValuesPipe {
         }
         return [];
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: FilterValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: FilterValuesPipe, isStandalone: true, name: "filterValues" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FilterValuesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: FilterValuesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterValues',
@@ -430,10 +430,10 @@ class SdTreePipe {
             return items;
         return flattenTree(items, treeOption);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTreePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdTreePipe, isStandalone: true, name: "sdTree" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTreePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: SdTreePipe, isStandalone: true, name: "sdTree" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTreePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTreePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'sdTree' }]
         }] });
@@ -444,10 +444,10 @@ class ExternalFilterComponent {
     // ==========================================
     // 1. SIGNAL INPUTS
     // ==========================================
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    filter = input(undefined);
-    externalFilters = input([]);
-    filterRegister = input(undefined);
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    externalFilters = input([], ...(ngDevMode ? [{ debugName: "externalFilters" }] : []));
+    filterRegister = input(undefined, ...(ngDevMode ? [{ debugName: "filterRegister" }] : []));
     // ==========================================
     // 2. INJECT
     // ==========================================
@@ -455,9 +455,9 @@ class ExternalFilterComponent {
     // ==========================================
     // 3. STATE (signals)
     // ==========================================
-    externalFilter = signal({});
-    inlineExternal = signal({});
-    filtered = signal(false);
+    externalFilter = signal({}, ...(ngDevMode ? [{ debugName: "externalFilter" }] : []));
+    inlineExternal = signal({}, ...(ngDevMode ? [{ debugName: "inlineExternal" }] : []));
+    filtered = signal(false, ...(ngDevMode ? [{ debugName: "filtered" }] : []));
     isMobileOrTablet = BrowserUtilities.isMobile();
     // FormGroup là instance, parent đọc qua viewChild — giữ readonly field.
     form = new FormGroup({});
@@ -468,11 +468,11 @@ class ExternalFilterComponent {
     autoId = computed(() => {
         const base = this.autoIdInput();
         return base ? `${base}-external-` : '';
-    });
+    }, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
     // Layout column: 4 filter/row → 3 cột; mặc định 6 filter/row → 2 cột.
-    col = computed(() => (this.filter()?.externalFilterPerRow === 4 ? 3 : 2));
+    col = computed(() => (this.filter()?.externalFilterPerRow === 4 ? 3 : 2), ...(ngDevMode ? [{ debugName: "col" }] : []));
     // Normalize externalFilters về mảng (input có thể null/undefined).
-    filterItems = computed(() => this.externalFilters() || []);
+    filterItems = computed(() => this.externalFilters() || [], ...(ngDevMode ? [{ debugName: "filterItems" }] : []));
     constructor() {
         // Subscribe filterRegister observers — re-subscribe khi input đổi, cleanup khi đổi/destroy.
         // QUAN TRỌNG: phải wrap untracked(). Observer có startWith() → emit ĐỒNG BỘ ngay khi
@@ -564,10 +564,10 @@ class ExternalFilterComponent {
             return val !== undefined && val !== null && val !== '';
         });
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _items = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _items.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      collapsable>\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _items; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _items; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\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: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "bare", "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", "bare", "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", "showSeconds", "bare", "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", "bare", "viewed", "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", "viewed", "inlineError", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ExternalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _items = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _items.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      collapsable>\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _items; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _items; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "bare", "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", "bare", "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", "showSeconds", "bare", "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", "bare", "viewed", "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: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "inlineError", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'external-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
@@ -585,7 +585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdCheckbox,
                         TranslatePipe,
                     ], template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _items = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _items.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      collapsable>\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _items; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _items; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\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"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], externalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalFilters", required: false }] }], filterRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRegister", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -605,13 +605,13 @@ class MobileFilterComponent {
     // ==========================================
     // 1. SIGNAL INPUTS
     // ==========================================
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    filter = input(undefined);
-    externalFilters = input([]);
-    columns = input([]);
-    filterDefs = input([]);
-    filterRegister = input(undefined);
-    cacheValues = input(undefined);
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    externalFilters = input([], ...(ngDevMode ? [{ debugName: "externalFilters" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    filterDefs = input([], ...(ngDevMode ? [{ debugName: "filterDefs" }] : []));
+    filterRegister = input(undefined, ...(ngDevMode ? [{ debugName: "filterRegister" }] : []));
+    cacheValues = input(undefined, ...(ngDevMode ? [{ debugName: "cacheValues" }] : []));
     // ==========================================
     // 2. VIEW QUERY
     // ==========================================
@@ -619,19 +619,19 @@ class MobileFilterComponent {
     // ==========================================
     // 3. STATE — local working copies; chỉ flush khi Apply.
     // ==========================================
-    workingColumnFilter = signal({});
-    workingColumnOperator = signal({});
-    workingExternalFilter = signal({});
+    workingColumnFilter = signal({}, ...(ngDevMode ? [{ debugName: "workingColumnFilter" }] : []));
+    workingColumnOperator = signal({}, ...(ngDevMode ? [{ debugName: "workingColumnOperator" }] : []));
+    workingExternalFilter = signal({}, ...(ngDevMode ? [{ debugName: "workingExternalFilter" }] : []));
     // ==========================================
     // 4. COMPUTED
     // ==========================================
     autoId = computed(() => {
         const base = this.autoIdInput();
         return base ? `${base}-mobile-filter-` : '';
-    });
-    externalFilterItems = computed(() => this.externalFilters() || []);
-    columnItems = computed(() => this.columns() || []);
-    filterDefItems = computed(() => this.filterDefs() || []);
+    }, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
+    externalFilterItems = computed(() => this.externalFilters() || [], ...(ngDevMode ? [{ debugName: "externalFilterItems" }] : []));
+    columnItems = computed(() => this.columns() || [], ...(ngDevMode ? [{ debugName: "columnItems" }] : []));
+    filterDefItems = computed(() => this.filterDefs() || [], ...(ngDevMode ? [{ debugName: "filterDefItems" }] : []));
     // ==========================================
     // 5. PUBLIC API
     // ==========================================
@@ -660,10 +660,10 @@ class MobileFilterComponent {
         // Local working state — không ghi gì khi cancel, chỉ đóng drawer.
         this.drawer().close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MobileFilterComponent, isStandalone: true, selector: "mobile-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filterDefs: { classPropertyName: "filterDefs", publicName: "filterDefs", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: SdSideDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\n@let _externalFilters = externalFilterItems();\n@let _columns = columnItems();\n@let _filterDefs = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilters.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilters; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefs.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefs; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columns.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columns; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\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: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass", "autoId"], outputs: ["sdClosed"] }, { 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: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "bare", "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", "bare", "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", "showSeconds", "bare", "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", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MobileFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: MobileFilterComponent, isStandalone: true, selector: "mobile-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filterDefs: { classPropertyName: "filterDefs", publicName: "filterDefs", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: SdSideDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\n@let _externalFilters = externalFilterItems();\n@let _columns = columnItems();\n@let _filterDefs = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilters.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilters; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefs.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefs; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columns.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columns; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass", "autoId"], outputs: ["sdClosed"] }, { 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: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "bare", "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", "bare", "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", "showSeconds", "bare", "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", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MobileFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mobile-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
@@ -679,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         FilterValuesPipe,
                         TranslatePipe,
                     ], template: "@let _autoId = autoId();\n@let _externalFilters = externalFilterItems();\n@let _columns = columnItems();\n@let _filterDefs = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilters.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilters; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefs.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefs; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columns.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columns; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\n"] }]
-        }] });
+        }], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], externalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalFilters", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], filterDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefs", required: false }] }], filterRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRegister", required: false }] }], cacheValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "cacheValues", required: false }] }], drawer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdSideDrawer), { isSignal: true }] }] } });
 
 class ActionFilterPipe {
     #convert = (action) => {
@@ -742,10 +742,10 @@ class ActionFilterPipe {
         }
         return results.map(result => this.#convert(result));
     };
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ActionFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: ActionFilterPipe, isStandalone: true, name: "actionFilter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ActionFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ActionFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'actionFilter',
@@ -756,8 +756,8 @@ class SelectorActionComponent {
     // ==========================================
     // 1. SIGNAL INPUTS / OUTPUTS
     // ==========================================
-    tableOption = input(undefined);
-    selectedTableItems = input(undefined);
+    tableOption = input(undefined, ...(ngDevMode ? [{ debugName: "tableOption" }] : []));
+    selectedTableItems = input(undefined, ...(ngDevMode ? [{ debugName: "selectedTableItems" }] : []));
     clear = output();
     // ==========================================
     // 2. INJECT
@@ -774,8 +774,8 @@ class SelectorActionComponent {
             return msg(this.selectedTableItems()?.map(e => e.data));
         }
         return msg;
-    });
-    opened = computed(() => !!this.selectedTableItems()?.length);
+    }, ...(ngDevMode ? [{ debugName: "message" }] : []));
+    opened = computed(() => !!this.selectedTableItems()?.length, ...(ngDevMode ? [{ debugName: "opened" }] : []));
     // ==========================================
     // 4. HANDLERS
     // ==========================================
@@ -785,13 +785,13 @@ class SelectorActionComponent {
             action.click(this.selectedTableItems()?.map(e => e.data));
         }
     };
-    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;\n@let _selected = selectedTableItems();\n\n<sd-quick-action [opened]=\"opened()\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length\">{{ _selected?.length }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ message() }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\n    @for (action of _actions; track $index) {\n      @if (action.variant === 'normal') {\n        <sd-button\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon\"\n          [color]=\"action.color\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet\"\n          [title]=\"action.title\"\n          (click)=\"onClickAction(action)\"></sd-button>\n      } @else if (action.variant === 'children') {\n        <sd-button\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon || 'more_vert'\"\n          [color]=\"action.color || 'secondary'\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n          [title]=\"action.title\"\n          [matMenuTriggerFor]=\"menu\">\n        </sd-button>\n        <mat-menu #menu=\"matMenu\">\n          <span>\n            @for (child of action.children; track $index) {\n              <button mat-menu-item (click)=\"onClickAction(child)\">\n                @if (child.icon) {\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                }\n                <span> {{ child.title }}</span>\n              </button>\n            }\n          </span>\n        </mat-menu>\n      }\n    }\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n    <sd-button class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\n  </div>\n</sd-quick-action>\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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: ["opened"] }, { kind: "pipe", type: ActionFilterPipe, name: "actionFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SelectorActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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;\n@let _selected = selectedTableItems();\n\n<sd-quick-action [opened]=\"opened()\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length\">{{ _selected?.length }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ message() }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\n    @for (action of _actions; track $index) {\n      @if (action.variant === 'normal') {\n        <sd-button\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon\"\n          [color]=\"action.color\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet\"\n          [title]=\"action.title\"\n          (click)=\"onClickAction(action)\"></sd-button>\n      } @else if (action.variant === 'children') {\n        <sd-button\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon || 'more_vert'\"\n          [color]=\"action.color || 'secondary'\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n          [title]=\"action.title\"\n          [matMenuTriggerFor]=\"menu\">\n        </sd-button>\n        <mat-menu #menu=\"matMenu\">\n          <span>\n            @for (child of action.children; track $index) {\n              <button mat-menu-item (click)=\"onClickAction(child)\">\n                @if (child.icon) {\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                }\n                <span> {{ child.title }}</span>\n              </button>\n            }\n          </span>\n        </mat-menu>\n      }\n    }\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n    <sd-button class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\n  </div>\n</sd-quick-action>\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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: ["opened"] }, { kind: "pipe", type: ActionFilterPipe, name: "actionFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SelectorActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'selector-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatMenuModule, SdButton, SdQuickAction, ActionFilterPipe], template: "@let _actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\n@let _selected = selectedTableItems();\n\n<sd-quick-action [opened]=\"opened()\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length\">{{ _selected?.length }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ message() }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\n    @for (action of _actions; track $index) {\n      @if (action.variant === 'normal') {\n        <sd-button\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon\"\n          [color]=\"action.color\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet\"\n          [title]=\"action.title\"\n          (click)=\"onClickAction(action)\"></sd-button>\n      } @else if (action.variant === 'children') {\n        <sd-button\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon || 'more_vert'\"\n          [color]=\"action.color || 'secondary'\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n          [title]=\"action.title\"\n          [matMenuTriggerFor]=\"menu\">\n        </sd-button>\n        <mat-menu #menu=\"matMenu\">\n          <span>\n            @for (child of action.children; track $index) {\n              <button mat-menu-item (click)=\"onClickAction(child)\">\n                @if (child.icon) {\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                }\n                <span> {{ child.title }}</span>\n              </button>\n            }\n          </span>\n        </mat-menu>\n      }\n    }\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n    <sd-button class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\n  </div>\n</sd-quick-action>\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"] }]
-        }] });
+        }], propDecorators: { tableOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableOption", required: false }] }], selectedTableItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTableItems", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 const DEFAULT_TABLE_CONFIG = {
     paginate: {
@@ -1012,10 +1012,10 @@ class ConfigService {
             columns,
         };
     };
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", 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: "20.3.23", ngImport: i0, type: ConfigService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ConfigService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.SdStorageService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -1030,12 +1030,12 @@ class ConfigComponent {
     // ==========================================
     // 1. SIGNAL INPUTS / OUTPUTS
     // ==========================================
-    tableOption = input(undefined);
+    tableOption = input(undefined, ...(ngDevMode ? [{ debugName: "tableOption" }] : []));
     changes = output();
     // ==========================================
     // 2. SIGNAL QUERIES
     // ==========================================
-    modal = viewChild(SdModal);
+    modal = viewChild(SdModal, ...(ngDevMode ? [{ debugName: "modal" }] : []));
     table = viewChild.required(MatTable);
     // ==========================================
     // 3. INJECT
@@ -1047,7 +1047,7 @@ class ConfigComponent {
     // ==========================================
     // 4. STATE
     // ==========================================
-    configuration = signal(undefined);
+    configuration = signal(undefined, ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     // dragDisabled không nên là signal (mutated trong drag handlers, không trigger render).
     dragDisabled = true;
     #setting;
@@ -1102,10 +1102,10 @@ class ConfigComponent {
     handleMouseUp() {
         this.dragDisabled = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "@let _configuration = configuration();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\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\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "hideInlineError", "required", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "@let _configuration = configuration();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\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\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.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", "cdkDropListHasAnchor"], 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "hideInlineError", "required", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'config', standalone: true, imports: [
                         CommonModule,
@@ -1120,16 +1120,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdSwitch,
                         TranslatePipe,
                     ], providers: [ConfigService], template: "@let _configuration = configuration();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\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\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\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"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { tableOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableOption", required: false }] }], changes: [{ type: i0.Output, args: ["changes"] }], modal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdModal), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
 
 class ToStringPipe {
     transform(value) {
         return value !== null && value !== undefined ? String(value) : '';
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ToStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: ToStringPipe, isStandalone: true, name: "asString" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToStringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ToStringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'asString',
@@ -1139,19 +1139,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class ViewComponent {
     // Inject
     #cdr = inject(ChangeDetectorRef);
-    contentContainer = viewChild('contentContainer');
-    isCollapsed = signal(true);
-    isOverflowing = signal(false);
+    contentContainer = viewChild('contentContainer', ...(ngDevMode ? [{ debugName: "contentContainer" }] : []));
+    isCollapsed = signal(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : []));
     // Inputs
-    autoId = input.required();
-    column = input.required();
-    item = input.required();
+    autoId = input.required(...(ngDevMode ? [{ debugName: "autoId" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
     truncateEnable = computed(() => {
         return this.column()?.cell?.truncate?.enable;
-    });
+    }, ...(ngDevMode ? [{ debugName: "truncateEnable" }] : []));
     truncateWidth = computed(() => {
         return this.column()?.width;
-    });
+    }, ...(ngDevMode ? [{ debugName: "truncateWidth" }] : []));
     constructor() {
         effect(() => {
             this.truncateWidth();
@@ -1174,50 +1174,50 @@ class ViewComponent {
     toggle = () => {
         this.isCollapsed.update(current => !current);
     };
-    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();\n@let _item = item();\n@let _autoId = autoId();\n\n@let view = _item.meta.display[_column.field];\n@let _truncateEnable = truncateEnable();\n@let _truncateWidth = truncateWidth();\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\n\n@if (view) {\n  @if (view.isHtml) {\n    @if (view.click) {\n      <div\n        #contentContainer\n        [attr.data-autoId]=\"autoId()\"\n        (click)=\"view.click()\"\n        class=\"text-break cursor-pointer\"\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\n        [style]=\"view.cellStyle\"\n        [style.max-width]=\"_truncateWidth\"\n        [class.c-ellipsis-html]=\"_truncateEnable\"\n        [innerHTML]=\"view.data | sdSafeHtml\"\n        aria-hidden=\"true\"></div>\n\n      <ng-template #htmlClickTooltip>\n        <div\n          class=\"c-tooltip-inner-content\"\n          [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\n        </div>\n      </ng-template>\n    } @else {\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n      @if (_truncateEnable) {\n        <div\n          #contentContainer\n          [style.max-width]=\"_truncateWidth\"\n          [class.c-ellipsis-html]=\"isCollapsed()\"\n          [attr.data-autoId]=\"autoId()\"\n          class=\"text-break\"\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\n          container=\"body\"\n          placement=\"bottom\"\n          [sdTooltipDelay]=\"100\"\n          [style]=\"view.cellStyle\"\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\n\n        <ng-template #htmlTooltip>\n          <div\n            class=\"c-tooltip-inner-content\"\n            [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\n          </div>\n        </ng-template>\n\n        @if (isExpandByMore) {\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}</button>\n        }\n      } @else {\n        <div\n          [attr.data-autoId]=\"autoId()\"\n          class=\"text-break\"\n          [sdTooltip]=\"view.tooltip || ''\"\n          [style]=\"view.cellStyle\"\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\n      }\n      <!-- End -->\n    }\n  } @else {\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\n    @if (view.badge) {\n      @if (view.data) {\n        <sd-badge\n          [attr.data-autoId]=\"autoId()\"\n          [type]=\"view.badge.type\"\n          [title]=\"view.data\"\n          [color]=\"view.badge.color\"\n          [icon]=\"view.badge.icon\"\n          [sdTooltip]=\"view.tooltip || ''\"\n          (click)=\"!!view.click && view.click()\">\n        </sd-badge>\n      }\n    } @else {\n      @if (view.click) {\n        <div\n          #contentContainer\n          class=\"text-break\"\n          [style]=\"view.cellStyle\"\n          [style.max-width]=\"_truncateWidth\"\n          [class.c-ellipsis]=\"_truncateEnable\"\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\n          <a [attr.data-autoId]=\"_autoId\" href=\"javascript:;\" (click)=\"view.click()\">\n            {{ view.data }}\n          </a>\n        </div>\n      } @else {\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n        @if (_truncateEnable) {\n          <div\n            #contentContainer\n            [attr.data-autoId]=\"_autoId\"\n            class=\"text-break\"\n            [style]=\"view.cellStyle\"\n            [style.max-width]=\"_truncateWidth\"\n            [class.c-ellipsis]=\"isCollapsed()\"\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\n            {{ view.data }}\n          </div>\n\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\n          @if (isExpandByMore) {\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}</button>\n          }\n        } @else {\n          <div [attr.data-autoId]=\"_autoId\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\n            {{ view.data }}\n          </div>\n        }\n        <!-- End -->\n      }\n    }\n  }\n}\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" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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();\n@let _item = item();\n@let _autoId = autoId();\n\n@let view = _item.meta.display[_column.field];\n@let _truncateEnable = truncateEnable();\n@let _truncateWidth = truncateWidth();\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\n\n@if (view) {\n  @if (view.isHtml) {\n    @if (view.click) {\n      <div\n        #contentContainer\n        [attr.data-autoId]=\"autoId()\"\n        (click)=\"view.click()\"\n        class=\"text-break cursor-pointer\"\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\n        [style]=\"view.cellStyle\"\n        [style.max-width]=\"_truncateWidth\"\n        [class.c-ellipsis-html]=\"_truncateEnable\"\n        [innerHTML]=\"view.data | sdSafeHtml\"\n        aria-hidden=\"true\"></div>\n\n      <ng-template #htmlClickTooltip>\n        <div\n          class=\"c-tooltip-inner-content\"\n          [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\n        </div>\n      </ng-template>\n    } @else {\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n      @if (_truncateEnable) {\n        <div\n          #contentContainer\n          [style.max-width]=\"_truncateWidth\"\n          [class.c-ellipsis-html]=\"isCollapsed()\"\n          [attr.data-autoId]=\"autoId()\"\n          class=\"text-break\"\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\n          container=\"body\"\n          placement=\"bottom\"\n          [sdTooltipDelay]=\"100\"\n          [style]=\"view.cellStyle\"\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\n\n        <ng-template #htmlTooltip>\n          <div\n            class=\"c-tooltip-inner-content\"\n            [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\n          </div>\n        </ng-template>\n\n        @if (isExpandByMore) {\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}</button>\n        }\n      } @else {\n        <div\n          [attr.data-autoId]=\"autoId()\"\n          class=\"text-break\"\n          [sdTooltip]=\"view.tooltip || ''\"\n          [style]=\"view.cellStyle\"\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\n      }\n      <!-- End -->\n    }\n  } @else {\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\n    @if (view.badge) {\n      @if (view.data) {\n        <sd-badge\n          [attr.data-autoId]=\"autoId()\"\n          [type]=\"view.badge.type\"\n          [title]=\"view.data\"\n          [color]=\"view.badge.color\"\n          [icon]=\"view.badge.icon\"\n          [sdTooltip]=\"view.tooltip || ''\"\n          (click)=\"!!view.click && view.click()\">\n        </sd-badge>\n      }\n    } @else {\n      @if (view.click) {\n        <div\n          #contentContainer\n          class=\"text-break\"\n          [style]=\"view.cellStyle\"\n          [style.max-width]=\"_truncateWidth\"\n          [class.c-ellipsis]=\"_truncateEnable\"\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\n          <a [attr.data-autoId]=\"_autoId\" href=\"javascript:;\" (click)=\"view.click()\">\n            {{ view.data }}\n          </a>\n        </div>\n      } @else {\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n        @if (_truncateEnable) {\n          <div\n            #contentContainer\n            [attr.data-autoId]=\"_autoId\"\n            class=\"text-break\"\n            [style]=\"view.cellStyle\"\n            [style.max-width]=\"_truncateWidth\"\n            [class.c-ellipsis]=\"isCollapsed()\"\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\n            {{ view.data }}\n          </div>\n\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\n          @if (isExpandByMore) {\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}</button>\n          }\n        } @else {\n          <div [attr.data-autoId]=\"_autoId\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\n            {{ view.data }}\n          </div>\n        }\n        <!-- End -->\n      }\n    }\n  }\n}\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: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "pipe", type: ToStringPipe, name: "asString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe, TranslatePipe], template: "@let _column = column();\n@let _item = item();\n@let _autoId = autoId();\n\n@let view = _item.meta.display[_column.field];\n@let _truncateEnable = truncateEnable();\n@let _truncateWidth = truncateWidth();\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\n\n@if (view) {\n  @if (view.isHtml) {\n    @if (view.click) {\n      <div\n        #contentContainer\n        [attr.data-autoId]=\"autoId()\"\n        (click)=\"view.click()\"\n        class=\"text-break cursor-pointer\"\n        [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\n        [style]=\"view.cellStyle\"\n        [style.max-width]=\"_truncateWidth\"\n        [class.c-ellipsis-html]=\"_truncateEnable\"\n        [innerHTML]=\"view.data | sdSafeHtml\"\n        aria-hidden=\"true\"></div>\n\n      <ng-template #htmlClickTooltip>\n        <div\n          class=\"c-tooltip-inner-content\"\n          [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n          style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n          <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\n        </div>\n      </ng-template>\n    } @else {\n      <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n      @if (_truncateEnable) {\n        <div\n          #contentContainer\n          [style.max-width]=\"_truncateWidth\"\n          [class.c-ellipsis-html]=\"isCollapsed()\"\n          [attr.data-autoId]=\"autoId()\"\n          class=\"text-break\"\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\n          containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\n          container=\"body\"\n          placement=\"bottom\"\n          [sdTooltipDelay]=\"100\"\n          [style]=\"view.cellStyle\"\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\n\n        <ng-template #htmlTooltip>\n          <div\n            class=\"c-tooltip-inner-content\"\n            [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n            style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n            <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\n          </div>\n        </ng-template>\n\n        @if (isExpandByMore) {\n          <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}</button>\n        }\n      } @else {\n        <div\n          [attr.data-autoId]=\"autoId()\"\n          class=\"text-break\"\n          [sdTooltip]=\"view.tooltip || ''\"\n          [style]=\"view.cellStyle\"\n          [innerHTML]=\"view.data | sdSafeHtml\"></div>\n      }\n      <!-- End -->\n    }\n  } @else {\n    <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\n    @if (view.badge) {\n      @if (view.data) {\n        <sd-badge\n          [attr.data-autoId]=\"autoId()\"\n          [type]=\"view.badge.type\"\n          [title]=\"view.data\"\n          [color]=\"view.badge.color\"\n          [icon]=\"view.badge.icon\"\n          [sdTooltip]=\"view.tooltip || ''\"\n          (click)=\"!!view.click && view.click()\">\n        </sd-badge>\n      }\n    } @else {\n      @if (view.click) {\n        <div\n          #contentContainer\n          class=\"text-break\"\n          [style]=\"view.cellStyle\"\n          [style.max-width]=\"_truncateWidth\"\n          [class.c-ellipsis]=\"_truncateEnable\"\n          [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\n          <a [attr.data-autoId]=\"_autoId\" href=\"javascript:;\" (click)=\"view.click()\">\n            {{ view.data }}\n          </a>\n        </div>\n      } @else {\n        <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n        @if (_truncateEnable) {\n          <div\n            #contentContainer\n            [attr.data-autoId]=\"_autoId\"\n            class=\"text-break\"\n            [style]=\"view.cellStyle\"\n            [style.max-width]=\"_truncateWidth\"\n            [class.c-ellipsis]=\"isCollapsed()\"\n            [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\n            {{ view.data }}\n          </div>\n\n          <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\n          @if (isExpandByMore) {\n            <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}</button>\n          }\n        } @else {\n          <div [attr.data-autoId]=\"_autoId\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\n            {{ view.data }}\n          </div>\n        }\n        <!-- End -->\n      }\n    }\n  }\n}\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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { isSignal: true }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
 
 class DesktopCellComponent {
     // Inject
     #cdr = inject(ChangeDetectorRef);
     // ViewChild
-    contentContainer = viewChild('contentContainer');
+    contentContainer = viewChild('contentContainer', ...(ngDevMode ? [{ debugName: "contentContainer" }] : []));
     // Inputs
-    column = input.required();
-    item = input.required();
-    cellDef = input.required({});
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    cellDef = input.required(...(ngDevMode ? [{ debugName: "cellDef" }] : [{}]));
     value = computed(() => {
         return Utilities.getNestedValue(this.item()?.data, this.column()?.field);
-    });
+    }, ...(ngDevMode ? [{ debugName: "value" }] : []));
     key = computed(() => {
         const data = this.item()?.data;
         return data?.id?.toString() || data?.code?.toString() || data?.value?.toString() || '';
-    });
+    }, ...(ngDevMode ? [{ debugName: "key" }] : []));
     autoId = computed(() => {
         const column = this.column();
         const key = this.key();
         return `${key}_${column.field}`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
     truncateEnable = computed(() => {
         return this.column()?.cell?.truncate?.enable;
-    });
+    }, ...(ngDevMode ? [{ debugName: "truncateEnable" }] : []));
     truncateWidth = computed(() => {
         return this.column()?.width;
-    });
+    }, ...(ngDevMode ? [{ debugName: "truncateWidth" }] : []));
     // why: widen to TemplateRef<any> so ng-packagr doesn't try to surface the
     // directive's internal Context type through this public computed.
     templateRef = computed(() => {
         const cellDef = this.cellDef();
         const column = this.column();
         return cellDef[column?.field]?.templateRef || column?.cell?.templateRef;
-    });
-    isCollapsed = signal(true);
-    isOverflowing = signal(false);
+    }, ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
+    isCollapsed = signal(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : []));
     constructor() {
         effect(() => {
             this.truncateWidth();
@@ -1240,13 +1240,13 @@ class DesktopCellComponent {
             }
         });
     };
-    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();\n@let _item = item();\n@let _autoId = autoId();\n\n@let _truncateEnable = truncateEnable();\n@let _truncateWidth = truncateWidth();\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\n\n@let _templateRef = templateRef();\n@let context =\n  {\n    item: _item.data,\n    column: _column,\n    autoId: _autoId,\n  };\n\n@if (_templateRef) {\n  <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n  @if (_truncateEnable) {\n    <div\n      #contentContainer\n      [style.max-width]=\"_truncateWidth\"\n      [class.c-ellipsis-html]=\"isCollapsed()\"\n      [sdTooltip]=\"isExpandByTooltip ? htmlTooltip : ''\">\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n    </div>\n\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"tooltip\" -->\n    <ng-template #htmlTooltip>\n      <div\n        [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n        style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n        <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n      </div>\n    </ng-template>\n\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\n    @if (isExpandByMore) {\n      <button (click)=\"toggle()\" class=\"c-collapse\">\n        {{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}\n      </button>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n  }\n} @else {\n  <view [column]=\"column()\" [item]=\"item()\" [autoId]=\"context.autoId\" />\n}\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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DesktopCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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();\n@let _item = item();\n@let _autoId = autoId();\n\n@let _truncateEnable = truncateEnable();\n@let _truncateWidth = truncateWidth();\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\n\n@let _templateRef = templateRef();\n@let context =\n  {\n    item: _item.data,\n    column: _column,\n    autoId: _autoId,\n  };\n\n@if (_templateRef) {\n  <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n  @if (_truncateEnable) {\n    <div\n      #contentContainer\n      [style.max-width]=\"_truncateWidth\"\n      [class.c-ellipsis-html]=\"isCollapsed()\"\n      [sdTooltip]=\"isExpandByTooltip ? htmlTooltip : ''\">\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n    </div>\n\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"tooltip\" -->\n    <ng-template #htmlTooltip>\n      <div\n        [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n        style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n        <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n      </div>\n    </ng-template>\n\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\n    @if (isExpandByMore) {\n      <button (click)=\"toggle()\" class=\"c-collapse\">\n        {{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}\n      </button>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n  }\n} @else {\n  <view [column]=\"column()\" [item]=\"item()\" [autoId]=\"context.autoId\" />\n}\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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DesktopCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desktop-cell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdTooltipDirective, ViewComponent, TranslatePipe], template: "@let _column = column();\n@let _item = item();\n@let _autoId = autoId();\n\n@let _truncateEnable = truncateEnable();\n@let _truncateWidth = truncateWidth();\n@let isExpandByMore = isOverflowing() && _column?.cell?.truncate?.type === 'more';\n@let isExpandByTooltip = isOverflowing() && _column?.cell?.truncate?.type === 'tooltip';\n\n@let _templateRef = templateRef();\n@let context =\n  {\n    item: _item.data,\n    column: _column,\n    autoId: _autoId,\n  };\n\n@if (_templateRef) {\n  <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\n  @if (_truncateEnable) {\n    <div\n      #contentContainer\n      [style.max-width]=\"_truncateWidth\"\n      [class.c-ellipsis-html]=\"isCollapsed()\"\n      [sdTooltip]=\"isExpandByTooltip ? htmlTooltip : ''\">\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n    </div>\n\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"tooltip\" -->\n    <ng-template #htmlTooltip>\n      <div\n        [style.max-width]=\"'calc(' + _truncateWidth + ' * 1.5)'\"\n        style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\n        <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n      </div>\n    </ng-template>\n\n    <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\n    @if (isExpandByMore) {\n      <button (click)=\"toggle()\" class=\"c-collapse\">\n        {{ isCollapsed() ? ('core.component.form-builder.show-more' | translate) : ('core.component.form-builder.show-less' | translate) }}\n      </button>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"_templateRef; context: context\" />\n  }\n} @else {\n  <view [column]=\"column()\" [item]=\"item()\" [autoId]=\"context.autoId\" />\n}\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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { isSignal: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], cellDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellDef", required: true }] }] } });
 
 /**
  * Pipe gộp resolve metadata của 1 command theo row hiện tại — return 1 object
@@ -1293,10 +1293,10 @@ class CommandPipe {
         const tpl = command?.htmlTemplate;
         return typeof tpl === 'function' ? tpl(item.data) : undefined;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CommandPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: CommandPipe, isStandalone: true, name: "command" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: CommandPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: CommandPipe, isStandalone: true, name: "command" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CommandPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: CommandPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'command' }]
         }] });
@@ -1382,10 +1382,10 @@ class CommandFilterPipe {
         const title = this.#title(item, command);
         return `${icon || 'noicon'}-${StringUtilities.changeAliasLowerCase(title) || 'notitle'}`;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CommandFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: CommandFilterPipe, isStandalone: true, name: "filter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: CommandFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: CommandFilterPipe, isStandalone: true, name: "filter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CommandFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: CommandFilterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'filter' }]
         }] });
@@ -1395,10 +1395,10 @@ class DesktopCommand {
     // ==========================================
     // 1. SIGNAL INPUTS
     // ==========================================
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    item = input.required();
-    itemIndex = input.required();
-    commands = input([]);
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    itemIndex = input.required(...(ngDevMode ? [{ debugName: "itemIndex" }] : []));
+    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : []));
     // ==========================================
     // 2. COMPUTED
     // ==========================================
@@ -1406,24 +1406,24 @@ class DesktopCommand {
     itemKey = computed(() => {
         const data = this.item()?.data;
         return data?.['id']?.toString() || data?.['code']?.toString() || data?.['value']?.toString() || this.itemIndex().toString();
-    });
+    }, ...(ngDevMode ? [{ debugName: "itemKey" }] : []));
     // autoId của host: `<base>-command-<itemKey>` — đã unique theo row.
     // Template ghép tiếp `-<commandKey>` (và `-<childKey>` nếu child) cho mỗi button.
     autoId = computed(() => {
         const base = this.autoIdInput();
         return base ? `${base}-command-${this.itemKey()}` : '';
-    });
+    }, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
     // Commands signal (mặc định mảng rỗng).
-    _commands = computed(() => this.commands() || []);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DesktopCommand, isStandalone: true, selector: "desktop-command", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemIndex: { classPropertyName: "itemIndex", publicName: "itemIndex", isSignal: true, isRequired: true, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, ngImport: i0, template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span> {{ _childMeta.title }}</span>\n                </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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: CommandPipe, name: "command" }, { kind: "pipe", type: CommandFilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    _commands = computed(() => this.commands() || [], ...(ngDevMode ? [{ debugName: "_commands" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DesktopCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: DesktopCommand, isStandalone: true, selector: "desktop-command", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemIndex: { classPropertyName: "itemIndex", publicName: "itemIndex", isSignal: true, isRequired: true, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, ngImport: i0, template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span> {{ _childMeta.title }}</span>\n                </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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: CommandPipe, name: "command" }, { kind: "pipe", type: CommandFilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCommand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DesktopCommand, decorators: [{
             type: Component,
             args: [{ selector: 'desktop-command', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[attr.data-autoid]': 'autoId()',
                     }, imports: [CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, MatIconModule, CommandPipe, CommandFilterPipe], template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span> {{ _childMeta.title }}</span>\n                </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"] }]
-        }] });
+        }], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], itemIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIndex", required: true }] }], commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: false }] }] } });
 
 /* eslint-disable @angular-eslint/no-input-rename */
 // eslint-disable-next-line @angular-eslint/component-class-suffix
@@ -1707,10 +1707,10 @@ class SdPopupExport {
         }
         return '';
     };
-    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=\"sd-image-data-empty\" 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-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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", 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: "20.3.23", 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=\"sd-image-data-empty\" 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-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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPopupExport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", 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=\"sd-image-data-empty\" 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-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: [{
@@ -1732,17 +1732,17 @@ class SdTableColumnFilterDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    sdTableColumnFilterDef = input.required();
+    sdTableColumnFilterDef = input.required(...(ngDevMode ? [{ debugName: "sdTableColumnFilterDef" }] : []));
     templateRef = inject(TemplateRef);
-    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: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableColumnFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: SdTableColumnFilterDefDirective, isStandalone: true, selector: "[sdTableColumnFilterDef]", inputs: { sdTableColumnFilterDef: { classPropertyName: "sdTableColumnFilterDef", publicName: "sdTableColumnFilterDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableColumnFilterDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableColumnFilterDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdTableColumnFilterDef]',
                 }]
-        }] });
+        }], propDecorators: { sdTableColumnFilterDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdTableColumnFilterDef", required: true }] }] } });
 
 // sticky-shadow.directive.ts
 /**
@@ -1840,10 +1840,10 @@ class StickyShadowDirective {
                 this.#setShadow(container, colClass, 'sticky-shadow-left', true);
         }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: StickyShadowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: StickyShadowDirective, isStandalone: true, selector: "[stickyShadow]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StickyShadowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: StickyShadowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stickyShadow]',
@@ -1853,10 +1853,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class SdColumnResizeDirective {
     // Bật/tắt resize cho cell này
-    sdColumnResize = input.required();
+    sdColumnResize = input.required(...(ngDevMode ? [{ debugName: "sdColumnResize" }] : []));
     // min/max width tùy chọn (chuỗi 'NNpx'); nếu không phải px sẽ bỏ qua
-    minWidth = input();
-    maxWidth = input();
+    minWidth = input(...(ngDevMode ? [undefined, { debugName: "minWidth" }] : []));
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : []));
     // Emit width cuối cùng dạng 'NNpx' khi mouseup
     resizeEnd = output();
     #el = inject((ElementRef));
@@ -1961,16 +1961,16 @@ class SdColumnResizeDirective {
         const m = /^(\d+(?:\.\d+)?)px$/i.exec(value.trim());
         return m ? parseFloat(m[1]) : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdColumnResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: SdColumnResizeDirective, isStandalone: true, selector: "[sdColumnResize]", inputs: { sdColumnResize: { classPropertyName: "sdColumnResize", publicName: "sdColumnResize", isSignal: true, isRequired: true, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdColumnResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: SdColumnResizeDirective, isStandalone: true, selector: "[sdColumnResize]", inputs: { sdColumnResize: { classPropertyName: "sdColumnResize", publicName: "sdColumnResize", isSignal: true, isRequired: true, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sdColumnResize]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { sdColumnResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdColumnResize", required: true }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }] } });
 
 const MapToSdTableItem = (item) => ({
     data: item,
@@ -2052,10 +2052,10 @@ class SdGroupPipe {
         });
         return result;
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: SdGroupPipe, isStandalone: true, name: "sdGroup" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdGroupPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'sdGroup' }]
         }] });
@@ -2112,10 +2112,10 @@ class SdSelectionDisabledPipe {
         }
         return true;
     };
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionDisabledPipe, isStandalone: true, name: "selectionDisabled" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionDisabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionDisabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectionDisabled',
@@ -2148,10 +2148,10 @@ class SdSelectionVisibleSelectAllPipe {
         }
         return false;
     };
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, isStandalone: true, name: "selectionVisibleSelectAll" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionVisibleSelectAllPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectionVisibleSelectAll',
@@ -2227,10 +2227,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.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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionVisiblePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionVisiblePipe, isStandalone: true, name: "selectionVisible" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionVisiblePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSelectionVisiblePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectionVisible',
@@ -2242,8 +2242,8 @@ class TableExportService {
     // ==========================================
     // SIGNAL STATE (Component sẽ bind trực tiếp vào đây)
     // ==========================================
-    exporting = signal(false);
-    exportTitle = signal('Export');
+    exporting = signal(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
+    exportTitle = signal('Export', ...(ngDevMode ? [{ debugName: "exportTitle" }] : []));
     // ==========================================
     // PUBLIC METHODS
     // ==========================================
@@ -2487,10 +2487,10 @@ class TableExportService {
             return [];
         return option.export?.columns?.filter(e => !e.export?.disabled) || [];
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: TableExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: TableExportService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: TableExportService, decorators: [{
             type: Injectable
         }] });
 
@@ -2695,10 +2695,10 @@ class TableFormatService {
         }
         return undefined;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: TableFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: TableFormatService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableFormatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: TableFormatService, decorators: [{
             type: Injectable
         }] });
 
@@ -2929,10 +2929,10 @@ class SdTableFilterService {
             columnOperator,
         };
     };
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableFilterService, deps: [{ token: i1$1.SdStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableFilterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableFilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTableFilterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.SdStorageService }] });
 
@@ -2952,10 +2952,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.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MatPaginatorIntlCro, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MatPaginatorIntlCro });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatPaginatorIntlCro, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: MatPaginatorIntlCro, decorators: [{
             type: Injectable
         }] });
 class SdTable extends SdBaseSecureComponent {
@@ -2963,27 +2963,27 @@ class SdTable extends SdBaseSecureComponent {
     // ==========================================
     // 1. SIGNAL INPUTS
     // ==========================================
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    autoId = computed(() => (this.autoIdInput() ? `components-table-${this.autoIdInput()}` : undefined));
-    option = input.required();
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    autoId = computed(() => (this.autoIdInput() ? `components-table-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : []));
+    option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
     // ==========================================
     // 2. SIGNAL QUERIES
     // ==========================================
-    table = viewChild(MatTable);
-    configComponent = viewChild(ConfigComponent);
-    sdPopupExport = viewChild(SdPopupExport);
-    scroll = viewChild(SdScrollDirective);
-    quickAction = viewChild(SdQuickAction);
-    externalFilter = viewChild(ExternalFilterComponent);
-    mobileFilter = viewChild(MobileFilterComponent);
-    paginator = viewChild(MatPaginator);
-    sort = viewChild(MatSort);
-    sdSubInformation = contentChild(SdTableExpandDefDirective);
-    sdGroupDef = contentChild(SdTableGroupDefDirective);
-    sdCellDefs = contentChildren(SdTableCellDefDirective);
-    sdFooterDefs = contentChildren(SdMaterialFooterDefDirective);
-    sdFilterDefs = contentChildren(SdTableFilterDefDirective);
-    sdTitleDefs = contentChildren(SdTableTitleDefDirective);
+    table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "table" }] : []));
+    configComponent = viewChild(ConfigComponent, ...(ngDevMode ? [{ debugName: "configComponent" }] : []));
+    sdPopupExport = viewChild(SdPopupExport, ...(ngDevMode ? [{ debugName: "sdPopupExport" }] : []));
+    scroll = viewChild(SdScrollDirective, ...(ngDevMode ? [{ debugName: "scroll" }] : []));
+    quickAction = viewChild(SdQuickAction, ...(ngDevMode ? [{ debugName: "quickAction" }] : []));
+    externalFilter = viewChild(ExternalFilterComponent, ...(ngDevMode ? [{ debugName: "externalFilter" }] : []));
+    mobileFilter = viewChild(MobileFilterComponent, ...(ngDevMode ? [{ debugName: "mobileFilter" }] : []));
+    paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
+    sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    sdSubInformation = contentChild(SdTableExpandDefDirective, ...(ngDevMode ? [{ debugName: "sdSubInformation" }] : []));
+    sdGroupDef = contentChild(SdTableGroupDefDirective, ...(ngDevMode ? [{ debugName: "sdGroupDef" }] : []));
+    sdCellDefs = contentChildren(SdTableCellDefDirective, ...(ngDevMode ? [{ debugName: "sdCellDefs" }] : []));
+    sdFooterDefs = contentChildren(SdMaterialFooterDefDirective, ...(ngDevMode ? [{ debugName: "sdFooterDefs" }] : []));
+    sdFilterDefs = contentChildren(SdTableFilterDefDirective, ...(ngDevMode ? [{ debugName: "sdFilterDefs" }] : []));
+    sdTitleDefs = contentChildren(SdTableTitleDefDirective, ...(ngDevMode ? [{ debugName: "sdTitleDefs" }] : []));
     // ==========================================
     // 3. COMPUTED FROM QUERIES
     // ==========================================
@@ -2995,7 +2995,7 @@ class SdTable extends SdBaseSecureComponent {
                 map[field] = def;
         }
         return map;
-    });
+    }, ...(ngDevMode ? [{ debugName: "cellDef" }] : []));
     footerDef = computed(() => {
         const map = {};
         for (const def of this.sdFooterDefs()) {
@@ -3004,8 +3004,8 @@ class SdTable extends SdBaseSecureComponent {
                 map[field] = def;
         }
         return map;
-    });
-    hasFooter = computed(() => Object.keys(this.footerDef()).length > 0);
+    }, ...(ngDevMode ? [{ debugName: "footerDef" }] : []));
+    hasFooter = computed(() => Object.keys(this.footerDef()).length > 0, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
     titleDef = computed(() => {
         const map = {};
         for (const def of this.sdTitleDefs()) {
@@ -3014,19 +3014,19 @@ class SdTable extends SdBaseSecureComponent {
                 map[field] = def;
         }
         return map;
-    });
+    }, ...(ngDevMode ? [{ debugName: "titleDef" }] : []));
     // ==========================================
     // 4. SIGNAL STATE
     // ==========================================
-    tableOption = signal(undefined);
-    configuration = signal(undefined);
-    items = signal([]);
-    selectedTableItems = signal([]);
-    total = signal(undefined);
-    loading = signal(false);
-    isSelectAll = signal(false);
-    isFiltered = signal(false);
-    requireFiltered = signal(false);
+    tableOption = signal(undefined, ...(ngDevMode ? [{ debugName: "tableOption" }] : []));
+    configuration = signal(undefined, ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    selectedTableItems = signal([], ...(ngDevMode ? [{ debugName: "selectedTableItems" }] : []));
+    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    isSelectAll = signal(false, ...(ngDevMode ? [{ debugName: "isSelectAll" }] : []));
+    isFiltered = signal(false, ...(ngDevMode ? [{ debugName: "isFiltered" }] : []));
+    requireFiltered = signal(false, ...(ngDevMode ? [{ debugName: "requireFiltered" }] : []));
     #tableId = uuid.v4();
     filterRegister;
     key = uuid.v4();
@@ -3040,7 +3040,7 @@ class SdTable extends SdBaseSecureComponent {
     #cacheObjValues = {};
     #itemIndexMap = new WeakMap();
     #treeExpandState = new Map();
-    treeRevision = signal(0);
+    treeRevision = signal(0, ...(ngDevMode ? [{ debugName: "treeRevision" }] : []));
     // 1. Private Services
     #ref = inject(ChangeDetectorRef);
     #configService = inject(ConfigService);
@@ -3861,7 +3861,7 @@ class SdTable extends SdBaseSecureComponent {
      * Colspan cho cell sdGroupHeader trên group row = displayedColumns.length.
      * Span TOÀN BỘ width data row vì group row chỉ có 1 cell.
      */
-    sdGroupColspan = computed(() => (this.configuration()?.displayedColumns?.length || 1));
+    sdGroupColspan = computed(() => (this.configuration()?.displayedColumns?.length || 1), ...(ngDevMode ? [{ debugName: "sdGroupColspan" }] : []));
     /** Build context object truyền vào SdTableGroupDefDirective template. */
     groupContext = (header) => {
         const g = header.meta.group;
@@ -3971,7 +3971,7 @@ class SdTable extends SdBaseSecureComponent {
     pageOffset = computed(() => {
         const p = this.paginator();
         return (p?.pageIndex ?? 0) * (p?.pageSize ?? 0);
-    });
+    }, ...(ngDevMode ? [{ debugName: "pageOffset" }] : []));
     isReorderDisabled(item) {
         if ((item.meta.tree?.level ?? 0) > 0)
             return true;
@@ -4258,8 +4258,8 @@ class SdTable extends SdBaseSecureComponent {
         }
         return req;
     };
-    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 } }, host: { properties: { "attr.data-autoid": "autoId()", "attr.data-loading": "loading() ? \"true\" : \"false\"" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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 } }, host: { properties: { "attr.data-autoid": "autoId()", "attr.data-loading": "loading() ? \"true\" : \"false\"" } }, providers: [
             DatePipe,
             DecimalPipe,
             CdkColumnDef,
@@ -4271,7 +4271,7 @@ class SdTable extends SdBaseSecureComponent {
                 provide: MatPaginatorIntl,
                 useClass: MatPaginatorIntlCro,
             },
-        ], queries: [{ propertyName: "sdSubInformation", first: true, predicate: SdTableExpandDefDirective, descendants: true, isSignal: true }, { propertyName: "sdGroupDef", first: true, predicate: SdTableGroupDefDirective, descendants: true, isSignal: true }, { propertyName: "sdCellDefs", predicate: SdTableCellDefDirective, isSignal: true }, { propertyName: "sdFooterDefs", predicate: SdMaterialFooterDefDirective, isSignal: true }, { propertyName: "sdFilterDefs", predicate: SdTableFilterDefDirective, isSignal: true }, { propertyName: "sdTitleDefs", predicate: SdTableTitleDefDirective, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "configComponent", first: true, predicate: ConfigComponent, descendants: true, isSignal: true }, { propertyName: "sdPopupExport", first: true, predicate: SdPopupExport, descendants: true, isSignal: true }, { propertyName: "scroll", first: true, predicate: SdScrollDirective, descendants: true, isSignal: true }, { propertyName: "quickAction", first: true, predicate: SdQuickAction, descendants: true, isSignal: true }, { propertyName: "externalFilter", first: true, predicate: ExternalFilterComponent, descendants: true, isSignal: true }, { propertyName: "mobileFilter", first: true, predicate: MobileFilterComponent, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let _configuration = configuration();\n@let _tableOption = tableOption()!;\n@let _loading = loading();\n@let _items = items();\n@let _total = total();\n@let _isFiltered = isFiltered();\n@let _requireFiltered = requireFiltered();\n@let _export = _tableOption?.export;\n@let _exporting = exporting();\n@let _titleDef = titleDef();\n\n@if (_configuration) {\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\n    <external-filter\n      class=\"mb-16\"\n      [autoId]=\"autoId()\"\n      [filterRegister]=\"filterRegister\"\n      [filter]=\"_tableOption.filter!\"\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\n    </external-filter>\n  }\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption : groupExpandState;\n  <ng-content select=\"[sdTableTop]\"></ng-content>\n  <div class=\"c-container\">\n    @if (_loading) {\n      <div class=\"c-loading\">\n        <mat-spinner></mat-spinner>\n      </div>\n    }\n    <div\n      class=\"c-table\"\n      sdScroll\n      stickyShadow\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\n      [style.min-height]=\"_tableOption.style?.minHeight\">\n      <table\n        mat-table\n        [dataSource]=\"groupedItems\"\n        [trackBy]=\"trackBy\"\n        matSort\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\n        multiTemplateDataRows\n        cdkDropList\n        [cdkDropListData]=\"groupedItems\"\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\n        @if (_tableOption.rowReorder?.enabled) {\n          <ng-container matColumnDef=\"sdReorder\">\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\n              @if (!row.meta?.group?.items?.length) {\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\n                </mat-icon>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef></td>\n          </ng-container>\n        }\n\n        @if (_tableOption.tree) {\n          <ng-container matColumnDef=\"sdTreeToggle\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"sd-tree-toggle-cell p-0\"\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\n              @if (row.meta?.tree) {\n                <div\n                  class=\"sd-tree-toggle-inner\"\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\n                  @if (row.meta.tree.hasChildren) {\n                    @if (row.meta.tree.isExpanding) {\n                      <div class=\"lds-ring sd-tree-spinner\">\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                      </div>\n                    } @else {\n                      <sd-button\n                        type=\"link\"\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\n                        width=\"35px\">\n                      </sd-button>\n                    }\n                  }\n                </div>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef></td>\n          </ng-container>\n        }\n\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\n            @if (sdSubInformation()?.templateRef) {\n              @if (_tableOption.expand?.always) {\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\n              } @else {\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\n                  @if (item.isExpanded) {\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\n                  }\n                </div>\n              }\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td mat-cell *matCellDef=\"let element\">\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\n              <sd-button\n                type=\"link\"\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\n                (click)=\"onExpand(element)\"\n                width=\"35px\">\n              </sd-button>\n            }\n            @if (element.isExpanding) {\n              <div class=\"lds-ring\">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n              </div>\n            }\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sdSelection\" sticky>\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\n            @if (visibleSelectAll) {\n              <mat-checkbox\n                class=\"c-selection px-8\"\n                color=\"primary\"\n                [ngModel]=\"isSelectAll()\"\n                (ngModelChange)=\"isSelectAll.set($event)\"\n                (change)=\"onSelectAll()\">\n              </mat-checkbox>\n            }\n          </th>\n\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\n            @let visible = item | selectionVisible: _tableOption.selector;\n            @if (visible) {\n              @if (_tableOption.selector?.single) {\n                <mat-radio-button\n                  class=\"c-selection px-8\"\n                  color=\"primary\"\n                  [checked]=\"item.meta.selector.isSelected\"\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\n                </mat-radio-button>\n              } @else {\n                <mat-checkbox\n                  class=\"c-selection px-8\"\n                  color=\"primary\"\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\n                  (change)=\"onSelect(item)\"\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\n                </mat-checkbox>\n              }\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        @if (_tableOption.index?.enabled) {\n          @let _pageOffset = pageOffset();\n          @let _indexWidth = _tableOption.index?.width || '50px';\n          <ng-container matColumnDef=\"sdIndex\" sticky>\n            <th\n              class=\"text-center p-0\"\n              mat-header-cell\n              *matHeaderCellDef\n              [style.width]=\"_indexWidth\"\n              [style.min-width]=\"_indexWidth\"\n              [style.max-width]=\"_indexWidth\"\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\n              {{ _tableOption.index?.title || '#' }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = dataIndex\" [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\">\n              @if (!item?.meta?.group?.isGroupHeader) {\n                @if (_tableOption.tree && item?.meta?.tree?.indexPath?.length) {\n                  <!-- why: tree \u2192 STT ph\u00E2n c\u1EA5p 1, 1.2, 1.2.1 (indexPath join '.'). T\u00F4 \u0111\u1EADm root (level 0). -->\n                  <span [class.sd-stt-root]=\"(item.meta.tree.level ?? 0) === 0\">\n                    {{ item.meta.tree.indexPath.join('.') }}\n                  </span>\n                } @else {\n                  {{ _pageOffset + i + 1 }}\n                }\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\"></td>\n          </ng-container>\n        }\n        <ng-container\n          matColumnDef=\"sdCommand\"\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\n            <desktop-command\n              [autoId]=\"autoId()\"\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\n              [item]=\"item\"\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <!-- why: group header row d\u00F9ng matRowDef RI\u00CANG v\u1EDBi column list ['sdGroupHeader']\n             qua predicate when:isGroupHeaderRow. Cell colspan = displayedColumns.length \u0111\u1EC3\n             span TO\u00C0N B\u1ED8 width data row. Tr\u00E1nh colspan trick overflow row khi c\u00E1c TD kh\u00E1c render. -->\n        <ng-container matColumnDef=\"sdGroupHeader\">\n          <td\n            class=\"p-0 sd-group-header-cell\"\n            mat-cell\n            *matCellDef=\"let item\"\n            [attr.colspan]=\"sdGroupColspan()\">\n            <div class=\"sd-group-row d-flex align-items-center py-8\">\n              <!-- why: slot 42px kh\u1EDBp width v\u1EDBi sd-selection-cell data row \u2192 checkbox group c\u0103n TR\u1EE4C d\u1ECDc \u0111\u00FAng v\u1EDBi checkbox data. -->\n              @if (_tableOption.selector?.visible && !_tableOption.selector?.single) {\n                <div class=\"sd-group-selection-slot d-flex align-items-center justify-content-center\">\n                  <mat-checkbox\n                    class=\"c-selection\"\n                    color=\"primary\"\n                    [checked]=\"isGroupAllSelected(item)\"\n                    [indeterminate]=\"isGroupIndeterminate(item)\"\n                    (change)=\"onSelectGroup(item, $event.checked)\">\n                  </mat-checkbox>\n                </div>\n              } @else {\n                <div class=\"sd-group-selection-slot\"></div>\n              }\n              @if (_tableOption.group?.collapsible) {\n                <sd-button\n                  type=\"link\"\n                  [prefixIcon]=\"item.meta.group.isExpanded ? 'expand_more' : 'chevron_right'\"\n                  width=\"32px\"\n                  (click)=\"toggleGroupExpand(item)\">\n                </sd-button>\n              }\n              @if (sdGroupDef()?.templateRef; as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl; context: groupContext(item)\"></ng-container>\n              } @else {\n                <span class=\"T14R\">{{ item.meta.group.values | json }}</span>\n              }\n            </div>\n          </td>\n        </ng-container>\n        <!-- why: filler column \u1EDF cu\u1ED1i h\u1EA5p th\u1EE5 leftover space khi t\u1ED5ng width c\u00E1c c\u1ED9t data < container \u2014 gi\u1EEF cho selection/STT/command kh\u00F4ng b\u1ECB d\u00E3n. -->\n        <ng-container matColumnDef=\"sdFiller\">\n          <th class=\"sd-filler-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td class=\"sd-filler-cell p-0\" mat-cell *matCellDef=\"let item\"></td>\n          <td class=\"sd-filler-cell p-0\" mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        @for (column of _configuration.firstColumns; track column.field) {\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"px-8 py-8 c-th\"\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\n              [minWidth]=\"column.minWidth\"\n              [maxWidth]=\"column.maxWidth\"\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\n              [style.width]=\"column.width\"\n              [style.min-width]=\"column.minWidth || column.width\"\n              [style.max-width]=\"column.maxWidth\"\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\n              <div>\n                @if (column.type === 'children') {\n                  <div\n                    aria-hidden=\"true\"\n                    class=\"c-header-title\"\n                    [class.justify-content-end]=\"column.align === 'right'\"\n                    [class.text-right]=\"column.align === 'right'\">\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                  </div>\n                } @else {\n                  <div\n                    aria-hidden=\"true\"\n                    mat-sort-header\n                    class=\"c-header-title\"\n                    [class.justify-content-end]=\"column.align === 'right'\"\n                    [class.text-right]=\"column.align === 'right'\"\n                    [disabled]=\"!column.sortable\">\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                  </div>\n                  @let hideInlineFilter =\n                    _tableOption.filter?.disabled ||\n                    _tableOption.filter?.hideInlineFilter === true ||\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\n                  @if (!hideInlineFilter) {\n                    <ng-container *sdDesktop>\n                      <column-filter\n                        [autoId]=\"autoId()\"\n                        [value]=\"columnFilter?.[column.field!]!\"\n                        [operator]=\"columnOperator[column.field]\"\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\n                        [columnFilter]=\"columnFilter!\"\n                        [cacheValues]=\"cacheValues\"\n                        [column]=\"column\"\n                        (filterChange)=\"onFilterChange()\"\n                        (filterCommit)=\"onFilterCommit()\">\n                      </column-filter>\n                    </ng-container>\n                  }\n                }\n              </div>\n            </th>\n            <td\n              class=\"c-td px-0\"\n              [class.d-none]=\"column.type === 'children'\"\n              mat-cell\n              *matCellDef=\"let item\"\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\n              @if (column.type !== 'children' && !item?.meta?.group?.isGroupHeader) {\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef>\n              <ng-container *ngIf=\"footerDef()[column.field]\">\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\n                </ng-container>\n              </ng-container>\n            </td>\n          </ng-container>\n        }\n        @for (column of _configuration.secondColumns; track column.field) {\n          <ng-container [matColumnDef]=\"column.field\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"c-th px-8\"\n              [style.width]=\"column.width\"\n              [style.min-width]=\"column.minWidth || column.width\"\n              [style.max-width]=\"column.maxWidth\">\n              <div>\n                <div\n                  aria-hidden=\"true\"\n                  mat-sort-header\n                  class=\"c-header-title\"\n                  [class.justify-content-end]=\"column.align === 'right'\"\n                  [class.text-right]=\"column.align === 'right'\"\n                  [disabled]=\"!column.sortable\">\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                </div>\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\n                  <ng-container *sdDesktop>\n                    <column-filter\n                      [autoId]=\"autoId()\"\n                      [value]=\"columnFilter?.[column.field!]!\"\n                      [operator]=\"columnOperator[column.field]\"\n                      [columnFilter]=\"columnFilter!\"\n                      [cacheValues]=\"cacheValues\"\n                      [column]=\"column\"\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\n                      (filterChange)=\"onFilterChange()\"\n                      (filterCommit)=\"onFilterCommit()\">\n                    </column-filter>\n                  </ng-container>\n                }\n              </div>\n            </th>\n            <td\n              class=\"c-td px-0\"\n              mat-cell\n              *matCellDef=\"let item\"\n              [sdHoverCopy]=\"item[column.field]\"\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\n              @if (column.type !== 'children') {\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef>\n              <ng-container *ngIf=\"footerDef()[column.field]\">\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\n                </ng-container>\n              </ng-container>\n            </td>\n          </ng-container>\n        }\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\n        @if (!!_configuration.secondHeaders.length) {\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\n        }\n        <!-- Group header row \u2014 ch\u1EC9 1 cell sdGroupHeader colspan to\u00E0n width. -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['sdGroupHeader']; when: isGroupHeaderRow\"\n          class=\"c-group-row-tr\"></tr>\n\n        <!-- Data row \u2014 d\u00F9ng displayedColumns \u0111\u1EA7y \u0111\u1EE7; when isDataRow \u0111\u1EC3 lo\u1EA1i tr\u1EEB group header. -->\n        <tr\n          mat-row\n          cdkDrag\n          [cdkDragData]=\"row\"\n          [cdkDragDisabled]=\"\n            !_tableOption.rowReorder?.enabled ||\n            !!row.meta?.group?.items?.length ||\n            (row.meta?.tree?.level ?? 0) > 0 ||\n            isReorderDisabled(row)\n          \"\n          *matRowDef=\"let row; columns: _configuration.displayedColumns; when: isDataRow\"\n          matRipple\n          class=\"c-row\"\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\n          [ngStyle]=\"rowStyle(row)\"\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\n\n        <!-- Sub-information row \u2014 also gated b\u1EDFi isDataRow \u0111\u1EC3 KH\u00D4NG render empty expand row d\u01B0\u1EDBi group header. -->\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']; when: isDataRow\" class=\"c-detail-row\"></tr>\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\n        }\n      </table>\n      @if (!_loading && !_total) {\n        <div class=\"c-no-data-row\">\n          @if (_isFiltered) {\n            @if (tableConfiguration?.images?.filterEmpty) {\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\n            } @else {\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\n            }\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\n          } @else {\n            @if (_requireFiltered) {\n              @if (tableConfiguration?.images?.filterRequired) {\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\n              } @else {\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\n              }\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\n            } @else {\n              @if (tableConfiguration?.images?.dataEmpty) {\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\n              } @else {\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\n              }\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"c-paginator\">\n      <div class=\"c-action\">\n        <ng-container *sdDesktop>\n          @if (_tableOption.reload?.visible) {\n            <sd-button\n              class=\"mr-8\"\n              [title]=\"'core.component.table.reload' | translate\"\n              prefixIcon=\"refresh\"\n              (click)=\"reload()\"\n              [disabled]=\"!_items.length\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n        @if (_export && _items.length) {\n          @if (_export.type === 'custom') {\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\n          } @else {\n            @if (_export.visible) {\n              @if (_exporting) {\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\n              } @else {\n                @if (_export.visible === 'ALL' || !_export.visible) {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\n                  <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\n                    </button>\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\n                    </button>\n                  </mat-menu>\n                } @else if (_export.visible === 'EXCEL') {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\n                } @else if (_export.visible === 'CSV') {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\n                }\n              }\n            }\n          }\n        }\n\n        <ng-container *sdDesktop>\n          @if (configComponent()) {\n            <sd-button\n              class=\"mr-8\"\n              [title]=\"'core.component.table.setup-short' | translate\"\n              prefixIcon=\"settings\"\n              (click)=\"configComponent()!.open()\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\n        <ng-container *sdMobile>\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\n            <sd-button\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\n              class=\"mr-8\"\n              prefixIcon=\"filter_alt\"\n              (click)=\"mobileFilter()!.open()\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n      </div>\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\n      <ng-container *sdDesktop>\n        <mat-paginator\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\n          [length]=\"_total\"\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\n      </ng-container>\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\n      <ng-container *sdMobile>\n        <mat-paginator\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\n          [length]=\"_total\"\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\n          [showFirstLastButtons]=\"false\"\n          hidePageSize></mat-paginator>\n      </ng-container>\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\n      <ng-container *sdDesktop>\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\n          <div class=\"T14R pr-16\">\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\n          </div>\n        }\n      </ng-container>\n    </div>\n  </div>\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\n  @if (_tableOption.config?.visible) {\n    <config [tableOption]=\"_tableOption\" />\n  }\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\n  @if (!_tableOption.filter?.disabled && filterRegister) {\n    <mobile-filter\n      [autoId]=\"autoId()\"\n      [filter]=\"_tableOption.filter!\"\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\n      [columns]=\"_configuration.firstColumns\"\n      [filterDefs]=\"sdFilterDefs()\"\n      [filterRegister]=\"filterRegister\"\n      [cacheValues]=\"cacheValues\">\n    </mobile-filter>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;overflow:auto;width:100%;height:100%}:host .c-header-title{height:40px;display:flex;align-items:center}:host .c-container{position:relative;min-height:50px;display:flex;flex-direction:column;flex:1}:host .c-container .c-table{position:relative;flex:1;display:flex;flex-direction:column}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-mdc-header-row{height:40px}:host .c-container .c-table table tr.c-second-header.mat-mdc-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-mdc-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-mdc-cell,:host .c-container .c-table table td.mat-mdc-footer-cell,:host .c-container .c-table table th.mat-mdc-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{vertical-align:middle;font-weight:500;font-size:14px;line-height:20px;color:#212121}:host .c-container .c-table .c-th.sd-col-resize-host{position:relative}:host .c-container .c-table .c-th.sd-resizing{-webkit-user-select:none;user-select:none}:host .c-container .c-table .c-th .sd-col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:2}:host .c-container .c-table .c-th .sd-col-resize-handle:hover{background:#00000014}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-table .c-no-data-row{flex:1;width:100%;position:sticky;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .c-container .c-table .c-no-data-row .c-image{margin-bottom:16px;width:96px}:host .c-container .c-loading{position:absolute;inset:0 0 56px;background:#00000026;z-index:2;display:flex;align-items:center;justify-content:center}:host .c-container .c-paginator{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#fff}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{text-align:center;background-color:#fff;border:none!important}:host .c-container .c-empty mat-icon{font-size:150px;margin-top:30px;margin-bottom:30px;opacity:.2;width:auto;height:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px #2f313629}:host .lds-ring{display:inline-block;position:relative;width:40px;height:40px}:host .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:32px;height:32px;margin:4px;border:4px solid #cef;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#cef transparent transparent transparent}:host .lds-ring div:nth-child(1){animation-delay:-.45s}:host .lds-ring div:nth-child(2){animation-delay:-.3s}:host .lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .sd-reorder-header,:host .sd-reorder-cell{width:40px;min-width:40px;padding:0 4px;box-sizing:border-box}:host .sd-reorder-cell mat-icon{cursor:grab;color:#00000061;display:flex;align-items:center}:host .sd-reorder-cell mat-icon:active{cursor:grabbing}:host .sd-reorder-cell mat-icon.sd-reorder-disabled{opacity:.3;cursor:not-allowed;pointer-events:none}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header-arrow{display:none!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-repeat:no-repeat;background-position:center right 0;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}:host ::ng-deep .c-paginator .mat-mdc-paginator .mdc-text-field--outlined .mat-mdc-form-field-infix,:host ::ng-deep .c-paginator .mat-mdc-paginator .mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:2px;padding-bottom:2px;min-height:32px}:host ::ng-deep .c-paginator .mat-mdc-paginator-range-label{margin:0 4px}:host ::ng-deep .c-paginator .mat-mdc-paginator-page-size-select mat-select{margin-top:2px!important}:host ::ng-deep .cdk-drag-preview{box-shadow:0 4px 12px #00000026;background:#fff;display:table;width:100%}:host ::ng-deep .cdk-drag-preview td{padding:0 8px;border-bottom:1px solid rgba(0,0,0,.12)}:host ::ng-deep .cdk-drag-placeholder{opacity:0}:host ::ng-deep .cdk-drop-list-dragging tr.c-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .sd-selection-cell{width:42px;min-width:42px;max-width:42px}:host ::ng-deep .sd-filler-cell{width:auto;min-width:0;padding:0!important;border:0}:host ::ng-deep .sd-group-header-cell{background:#f5f7fc;border-top:1px solid #e6e9f2;border-bottom:1px solid #e6e9f2}:host ::ng-deep .sd-group-row{min-height:36px}:host ::ng-deep .sd-group-selection-slot{width:42px;min-width:42px;max-width:42px}:host ::ng-deep .c-selection{transform:scale(.85);transform-origin:center}:host ::ng-deep .sd-tree-toggle-cell{width:40px;min-width:40px;max-width:100px}:host ::ng-deep .sd-tree-toggle-inner{display:flex;align-items:center;min-height:40px}:host ::ng-deep .sd-tree-spinner{transform:scale(.5);margin:0 auto}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-0{background:#fbfcfe}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-0>td{font-weight:500}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-1{background:#fff}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-2{background:#fafbfd}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-3{background:#f6f8fb}:host ::ng-deep tr.c-row.sd-tree-row:not(.sd-tree-level-0)>td.sd-tree-toggle-cell .sd-tree-toggle-inner{border-left:1px dashed #d8dde6}:host ::ng-deep .sd-stt-root{font-weight:700;color:#1f2330}\n", ":host ::ng-deep .sticky-shadow-right{overflow:visible!important}:host ::ng-deep .sticky-shadow-right:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:8px;transform:translate(100%);background:linear-gradient(to right,rgba(0,0,0,.12),transparent);pointer-events:none}:host ::ng-deep .sticky-shadow-left{overflow:visible!important}:host ::ng-deep .sticky-shadow-left:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:8px;transform:translate(-100%);background:linear-gradient(to left,rgba(0,0,0,.12),transparent);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: DesktopCommand, selector: "desktop-command", inputs: ["autoId", "item", "itemIndex", "commands"] }, { kind: "component", type: DesktopCellComponent, selector: "desktop-cell", inputs: ["column", "item", "cellDef"] }, { kind: "component", type: ColumnTitleComponent, selector: "column-title", inputs: ["column", "titleDef"] }, { kind: "component", type: ExternalFilterComponent, selector: "external-filter", inputs: ["autoId", "filter", "externalFilters", "filterRegister"] }, { kind: "component", type: ConfigComponent, selector: "config", inputs: ["tableOption"], outputs: ["changes"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { kind: "component", type: MobileFilterComponent, selector: "mobile-filter", inputs: ["autoId", "filter", "externalFilters", "columns", "filterDefs", "filterRegister", "cacheValues"] }, { kind: "pipe", type: SdGroupPipe, name: "sdGroup" }, { kind: "pipe", type: SdTreePipe, name: "sdTree" }, { kind: "pipe", type: SdSelectionVisiblePipe, name: "selectionVisible" }, { kind: "pipe", type: SdSelectionVisibleSelectAllPipe, name: "selectionVisibleSelectAll" }, { kind: "pipe", type: SdSelectionDisabledPipe, name: "selectionDisabled" }, { kind: "directive", type: SdScrollDirective, selector: "[sdScroll]" }, { kind: "directive", type: SdDesktopDirective, selector: "[sdDesktop]" }, { kind: "directive", type: SdMobileDirective, selector: "[sdMobile]" }, { kind: "directive", type: SdHoverCopyDirective, selector: "[sdHoverCopy]", inputs: ["sdHoverCopy", "sdHoverCopyDisabled"] }, { kind: "component", type: SelectorActionComponent, selector: "selector-action", inputs: ["tableOption", "selectedTableItems"], outputs: ["clear"] }, { kind: "directive", type: StickyShadowDirective, selector: "[stickyShadow]" }, { kind: "directive", type: SdColumnResizeDirective, selector: "[sdColumnResize]", inputs: ["sdColumnResize", "minWidth", "maxWidth"], outputs: ["resizeEnd"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+        ], queries: [{ propertyName: "sdSubInformation", first: true, predicate: SdTableExpandDefDirective, descendants: true, isSignal: true }, { propertyName: "sdGroupDef", first: true, predicate: SdTableGroupDefDirective, descendants: true, isSignal: true }, { propertyName: "sdCellDefs", predicate: SdTableCellDefDirective, isSignal: true }, { propertyName: "sdFooterDefs", predicate: SdMaterialFooterDefDirective, isSignal: true }, { propertyName: "sdFilterDefs", predicate: SdTableFilterDefDirective, isSignal: true }, { propertyName: "sdTitleDefs", predicate: SdTableTitleDefDirective, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "configComponent", first: true, predicate: ConfigComponent, descendants: true, isSignal: true }, { propertyName: "sdPopupExport", first: true, predicate: SdPopupExport, descendants: true, isSignal: true }, { propertyName: "scroll", first: true, predicate: SdScrollDirective, descendants: true, isSignal: true }, { propertyName: "quickAction", first: true, predicate: SdQuickAction, descendants: true, isSignal: true }, { propertyName: "externalFilter", first: true, predicate: ExternalFilterComponent, descendants: true, isSignal: true }, { propertyName: "mobileFilter", first: true, predicate: MobileFilterComponent, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let _configuration = configuration();\n@let _tableOption = tableOption()!;\n@let _loading = loading();\n@let _items = items();\n@let _total = total();\n@let _isFiltered = isFiltered();\n@let _requireFiltered = requireFiltered();\n@let _export = _tableOption?.export;\n@let _exporting = exporting();\n@let _titleDef = titleDef();\n\n@if (_configuration) {\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\n    <external-filter\n      class=\"mb-16\"\n      [autoId]=\"autoId()\"\n      [filterRegister]=\"filterRegister\"\n      [filter]=\"_tableOption.filter!\"\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\n    </external-filter>\n  }\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption : groupExpandState;\n  <ng-content select=\"[sdTableTop]\"></ng-content>\n  <div class=\"c-container\">\n    @if (_loading) {\n      <div class=\"c-loading\">\n        <mat-spinner></mat-spinner>\n      </div>\n    }\n    <div\n      class=\"c-table\"\n      sdScroll\n      stickyShadow\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\n      [style.min-height]=\"_tableOption.style?.minHeight\">\n      <table\n        mat-table\n        [dataSource]=\"groupedItems\"\n        [trackBy]=\"trackBy\"\n        matSort\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\n        multiTemplateDataRows\n        cdkDropList\n        [cdkDropListData]=\"groupedItems\"\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\n        @if (_tableOption.rowReorder?.enabled) {\n          <ng-container matColumnDef=\"sdReorder\">\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\n              @if (!row.meta?.group?.items?.length) {\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\n                </mat-icon>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef></td>\n          </ng-container>\n        }\n\n        @if (_tableOption.tree) {\n          <ng-container matColumnDef=\"sdTreeToggle\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"sd-tree-toggle-cell p-0\"\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\n              @if (row.meta?.tree) {\n                <div\n                  class=\"sd-tree-toggle-inner\"\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\n                  @if (row.meta.tree.hasChildren) {\n                    @if (row.meta.tree.isExpanding) {\n                      <div class=\"lds-ring sd-tree-spinner\">\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                      </div>\n                    } @else {\n                      <sd-button\n                        type=\"link\"\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\n                        width=\"35px\">\n                      </sd-button>\n                    }\n                  }\n                </div>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef></td>\n          </ng-container>\n        }\n\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\n            @if (sdSubInformation()?.templateRef) {\n              @if (_tableOption.expand?.always) {\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\n              } @else {\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\n                  @if (item.isExpanded) {\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\n                  }\n                </div>\n              }\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td mat-cell *matCellDef=\"let element\">\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\n              <sd-button\n                type=\"link\"\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\n                (click)=\"onExpand(element)\"\n                width=\"35px\">\n              </sd-button>\n            }\n            @if (element.isExpanding) {\n              <div class=\"lds-ring\">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n              </div>\n            }\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sdSelection\" sticky>\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\n            @if (visibleSelectAll) {\n              <mat-checkbox\n                class=\"c-selection px-8\"\n                color=\"primary\"\n                [ngModel]=\"isSelectAll()\"\n                (ngModelChange)=\"isSelectAll.set($event)\"\n                (change)=\"onSelectAll()\">\n              </mat-checkbox>\n            }\n          </th>\n\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\n            @let visible = item | selectionVisible: _tableOption.selector;\n            @if (visible) {\n              @if (_tableOption.selector?.single) {\n                <mat-radio-button\n                  class=\"c-selection px-8\"\n                  color=\"primary\"\n                  [checked]=\"item.meta.selector.isSelected\"\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\n                </mat-radio-button>\n              } @else {\n                <mat-checkbox\n                  class=\"c-selection px-8\"\n                  color=\"primary\"\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\n                  (change)=\"onSelect(item)\"\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\n                </mat-checkbox>\n              }\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        @if (_tableOption.index?.enabled) {\n          @let _pageOffset = pageOffset();\n          @let _indexWidth = _tableOption.index?.width || '50px';\n          <ng-container matColumnDef=\"sdIndex\" sticky>\n            <th\n              class=\"text-center p-0\"\n              mat-header-cell\n              *matHeaderCellDef\n              [style.width]=\"_indexWidth\"\n              [style.min-width]=\"_indexWidth\"\n              [style.max-width]=\"_indexWidth\"\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\n              {{ _tableOption.index?.title || '#' }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = dataIndex\" [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\">\n              @if (!item?.meta?.group?.isGroupHeader) {\n                @if (_tableOption.tree && item?.meta?.tree?.indexPath?.length) {\n                  <!-- why: tree \u2192 STT ph\u00E2n c\u1EA5p 1, 1.2, 1.2.1 (indexPath join '.'). T\u00F4 \u0111\u1EADm root (level 0). -->\n                  <span [class.sd-stt-root]=\"(item.meta.tree.level ?? 0) === 0\">\n                    {{ item.meta.tree.indexPath.join('.') }}\n                  </span>\n                } @else {\n                  {{ _pageOffset + i + 1 }}\n                }\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\"></td>\n          </ng-container>\n        }\n        <ng-container\n          matColumnDef=\"sdCommand\"\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\n            <desktop-command\n              [autoId]=\"autoId()\"\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\n              [item]=\"item\"\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <!-- why: group header row d\u00F9ng matRowDef RI\u00CANG v\u1EDBi column list ['sdGroupHeader']\n             qua predicate when:isGroupHeaderRow. Cell colspan = displayedColumns.length \u0111\u1EC3\n             span TO\u00C0N B\u1ED8 width data row. Tr\u00E1nh colspan trick overflow row khi c\u00E1c TD kh\u00E1c render. -->\n        <ng-container matColumnDef=\"sdGroupHeader\">\n          <td\n            class=\"p-0 sd-group-header-cell\"\n            mat-cell\n            *matCellDef=\"let item\"\n            [attr.colspan]=\"sdGroupColspan()\">\n            <div class=\"sd-group-row d-flex align-items-center py-8\">\n              <!-- why: slot 42px kh\u1EDBp width v\u1EDBi sd-selection-cell data row \u2192 checkbox group c\u0103n TR\u1EE4C d\u1ECDc \u0111\u00FAng v\u1EDBi checkbox data. -->\n              @if (_tableOption.selector?.visible && !_tableOption.selector?.single) {\n                <div class=\"sd-group-selection-slot d-flex align-items-center justify-content-center\">\n                  <mat-checkbox\n                    class=\"c-selection\"\n                    color=\"primary\"\n                    [checked]=\"isGroupAllSelected(item)\"\n                    [indeterminate]=\"isGroupIndeterminate(item)\"\n                    (change)=\"onSelectGroup(item, $event.checked)\">\n                  </mat-checkbox>\n                </div>\n              } @else {\n                <div class=\"sd-group-selection-slot\"></div>\n              }\n              @if (_tableOption.group?.collapsible) {\n                <sd-button\n                  type=\"link\"\n                  [prefixIcon]=\"item.meta.group.isExpanded ? 'expand_more' : 'chevron_right'\"\n                  width=\"32px\"\n                  (click)=\"toggleGroupExpand(item)\">\n                </sd-button>\n              }\n              @if (sdGroupDef()?.templateRef; as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl; context: groupContext(item)\"></ng-container>\n              } @else {\n                <span class=\"T14R\">{{ item.meta.group.values | json }}</span>\n              }\n            </div>\n          </td>\n        </ng-container>\n        <!-- why: filler column \u1EDF cu\u1ED1i h\u1EA5p th\u1EE5 leftover space khi t\u1ED5ng width c\u00E1c c\u1ED9t data < container \u2014 gi\u1EEF cho selection/STT/command kh\u00F4ng b\u1ECB d\u00E3n. -->\n        <ng-container matColumnDef=\"sdFiller\">\n          <th class=\"sd-filler-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td class=\"sd-filler-cell p-0\" mat-cell *matCellDef=\"let item\"></td>\n          <td class=\"sd-filler-cell p-0\" mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        @for (column of _configuration.firstColumns; track column.field) {\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"px-8 py-8 c-th\"\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\n              [minWidth]=\"column.minWidth\"\n              [maxWidth]=\"column.maxWidth\"\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\n              [style.width]=\"column.width\"\n              [style.min-width]=\"column.minWidth || column.width\"\n              [style.max-width]=\"column.maxWidth\"\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\n              <div>\n                @if (column.type === 'children') {\n                  <div\n                    aria-hidden=\"true\"\n                    class=\"c-header-title\"\n                    [class.justify-content-end]=\"column.align === 'right'\"\n                    [class.text-right]=\"column.align === 'right'\">\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                  </div>\n                } @else {\n                  <div\n                    aria-hidden=\"true\"\n                    mat-sort-header\n                    class=\"c-header-title\"\n                    [class.justify-content-end]=\"column.align === 'right'\"\n                    [class.text-right]=\"column.align === 'right'\"\n                    [disabled]=\"!column.sortable\">\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                  </div>\n                  @let hideInlineFilter =\n                    _tableOption.filter?.disabled ||\n                    _tableOption.filter?.hideInlineFilter === true ||\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\n                  @if (!hideInlineFilter) {\n                    <ng-container *sdDesktop>\n                      <column-filter\n                        [autoId]=\"autoId()\"\n                        [value]=\"columnFilter?.[column.field!]!\"\n                        [operator]=\"columnOperator[column.field]\"\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\n                        [columnFilter]=\"columnFilter!\"\n                        [cacheValues]=\"cacheValues\"\n                        [column]=\"column\"\n                        (filterChange)=\"onFilterChange()\"\n                        (filterCommit)=\"onFilterCommit()\">\n                      </column-filter>\n                    </ng-container>\n                  }\n                }\n              </div>\n            </th>\n            <td\n              class=\"c-td px-0\"\n              [class.d-none]=\"column.type === 'children'\"\n              mat-cell\n              *matCellDef=\"let item\"\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\n              @if (column.type !== 'children' && !item?.meta?.group?.isGroupHeader) {\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef>\n              <ng-container *ngIf=\"footerDef()[column.field]\">\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\n                </ng-container>\n              </ng-container>\n            </td>\n          </ng-container>\n        }\n        @for (column of _configuration.secondColumns; track column.field) {\n          <ng-container [matColumnDef]=\"column.field\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"c-th px-8\"\n              [style.width]=\"column.width\"\n              [style.min-width]=\"column.minWidth || column.width\"\n              [style.max-width]=\"column.maxWidth\">\n              <div>\n                <div\n                  aria-hidden=\"true\"\n                  mat-sort-header\n                  class=\"c-header-title\"\n                  [class.justify-content-end]=\"column.align === 'right'\"\n                  [class.text-right]=\"column.align === 'right'\"\n                  [disabled]=\"!column.sortable\">\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                </div>\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\n                  <ng-container *sdDesktop>\n                    <column-filter\n                      [autoId]=\"autoId()\"\n                      [value]=\"columnFilter?.[column.field!]!\"\n                      [operator]=\"columnOperator[column.field]\"\n                      [columnFilter]=\"columnFilter!\"\n                      [cacheValues]=\"cacheValues\"\n                      [column]=\"column\"\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\n                      (filterChange)=\"onFilterChange()\"\n                      (filterCommit)=\"onFilterCommit()\">\n                    </column-filter>\n                  </ng-container>\n                }\n              </div>\n            </th>\n            <td\n              class=\"c-td px-0\"\n              mat-cell\n              *matCellDef=\"let item\"\n              [sdHoverCopy]=\"item[column.field]\"\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\n              @if (column.type !== 'children') {\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef>\n              <ng-container *ngIf=\"footerDef()[column.field]\">\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\n                </ng-container>\n              </ng-container>\n            </td>\n          </ng-container>\n        }\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\n        @if (!!_configuration.secondHeaders.length) {\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\n        }\n        <!-- Group header row \u2014 ch\u1EC9 1 cell sdGroupHeader colspan to\u00E0n width. -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['sdGroupHeader']; when: isGroupHeaderRow\"\n          class=\"c-group-row-tr\"></tr>\n\n        <!-- Data row \u2014 d\u00F9ng displayedColumns \u0111\u1EA7y \u0111\u1EE7; when isDataRow \u0111\u1EC3 lo\u1EA1i tr\u1EEB group header. -->\n        <tr\n          mat-row\n          cdkDrag\n          [cdkDragData]=\"row\"\n          [cdkDragDisabled]=\"\n            !_tableOption.rowReorder?.enabled ||\n            !!row.meta?.group?.items?.length ||\n            (row.meta?.tree?.level ?? 0) > 0 ||\n            isReorderDisabled(row)\n          \"\n          *matRowDef=\"let row; columns: _configuration.displayedColumns; when: isDataRow\"\n          matRipple\n          class=\"c-row\"\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\n          [ngStyle]=\"rowStyle(row)\"\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\n\n        <!-- Sub-information row \u2014 also gated b\u1EDFi isDataRow \u0111\u1EC3 KH\u00D4NG render empty expand row d\u01B0\u1EDBi group header. -->\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']; when: isDataRow\" class=\"c-detail-row\"></tr>\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\n        }\n      </table>\n      @if (!_loading && !_total) {\n        <div class=\"c-no-data-row\">\n          @if (_isFiltered) {\n            @if (tableConfiguration?.images?.filterEmpty) {\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\n            } @else {\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\n            }\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\n          } @else {\n            @if (_requireFiltered) {\n              @if (tableConfiguration?.images?.filterRequired) {\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\n              } @else {\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\n              }\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\n            } @else {\n              @if (tableConfiguration?.images?.dataEmpty) {\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\n              } @else {\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\n              }\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"c-paginator\">\n      <div class=\"c-action\">\n        <ng-container *sdDesktop>\n          @if (_tableOption.reload?.visible) {\n            <sd-button\n              class=\"mr-8\"\n              [title]=\"'core.component.table.reload' | translate\"\n              prefixIcon=\"refresh\"\n              (click)=\"reload()\"\n              [disabled]=\"!_items.length\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n        @if (_export && _items.length) {\n          @if (_export.type === 'custom') {\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\n          } @else {\n            @if (_export.visible) {\n              @if (_exporting) {\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\n              } @else {\n                @if (_export.visible === 'ALL' || !_export.visible) {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\n                  <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\n                    </button>\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\n                    </button>\n                  </mat-menu>\n                } @else if (_export.visible === 'EXCEL') {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\n                } @else if (_export.visible === 'CSV') {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\n                }\n              }\n            }\n          }\n        }\n\n        <ng-container *sdDesktop>\n          @if (configComponent()) {\n            <sd-button\n              class=\"mr-8\"\n              [title]=\"'core.component.table.setup-short' | translate\"\n              prefixIcon=\"settings\"\n              (click)=\"configComponent()!.open()\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\n        <ng-container *sdMobile>\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\n            <sd-button\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\n              class=\"mr-8\"\n              prefixIcon=\"filter_alt\"\n              (click)=\"mobileFilter()!.open()\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n      </div>\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\n      <ng-container *sdDesktop>\n        <mat-paginator\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\n          [length]=\"_total\"\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\n      </ng-container>\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\n      <ng-container *sdMobile>\n        <mat-paginator\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\n          [length]=\"_total\"\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\n          [showFirstLastButtons]=\"false\"\n          hidePageSize></mat-paginator>\n      </ng-container>\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\n      <ng-container *sdDesktop>\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\n          <div class=\"T14R pr-16\">\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\n          </div>\n        }\n      </ng-container>\n    </div>\n  </div>\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\n  @if (_tableOption.config?.visible) {\n    <config [tableOption]=\"_tableOption\" />\n  }\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\n  @if (!_tableOption.filter?.disabled && filterRegister) {\n    <mobile-filter\n      [autoId]=\"autoId()\"\n      [filter]=\"_tableOption.filter!\"\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\n      [columns]=\"_configuration.firstColumns\"\n      [filterDefs]=\"sdFilterDefs()\"\n      [filterRegister]=\"filterRegister\"\n      [cacheValues]=\"cacheValues\">\n    </mobile-filter>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;overflow:auto;width:100%;height:100%}:host .c-header-title{height:40px;display:flex;align-items:center}:host .c-container{position:relative;min-height:50px;display:flex;flex-direction:column;flex:1}:host .c-container .c-table{position:relative;flex:1;display:flex;flex-direction:column}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-mdc-header-row{height:40px}:host .c-container .c-table table tr.c-second-header.mat-mdc-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-mdc-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-mdc-cell,:host .c-container .c-table table td.mat-mdc-footer-cell,:host .c-container .c-table table th.mat-mdc-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{vertical-align:middle;font-weight:500;font-size:14px;line-height:20px;color:#212121}:host .c-container .c-table .c-th.sd-col-resize-host{position:relative}:host .c-container .c-table .c-th.sd-resizing{-webkit-user-select:none;user-select:none}:host .c-container .c-table .c-th .sd-col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:2}:host .c-container .c-table .c-th .sd-col-resize-handle:hover{background:#00000014}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-table .c-no-data-row{flex:1;width:100%;position:sticky;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .c-container .c-table .c-no-data-row .c-image{margin-bottom:16px;width:96px}:host .c-container .c-loading{position:absolute;inset:0 0 56px;background:#00000026;z-index:2;display:flex;align-items:center;justify-content:center}:host .c-container .c-paginator{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#fff}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{text-align:center;background-color:#fff;border:none!important}:host .c-container .c-empty mat-icon{font-size:150px;margin-top:30px;margin-bottom:30px;opacity:.2;width:auto;height:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px #2f313629}:host .lds-ring{display:inline-block;position:relative;width:40px;height:40px}:host .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:32px;height:32px;margin:4px;border:4px solid #cef;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#cef transparent transparent transparent}:host .lds-ring div:nth-child(1){animation-delay:-.45s}:host .lds-ring div:nth-child(2){animation-delay:-.3s}:host .lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .sd-reorder-header,:host .sd-reorder-cell{width:40px;min-width:40px;padding:0 4px;box-sizing:border-box}:host .sd-reorder-cell mat-icon{cursor:grab;color:#00000061;display:flex;align-items:center}:host .sd-reorder-cell mat-icon:active{cursor:grabbing}:host .sd-reorder-cell mat-icon.sd-reorder-disabled{opacity:.3;cursor:not-allowed;pointer-events:none}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header-arrow{display:none!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-repeat:no-repeat;background-position:center right 0;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}:host ::ng-deep .c-paginator .mat-mdc-paginator .mdc-text-field--outlined .mat-mdc-form-field-infix,:host ::ng-deep .c-paginator .mat-mdc-paginator .mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:2px;padding-bottom:2px;min-height:32px}:host ::ng-deep .c-paginator .mat-mdc-paginator-range-label{margin:0 4px}:host ::ng-deep .c-paginator .mat-mdc-paginator-page-size-select mat-select{margin-top:2px!important}:host ::ng-deep .cdk-drag-preview{box-shadow:0 4px 12px #00000026;background:#fff;display:table;width:100%}:host ::ng-deep .cdk-drag-preview td{padding:0 8px;border-bottom:1px solid rgba(0,0,0,.12)}:host ::ng-deep .cdk-drag-placeholder{opacity:0}:host ::ng-deep .cdk-drop-list-dragging tr.c-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .sd-selection-cell{width:42px;min-width:42px;max-width:42px}:host ::ng-deep .sd-filler-cell{width:auto;min-width:0;padding:0!important;border:0}:host ::ng-deep .sd-group-header-cell{background:#f5f7fc;border-top:1px solid #e6e9f2;border-bottom:1px solid #e6e9f2}:host ::ng-deep .sd-group-row{min-height:36px}:host ::ng-deep .sd-group-selection-slot{width:42px;min-width:42px;max-width:42px}:host ::ng-deep .c-selection{transform:scale(.85);transform-origin:center}:host ::ng-deep .sd-tree-toggle-cell{width:40px;min-width:40px;max-width:100px}:host ::ng-deep .sd-tree-toggle-inner{display:flex;align-items:center;min-height:40px}:host ::ng-deep .sd-tree-spinner{transform:scale(.5);margin:0 auto}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-0{background:#fbfcfe}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-0>td{font-weight:500}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-1{background:#fff}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-2{background:#fafbfd}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-3{background:#f6f8fb}:host ::ng-deep tr.c-row.sd-tree-row:not(.sd-tree-level-0)>td.sd-tree-toggle-cell .sd-tree-toggle-inner{border-left:1px dashed #d8dde6}:host ::ng-deep .sd-stt-root{font-weight:700;color:#1f2330}\n", ":host ::ng-deep .sticky-shadow-right{overflow:visible!important}:host ::ng-deep .sticky-shadow-right:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:8px;transform:translate(100%);background:linear-gradient(to right,rgba(0,0,0,.12),transparent);pointer-events:none}:host ::ng-deep .sticky-shadow-left{overflow:visible!important}:host ::ng-deep .sticky-shadow-left:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:8px;transform:translate(-100%);background:linear-gradient(to left,rgba(0,0,0,.12),transparent);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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", "cdkDropListHasAnchor"], 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: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: DesktopCommand, selector: "desktop-command", inputs: ["autoId", "item", "itemIndex", "commands"] }, { kind: "component", type: DesktopCellComponent, selector: "desktop-cell", inputs: ["column", "item", "cellDef"] }, { kind: "component", type: ColumnTitleComponent, selector: "column-title", inputs: ["column", "titleDef"] }, { kind: "component", type: ExternalFilterComponent, selector: "external-filter", inputs: ["autoId", "filter", "externalFilters", "filterRegister"] }, { kind: "component", type: ConfigComponent, selector: "config", inputs: ["tableOption"], outputs: ["changes"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { kind: "component", type: MobileFilterComponent, selector: "mobile-filter", inputs: ["autoId", "filter", "externalFilters", "columns", "filterDefs", "filterRegister", "cacheValues"] }, { kind: "directive", type: SdScrollDirective, selector: "[sdScroll]" }, { kind: "directive", type: SdDesktopDirective, selector: "[sdDesktop]" }, { kind: "directive", type: SdMobileDirective, selector: "[sdMobile]" }, { kind: "directive", type: SdHoverCopyDirective, selector: "[sdHoverCopy]", inputs: ["sdHoverCopy", "sdHoverCopyDisabled"] }, { kind: "component", type: SelectorActionComponent, selector: "selector-action", inputs: ["tableOption", "selectedTableItems"], outputs: ["clear"] }, { kind: "directive", type: StickyShadowDirective, selector: "[stickyShadow]" }, { kind: "directive", type: SdColumnResizeDirective, selector: "[sdColumnResize]", inputs: ["sdColumnResize", "minWidth", "maxWidth"], outputs: ["resizeEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: SdGroupPipe, name: "sdGroup" }, { kind: "pipe", type: SdTreePipe, name: "sdTree" }, { kind: "pipe", type: SdSelectionVisiblePipe, name: "selectionVisible" }, { kind: "pipe", type: SdSelectionVisibleSelectAllPipe, name: "selectionVisibleSelectAll" }, { kind: "pipe", type: SdSelectionDisabledPipe, name: "selectionDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
                 state('expanded', style({ height: '*', visibility: 'visible' })),
@@ -4279,7 +4279,7 @@ class SdTable extends SdBaseSecureComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdTable, decorators: [{
             type: Component,
             args: [{ selector: 'sd-table', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('detailExpand', [
@@ -4337,7 +4337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdColumnResizeDirective,
                         TranslatePipe,
                     ], template: "@let _configuration = configuration();\n@let _tableOption = tableOption()!;\n@let _loading = loading();\n@let _items = items();\n@let _total = total();\n@let _isFiltered = isFiltered();\n@let _requireFiltered = requireFiltered();\n@let _export = _tableOption?.export;\n@let _exporting = exporting();\n@let _titleDef = titleDef();\n\n@if (_configuration) {\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\n    <external-filter\n      class=\"mb-16\"\n      [autoId]=\"autoId()\"\n      [filterRegister]=\"filterRegister\"\n      [filter]=\"_tableOption.filter!\"\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\n    </external-filter>\n  }\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption : groupExpandState;\n  <ng-content select=\"[sdTableTop]\"></ng-content>\n  <div class=\"c-container\">\n    @if (_loading) {\n      <div class=\"c-loading\">\n        <mat-spinner></mat-spinner>\n      </div>\n    }\n    <div\n      class=\"c-table\"\n      sdScroll\n      stickyShadow\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\n      [style.min-height]=\"_tableOption.style?.minHeight\">\n      <table\n        mat-table\n        [dataSource]=\"groupedItems\"\n        [trackBy]=\"trackBy\"\n        matSort\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\n        multiTemplateDataRows\n        cdkDropList\n        [cdkDropListData]=\"groupedItems\"\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\n        @if (_tableOption.rowReorder?.enabled) {\n          <ng-container matColumnDef=\"sdReorder\">\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\n              @if (!row.meta?.group?.items?.length) {\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\n                </mat-icon>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef></td>\n          </ng-container>\n        }\n\n        @if (_tableOption.tree) {\n          <ng-container matColumnDef=\"sdTreeToggle\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"sd-tree-toggle-cell p-0\"\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\n              @if (row.meta?.tree) {\n                <div\n                  class=\"sd-tree-toggle-inner\"\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\n                  @if (row.meta.tree.hasChildren) {\n                    @if (row.meta.tree.isExpanding) {\n                      <div class=\"lds-ring sd-tree-spinner\">\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                        <div></div>\n                      </div>\n                    } @else {\n                      <sd-button\n                        type=\"link\"\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\n                        width=\"35px\">\n                      </sd-button>\n                    }\n                  }\n                </div>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef></td>\n          </ng-container>\n        }\n\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\n            @if (sdSubInformation()?.templateRef) {\n              @if (_tableOption.expand?.always) {\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\n              } @else {\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\n                  @if (item.isExpanded) {\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\n                  }\n                </div>\n              }\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td mat-cell *matCellDef=\"let element\">\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\n              <sd-button\n                type=\"link\"\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\n                (click)=\"onExpand(element)\"\n                width=\"35px\">\n              </sd-button>\n            }\n            @if (element.isExpanding) {\n              <div class=\"lds-ring\">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n              </div>\n            }\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sdSelection\" sticky>\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\n            @if (visibleSelectAll) {\n              <mat-checkbox\n                class=\"c-selection px-8\"\n                color=\"primary\"\n                [ngModel]=\"isSelectAll()\"\n                (ngModelChange)=\"isSelectAll.set($event)\"\n                (change)=\"onSelectAll()\">\n              </mat-checkbox>\n            }\n          </th>\n\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\n            @let visible = item | selectionVisible: _tableOption.selector;\n            @if (visible) {\n              @if (_tableOption.selector?.single) {\n                <mat-radio-button\n                  class=\"c-selection px-8\"\n                  color=\"primary\"\n                  [checked]=\"item.meta.selector.isSelected\"\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\n                </mat-radio-button>\n              } @else {\n                <mat-checkbox\n                  class=\"c-selection px-8\"\n                  color=\"primary\"\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\n                  (change)=\"onSelect(item)\"\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\n                </mat-checkbox>\n              }\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        @if (_tableOption.index?.enabled) {\n          @let _pageOffset = pageOffset();\n          @let _indexWidth = _tableOption.index?.width || '50px';\n          <ng-container matColumnDef=\"sdIndex\" sticky>\n            <th\n              class=\"text-center p-0\"\n              mat-header-cell\n              *matHeaderCellDef\n              [style.width]=\"_indexWidth\"\n              [style.min-width]=\"_indexWidth\"\n              [style.max-width]=\"_indexWidth\"\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\n              {{ _tableOption.index?.title || '#' }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = dataIndex\" [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\">\n              @if (!item?.meta?.group?.isGroupHeader) {\n                @if (_tableOption.tree && item?.meta?.tree?.indexPath?.length) {\n                  <!-- why: tree \u2192 STT ph\u00E2n c\u1EA5p 1, 1.2, 1.2.1 (indexPath join '.'). T\u00F4 \u0111\u1EADm root (level 0). -->\n                  <span [class.sd-stt-root]=\"(item.meta.tree.level ?? 0) === 0\">\n                    {{ item.meta.tree.indexPath.join('.') }}\n                  </span>\n                } @else {\n                  {{ _pageOffset + i + 1 }}\n                }\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\"></td>\n          </ng-container>\n        }\n        <ng-container\n          matColumnDef=\"sdCommand\"\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\n            <desktop-command\n              [autoId]=\"autoId()\"\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\n              [item]=\"item\"\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <!-- why: group header row d\u00F9ng matRowDef RI\u00CANG v\u1EDBi column list ['sdGroupHeader']\n             qua predicate when:isGroupHeaderRow. Cell colspan = displayedColumns.length \u0111\u1EC3\n             span TO\u00C0N B\u1ED8 width data row. Tr\u00E1nh colspan trick overflow row khi c\u00E1c TD kh\u00E1c render. -->\n        <ng-container matColumnDef=\"sdGroupHeader\">\n          <td\n            class=\"p-0 sd-group-header-cell\"\n            mat-cell\n            *matCellDef=\"let item\"\n            [attr.colspan]=\"sdGroupColspan()\">\n            <div class=\"sd-group-row d-flex align-items-center py-8\">\n              <!-- why: slot 42px kh\u1EDBp width v\u1EDBi sd-selection-cell data row \u2192 checkbox group c\u0103n TR\u1EE4C d\u1ECDc \u0111\u00FAng v\u1EDBi checkbox data. -->\n              @if (_tableOption.selector?.visible && !_tableOption.selector?.single) {\n                <div class=\"sd-group-selection-slot d-flex align-items-center justify-content-center\">\n                  <mat-checkbox\n                    class=\"c-selection\"\n                    color=\"primary\"\n                    [checked]=\"isGroupAllSelected(item)\"\n                    [indeterminate]=\"isGroupIndeterminate(item)\"\n                    (change)=\"onSelectGroup(item, $event.checked)\">\n                  </mat-checkbox>\n                </div>\n              } @else {\n                <div class=\"sd-group-selection-slot\"></div>\n              }\n              @if (_tableOption.group?.collapsible) {\n                <sd-button\n                  type=\"link\"\n                  [prefixIcon]=\"item.meta.group.isExpanded ? 'expand_more' : 'chevron_right'\"\n                  width=\"32px\"\n                  (click)=\"toggleGroupExpand(item)\">\n                </sd-button>\n              }\n              @if (sdGroupDef()?.templateRef; as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl; context: groupContext(item)\"></ng-container>\n              } @else {\n                <span class=\"T14R\">{{ item.meta.group.values | json }}</span>\n              }\n            </div>\n          </td>\n        </ng-container>\n        <!-- why: filler column \u1EDF cu\u1ED1i h\u1EA5p th\u1EE5 leftover space khi t\u1ED5ng width c\u00E1c c\u1ED9t data < container \u2014 gi\u1EEF cho selection/STT/command kh\u00F4ng b\u1ECB d\u00E3n. -->\n        <ng-container matColumnDef=\"sdFiller\">\n          <th class=\"sd-filler-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\n          <td class=\"sd-filler-cell p-0\" mat-cell *matCellDef=\"let item\"></td>\n          <td class=\"sd-filler-cell p-0\" mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        @for (column of _configuration.firstColumns; track column.field) {\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"px-8 py-8 c-th\"\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\n              [minWidth]=\"column.minWidth\"\n              [maxWidth]=\"column.maxWidth\"\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\n              [style.width]=\"column.width\"\n              [style.min-width]=\"column.minWidth || column.width\"\n              [style.max-width]=\"column.maxWidth\"\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\n              <div>\n                @if (column.type === 'children') {\n                  <div\n                    aria-hidden=\"true\"\n                    class=\"c-header-title\"\n                    [class.justify-content-end]=\"column.align === 'right'\"\n                    [class.text-right]=\"column.align === 'right'\">\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                  </div>\n                } @else {\n                  <div\n                    aria-hidden=\"true\"\n                    mat-sort-header\n                    class=\"c-header-title\"\n                    [class.justify-content-end]=\"column.align === 'right'\"\n                    [class.text-right]=\"column.align === 'right'\"\n                    [disabled]=\"!column.sortable\">\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                  </div>\n                  @let hideInlineFilter =\n                    _tableOption.filter?.disabled ||\n                    _tableOption.filter?.hideInlineFilter === true ||\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\n                  @if (!hideInlineFilter) {\n                    <ng-container *sdDesktop>\n                      <column-filter\n                        [autoId]=\"autoId()\"\n                        [value]=\"columnFilter?.[column.field!]!\"\n                        [operator]=\"columnOperator[column.field]\"\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\n                        [columnFilter]=\"columnFilter!\"\n                        [cacheValues]=\"cacheValues\"\n                        [column]=\"column\"\n                        (filterChange)=\"onFilterChange()\"\n                        (filterCommit)=\"onFilterCommit()\">\n                      </column-filter>\n                    </ng-container>\n                  }\n                }\n              </div>\n            </th>\n            <td\n              class=\"c-td px-0\"\n              [class.d-none]=\"column.type === 'children'\"\n              mat-cell\n              *matCellDef=\"let item\"\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\n              @if (column.type !== 'children' && !item?.meta?.group?.isGroupHeader) {\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef>\n              <ng-container *ngIf=\"footerDef()[column.field]\">\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\n                </ng-container>\n              </ng-container>\n            </td>\n          </ng-container>\n        }\n        @for (column of _configuration.secondColumns; track column.field) {\n          <ng-container [matColumnDef]=\"column.field\">\n            <th\n              mat-header-cell\n              *matHeaderCellDef\n              class=\"c-th px-8\"\n              [style.width]=\"column.width\"\n              [style.min-width]=\"column.minWidth || column.width\"\n              [style.max-width]=\"column.maxWidth\">\n              <div>\n                <div\n                  aria-hidden=\"true\"\n                  mat-sort-header\n                  class=\"c-header-title\"\n                  [class.justify-content-end]=\"column.align === 'right'\"\n                  [class.text-right]=\"column.align === 'right'\"\n                  [disabled]=\"!column.sortable\">\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\n                </div>\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\n                  <ng-container *sdDesktop>\n                    <column-filter\n                      [autoId]=\"autoId()\"\n                      [value]=\"columnFilter?.[column.field!]!\"\n                      [operator]=\"columnOperator[column.field]\"\n                      [columnFilter]=\"columnFilter!\"\n                      [cacheValues]=\"cacheValues\"\n                      [column]=\"column\"\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\n                      (filterChange)=\"onFilterChange()\"\n                      (filterCommit)=\"onFilterCommit()\">\n                    </column-filter>\n                  </ng-container>\n                }\n              </div>\n            </th>\n            <td\n              class=\"c-td px-0\"\n              mat-cell\n              *matCellDef=\"let item\"\n              [sdHoverCopy]=\"item[column.field]\"\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\n              @if (column.type !== 'children') {\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\n              }\n            </td>\n            <td mat-footer-cell *matFooterCellDef>\n              <ng-container *ngIf=\"footerDef()[column.field]\">\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\n                </ng-container>\n              </ng-container>\n            </td>\n          </ng-container>\n        }\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\n        @if (!!_configuration.secondHeaders.length) {\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\n        }\n        <!-- Group header row \u2014 ch\u1EC9 1 cell sdGroupHeader colspan to\u00E0n width. -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['sdGroupHeader']; when: isGroupHeaderRow\"\n          class=\"c-group-row-tr\"></tr>\n\n        <!-- Data row \u2014 d\u00F9ng displayedColumns \u0111\u1EA7y \u0111\u1EE7; when isDataRow \u0111\u1EC3 lo\u1EA1i tr\u1EEB group header. -->\n        <tr\n          mat-row\n          cdkDrag\n          [cdkDragData]=\"row\"\n          [cdkDragDisabled]=\"\n            !_tableOption.rowReorder?.enabled ||\n            !!row.meta?.group?.items?.length ||\n            (row.meta?.tree?.level ?? 0) > 0 ||\n            isReorderDisabled(row)\n          \"\n          *matRowDef=\"let row; columns: _configuration.displayedColumns; when: isDataRow\"\n          matRipple\n          class=\"c-row\"\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\n          [ngStyle]=\"rowStyle(row)\"\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\n\n        <!-- Sub-information row \u2014 also gated b\u1EDFi isDataRow \u0111\u1EC3 KH\u00D4NG render empty expand row d\u01B0\u1EDBi group header. -->\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']; when: isDataRow\" class=\"c-detail-row\"></tr>\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\n        }\n      </table>\n      @if (!_loading && !_total) {\n        <div class=\"c-no-data-row\">\n          @if (_isFiltered) {\n            @if (tableConfiguration?.images?.filterEmpty) {\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\n            } @else {\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\n            }\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\n          } @else {\n            @if (_requireFiltered) {\n              @if (tableConfiguration?.images?.filterRequired) {\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\n              } @else {\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\n              }\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\n            } @else {\n              @if (tableConfiguration?.images?.dataEmpty) {\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\n              } @else {\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\n              }\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"c-paginator\">\n      <div class=\"c-action\">\n        <ng-container *sdDesktop>\n          @if (_tableOption.reload?.visible) {\n            <sd-button\n              class=\"mr-8\"\n              [title]=\"'core.component.table.reload' | translate\"\n              prefixIcon=\"refresh\"\n              (click)=\"reload()\"\n              [disabled]=\"!_items.length\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n        @if (_export && _items.length) {\n          @if (_export.type === 'custom') {\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\n          } @else {\n            @if (_export.visible) {\n              @if (_exporting) {\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\n              } @else {\n                @if (_export.visible === 'ALL' || !_export.visible) {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\n                  <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\n                    </button>\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\n                    </button>\n                  </mat-menu>\n                } @else if (_export.visible === 'EXCEL') {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\n                } @else if (_export.visible === 'CSV') {\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\n                }\n              }\n            }\n          }\n        }\n\n        <ng-container *sdDesktop>\n          @if (configComponent()) {\n            <sd-button\n              class=\"mr-8\"\n              [title]=\"'core.component.table.setup-short' | translate\"\n              prefixIcon=\"settings\"\n              (click)=\"configComponent()!.open()\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\n        <ng-container *sdMobile>\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\n            <sd-button\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\n              class=\"mr-8\"\n              prefixIcon=\"filter_alt\"\n              (click)=\"mobileFilter()!.open()\"\n              type=\"link\">\n            </sd-button>\n          }\n        </ng-container>\n      </div>\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\n      <ng-container *sdDesktop>\n        <mat-paginator\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\n          [length]=\"_total\"\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\n      </ng-container>\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\n      <ng-container *sdMobile>\n        <mat-paginator\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\n          [length]=\"_total\"\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\n          [showFirstLastButtons]=\"false\"\n          hidePageSize></mat-paginator>\n      </ng-container>\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\n      <ng-container *sdDesktop>\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\n          <div class=\"T14R pr-16\">\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\n          </div>\n        }\n      </ng-container>\n    </div>\n  </div>\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\n  @if (_tableOption.config?.visible) {\n    <config [tableOption]=\"_tableOption\" />\n  }\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\n  @if (!_tableOption.filter?.disabled && filterRegister) {\n    <mobile-filter\n      [autoId]=\"autoId()\"\n      [filter]=\"_tableOption.filter!\"\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\n      [columns]=\"_configuration.firstColumns\"\n      [filterDefs]=\"sdFilterDefs()\"\n      [filterRegister]=\"filterRegister\"\n      [cacheValues]=\"cacheValues\">\n    </mobile-filter>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;overflow:auto;width:100%;height:100%}:host .c-header-title{height:40px;display:flex;align-items:center}:host .c-container{position:relative;min-height:50px;display:flex;flex-direction:column;flex:1}:host .c-container .c-table{position:relative;flex:1;display:flex;flex-direction:column}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-mdc-header-row{height:40px}:host .c-container .c-table table tr.c-second-header.mat-mdc-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-mdc-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-mdc-cell,:host .c-container .c-table table td.mat-mdc-footer-cell,:host .c-container .c-table table th.mat-mdc-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{vertical-align:middle;font-weight:500;font-size:14px;line-height:20px;color:#212121}:host .c-container .c-table .c-th.sd-col-resize-host{position:relative}:host .c-container .c-table .c-th.sd-resizing{-webkit-user-select:none;user-select:none}:host .c-container .c-table .c-th .sd-col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:2}:host .c-container .c-table .c-th .sd-col-resize-handle:hover{background:#00000014}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-table .c-no-data-row{flex:1;width:100%;position:sticky;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .c-container .c-table .c-no-data-row .c-image{margin-bottom:16px;width:96px}:host .c-container .c-loading{position:absolute;inset:0 0 56px;background:#00000026;z-index:2;display:flex;align-items:center;justify-content:center}:host .c-container .c-paginator{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#fff}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{text-align:center;background-color:#fff;border:none!important}:host .c-container .c-empty mat-icon{font-size:150px;margin-top:30px;margin-bottom:30px;opacity:.2;width:auto;height:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px #2f313629}:host .lds-ring{display:inline-block;position:relative;width:40px;height:40px}:host .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:32px;height:32px;margin:4px;border:4px solid #cef;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#cef transparent transparent transparent}:host .lds-ring div:nth-child(1){animation-delay:-.45s}:host .lds-ring div:nth-child(2){animation-delay:-.3s}:host .lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .sd-reorder-header,:host .sd-reorder-cell{width:40px;min-width:40px;padding:0 4px;box-sizing:border-box}:host .sd-reorder-cell mat-icon{cursor:grab;color:#00000061;display:flex;align-items:center}:host .sd-reorder-cell mat-icon:active{cursor:grabbing}:host .sd-reorder-cell mat-icon.sd-reorder-disabled{opacity:.3;cursor:not-allowed;pointer-events:none}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header-arrow{display:none!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-repeat:no-repeat;background-position:center right 0;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}:host ::ng-deep .c-paginator .mat-mdc-paginator .mdc-text-field--outlined .mat-mdc-form-field-infix,:host ::ng-deep .c-paginator .mat-mdc-paginator .mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:2px;padding-bottom:2px;min-height:32px}:host ::ng-deep .c-paginator .mat-mdc-paginator-range-label{margin:0 4px}:host ::ng-deep .c-paginator .mat-mdc-paginator-page-size-select mat-select{margin-top:2px!important}:host ::ng-deep .cdk-drag-preview{box-shadow:0 4px 12px #00000026;background:#fff;display:table;width:100%}:host ::ng-deep .cdk-drag-preview td{padding:0 8px;border-bottom:1px solid rgba(0,0,0,.12)}:host ::ng-deep .cdk-drag-placeholder{opacity:0}:host ::ng-deep .cdk-drop-list-dragging tr.c-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .sd-selection-cell{width:42px;min-width:42px;max-width:42px}:host ::ng-deep .sd-filler-cell{width:auto;min-width:0;padding:0!important;border:0}:host ::ng-deep .sd-group-header-cell{background:#f5f7fc;border-top:1px solid #e6e9f2;border-bottom:1px solid #e6e9f2}:host ::ng-deep .sd-group-row{min-height:36px}:host ::ng-deep .sd-group-selection-slot{width:42px;min-width:42px;max-width:42px}:host ::ng-deep .c-selection{transform:scale(.85);transform-origin:center}:host ::ng-deep .sd-tree-toggle-cell{width:40px;min-width:40px;max-width:100px}:host ::ng-deep .sd-tree-toggle-inner{display:flex;align-items:center;min-height:40px}:host ::ng-deep .sd-tree-spinner{transform:scale(.5);margin:0 auto}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-0{background:#fbfcfe}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-0>td{font-weight:500}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-1{background:#fff}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-2{background:#fafbfd}:host ::ng-deep tr.c-row.sd-tree-row.sd-tree-level-3{background:#f6f8fb}:host ::ng-deep tr.c-row.sd-tree-row:not(.sd-tree-level-0)>td.sd-tree-toggle-cell .sd-tree-toggle-inner{border-left:1px dashed #d8dde6}:host ::ng-deep .sd-stt-root{font-weight:700;color:#1f2330}\n", ":host ::ng-deep .sticky-shadow-right{overflow:visible!important}:host ::ng-deep .sticky-shadow-right:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:8px;transform:translate(100%);background:linear-gradient(to right,rgba(0,0,0,.12),transparent);pointer-events:none}:host ::ng-deep .sticky-shadow-left{overflow:visible!important}:host ::ng-deep .sticky-shadow-left:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:8px;transform:translate(-100%);background:linear-gradient(to left,rgba(0,0,0,.12),transparent);pointer-events:none}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], configComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ConfigComponent), { isSignal: true }] }], sdPopupExport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdPopupExport), { isSignal: true }] }], scroll: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdScrollDirective), { isSignal: true }] }], quickAction: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdQuickAction), { isSignal: true }] }], externalFilter: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ExternalFilterComponent), { isSignal: true }] }], mobileFilter: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MobileFilterComponent), { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], sdSubInformation: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdTableExpandDefDirective), { isSignal: true }] }], sdGroupDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdTableGroupDefDirective), { isSignal: true }] }], sdCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdTableCellDefDirective), { isSignal: true }] }], sdFooterDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdMaterialFooterDefDirective), { isSignal: true }] }], sdFilterDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdTableFilterDefDirective), { isSignal: true }] }], sdTitleDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdTableTitleDefDirective), { isSignal: true }] }] } });
 
 const SdConvertToPagingReq = (filterRequest, args) => {
     const { externalFilters, columns, fieldMapping } = args;