@sd-angular/core 19.0.0-beta.103 → 19.0.0-beta.105

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

@@ -34,17 +34,16 @@ import { SdButton } from '@sd-angular/core/components/button';
 import { SdQuickAction } from '@sd-angular/core/components/quick-action';
 import { SdTooltipDirective, SdScrollDirective, SdDesktopDirective, SdMobileDirective, SdHoverCopyDirective } from '@sd-angular/core/directives';
 import { SdSafeHtmlPipe, SdFormatNumberPipe } from '@sd-angular/core/pipes';
-import { SdUtilities, StringUtilities, SD_EMPTY_STR, DateUtilities as DateUtilities$1 } from '@sd-angular/core/utilities';
-import { SdUtilities as SdUtilities$1, DateUtilities, ArrayUtilities, NumberUtilities } from '@sd-angular/core/utilities/extensions';
+import { BrowserUtilities, Utilities } from '@sdcorejs/utils/fns';
+import { DateUtilities, ArrayUtilities, NumberUtilities } from '@sd-angular/core/utilities/extensions';
 import { SdBadge } from '@sd-angular/core/components/badge';
 import { SdOperator } from '@sd-angular/core/components/operator';
 import { SdInput, SdInputNumber, SdSelect, SdDate, SdDatetime, SdDateRange as SdDateRange$1, SdCheckbox, SdSwitch } from '@sd-angular/core/forms';
 import { SdDateRange } from '@sd-angular/core/forms/date-range';
-import { OPERATORS } from '@sdcorejs/utils/constants';
+import { OPERATORS, EMPTY_STR } from '@sdcorejs/utils/constants';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SdSection } from '@sd-angular/core/components/section';
 import { TranslatePipe, I18nService } from '@sd-angular/core/i18n';
-import { BrowserUtilities } from '@sdcorejs/utils/fns';
 import { SdSideDrawer } from '@sd-angular/core/components/side-drawer';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SdModal } from '@sd-angular/core/components/modal';
@@ -53,6 +52,7 @@ import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { StringUtilities, DateUtilities as DateUtilities$1 } from '@sd-angular/core/utilities';
 import * as i5$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
@@ -120,6 +120,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+/**
+ * Directive cung cấp custom template render group header row trong sd-table.
+ * Thay thế cho htmlTemplate callback cũ — cho phép Angular template binding,
+ * pipes, components con (sd-badge, sd-button, …) bên trong.
+ *
+ * Ví dụ:
+ * ```html
+ * <sd-table [option]="opt">
+ *   <ng-template sdTableGroupDef let-values="values" let-items="items" let-indeterminate="indeterminate">
+ *     <b>Khách hàng: {{ values.customerName }}</b>
+ *     <span>{{ items.length }} đơn hàng</span>
+ *   </ng-template>
+ * </sd-table>
+ * ```
+ */
+class SdTableGroupDefDirective {
+    static ngTemplateContextGuard(_dir, _ctx) {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTableGroupDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sdTableGroupDef]' }]
+        }] });
+
 class SdTableTitleDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
@@ -252,11 +280,11 @@ class ColumnFilterComponent {
     // 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();\r\n@let _columnFilter = columnFilter();\r\n@let _autoId = autoId();\r\n@let _templateRef = templateRef();\r\n@let _operators = operators();\r\n@let _items = items();\r\n@let _label = label();\r\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    _column.type === 'string' ||\r\n    _column.type === 'number' ||\r\n    _column.type === 'boolean' ||\r\n    _column.type === 'values' ||\r\n    _column.type === 'lazy-values' ||\r\n    _column.type === 'date' ||\r\n    _column.type === 'datetime' ||\r\n    _column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    @if (_operators.length) {\r\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\r\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (_templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\r\n    }\r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (_column.type === 'string') {\r\n        <sd-input\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [label]=\"_label\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          (sdBlur)=\"onFilterCommit()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (_column.type === 'number') {\r\n        @if (!_column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            (sdBlur)=\"onFilterCommit()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (_column.filter?.type === 'split-number') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      } @else if (_column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"[\r\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (_column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\r\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (_column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (_column.filter?.type === 'split-date') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n\r\n<!-- ================================================ -->\r\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\r\n<!-- ================================================ -->\r\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n  </div>\r\n</ng-template>\r\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", "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", "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 ɵ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();\r\n@let _columnFilter = columnFilter();\r\n@let _autoId = autoId();\r\n@let _templateRef = templateRef();\r\n@let _operators = operators();\r\n@let _items = items();\r\n@let _label = label();\r\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    _column.type === 'string' ||\r\n    _column.type === 'number' ||\r\n    _column.type === 'boolean' ||\r\n    _column.type === 'values' ||\r\n    _column.type === 'lazy-values' ||\r\n    _column.type === 'date' ||\r\n    _column.type === 'datetime' ||\r\n    _column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    @if (_operators.length) {\r\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\r\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (_templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\r\n    }\r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (_column.type === 'string') {\r\n        <sd-input\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [label]=\"_label\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          (sdBlur)=\"onFilterCommit()\"\r\n          (cleared)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (_column.type === 'number') {\r\n        @if (!_column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            (sdBlur)=\"onFilterCommit()\"\r\n            (cleared)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (_column.filter?.type === 'split-number') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      } @else if (_column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"[\r\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (_column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\r\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (_column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (_column.filter?.type === 'split-date') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n\r\n<!-- ================================================ -->\r\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\r\n<!-- ================================================ -->\r\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      (cleared)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      (cleared)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n  </div>\r\n</ng-template>\r\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: [{
             type: Component,
-            args: [{ selector: 'column-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdOperator, SdInput, SdInputNumber, SdSelect, SdDate, SdDateRange, SdBadge], template: "@let _column = column();\r\n@let _columnFilter = columnFilter();\r\n@let _autoId = autoId();\r\n@let _templateRef = templateRef();\r\n@let _operators = operators();\r\n@let _items = items();\r\n@let _label = label();\r\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    _column.type === 'string' ||\r\n    _column.type === 'number' ||\r\n    _column.type === 'boolean' ||\r\n    _column.type === 'values' ||\r\n    _column.type === 'lazy-values' ||\r\n    _column.type === 'date' ||\r\n    _column.type === 'datetime' ||\r\n    _column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    @if (_operators.length) {\r\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\r\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (_templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\r\n    }\r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (_column.type === 'string') {\r\n        <sd-input\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [label]=\"_label\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          (sdBlur)=\"onFilterCommit()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (_column.type === 'number') {\r\n        @if (!_column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            (sdBlur)=\"onFilterCommit()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (_column.filter?.type === 'split-number') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      } @else if (_column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"[\r\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (_column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\r\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (_column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (_column.filter?.type === 'split-date') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n\r\n<!-- ================================================ -->\r\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\r\n<!-- ================================================ -->\r\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"] }]
+            args: [{ selector: 'column-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdOperator, SdInput, SdInputNumber, SdSelect, SdDate, SdDateRange, SdBadge], template: "@let _column = column();\r\n@let _columnFilter = columnFilter();\r\n@let _autoId = autoId();\r\n@let _templateRef = templateRef();\r\n@let _operators = operators();\r\n@let _items = items();\r\n@let _label = label();\r\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n  @if (\r\n    _column.type === 'string' ||\r\n    _column.type === 'number' ||\r\n    _column.type === 'boolean' ||\r\n    _column.type === 'values' ||\r\n    _column.type === 'lazy-values' ||\r\n    _column.type === 'date' ||\r\n    _column.type === 'datetime' ||\r\n    _column.type === 'time'\r\n  ) {\r\n    <!-- Operator filter -->\r\n    @if (_operators.length) {\r\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\r\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (_templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\r\n    }\r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (_column.type === 'string') {\r\n        <sd-input\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [label]=\"_label\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          (sdBlur)=\"onFilterCommit()\"\r\n          (cleared)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-input>\r\n      } @else if (_column.type === 'number') {\r\n        @if (!_column.filter?.type) {\r\n          <sd-input-number\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            (sdBlur)=\"onFilterCommit()\"\r\n            (cleared)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        } @else if (_column.filter?.type === 'split-number') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      } @else if (_column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"[\r\n            { value: '1', display: _column.option?.displayOnTrue || 'True' },\r\n            { value: '0', display: _column.option?.displayOnFalse || 'False' },\r\n          ]\"\r\n          valueField=\"value\"\r\n          displayField=\"display\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          hideInlineError>\r\n          <ng-template sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (_column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\r\n          [items]=\"_items\"\r\n          [valueField]=\"_column.option.valueField\"\r\n          [displayField]=\"_column.option.displayField\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"_column.filter?.disabled\"\r\n          [multiple]=\"_column.option.selection === 'MULTIPLE'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'date' || _column.type === 'datetime' || _column.type === 'time') {\r\n        @if (!_column.filter?.type || _column.filter?.type === 'daterange') {\r\n          <sd-date-range\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date-range>\r\n        } @else if (_column.filter?.type === 'date') {\r\n          <sd-date\r\n            [autoId]=\"_autoId\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"_column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        } @else if (_column.filter?.type === 'split-date') {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n\r\n<!-- ================================================ -->\r\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\r\n<!-- ================================================ -->\r\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      (cleared)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      (cleared)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"] }]
         }], ctorParameters: () => [] });
 
 // Đố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
@@ -316,23 +344,26 @@ const flattenTree = (roots, option, visited = new Set()) => {
         return roots;
     const maxDepth = option.maxDepth;
     const result = [];
-    const walk = (rows, level) => {
-        for (const row of rows) {
+    const walk = (rows, level, parentPath) => {
+        rows.forEach((row, siblingIdx) => {
             if (visited.has(row.meta.id))
-                continue;
+                return;
             visited.add(row.meta.id);
             row.meta.tree ??= { level, hasChildren: false, isExpanded: false };
             row.meta.tree.level = level;
+            // why: hierarchical numbering (1, 1.2, 1.2.1, ...) — STT template join('.').
+            const indexPath = [...parentPath, siblingIdx + 1];
+            row.meta.tree.indexPath = indexPath;
             result.push(row);
             const canDescend = row.meta.tree.isExpanded && row.meta.tree.hasChildren;
             const depthOk = maxDepth === undefined || level < maxDepth;
             if (!canDescend || !depthOk)
-                continue;
+                return;
             const children = row.meta.tree.childItems ?? [];
-            walk(children, level + 1);
-        }
+            walk(children, level + 1, indexPath);
+        });
     };
-    walk(roots, 0);
+    walk(roots, 0, []);
     return result;
 };
 /** Thu thập mọi SdTableItem đã format trong cây (kể cả node đang collapse). */
@@ -534,7 +565,7 @@ class ExternalFilterComponent {
         });
     };
     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", "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", "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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
@@ -630,7 +661,7 @@ class MobileFilterComponent {
         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", "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", "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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, decorators: [{
             type: Component,
@@ -693,7 +724,7 @@ class ActionFilterPipe {
             if ('children' in action) {
                 const children = [];
                 for (const childAction of action.children) {
-                    const key = SdUtilities.hash(childAction);
+                    const key = Utilities.hash(childAction);
                     if (selectedItems.every(e => e?.meta?.selector?.actions?.includes(key))) {
                         children.push(childAction);
                     }
@@ -703,7 +734,7 @@ class ActionFilterPipe {
                 }
             }
             else {
-                const key = SdUtilities.hash(action);
+                const key = Utilities.hash(action);
                 if (selectedItems.every(e => e?.meta?.selector?.actions?.includes(key))) {
                     results.push(action);
                 }
@@ -781,6 +812,7 @@ class ConfigService {
         REORDER: 'sdReorder',
         INDEX: 'sdIndex',
         TREE_TOGGLE: 'sdTreeToggle',
+        FILLER: 'sdFiller',
     };
     #prefix = 'TABLE_CONFIG';
     #storage;
@@ -793,7 +825,7 @@ class ConfigService {
     #loadConfiguredTable = (option) => {
         // Nếu không có key thì không lấy được setting
         if (!option?.key) {
-            return this.storageService.create(SdUtilities$1.hash(option), {
+            return this.storageService.create(Utilities.hash(option), {
                 type: 'session', // Nếu không có key thì lưu theo session
                 default: this.#default(option),
             });
@@ -840,10 +872,10 @@ class ConfigService {
             result.firstHeaders.push(this.#COLUMNS.COMMAND);
             result.displayedColumns.push(this.#COLUMNS.COMMAND);
         }
-        if (group?.fields?.length) {
-            result.firstHeaders.push(this.#COLUMNS.GROUP);
-            result.displayedColumns.push(this.#COLUMNS.GROUP);
-        }
+        // why: group header row dùng matRowDef RIÊNG với column list ['sdGroupHeader'] qua predicate
+        // when:isGroupHeader — KHÔNG inject vào displayedColumns/firstHeaders để tránh colspan trick
+        // (TDs khác vẫn render gây overflow row). Data row dùng displayedColumns nguyên vẹn.
+        // group option vẫn cần khai báo (qua option.group) để SdGroupPipe biết bucket items.
         // sdIndex đặt sau selector / tree / command-left / group, ngay trước data columns
         if (option.index?.enabled) {
             result.firstHeaders.push(this.#COLUMNS.INDEX);
@@ -919,9 +951,19 @@ class ConfigService {
             result.firstHeaders.push(this.#COLUMNS.COMMAND);
             result.displayedColumns.push(this.#COLUMNS.COMMAND);
         }
+        // why: filler column ở cuối hấp thụ leftover space — opt-in qua option.filler.enabled.
+        // Khi bật, ngăn các cột utility (selection, index, command) bị table-layout auto stretch trên màn rộng.
+        if (option.filler?.enabled) {
+            result.firstHeaders.push(this.#COLUMNS.FILLER);
+            result.displayedColumns.push(this.#COLUMNS.FILLER);
+        }
         result.multipleHeader = result.secondHeaders.length > 0;
-        // Sub infomation không thể có footer
-        result.displayedFooters = result.displayedColumns.filter(val => val !== this.#COLUMNS.SUBINFORMATION && val !== this.#COLUMNS.TREE_TOGGLE);
+        // Sub infomation không thể có footer; filler cũng không cần footer cell.
+        result.displayedFooters = result.displayedColumns.filter(val => val !== this.#COLUMNS.SUBINFORMATION && val !== this.#COLUMNS.TREE_TOGGLE && val !== this.#COLUMNS.FILLER);
+        if (option.filler?.enabled) {
+            // Footer cũng cần filler cuối để giữ width đồng bộ với data row
+            result.displayedFooters.push(this.#COLUMNS.FILLER);
+        }
         if (option?.rowReorder?.enabled) {
             result.displayedColumns.unshift(this.#COLUMNS.REORDER);
             result.firstHeaders.unshift(this.#COLUMNS.REORDER);
@@ -1061,7 +1103,7 @@ class ConfigComponent {
         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();\r\n\r\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\r\n  @if (_configuration) {\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          mat-table\r\n          [dataSource]=\"_configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"_configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\r\n              {{ 'core.component.form-builder.display' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <div class=\"d-flex\" style=\"gap: 8px\">\r\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\r\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n                    <path\r\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\r\n                  </svg>\r\n                </div>\r\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\r\n              {{ 'core.component.table.column-header' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'core.component.table.width' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'core.component.table.fixed' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.fixed\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <ng-container matColumnDef=\"truncate\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\r\n              {{ 'core.component.table.char-limit' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.truncate\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\">\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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", "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 ɵ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();\r\n\r\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\r\n  @if (_configuration) {\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          mat-table\r\n          [dataSource]=\"_configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"_configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\r\n              {{ 'core.component.form-builder.display' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <div class=\"d-flex\" style=\"gap: 8px\">\r\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\r\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n                    <path\r\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\r\n                  </svg>\r\n                </div>\r\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\r\n              {{ 'core.component.table.column-header' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'core.component.table.width' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'core.component.table.fixed' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.fixed\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <ng-container matColumnDef=\"truncate\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\r\n              {{ 'core.component.table.char-limit' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.truncate\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\">\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
@@ -1150,7 +1192,7 @@ class DesktopCellComponent {
     item = input.required();
     cellDef = input.required({});
     value = computed(() => {
-        return SdUtilities.getNestedValue(this.item()?.data, this.column()?.field);
+        return Utilities.getNestedValue(this.item()?.data, this.column()?.field);
     });
     key = computed(() => {
         const data = this.item()?.data;
@@ -1415,7 +1457,7 @@ class SdPopupExport {
         if (!this.exportOption?.key) {
             return null;
         }
-        return SdUtilities.hash({
+        return Utilities.hash({
             prefix,
             key: this.exportOption?.key,
         });
@@ -1666,7 +1708,7 @@ 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>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n      <div class=\"c-empty\">\r\n        <img class=\"sd-image-data-empty\" alt=\"empty-image\" />\r\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"files?.length\">\r\n      <div class=\"col-12\">\r\n        <div class=\"c-table\" style=\"max-height: 50vh\">\r\n          <table mat-table [dataSource]=\"files\">\r\n            <ng-container matColumnDef=\"stt\">\r\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                {{ idx + 1 }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"fileName\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\r\n                {{ 'File name' }}\r\n              </th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                {{ item.fileName }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"action\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                <div class=\"d-flex\">\r\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                    <mat-icon>download</mat-icon>\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\r\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\r\n        </sd-button>\r\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\r\n        </sd-button>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\r\n      <div class=\"col-12 mt-20\">\r\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\r\n          <ng-container *ngFor=\"let column of columns\">\r\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n              {{ column.title }}\r\n            </mat-chip-option>\r\n          </ng-container>\r\n        </mat-chip-listbox>\r\n      </div>\r\n      <div class=\"col-12 row\">\r\n        <div class=\"col-10\">\r\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\r\n        </div>\r\n        <div class=\"col-2 mt-8\">\r\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</sd-modal>\r\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", "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 ɵ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>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n      <div class=\"c-empty\">\r\n        <img class=\"sd-image-data-empty\" alt=\"empty-image\" />\r\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"files?.length\">\r\n      <div class=\"col-12\">\r\n        <div class=\"c-table\" style=\"max-height: 50vh\">\r\n          <table mat-table [dataSource]=\"files\">\r\n            <ng-container matColumnDef=\"stt\">\r\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                {{ idx + 1 }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"fileName\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\r\n                {{ 'File name' }}\r\n              </th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                {{ item.fileName }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"action\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                <div class=\"d-flex\">\r\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                    <mat-icon>download</mat-icon>\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\r\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\r\n        </sd-button>\r\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\r\n        </sd-button>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\r\n      <div class=\"col-12 mt-20\">\r\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\r\n          <ng-container *ngFor=\"let column of columns\">\r\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n              {{ column.title }}\r\n            </mat-chip-option>\r\n          </ng-container>\r\n        </mat-chip-listbox>\r\n      </div>\r\n      <div class=\"col-12 row\">\r\n        <div class=\"col-10\">\r\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\r\n        </div>\r\n        <div class=\"col-2 mt-8\">\r\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</sd-modal>\r\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPopupExport, decorators: [{
             type: Component,
@@ -1933,7 +1975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 const MapToSdTableItem = (item) => ({
     data: item,
     meta: {
-        id: SdUtilities.hash({ data: item }),
+        id: Utilities.hash({ data: item }),
         display: {},
         expand: {
             isExpanding: false,
@@ -1946,56 +1988,76 @@ const MapToSdTableItem = (item) => ({
 });
 
 class SdGroupPipe {
-    transform(items, gridOption) {
-        if (gridOption.tree) {
+    /**
+     * Nhóm items theo `option.group.fields`. Mỗi group sinh ra 1 synthetic SdTableItem
+     * (group header) đặt trước children. Header có `meta.group.isGroupHeader = true` + `key`
+     * + `values` + `items` + `isExpanded` để template + table consume.
+     *
+     * Khi `option.group.collapsible = true` + group đang collapse → children bị lọc khỏi output.
+     *
+     * `expandState` (optional, owned by component) — Map<key, expanded> giữ trạng thái
+     * expand/collapse qua các lần transform. Pipe đọc state từ Map; nếu key chưa tồn tại,
+     * dùng `!option.group.defaultCollapsed`. Pipe ghi state về Map cho lần read sau.
+     *
+     * @example
+     * `_items | sdGroup: _tableOption : groupExpandState`
+     */
+    transform(items, gridOption, expandState) {
+        if (gridOption?.tree) {
             if (typeof ngDevMode !== 'undefined' && ngDevMode && gridOption.group) {
                 console.warn('[sd-table] option.tree and option.group cannot be used together. group is ignored.');
             }
             return items;
         }
-        const { group } = gridOption;
-        if (!group) {
+        const group = gridOption?.group;
+        if (!group?.fields?.length)
             return items;
-        }
-        const { fields, htmlTemplate } = group;
-        if (!fields?.length) {
-            return items;
-        }
-        const groupItem = {};
+        const fields = group.fields;
+        const collapsible = !!group.collapsible;
+        const defaultExpanded = !group.defaultCollapsed;
+        // Bucket items theo combined field-value hash.
+        // Field hỗ trợ dot-notation (vd 'customer.id') — resolve qua getNestedValue.
+        const buckets = new Map();
         for (const item of items) {
-            let obj = {};
-            for (const field of fields) {
-                obj = {
-                    ...obj,
-                    ...(item[field] ?? { [field]: item[field] }),
-                };
+            const values = {};
+            for (const f of fields)
+                values[f] = Utilities.getNestedValue(item.data, f);
+            const key = Utilities.hash(values);
+            let bucket = buckets.get(key);
+            if (!bucket) {
+                bucket = { values, items: [] };
+                buckets.set(key, bucket);
             }
-            const key = SdUtilities.hash(obj);
-            if (!groupItem[key]) {
-                groupItem[key] = [];
-            }
-            groupItem[key].push(item);
+            bucket.items.push(item);
         }
-        const results = [];
-        for (const key of Object.keys(groupItem)) {
-            const result = MapToSdTableItem({});
-            result.meta.group.items = groupItem[key];
-            result.meta.group.htmlTemplate = htmlTemplate(groupItem[key]);
-            results.push(result);
-            for (const item of groupItem[key]) {
-                results.push(item);
+        const result = [];
+        buckets.forEach((bucket, key) => {
+            const isExpanded = expandState?.has(key) ? !!expandState.get(key) : defaultExpanded;
+            if (collapsible && expandState)
+                expandState.set(key, isExpanded);
+            const header = MapToSdTableItem({});
+            header.meta.group = {
+                isGroupHeader: true,
+                key,
+                values: bucket.values,
+                items: bucket.items,
+                isExpanded,
+            };
+            header.meta.selector.selectable = false;
+            result.push(header);
+            if (!collapsible || isExpanded) {
+                for (const child of bucket.items)
+                    result.push(child);
             }
-        }
-        return results;
+        });
+        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" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdGroupPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'sdGroup',
-                }]
+            args: [{ name: 'sdGroup' }]
         }] });
 
 class SdSelectionDisabledPipe {
@@ -2021,7 +2083,7 @@ class SdSelectionDisabledPipe {
         const availableActions = actions.filter(action => {
             if ('children' in action) {
                 for (const childAction of action.children) {
-                    const key = SdUtilities.hash(childAction);
+                    const key = Utilities.hash(childAction);
                     if (selectedItems.every(e => e.meta.selector?.actions?.includes(key))) {
                         return true;
                     }
@@ -2029,7 +2091,7 @@ class SdSelectionDisabledPipe {
                 return false;
             }
             else {
-                const key = SdUtilities.hash(action);
+                const key = Utilities.hash(action);
                 return selectedItems.every(e => e.meta.selector?.actions?.includes(key));
             }
         });
@@ -2037,13 +2099,13 @@ class SdSelectionDisabledPipe {
         for (const action of availableActions) {
             if ('children' in action) {
                 for (const childAction of action.children) {
-                    if (rowData.meta.selector?.actions?.includes(SdUtilities.hash(childAction))) {
+                    if (rowData.meta.selector?.actions?.includes(Utilities.hash(childAction))) {
                         return false;
                     }
                 }
             }
             else {
-                if (rowData.meta.selector?.actions?.includes(SdUtilities.hash(action))) {
+                if (rowData.meta.selector?.actions?.includes(Utilities.hash(action))) {
                     return false;
                 }
             }
@@ -2110,7 +2172,7 @@ class SdSelectionVisiblePipe {
                 let hasGroup = false;
                 for (const child of action.children) {
                     const { hidden, isGrouped } = child;
-                    const key = SdUtilities.hash(child);
+                    const key = Utilities.hash(child);
                     if (isGrouped) {
                         hasGroup = true;
                     }
@@ -2132,15 +2194,15 @@ class SdSelectionVisiblePipe {
                     }
                 }
                 if (flag) {
-                    rowData.meta.selector.actions.push(SdUtilities.hash(action));
+                    rowData.meta.selector.actions.push(Utilities.hash(action));
                     if (hasGroup) {
-                        groupedActions.push(SdUtilities.hash(action));
+                        groupedActions.push(Utilities.hash(action));
                     }
                 }
             }
             else {
                 const { hidden, isGrouped } = action;
-                const key = SdUtilities.hash(action);
+                const key = Utilities.hash(action);
                 if (typeof hidden === 'function') {
                     if (!hidden(rowData.data)) {
                         rowData.meta.selector.actions.push(key);
@@ -2252,11 +2314,11 @@ class TableExportService {
                 for (const item of exportItems) {
                     const obj = {};
                     const handle = async (exportColumn) => {
-                        obj[exportColumn.field] = SdUtilities.getNestedValue(item, exportColumn.field);
+                        obj[exportColumn.field] = Utilities.getNestedValue(item, exportColumn.field);
                         const column = allColumns.find(e => e.field === exportColumn.field);
                         const exportedColumn = allExportedColumns.find(e => e.field === exportColumn.field);
                         if (exportedColumn?.transform) {
-                            obj[exportedColumn.field] = exportedColumn.transform(SdUtilities.getNestedValue(item, exportedColumn.field), item);
+                            obj[exportedColumn.field] = exportedColumn.transform(Utilities.getNestedValue(item, exportedColumn.field), item);
                             return;
                         }
                         if (!column)
@@ -2271,7 +2333,7 @@ class TableExportService {
                         }
                         if (!columns.some(e => e.field === column.field))
                             return;
-                        const itemValue = SdUtilities.getNestedValue(item, column.field);
+                        const itemValue = Utilities.getNestedValue(item, column.field);
                         const fieldStr = column.field;
                         if (column.transform) {
                             const transform = column.transform(itemValue, item, { isExport: true });
@@ -2451,8 +2513,8 @@ class TableFormatService {
                     const data = column.option.items();
                     cacheValues[column.field] = (Array.isArray(data) ? data : []).map(e => ({
                         ...e,
-                        [column.option.valueField]: SdUtilities.getNestedValue(e, column.option.valueField),
-                        [column.option.displayField]: SdUtilities.getNestedValue(e, column.option.displayField),
+                        [column.option.valueField]: Utilities.getNestedValue(e, column.option.valueField),
+                        [column.option.displayField]: Utilities.getNestedValue(e, column.option.displayField),
                     }));
                     cacheObjValues[column.field] = ArrayUtilities.toObject(column.option.valueField, cacheValues[column.field]);
                 }
@@ -2471,8 +2533,8 @@ class TableFormatService {
                 else {
                     cacheValues[column.field] = column.option.items.map(e => ({
                         ...e,
-                        [column.option.valueField]: SdUtilities.getNestedValue(e, column.option.valueField),
-                        [column.option.displayField]: SdUtilities.getNestedValue(e, column.option.displayField),
+                        [column.option.valueField]: Utilities.getNestedValue(e, column.option.valueField),
+                        [column.option.displayField]: Utilities.getNestedValue(e, column.option.displayField),
                     }));
                     cacheObjValues[column.field] = ArrayUtilities.toObject(column.option.valueField, cacheValues[column.field]);
                 }
@@ -2483,8 +2545,8 @@ class TableFormatService {
             for (const result of results) {
                 cacheValues[result.key] = result.data.map(e => ({
                     ...e,
-                    [result.valueField]: SdUtilities.getNestedValue(e, result.valueField),
-                    [result.displayField]: SdUtilities.getNestedValue(e, result.displayField),
+                    [result.valueField]: Utilities.getNestedValue(e, result.valueField),
+                    [result.displayField]: Utilities.getNestedValue(e, result.displayField),
                 }));
                 cacheObjValues[result.key] = ArrayUtilities.toObject(result.valueField, cacheValues[result.key]);
             }
@@ -2503,7 +2565,7 @@ class TableFormatService {
                 const { option: { views, valueField, displayField }, } = column;
                 cacheObjValues[fieldStr] = cacheObjValues[fieldStr] || {};
                 const values = ArrayUtilities.distinct(items
-                    .map(item => SdUtilities.getNestedValue(item.data, fieldStr))
+                    .map(item => Utilities.getNestedValue(item.data, fieldStr))
                     .filter(val => val?.toString())
                     .reduce((current, next) => [...current, ...(Array.isArray(next) ? next : [next])], [])
                     .filter(val => !Object.keys(cacheObjValues[fieldStr]).includes(val)));
@@ -2512,10 +2574,10 @@ class TableFormatService {
                         console.error(err);
                         return [];
                     }))
-                        .filter((item) => values.includes(SdUtilities.getNestedValue(item, valueField)))
+                        .filter((item) => values.includes(Utilities.getNestedValue(item, valueField)))
                         .map((e) => ({
-                        [valueField]: SdUtilities.getNestedValue(e, valueField),
-                        [displayField]: SdUtilities.getNestedValue(e, displayField),
+                        [valueField]: Utilities.getNestedValue(e, valueField),
+                        [displayField]: Utilities.getNestedValue(e, displayField),
                     }));
                     Object.assign(cacheObjValues[fieldStr], ArrayUtilities.toObject(valueField, lazyItems) || {});
                 }
@@ -2523,7 +2585,7 @@ class TableFormatService {
             // Format dữ liệu cho từng hàng
             for (const item of items) {
                 const rowData = item.data;
-                const value = SdUtilities.getNestedValue(rowData, fieldStr);
+                const value = Utilities.getNestedValue(rowData, fieldStr);
                 item.meta.display[fieldStr] = {
                     badge: undefined,
                     cellStyle: column.align === 'right' ? { 'text-align': 'right!important' } : undefined,
@@ -2571,7 +2633,7 @@ class TableFormatService {
                         }
                     }
                     if (display.data === null || display.data === undefined || display.data === '') {
-                        display.data = SD_EMPTY_STR;
+                        display.data = EMPTY_STR;
                         display.badge = undefined;
                     }
                 }
@@ -2667,7 +2729,7 @@ class SdTableFilterService {
     register = (filter, args) => {
         let cacheSession = false;
         const { id, columns, externalFilters } = args;
-        const tempKey = SdUtilities.hash({
+        const tempKey = Utilities.hash({
             id,
             columns: columns?.map(e => e.field).filter(field => !!field) || [],
             externalFilters: externalFilters?.map(e => e.field).filter(field => !!field) || [],
@@ -2917,6 +2979,7 @@ class SdTable extends SdBaseSecureComponent {
     paginator = viewChild(MatPaginator);
     sort = viewChild(MatSort);
     sdSubInformation = contentChild(SdTableExpandDefDirective);
+    sdGroupDef = contentChild(SdTableGroupDefDirective);
     sdCellDefs = contentChildren(SdTableCellDefDirective);
     sdFooterDefs = contentChildren(SdMaterialFooterDefDirective);
     sdFilterDefs = contentChildren(SdTableFilterDefDirective);
@@ -3167,7 +3230,7 @@ class SdTable extends SdBaseSecureComponent {
                 const { field, type } = column;
                 const filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
                 // SỬA: Dùng getNestedValue để hỗ trợ nested field trong filterLocal
-                const rawColVal = SdUtilities.getNestedValue(item, field);
+                const rawColVal = Utilities.getNestedValue(item, field);
                 const columnValue = (rawColVal || '').toString().trim().toLowerCase();
                 if (filterValue) {
                     if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
@@ -3182,7 +3245,7 @@ class SdTable extends SdBaseSecureComponent {
                         const columnType = column;
                         const isMultiple = columnType.option.selection === 'MULTIPLE';
                         if (isMultiple && Array.isArray(rawColVal)) {
-                            const columnValues = rawColVal.map((i) => (SdUtilities.getNestedValue(i, columnType.option.valueField) ?? '').toString().trim().toLowerCase()) ?? [];
+                            const columnValues = rawColVal.map((i) => (Utilities.getNestedValue(i, columnType.option.valueField) ?? '').toString().trim().toLowerCase()) ?? [];
                             const filterValues = rawColumnFilter[field]?.map((v) => (v ?? '').toString().trim().toLowerCase());
                             if (filterValues?.length && filterValues.every(fv => !columnValues.includes(fv))) {
                                 return false;
@@ -3259,8 +3322,8 @@ class SdTable extends SdBaseSecureComponent {
                     const data = tableItemCurrent.data;
                     const next = tableItemNext.data;
                     // SỬA: Dùng getNestedValue cho sorting
-                    const dataVal = SdUtilities.getNestedValue(data, field);
-                    const nextVal = SdUtilities.getNestedValue(next, field);
+                    const dataVal = Utilities.getNestedValue(data, field);
+                    const nextVal = Utilities.getNestedValue(next, field);
                     if (type === 'number') {
                         return (dataVal || 0) - (nextVal || 0);
                     }
@@ -3427,6 +3490,9 @@ class SdTable extends SdBaseSecureComponent {
             await this.#expandDefaultBranches(this.items(), treeOpt);
             this.treeRevision.update(n => n + 1);
         }
+        // Restore selection từ preservedSelectedMap (chỉ khi preserveSelection bật).
+        // Phải chạy TRƯỚC applyDefaultSelected để user-selection ưu tiên hơn default.
+        this.#restorePreservedSelection();
         // Áp dụng defaultSelected: pre-select các item thỏa predicate
         this.#applyDefaultSelected();
         await this.tableOption()?.reload?.onReload?.(this.items(), additionArgs);
@@ -3674,6 +3740,12 @@ class SdTable extends SdBaseSecureComponent {
                 this.#getSelectionRows()
                     .filter(e => e !== rowData)
                     .forEach(e => (e.meta.selector.isSelected = false));
+                // single + preserve: chỉ giữ MỘT item trong map (item vừa chọn nếu isSelected,
+                // hoặc empty nếu vừa bỏ chọn). Off-page items có thể đã ở trong map → xoá hết
+                // trước khi #updateSelectedItems sync entry mới.
+                if (this.#preserveEnabled()) {
+                    this.#preservedSelectedMap.clear();
+                }
                 opt.selector?.onSelect?.(rowData.data, selectedData());
                 this.isSelectAll.set(false);
                 this.#updateSelectedItems();
@@ -3699,6 +3771,10 @@ class SdTable extends SdBaseSecureComponent {
         items = items || this.items();
         this.isSelectAll.set(false);
         items?.forEach(e => (e.meta.selector.isSelected = false));
+        // User explicit X — clear toàn bộ preserved map (bao gồm cả off-page items).
+        if (this.#preserveEnabled()) {
+            this.#preservedSelectedMap.clear();
+        }
         this.#updateSelectedItems();
     };
     #getSelectionRows = () => {
@@ -3725,6 +3801,83 @@ class SdTable extends SdBaseSecureComponent {
         const visible = this.#getSelectionRows();
         this.isSelectAll.set(visible.length > 0 && visible.every(e => e.meta.selector?.isSelected));
     };
+    // ==========================================
+    // GROUP HELPERS — sync selection + expand state cho group header rows
+    // ==========================================
+    /** Children selectable của 1 group header (lọc bỏ children không selectable). */
+    #groupSelectableChildren = (header) => {
+        const children = header.meta.group?.items || [];
+        return children.filter(c => c.meta.selector?.selectable !== false);
+    };
+    /** true nếu MỌI selectable child trong group đều selected. Group rỗng (không child) → false. */
+    isGroupAllSelected = (header) => {
+        const sel = this.#groupSelectableChildren(header);
+        return sel.length > 0 && sel.every(c => c.meta.selector.isSelected);
+    };
+    /** true nếu CÓ MỘT VÀI selectable child selected nhưng KHÔNG phải tất cả. */
+    isGroupIndeterminate = (header) => {
+        const sel = this.#groupSelectableChildren(header);
+        if (sel.length === 0)
+            return false;
+        const some = sel.some(c => c.meta.selector.isSelected);
+        const all = sel.every(c => c.meta.selector.isSelected);
+        return some && !all;
+    };
+    /** Toggle select-all cho 1 group: set isSelected cho mọi selectable child, sync state. */
+    onSelectGroup = (header, checked) => {
+        const sel = this.#groupSelectableChildren(header);
+        sel.forEach(c => (c.meta.selector.isSelected = checked));
+        const opt = this.tableOption();
+        opt?.selector?.onSelectAll?.(this.#getSelectedRowData());
+        this.#syncSelectAllState();
+        this.#updateSelectedItems();
+    };
+    // Map<groupKey, isExpanded> — table own state, pass vào SdGroupPipe arg 3.
+    // why: pipe stateless, persist toggle qua các lần re-eval bằng Map external. Mutate Map
+    // KHÔNG tự re-trigger pipe (default pure: true) — gọi items.update để invalidate input.
+    groupExpandState = new Map();
+    /** Toggle expand/collapse cho 1 group (chỉ ý nghĩa khi option.group.collapsible). */
+    toggleGroupExpand = (header) => {
+        if (!header.meta.group?.key)
+            return;
+        const key = header.meta.group.key;
+        const defaultExpanded = !this.tableOption()?.group?.defaultCollapsed;
+        const current = this.groupExpandState.has(key)
+            ? !!this.groupExpandState.get(key)
+            : defaultExpanded;
+        this.groupExpandState.set(key, !current);
+        header.meta.group.isExpanded = !current;
+        // why: trigger pipe re-eval — Map mutation không thay đổi reference items() nên cần update.
+        this.items.update(arr => [...arr]);
+    };
+    /**
+     * Predicate cho matRowDef.when — phân biệt group header row vs data row.
+     * Group header row dùng matRowDef riêng với column list ['sdGroupHeader'] (1 cell duy nhất).
+     * Data row dùng displayedColumns nguyên vẹn.
+     */
+    isGroupHeaderRow = (_idx, row) => row?.meta?.group?.isGroupHeader === true;
+    isDataRow = (_idx, row) => row?.meta?.group?.isGroupHeader !== true;
+    /**
+     * 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));
+    /** Build context object truyền vào SdTableGroupDefDirective template. */
+    groupContext = (header) => {
+        const g = header.meta.group;
+        const items = g?.items || [];
+        return {
+            items,
+            data: items.map(i => i.data),
+            key: g?.key || '',
+            values: g?.values || {},
+            isExpanded: g?.isExpanded ?? true,
+            isSelected: this.isGroupAllSelected(header),
+            indeterminate: this.isGroupIndeterminate(header),
+            toggleExpand: () => this.toggleGroupExpand(header),
+            toggleSelect: () => this.onSelectGroup(header, !this.isGroupAllSelected(header)),
+        };
+    };
     rowStyle = (row, index) => {
         const fn = this.tableOption()?.style?.rowCss;
         if (!fn)
@@ -3735,8 +3888,44 @@ class SdTable extends SdBaseSecureComponent {
             : undefined;
         return fn(row.data, index, ctx);
     };
+    // why: khi preserveSelection bật, giữ map nội bộ id → SdTableItem để selection
+    // không mất qua filter / paginate / sort / reload (kể cả server re-fetch tạo refs mới).
+    // Map chỉ bị clear khi user gọi onClearSelection (nút X) hoặc bỏ chọn từng item.
+    #preservedSelectedMap = new Map();
+    #preserveEnabled = () => this.tableOption()?.selector?.preserveSelection === true;
+    // Restore isSelected cho item visible nào id đã có trong preserved map.
+    // Đồng thời update reference trong map sang SdTableItem mới (cần thiết khi server
+    // re-fetch tạo refs mới, ta muốn map giữ ref hiện hành để các tham chiếu downstream OK).
+    #restorePreservedSelection = () => {
+        if (!this.#preserveEnabled())
+            return;
+        const rows = this.#getSelectionRows();
+        rows.forEach(item => {
+            if (this.#preservedSelectedMap.has(item.meta.id)) {
+                item.meta.selector.isSelected = true;
+                this.#preservedSelectedMap.set(item.meta.id, item);
+            }
+        });
+    };
     #updateSelectedItems = () => {
-        this.selectedTableItems.set(this.#getSelectionRows().filter(item => item.meta.selector.isSelected));
+        const rows = this.#getSelectionRows();
+        if (this.#preserveEnabled()) {
+            // Sync map theo state visible: add nếu selected, remove nếu deselected.
+            // Off-page items giữ nguyên trong map (không bị visit ở đây).
+            rows.forEach(item => {
+                const id = item.meta.id;
+                if (item.meta.selector.isSelected) {
+                    this.#preservedSelectedMap.set(id, item);
+                }
+                else {
+                    this.#preservedSelectedMap.delete(id);
+                }
+            });
+            this.selectedTableItems.set(Array.from(this.#preservedSelectedMap.values()));
+        }
+        else {
+            this.selectedTableItems.set(rows.filter(item => item.meta.selector.isSelected));
+        }
         this.#ref.detectChanges();
     };
     clearFilter = () => {
@@ -4082,7 +4271,7 @@ class SdTable extends SdBaseSecureComponent {
                 provide: MatPaginatorIntl,
                 useClass: MatPaginatorIntlCro,
             },
-        ], queries: [{ propertyName: "sdSubInformation", first: true, predicate: SdTableExpandDefDirective, 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();\r\n@let _tableOption = tableOption()!;\r\n@let _loading = loading();\r\n@let _items = items();\r\n@let _total = total();\r\n@let _isFiltered = isFiltered();\r\n@let _requireFiltered = requireFiltered();\r\n@let _export = _tableOption?.export;\r\n@let _exporting = exporting();\r\n@let _titleDef = titleDef();\r\n\r\n@if (_configuration) {\r\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\r\n    <external-filter\r\n      class=\"mb-16\"\r\n      [autoId]=\"autoId()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\r\n    </external-filter>\r\n  }\r\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption;\r\n  <ng-content select=\"[sdTableTop]\"></ng-content>\r\n  <div class=\"c-container\">\r\n    @if (_loading) {\r\n      <div class=\"c-loading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n    }\r\n    <div\r\n      class=\"c-table\"\r\n      sdScroll\r\n      stickyShadow\r\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\r\n      [style.min-height]=\"_tableOption.style?.minHeight\">\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"groupedItems\"\r\n        [trackBy]=\"trackBy\"\r\n        matSort\r\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\r\n        multiTemplateDataRows\r\n        cdkDropList\r\n        [cdkDropListData]=\"groupedItems\"\r\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\r\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\r\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\r\n        @if (_tableOption.rowReorder?.enabled) {\r\n          <ng-container matColumnDef=\"sdReorder\">\r\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\r\n              @if (!row.meta?.group?.items?.length) {\r\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\r\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\r\n                </mat-icon>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        @if (_tableOption.tree) {\r\n          <ng-container matColumnDef=\"sdTreeToggle\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"sd-tree-toggle-cell p-0\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\r\n              @if (row.meta?.tree) {\r\n                <div\r\n                  class=\"sd-tree-toggle-inner\"\r\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\r\n                  @if (row.meta.tree.hasChildren) {\r\n                    @if (row.meta.tree.isExpanding) {\r\n                      <div class=\"lds-ring sd-tree-spinner\">\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                      </div>\r\n                    } @else {\r\n                      <sd-button\r\n                        type=\"link\"\r\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\r\n                        width=\"35px\">\r\n                      </sd-button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\r\n            @if (sdSubInformation()?.templateRef) {\r\n              @if (_tableOption.expand?.always) {\r\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n              } @else {\r\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  @if (item.isExpanded) {\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\r\n              <sd-button\r\n                type=\"link\"\r\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                (click)=\"onExpand(element)\"\r\n                width=\"35px\">\r\n              </sd-button>\r\n            }\r\n            @if (element.isExpanding) {\r\n              <div class=\"lds-ring\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n              </div>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSelection\" sticky>\r\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\r\n            @if (visibleSelectAll) {\r\n              <mat-checkbox\r\n                class=\"c-selection px-8\"\r\n                color=\"primary\"\r\n                [ngModel]=\"isSelectAll()\"\r\n                (ngModelChange)=\"isSelectAll.set($event)\"\r\n                (change)=\"onSelectAll()\">\r\n              </mat-checkbox>\r\n            }\r\n          </th>\r\n\r\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\r\n            @let visible = item | selectionVisible: _tableOption.selector;\r\n            @if (visible) {\r\n              @if (_tableOption.selector?.single) {\r\n                <mat-radio-button\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [checked]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-radio-button>\r\n              } @else {\r\n                <mat-checkbox\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-checkbox>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @if (_tableOption.index?.enabled) {\r\n          @let _pageOffset = pageOffset();\r\n          <ng-container matColumnDef=\"sdIndex\" sticky>\r\n            <th\r\n              class=\"text-center p-0\"\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.width]=\"_tableOption.index?.width || '50px'\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n              {{ _tableOption.index?.title || '#' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = index\">\r\n              @if (!item?.sdGroup) {\r\n                {{ _pageOffset + i + 1 }}\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n        <ng-container\r\n          matColumnDef=\"sdCommand\"\r\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\r\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n            <desktop-command\r\n              [autoId]=\"autoId()\"\r\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\r\n              [item]=\"item\"\r\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"sdGroup\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : _configuration.displayedColumns.length\">\r\n            <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | sdSafeHtml\"></div>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @for (column of _configuration.firstColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"px-8 py-8 c-th\"\r\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\r\n              [minWidth]=\"column.minWidth\"\r\n              [maxWidth]=\"column.maxWidth\"\r\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\r\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\r\n              <div>\r\n                @if (column.type === 'children') {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                } @else {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\"\r\n                    [disabled]=\"!column.sortable\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                  @let hideInlineFilter =\r\n                    _tableOption.filter?.disabled ||\r\n                    _tableOption.filter?.hideInlineFilter === true ||\r\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\r\n                  @if (!hideInlineFilter) {\r\n                    <ng-container *sdDesktop>\r\n                      <column-filter\r\n                        [autoId]=\"autoId()\"\r\n                        [value]=\"columnFilter?.[column.field!]!\"\r\n                        [operator]=\"columnOperator[column.field]\"\r\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                        [columnFilter]=\"columnFilter!\"\r\n                        [cacheValues]=\"cacheValues\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"\r\n                        (filterCommit)=\"onFilterCommit()\">\r\n                      </column-filter>\r\n                    </ng-container>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              [class.d-none]=\"column.type === 'children'\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children' && !item?.sdGroup) {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        @for (column of _configuration.secondColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"c-th px-8\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\">\r\n              <div>\r\n                <div\r\n                  aria-hidden=\"true\"\r\n                  mat-sort-header\r\n                  class=\"c-header-title\"\r\n                  [class.justify-content-end]=\"column.align === 'right'\"\r\n                  [class.text-right]=\"column.align === 'right'\"\r\n                  [disabled]=\"!column.sortable\">\r\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                </div>\r\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\r\n                  <ng-container *sdDesktop>\r\n                    <column-filter\r\n                      [autoId]=\"autoId()\"\r\n                      [value]=\"columnFilter?.[column.field!]!\"\r\n                      [operator]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter!\"\r\n                      [cacheValues]=\"cacheValues\"\r\n                      [column]=\"column\"\r\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                      (filterChange)=\"onFilterChange()\"\r\n                      (filterCommit)=\"onFilterCommit()\">\r\n                    </column-filter>\r\n                  </ng-container>\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"item[column.field]\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children') {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\r\n        @if (!!_configuration.secondHeaders.length) {\r\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\r\n        }\r\n        <tr\r\n          mat-row\r\n          cdkDrag\r\n          [cdkDragData]=\"row\"\r\n          [cdkDragDisabled]=\"\r\n            !_tableOption.rowReorder?.enabled ||\r\n            !!row.meta?.group?.items?.length ||\r\n            (row.meta?.tree?.level ?? 0) > 0 ||\r\n            isReorderDisabled(row)\r\n          \"\r\n          *matRowDef=\"let row; columns: _configuration.displayedColumns\"\r\n          matRipple\r\n          class=\"c-row\"\r\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\r\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\r\n          [ngStyle]=\"rowStyle(row)\"\r\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\r\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\r\n        }\r\n      </table>\r\n      @if (!_loading && !_total) {\r\n        <div class=\"c-no-data-row\">\r\n          @if (_isFiltered) {\r\n            @if (tableConfiguration?.images?.filterEmpty) {\r\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\r\n            } @else {\r\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\r\n            }\r\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\r\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\r\n          } @else {\r\n            @if (_requireFiltered) {\r\n              @if (tableConfiguration?.images?.filterRequired) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\r\n            } @else {\r\n              @if (tableConfiguration?.images?.dataEmpty) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"c-paginator\">\r\n      <div class=\"c-action\">\r\n        <ng-container *sdDesktop>\r\n          @if (_tableOption.reload?.visible) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.reload' | translate\"\r\n              prefixIcon=\"refresh\"\r\n              (click)=\"reload()\"\r\n              [disabled]=\"!_items.length\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        @if (_export && _items.length) {\r\n          @if (_export.type === 'custom') {\r\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\r\n          } @else {\r\n            @if (_export.visible) {\r\n              @if (_exporting) {\r\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\r\n              } @else {\r\n                @if (_export.visible === 'ALL' || !_export.visible) {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n                  <mat-menu #menu=\"matMenu\">\r\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\r\n                    </button>\r\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\r\n                    </button>\r\n                  </mat-menu>\r\n                } @else if (_export.visible === 'EXCEL') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\r\n                } @else if (_export.visible === 'CSV') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <ng-container *sdDesktop>\r\n          @if (configComponent()) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.setup-short' | translate\"\r\n              prefixIcon=\"settings\"\r\n              (click)=\"configComponent()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\r\n        <ng-container *sdMobile>\r\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\r\n            <sd-button\r\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\r\n              class=\"mr-8\"\r\n              prefixIcon=\"filter_alt\"\r\n              (click)=\"mobileFilter()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n      </div>\r\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\r\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\r\n      <ng-container *sdDesktop>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\r\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\r\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\r\n      </ng-container>\r\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\r\n      <ng-container *sdMobile>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [showFirstLastButtons]=\"false\"\r\n          hidePageSize></mat-paginator>\r\n      </ng-container>\r\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\r\n      <ng-container *sdDesktop>\r\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\r\n          <div class=\"T14R pr-16\">\r\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\r\n  @if (_tableOption.config?.visible) {\r\n    <config [tableOption]=\"_tableOption\" />\r\n  }\r\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\r\n  @if (!_tableOption.filter?.disabled && filterRegister) {\r\n    <mobile-filter\r\n      [autoId]=\"autoId()\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\r\n      [columns]=\"_configuration.firstColumns\"\r\n      [filterDefs]=\"sdFilterDefs()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [cacheValues]=\"cacheValues\">\r\n    </mobile-filter>\r\n  }\r\n}\r\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 .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}\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: "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: SdSafeHtmlPipe, name: "sdSafeHtml" }, { 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();\r\n@let _tableOption = tableOption()!;\r\n@let _loading = loading();\r\n@let _items = items();\r\n@let _total = total();\r\n@let _isFiltered = isFiltered();\r\n@let _requireFiltered = requireFiltered();\r\n@let _export = _tableOption?.export;\r\n@let _exporting = exporting();\r\n@let _titleDef = titleDef();\r\n\r\n@if (_configuration) {\r\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\r\n    <external-filter\r\n      class=\"mb-16\"\r\n      [autoId]=\"autoId()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\r\n    </external-filter>\r\n  }\r\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption : groupExpandState;\r\n  <ng-content select=\"[sdTableTop]\"></ng-content>\r\n  <div class=\"c-container\">\r\n    @if (_loading) {\r\n      <div class=\"c-loading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n    }\r\n    <div\r\n      class=\"c-table\"\r\n      sdScroll\r\n      stickyShadow\r\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\r\n      [style.min-height]=\"_tableOption.style?.minHeight\">\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"groupedItems\"\r\n        [trackBy]=\"trackBy\"\r\n        matSort\r\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\r\n        multiTemplateDataRows\r\n        cdkDropList\r\n        [cdkDropListData]=\"groupedItems\"\r\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\r\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\r\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\r\n        @if (_tableOption.rowReorder?.enabled) {\r\n          <ng-container matColumnDef=\"sdReorder\">\r\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\r\n              @if (!row.meta?.group?.items?.length) {\r\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\r\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\r\n                </mat-icon>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        @if (_tableOption.tree) {\r\n          <ng-container matColumnDef=\"sdTreeToggle\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"sd-tree-toggle-cell p-0\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\r\n              @if (row.meta?.tree) {\r\n                <div\r\n                  class=\"sd-tree-toggle-inner\"\r\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\r\n                  @if (row.meta.tree.hasChildren) {\r\n                    @if (row.meta.tree.isExpanding) {\r\n                      <div class=\"lds-ring sd-tree-spinner\">\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                      </div>\r\n                    } @else {\r\n                      <sd-button\r\n                        type=\"link\"\r\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\r\n                        width=\"35px\">\r\n                      </sd-button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\r\n            @if (sdSubInformation()?.templateRef) {\r\n              @if (_tableOption.expand?.always) {\r\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n              } @else {\r\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  @if (item.isExpanded) {\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\r\n              <sd-button\r\n                type=\"link\"\r\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                (click)=\"onExpand(element)\"\r\n                width=\"35px\">\r\n              </sd-button>\r\n            }\r\n            @if (element.isExpanding) {\r\n              <div class=\"lds-ring\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n              </div>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSelection\" sticky>\r\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\r\n            @if (visibleSelectAll) {\r\n              <mat-checkbox\r\n                class=\"c-selection px-8\"\r\n                color=\"primary\"\r\n                [ngModel]=\"isSelectAll()\"\r\n                (ngModelChange)=\"isSelectAll.set($event)\"\r\n                (change)=\"onSelectAll()\">\r\n              </mat-checkbox>\r\n            }\r\n          </th>\r\n\r\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\r\n            @let visible = item | selectionVisible: _tableOption.selector;\r\n            @if (visible) {\r\n              @if (_tableOption.selector?.single) {\r\n                <mat-radio-button\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [checked]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-radio-button>\r\n              } @else {\r\n                <mat-checkbox\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-checkbox>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @if (_tableOption.index?.enabled) {\r\n          @let _pageOffset = pageOffset();\r\n          @let _indexWidth = _tableOption.index?.width || '50px';\r\n          <ng-container matColumnDef=\"sdIndex\" sticky>\r\n            <th\r\n              class=\"text-center p-0\"\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.width]=\"_indexWidth\"\r\n              [style.min-width]=\"_indexWidth\"\r\n              [style.max-width]=\"_indexWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n              {{ _tableOption.index?.title || '#' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = dataIndex\" [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\">\r\n              @if (!item?.meta?.group?.isGroupHeader) {\r\n                @if (_tableOption.tree && item?.meta?.tree?.indexPath?.length) {\r\n                  <!-- why: tree \u2192 STT ph\u00E2n c\u1EA5p 1, 1.2, 1.2.1 (indexPath join '.'). T\u00F4 \u0111\u1EADm root (level 0). -->\r\n                  <span [class.sd-stt-root]=\"(item.meta.tree.level ?? 0) === 0\">\r\n                    {{ item.meta.tree.indexPath.join('.') }}\r\n                  </span>\r\n                } @else {\r\n                  {{ _pageOffset + i + 1 }}\r\n                }\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\"></td>\r\n          </ng-container>\r\n        }\r\n        <ng-container\r\n          matColumnDef=\"sdCommand\"\r\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\r\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n            <desktop-command\r\n              [autoId]=\"autoId()\"\r\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\r\n              [item]=\"item\"\r\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        <!-- why: group header row d\u00F9ng matRowDef RI\u00CANG v\u1EDBi column list ['sdGroupHeader']\r\n             qua predicate when:isGroupHeaderRow. Cell colspan = displayedColumns.length \u0111\u1EC3\r\n             span TO\u00C0N B\u1ED8 width data row. Tr\u00E1nh colspan trick overflow row khi c\u00E1c TD kh\u00E1c render. -->\r\n        <ng-container matColumnDef=\"sdGroupHeader\">\r\n          <td\r\n            class=\"p-0 sd-group-header-cell\"\r\n            mat-cell\r\n            *matCellDef=\"let item\"\r\n            [attr.colspan]=\"sdGroupColspan()\">\r\n            <div class=\"sd-group-row d-flex align-items-center py-8\">\r\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. -->\r\n              @if (_tableOption.selector?.visible && !_tableOption.selector?.single) {\r\n                <div class=\"sd-group-selection-slot d-flex align-items-center justify-content-center\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [checked]=\"isGroupAllSelected(item)\"\r\n                    [indeterminate]=\"isGroupIndeterminate(item)\"\r\n                    (change)=\"onSelectGroup(item, $event.checked)\">\r\n                  </mat-checkbox>\r\n                </div>\r\n              } @else {\r\n                <div class=\"sd-group-selection-slot\"></div>\r\n              }\r\n              @if (_tableOption.group?.collapsible) {\r\n                <sd-button\r\n                  type=\"link\"\r\n                  [prefixIcon]=\"item.meta.group.isExpanded ? 'expand_more' : 'chevron_right'\"\r\n                  width=\"32px\"\r\n                  (click)=\"toggleGroupExpand(item)\">\r\n                </sd-button>\r\n              }\r\n              @if (sdGroupDef()?.templateRef; as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: groupContext(item)\"></ng-container>\r\n              } @else {\r\n                <span class=\"T14R\">{{ item.meta.group.values | json }}</span>\r\n              }\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\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. -->\r\n        <ng-container matColumnDef=\"sdFiller\">\r\n          <th class=\"sd-filler-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"sd-filler-cell p-0\" mat-cell *matCellDef=\"let item\"></td>\r\n          <td class=\"sd-filler-cell p-0\" mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @for (column of _configuration.firstColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"px-8 py-8 c-th\"\r\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\r\n              [minWidth]=\"column.minWidth\"\r\n              [maxWidth]=\"column.maxWidth\"\r\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\r\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\r\n              <div>\r\n                @if (column.type === 'children') {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                } @else {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\"\r\n                    [disabled]=\"!column.sortable\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                  @let hideInlineFilter =\r\n                    _tableOption.filter?.disabled ||\r\n                    _tableOption.filter?.hideInlineFilter === true ||\r\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\r\n                  @if (!hideInlineFilter) {\r\n                    <ng-container *sdDesktop>\r\n                      <column-filter\r\n                        [autoId]=\"autoId()\"\r\n                        [value]=\"columnFilter?.[column.field!]!\"\r\n                        [operator]=\"columnOperator[column.field]\"\r\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                        [columnFilter]=\"columnFilter!\"\r\n                        [cacheValues]=\"cacheValues\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"\r\n                        (filterCommit)=\"onFilterCommit()\">\r\n                      </column-filter>\r\n                    </ng-container>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              [class.d-none]=\"column.type === 'children'\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children' && !item?.meta?.group?.isGroupHeader) {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        @for (column of _configuration.secondColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"c-th px-8\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\">\r\n              <div>\r\n                <div\r\n                  aria-hidden=\"true\"\r\n                  mat-sort-header\r\n                  class=\"c-header-title\"\r\n                  [class.justify-content-end]=\"column.align === 'right'\"\r\n                  [class.text-right]=\"column.align === 'right'\"\r\n                  [disabled]=\"!column.sortable\">\r\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                </div>\r\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\r\n                  <ng-container *sdDesktop>\r\n                    <column-filter\r\n                      [autoId]=\"autoId()\"\r\n                      [value]=\"columnFilter?.[column.field!]!\"\r\n                      [operator]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter!\"\r\n                      [cacheValues]=\"cacheValues\"\r\n                      [column]=\"column\"\r\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                      (filterChange)=\"onFilterChange()\"\r\n                      (filterCommit)=\"onFilterCommit()\">\r\n                    </column-filter>\r\n                  </ng-container>\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"item[column.field]\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children') {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\r\n        @if (!!_configuration.secondHeaders.length) {\r\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\r\n        }\r\n        <!-- Group header row \u2014 ch\u1EC9 1 cell sdGroupHeader colspan to\u00E0n width. -->\r\n        <tr\r\n          mat-row\r\n          *matRowDef=\"let row; columns: ['sdGroupHeader']; when: isGroupHeaderRow\"\r\n          class=\"c-group-row-tr\"></tr>\r\n\r\n        <!-- Data row \u2014 d\u00F9ng displayedColumns \u0111\u1EA7y \u0111\u1EE7; when isDataRow \u0111\u1EC3 lo\u1EA1i tr\u1EEB group header. -->\r\n        <tr\r\n          mat-row\r\n          cdkDrag\r\n          [cdkDragData]=\"row\"\r\n          [cdkDragDisabled]=\"\r\n            !_tableOption.rowReorder?.enabled ||\r\n            !!row.meta?.group?.items?.length ||\r\n            (row.meta?.tree?.level ?? 0) > 0 ||\r\n            isReorderDisabled(row)\r\n          \"\r\n          *matRowDef=\"let row; columns: _configuration.displayedColumns; when: isDataRow\"\r\n          matRipple\r\n          class=\"c-row\"\r\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\r\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\r\n          [ngStyle]=\"rowStyle(row)\"\r\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n        <!-- Sub-information row \u2014 also gated b\u1EDFi isDataRow \u0111\u1EC3 KH\u00D4NG render empty expand row d\u01B0\u1EDBi group header. -->\r\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']; when: isDataRow\" class=\"c-detail-row\"></tr>\r\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\r\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\r\n        }\r\n      </table>\r\n      @if (!_loading && !_total) {\r\n        <div class=\"c-no-data-row\">\r\n          @if (_isFiltered) {\r\n            @if (tableConfiguration?.images?.filterEmpty) {\r\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\r\n            } @else {\r\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\r\n            }\r\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\r\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\r\n          } @else {\r\n            @if (_requireFiltered) {\r\n              @if (tableConfiguration?.images?.filterRequired) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\r\n            } @else {\r\n              @if (tableConfiguration?.images?.dataEmpty) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"c-paginator\">\r\n      <div class=\"c-action\">\r\n        <ng-container *sdDesktop>\r\n          @if (_tableOption.reload?.visible) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.reload' | translate\"\r\n              prefixIcon=\"refresh\"\r\n              (click)=\"reload()\"\r\n              [disabled]=\"!_items.length\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        @if (_export && _items.length) {\r\n          @if (_export.type === 'custom') {\r\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\r\n          } @else {\r\n            @if (_export.visible) {\r\n              @if (_exporting) {\r\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\r\n              } @else {\r\n                @if (_export.visible === 'ALL' || !_export.visible) {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n                  <mat-menu #menu=\"matMenu\">\r\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\r\n                    </button>\r\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\r\n                    </button>\r\n                  </mat-menu>\r\n                } @else if (_export.visible === 'EXCEL') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\r\n                } @else if (_export.visible === 'CSV') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <ng-container *sdDesktop>\r\n          @if (configComponent()) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.setup-short' | translate\"\r\n              prefixIcon=\"settings\"\r\n              (click)=\"configComponent()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\r\n        <ng-container *sdMobile>\r\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\r\n            <sd-button\r\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\r\n              class=\"mr-8\"\r\n              prefixIcon=\"filter_alt\"\r\n              (click)=\"mobileFilter()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n      </div>\r\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\r\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\r\n      <ng-container *sdDesktop>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\r\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\r\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\r\n      </ng-container>\r\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\r\n      <ng-container *sdMobile>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [showFirstLastButtons]=\"false\"\r\n          hidePageSize></mat-paginator>\r\n      </ng-container>\r\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\r\n      <ng-container *sdDesktop>\r\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\r\n          <div class=\"T14R pr-16\">\r\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\r\n  @if (_tableOption.config?.visible) {\r\n    <config [tableOption]=\"_tableOption\" />\r\n  }\r\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\r\n  @if (!_tableOption.filter?.disabled && filterRegister) {\r\n    <mobile-filter\r\n      [autoId]=\"autoId()\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\r\n      [columns]=\"_configuration.firstColumns\"\r\n      [filterDefs]=\"sdFilterDefs()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [cacheValues]=\"cacheValues\">\r\n    </mobile-filter>\r\n  }\r\n}\r\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: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
                 state('expanded', style({ height: '*', visibility: 'visible' })),
@@ -4147,7 +4336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         StickyShadowDirective,
                         SdColumnResizeDirective,
                         TranslatePipe,
-                    ], template: "@let _configuration = configuration();\r\n@let _tableOption = tableOption()!;\r\n@let _loading = loading();\r\n@let _items = items();\r\n@let _total = total();\r\n@let _isFiltered = isFiltered();\r\n@let _requireFiltered = requireFiltered();\r\n@let _export = _tableOption?.export;\r\n@let _exporting = exporting();\r\n@let _titleDef = titleDef();\r\n\r\n@if (_configuration) {\r\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\r\n    <external-filter\r\n      class=\"mb-16\"\r\n      [autoId]=\"autoId()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\r\n    </external-filter>\r\n  }\r\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption;\r\n  <ng-content select=\"[sdTableTop]\"></ng-content>\r\n  <div class=\"c-container\">\r\n    @if (_loading) {\r\n      <div class=\"c-loading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n    }\r\n    <div\r\n      class=\"c-table\"\r\n      sdScroll\r\n      stickyShadow\r\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\r\n      [style.min-height]=\"_tableOption.style?.minHeight\">\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"groupedItems\"\r\n        [trackBy]=\"trackBy\"\r\n        matSort\r\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\r\n        multiTemplateDataRows\r\n        cdkDropList\r\n        [cdkDropListData]=\"groupedItems\"\r\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\r\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\r\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\r\n        @if (_tableOption.rowReorder?.enabled) {\r\n          <ng-container matColumnDef=\"sdReorder\">\r\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\r\n              @if (!row.meta?.group?.items?.length) {\r\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\r\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\r\n                </mat-icon>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        @if (_tableOption.tree) {\r\n          <ng-container matColumnDef=\"sdTreeToggle\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"sd-tree-toggle-cell p-0\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\r\n              @if (row.meta?.tree) {\r\n                <div\r\n                  class=\"sd-tree-toggle-inner\"\r\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\r\n                  @if (row.meta.tree.hasChildren) {\r\n                    @if (row.meta.tree.isExpanding) {\r\n                      <div class=\"lds-ring sd-tree-spinner\">\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                      </div>\r\n                    } @else {\r\n                      <sd-button\r\n                        type=\"link\"\r\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\r\n                        width=\"35px\">\r\n                      </sd-button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\r\n            @if (sdSubInformation()?.templateRef) {\r\n              @if (_tableOption.expand?.always) {\r\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n              } @else {\r\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  @if (item.isExpanded) {\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\r\n              <sd-button\r\n                type=\"link\"\r\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                (click)=\"onExpand(element)\"\r\n                width=\"35px\">\r\n              </sd-button>\r\n            }\r\n            @if (element.isExpanding) {\r\n              <div class=\"lds-ring\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n              </div>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSelection\" sticky>\r\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\r\n            @if (visibleSelectAll) {\r\n              <mat-checkbox\r\n                class=\"c-selection px-8\"\r\n                color=\"primary\"\r\n                [ngModel]=\"isSelectAll()\"\r\n                (ngModelChange)=\"isSelectAll.set($event)\"\r\n                (change)=\"onSelectAll()\">\r\n              </mat-checkbox>\r\n            }\r\n          </th>\r\n\r\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\r\n            @let visible = item | selectionVisible: _tableOption.selector;\r\n            @if (visible) {\r\n              @if (_tableOption.selector?.single) {\r\n                <mat-radio-button\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [checked]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-radio-button>\r\n              } @else {\r\n                <mat-checkbox\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-checkbox>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @if (_tableOption.index?.enabled) {\r\n          @let _pageOffset = pageOffset();\r\n          <ng-container matColumnDef=\"sdIndex\" sticky>\r\n            <th\r\n              class=\"text-center p-0\"\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.width]=\"_tableOption.index?.width || '50px'\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n              {{ _tableOption.index?.title || '#' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = index\">\r\n              @if (!item?.sdGroup) {\r\n                {{ _pageOffset + i + 1 }}\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n        <ng-container\r\n          matColumnDef=\"sdCommand\"\r\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\r\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n            <desktop-command\r\n              [autoId]=\"autoId()\"\r\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\r\n              [item]=\"item\"\r\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"sdGroup\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : _configuration.displayedColumns.length\">\r\n            <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | sdSafeHtml\"></div>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @for (column of _configuration.firstColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"px-8 py-8 c-th\"\r\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\r\n              [minWidth]=\"column.minWidth\"\r\n              [maxWidth]=\"column.maxWidth\"\r\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\r\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\r\n              <div>\r\n                @if (column.type === 'children') {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                } @else {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\"\r\n                    [disabled]=\"!column.sortable\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                  @let hideInlineFilter =\r\n                    _tableOption.filter?.disabled ||\r\n                    _tableOption.filter?.hideInlineFilter === true ||\r\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\r\n                  @if (!hideInlineFilter) {\r\n                    <ng-container *sdDesktop>\r\n                      <column-filter\r\n                        [autoId]=\"autoId()\"\r\n                        [value]=\"columnFilter?.[column.field!]!\"\r\n                        [operator]=\"columnOperator[column.field]\"\r\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                        [columnFilter]=\"columnFilter!\"\r\n                        [cacheValues]=\"cacheValues\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"\r\n                        (filterCommit)=\"onFilterCommit()\">\r\n                      </column-filter>\r\n                    </ng-container>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              [class.d-none]=\"column.type === 'children'\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children' && !item?.sdGroup) {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        @for (column of _configuration.secondColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"c-th px-8\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\">\r\n              <div>\r\n                <div\r\n                  aria-hidden=\"true\"\r\n                  mat-sort-header\r\n                  class=\"c-header-title\"\r\n                  [class.justify-content-end]=\"column.align === 'right'\"\r\n                  [class.text-right]=\"column.align === 'right'\"\r\n                  [disabled]=\"!column.sortable\">\r\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                </div>\r\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\r\n                  <ng-container *sdDesktop>\r\n                    <column-filter\r\n                      [autoId]=\"autoId()\"\r\n                      [value]=\"columnFilter?.[column.field!]!\"\r\n                      [operator]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter!\"\r\n                      [cacheValues]=\"cacheValues\"\r\n                      [column]=\"column\"\r\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                      (filterChange)=\"onFilterChange()\"\r\n                      (filterCommit)=\"onFilterCommit()\">\r\n                    </column-filter>\r\n                  </ng-container>\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"item[column.field]\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children') {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\r\n        @if (!!_configuration.secondHeaders.length) {\r\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\r\n        }\r\n        <tr\r\n          mat-row\r\n          cdkDrag\r\n          [cdkDragData]=\"row\"\r\n          [cdkDragDisabled]=\"\r\n            !_tableOption.rowReorder?.enabled ||\r\n            !!row.meta?.group?.items?.length ||\r\n            (row.meta?.tree?.level ?? 0) > 0 ||\r\n            isReorderDisabled(row)\r\n          \"\r\n          *matRowDef=\"let row; columns: _configuration.displayedColumns\"\r\n          matRipple\r\n          class=\"c-row\"\r\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\r\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\r\n          [ngStyle]=\"rowStyle(row)\"\r\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\r\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\r\n        }\r\n      </table>\r\n      @if (!_loading && !_total) {\r\n        <div class=\"c-no-data-row\">\r\n          @if (_isFiltered) {\r\n            @if (tableConfiguration?.images?.filterEmpty) {\r\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\r\n            } @else {\r\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\r\n            }\r\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\r\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\r\n          } @else {\r\n            @if (_requireFiltered) {\r\n              @if (tableConfiguration?.images?.filterRequired) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\r\n            } @else {\r\n              @if (tableConfiguration?.images?.dataEmpty) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"c-paginator\">\r\n      <div class=\"c-action\">\r\n        <ng-container *sdDesktop>\r\n          @if (_tableOption.reload?.visible) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.reload' | translate\"\r\n              prefixIcon=\"refresh\"\r\n              (click)=\"reload()\"\r\n              [disabled]=\"!_items.length\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        @if (_export && _items.length) {\r\n          @if (_export.type === 'custom') {\r\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\r\n          } @else {\r\n            @if (_export.visible) {\r\n              @if (_exporting) {\r\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\r\n              } @else {\r\n                @if (_export.visible === 'ALL' || !_export.visible) {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n                  <mat-menu #menu=\"matMenu\">\r\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\r\n                    </button>\r\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\r\n                    </button>\r\n                  </mat-menu>\r\n                } @else if (_export.visible === 'EXCEL') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\r\n                } @else if (_export.visible === 'CSV') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <ng-container *sdDesktop>\r\n          @if (configComponent()) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.setup-short' | translate\"\r\n              prefixIcon=\"settings\"\r\n              (click)=\"configComponent()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\r\n        <ng-container *sdMobile>\r\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\r\n            <sd-button\r\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\r\n              class=\"mr-8\"\r\n              prefixIcon=\"filter_alt\"\r\n              (click)=\"mobileFilter()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n      </div>\r\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\r\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\r\n      <ng-container *sdDesktop>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\r\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\r\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\r\n      </ng-container>\r\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\r\n      <ng-container *sdMobile>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [showFirstLastButtons]=\"false\"\r\n          hidePageSize></mat-paginator>\r\n      </ng-container>\r\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\r\n      <ng-container *sdDesktop>\r\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\r\n          <div class=\"T14R pr-16\">\r\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\r\n  @if (_tableOption.config?.visible) {\r\n    <config [tableOption]=\"_tableOption\" />\r\n  }\r\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\r\n  @if (!_tableOption.filter?.disabled && filterRegister) {\r\n    <mobile-filter\r\n      [autoId]=\"autoId()\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\r\n      [columns]=\"_configuration.firstColumns\"\r\n      [filterDefs]=\"sdFilterDefs()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [cacheValues]=\"cacheValues\">\r\n    </mobile-filter>\r\n  }\r\n}\r\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 .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}\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"] }]
+                    ], template: "@let _configuration = configuration();\r\n@let _tableOption = tableOption()!;\r\n@let _loading = loading();\r\n@let _items = items();\r\n@let _total = total();\r\n@let _isFiltered = isFiltered();\r\n@let _requireFiltered = requireFiltered();\r\n@let _export = _tableOption?.export;\r\n@let _exporting = exporting();\r\n@let _titleDef = titleDef();\r\n\r\n@if (_configuration) {\r\n  @if (!_tableOption.filter?.disabled && !!_tableOption.filter?.externalFilters?.length && filterRegister) {\r\n    <external-filter\r\n      class=\"mb-16\"\r\n      [autoId]=\"autoId()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\">\r\n    </external-filter>\r\n  }\r\n  @let groupedItems = _items | sdTree: _tableOption.tree : treeRevision() | sdGroup: _tableOption : groupExpandState;\r\n  <ng-content select=\"[sdTableTop]\"></ng-content>\r\n  <div class=\"c-container\">\r\n    @if (_loading) {\r\n      <div class=\"c-loading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n    }\r\n    <div\r\n      class=\"c-table\"\r\n      sdScroll\r\n      stickyShadow\r\n      [style.max-height]=\"_tableOption.style?.maxHeight\"\r\n      [style.min-height]=\"_tableOption.style?.minHeight\">\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"groupedItems\"\r\n        [trackBy]=\"trackBy\"\r\n        matSort\r\n        [matSortDisabled]=\"!_tableOption.sort?.enable\"\r\n        multiTemplateDataRows\r\n        cdkDropList\r\n        [cdkDropListData]=\"groupedItems\"\r\n        [cdkDropListDisabled]=\"!_tableOption.rowReorder?.enabled\"\r\n        [cdkDropListSortPredicate]=\"reorderSortPredicate\"\r\n        (cdkDropListDropped)=\"onReorderDrop($event)\">\r\n        @if (_tableOption.rowReorder?.enabled) {\r\n          <ng-container matColumnDef=\"sdReorder\">\r\n            <th mat-header-cell *matHeaderCellDef class=\"sd-reorder-header\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-reorder-cell\">\r\n              @if (!row.meta?.group?.items?.length) {\r\n                <mat-icon cdkDragHandle [class.sd-reorder-disabled]=\"isReorderDisabled(row)\">\r\n                  {{ _tableOption.rowReorder?.icon || 'drag_indicator' }}\r\n                </mat-icon>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        @if (_tableOption.tree) {\r\n          <ng-container matColumnDef=\"sdTreeToggle\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"sd-tree-toggle-cell p-0\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n            <td mat-cell *matCellDef=\"let row\" class=\"sd-tree-toggle-cell p-0\">\r\n              @if (row.meta?.tree) {\r\n                <div\r\n                  class=\"sd-tree-toggle-inner\"\r\n                  [style.padding-left.px]=\"(row.meta.tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\">\r\n                  @if (row.meta.tree.hasChildren) {\r\n                    @if (row.meta.tree.isExpanding) {\r\n                      <div class=\"lds-ring sd-tree-spinner\">\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                        <div></div>\r\n                      </div>\r\n                    } @else {\r\n                      <sd-button\r\n                        type=\"link\"\r\n                        [prefixIcon]=\"row.meta.tree.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                        (click)=\"onTreeToggle(row); $event.stopPropagation()\"\r\n                        width=\"35px\">\r\n                      </sd-button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef></td>\r\n          </ng-container>\r\n        }\r\n\r\n        <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n          <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"_configuration.displayedColumns.length\">\r\n            @if (sdSubInformation()?.templateRef) {\r\n              @if (_tableOption.expand?.always) {\r\n                <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n              } @else {\r\n                <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  @if (item.isExpanded) {\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation()?.templateRef!; context: { item: item }\"> </ng-container>\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            @if (!element.isExpanding && !_tableOption.expand?.always) {\r\n              <sd-button\r\n                type=\"link\"\r\n                [prefixIcon]=\"element.isExpanded ? 'expand_less' : 'expand_more'\"\r\n                (click)=\"onExpand(element)\"\r\n                width=\"35px\">\r\n              </sd-button>\r\n            }\r\n            @if (element.isExpanding) {\r\n              <div class=\"lds-ring\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n              </div>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"sdSelection\" sticky>\r\n          <th class=\"sd-selection-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n            @let visibleSelectAll = _items | selectionVisibleSelectAll: _tableOption.selector | async;\r\n            @if (visibleSelectAll) {\r\n              <mat-checkbox\r\n                class=\"c-selection px-8\"\r\n                color=\"primary\"\r\n                [ngModel]=\"isSelectAll()\"\r\n                (ngModelChange)=\"isSelectAll.set($event)\"\r\n                (change)=\"onSelectAll()\">\r\n              </mat-checkbox>\r\n            }\r\n          </th>\r\n\r\n          <td class=\"sd-selection-cell p-0\" mat-cell *matCellDef=\"let item\">\r\n            @let visible = item | selectionVisible: _tableOption.selector;\r\n            @if (visible) {\r\n              @if (_tableOption.selector?.single) {\r\n                <mat-radio-button\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [checked]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"item.meta.selector.isSelected = true; onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-radio-button>\r\n              } @else {\r\n                <mat-checkbox\r\n                  class=\"c-selection px-8\"\r\n                  color=\"primary\"\r\n                  [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                  (change)=\"onSelect(item)\"\r\n                  [disabled]=\"selectedTableItems() | selectionDisabled: item : _tableOption.selector!\">\r\n                </mat-checkbox>\r\n              }\r\n            }\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @if (_tableOption.index?.enabled) {\r\n          @let _pageOffset = pageOffset();\r\n          @let _indexWidth = _tableOption.index?.width || '50px';\r\n          <ng-container matColumnDef=\"sdIndex\" sticky>\r\n            <th\r\n              class=\"text-center p-0\"\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.width]=\"_indexWidth\"\r\n              [style.min-width]=\"_indexWidth\"\r\n              [style.max-width]=\"_indexWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n              {{ _tableOption.index?.title || '#' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let i = dataIndex\" [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\">\r\n              @if (!item?.meta?.group?.isGroupHeader) {\r\n                @if (_tableOption.tree && item?.meta?.tree?.indexPath?.length) {\r\n                  <!-- why: tree \u2192 STT ph\u00E2n c\u1EA5p 1, 1.2, 1.2.1 (indexPath join '.'). T\u00F4 \u0111\u1EADm root (level 0). -->\r\n                  <span [class.sd-stt-root]=\"(item.meta.tree.level ?? 0) === 0\">\r\n                    {{ item.meta.tree.indexPath.join('.') }}\r\n                  </span>\r\n                } @else {\r\n                  {{ _pageOffset + i + 1 }}\r\n                }\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef [style.min-width]=\"_indexWidth\" [style.max-width]=\"_indexWidth\"></td>\r\n          </ng-container>\r\n        }\r\n        <ng-container\r\n          matColumnDef=\"sdCommand\"\r\n          [sticky]=\"_tableOption.command?.align !== 'right'\"\r\n          [stickyEnd]=\"_tableOption.command?.align === 'right'\">\r\n          <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 50px\" [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n            <desktop-command\r\n              [autoId]=\"autoId()\"\r\n              [commands]=\"_tableOption.command?.commands || _tableOption.commands || []\"\r\n              [item]=\"item\"\r\n              [itemIndex]=\"groupedItems.indexOf(item)\"></desktop-command>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        <!-- why: group header row d\u00F9ng matRowDef RI\u00CANG v\u1EDBi column list ['sdGroupHeader']\r\n             qua predicate when:isGroupHeaderRow. Cell colspan = displayedColumns.length \u0111\u1EC3\r\n             span TO\u00C0N B\u1ED8 width data row. Tr\u00E1nh colspan trick overflow row khi c\u00E1c TD kh\u00E1c render. -->\r\n        <ng-container matColumnDef=\"sdGroupHeader\">\r\n          <td\r\n            class=\"p-0 sd-group-header-cell\"\r\n            mat-cell\r\n            *matCellDef=\"let item\"\r\n            [attr.colspan]=\"sdGroupColspan()\">\r\n            <div class=\"sd-group-row d-flex align-items-center py-8\">\r\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. -->\r\n              @if (_tableOption.selector?.visible && !_tableOption.selector?.single) {\r\n                <div class=\"sd-group-selection-slot d-flex align-items-center justify-content-center\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [checked]=\"isGroupAllSelected(item)\"\r\n                    [indeterminate]=\"isGroupIndeterminate(item)\"\r\n                    (change)=\"onSelectGroup(item, $event.checked)\">\r\n                  </mat-checkbox>\r\n                </div>\r\n              } @else {\r\n                <div class=\"sd-group-selection-slot\"></div>\r\n              }\r\n              @if (_tableOption.group?.collapsible) {\r\n                <sd-button\r\n                  type=\"link\"\r\n                  [prefixIcon]=\"item.meta.group.isExpanded ? 'expand_more' : 'chevron_right'\"\r\n                  width=\"32px\"\r\n                  (click)=\"toggleGroupExpand(item)\">\r\n                </sd-button>\r\n              }\r\n              @if (sdGroupDef()?.templateRef; as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: groupContext(item)\"></ng-container>\r\n              } @else {\r\n                <span class=\"T14R\">{{ item.meta.group.values | json }}</span>\r\n              }\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\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. -->\r\n        <ng-container matColumnDef=\"sdFiller\">\r\n          <th class=\"sd-filler-cell p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\"></th>\r\n          <td class=\"sd-filler-cell p-0\" mat-cell *matCellDef=\"let item\"></td>\r\n          <td class=\"sd-filler-cell p-0\" mat-footer-cell *matFooterCellDef></td>\r\n        </ng-container>\r\n        @for (column of _configuration.firstColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\" [sticky]=\"_configuration.fixedColumn[column.field]\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"px-8 py-8 c-th\"\r\n              [sdColumnResize]=\"!!_tableOption.config?.resizable && column.type !== 'children'\"\r\n              [minWidth]=\"column.minWidth\"\r\n              [maxWidth]=\"column.maxWidth\"\r\n              (resizeEnd)=\"onColumnResize(column.field, $event)\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader && column.type !== 'children' ? 2 : 1\"\r\n              [attr.colspan]=\"column.type === 'children' ? column.children.length : 1\">\r\n              <div>\r\n                @if (column.type === 'children') {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                } @else {\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    class=\"c-header-title\"\r\n                    [class.justify-content-end]=\"column.align === 'right'\"\r\n                    [class.text-right]=\"column.align === 'right'\"\r\n                    [disabled]=\"!column.sortable\">\r\n                    <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                  </div>\r\n                  @let hideInlineFilter =\r\n                    _tableOption.filter?.disabled ||\r\n                    _tableOption.filter?.hideInlineFilter === true ||\r\n                    (_tableOption.filter?.hideInlineFilter === 'auto' && !_isFiltered && _total! <= 10);\r\n                  @if (!hideInlineFilter) {\r\n                    <ng-container *sdDesktop>\r\n                      <column-filter\r\n                        [autoId]=\"autoId()\"\r\n                        [value]=\"columnFilter?.[column.field!]!\"\r\n                        [operator]=\"columnOperator[column.field]\"\r\n                        (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                        [columnFilter]=\"columnFilter!\"\r\n                        [cacheValues]=\"cacheValues\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"\r\n                        (filterCommit)=\"onFilterCommit()\">\r\n                      </column-filter>\r\n                    </ng-container>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              [class.d-none]=\"column.type === 'children'\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"(item.data && item.data[column.field]) || ''\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children' && !item?.meta?.group?.isGroupHeader) {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        @for (column of _configuration.secondColumns; track column.field) {\r\n          <ng-container [matColumnDef]=\"column.field\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              class=\"c-th px-8\"\r\n              [style.width]=\"column.width\"\r\n              [style.min-width]=\"column.minWidth || column.width\"\r\n              [style.max-width]=\"column.maxWidth\">\r\n              <div>\r\n                <div\r\n                  aria-hidden=\"true\"\r\n                  mat-sort-header\r\n                  class=\"c-header-title\"\r\n                  [class.justify-content-end]=\"column.align === 'right'\"\r\n                  [class.text-right]=\"column.align === 'right'\"\r\n                  [disabled]=\"!column.sortable\">\r\n                  <column-title [column]=\"column\" [titleDef]=\"_titleDef[column.field]\"></column-title>\r\n                </div>\r\n                @if (!_tableOption.filter?.disabled && !_tableOption.filter?.hideInlineFilter && columnOperator) {\r\n                  <ng-container *sdDesktop>\r\n                    <column-filter\r\n                      [autoId]=\"autoId()\"\r\n                      [value]=\"columnFilter?.[column.field!]!\"\r\n                      [operator]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter!\"\r\n                      [cacheValues]=\"cacheValues\"\r\n                      [column]=\"column\"\r\n                      (operatorChange)=\"columnOperator[column.field] = $event!; onOperatorChange(column, $event)\"\r\n                      (filterChange)=\"onFilterChange()\"\r\n                      (filterCommit)=\"onFilterCommit()\">\r\n                    </column-filter>\r\n                  </ng-container>\r\n                }\r\n              </div>\r\n            </th>\r\n            <td\r\n              class=\"c-td px-0\"\r\n              mat-cell\r\n              *matCellDef=\"let item\"\r\n              [sdHoverCopy]=\"item[column.field]\"\r\n              [sdHoverCopyDisabled]=\"!column.cell?.copiable\">\r\n              @if (column.type !== 'children') {\r\n                <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef()\"> </desktop-cell>\r\n              }\r\n            </td>\r\n            <td mat-footer-cell *matFooterCellDef>\r\n              <ng-container *ngIf=\"footerDef()[column.field]\">\r\n                <ng-container *ngTemplateOutlet=\"footerDef()[column.field].templateRef; context: { items: _items, column: column }\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"_configuration.firstHeaders; sticky: true\"></tr>\r\n        @if (!!_configuration.secondHeaders.length) {\r\n          <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"_configuration.secondHeaders; sticky: true\"></tr>\r\n        }\r\n        <!-- Group header row \u2014 ch\u1EC9 1 cell sdGroupHeader colspan to\u00E0n width. -->\r\n        <tr\r\n          mat-row\r\n          *matRowDef=\"let row; columns: ['sdGroupHeader']; when: isGroupHeaderRow\"\r\n          class=\"c-group-row-tr\"></tr>\r\n\r\n        <!-- Data row \u2014 d\u00F9ng displayedColumns \u0111\u1EA7y \u0111\u1EE7; when isDataRow \u0111\u1EC3 lo\u1EA1i tr\u1EEB group header. -->\r\n        <tr\r\n          mat-row\r\n          cdkDrag\r\n          [cdkDragData]=\"row\"\r\n          [cdkDragDisabled]=\"\r\n            !_tableOption.rowReorder?.enabled ||\r\n            !!row.meta?.group?.items?.length ||\r\n            (row.meta?.tree?.level ?? 0) > 0 ||\r\n            isReorderDisabled(row)\r\n          \"\r\n          *matRowDef=\"let row; columns: _configuration.displayedColumns; when: isDataRow\"\r\n          matRipple\r\n          class=\"c-row\"\r\n          [class.sd-tree-row]=\"!!_tableOption.tree\"\r\n          [ngClass]=\"_tableOption.tree ? 'sd-tree-level-' + (row.meta?.tree?.level ?? 0) : null\"\r\n          [ngStyle]=\"rowStyle(row)\"\r\n          [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n        <!-- Sub-information row \u2014 also gated b\u1EDFi isDataRow \u0111\u1EC3 KH\u00D4NG render empty expand row d\u01B0\u1EDBi group header. -->\r\n        <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']; when: isDataRow\" class=\"c-detail-row\"></tr>\r\n        @if (hasFooter() && !!_configuration.displayedFooters.length) {\r\n          <tr mat-footer-row *matFooterRowDef=\"_configuration.displayedFooters; sticky: true\"></tr>\r\n        }\r\n      </table>\r\n      @if (!_loading && !_total) {\r\n        <div class=\"c-no-data-row\">\r\n          @if (_isFiltered) {\r\n            @if (tableConfiguration?.images?.filterEmpty) {\r\n              <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterEmpty\" alt=\"filter-empty\" />\r\n            } @else {\r\n              <img class=\"c-image sd-image-filter-empty\" alt=\"filter-empty\" />\r\n            }\r\n            <div class=\"T16M\">{{ 'core.component.table.no-results' | translate }}</div>\r\n            <div class=\"T16R text-secondary\">{{ 'core.component.table.no-results-hint' | translate }}</div>\r\n          } @else {\r\n            @if (_requireFiltered) {\r\n              @if (tableConfiguration?.images?.filterRequired) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.filterRequired\" alt=\"filter-required\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-filter-required\" alt=\"filter-required\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.choose-filter-hint' | translate }}</div>\r\n            } @else {\r\n              @if (tableConfiguration?.images?.dataEmpty) {\r\n                <img class=\"c-image\" [src]=\"tableConfiguration!.images!.dataEmpty\" alt=\"data-empty\" />\r\n              } @else {\r\n                <img class=\"c-image sd-image-data-empty\" alt=\"data-empty\" />\r\n              }\r\n              <div class=\"T16R text-secondary\">{{ 'core.component.table.no-data' | translate }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"c-paginator\">\r\n      <div class=\"c-action\">\r\n        <ng-container *sdDesktop>\r\n          @if (_tableOption.reload?.visible) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.reload' | translate\"\r\n              prefixIcon=\"refresh\"\r\n              (click)=\"reload()\"\r\n              [disabled]=\"!_items.length\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        @if (_export && _items.length) {\r\n          @if (_export.type === 'custom') {\r\n            <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCustom()\" type=\"link\"> </sd-button>\r\n          } @else {\r\n            @if (_export.visible) {\r\n              @if (_exporting) {\r\n                <sd-button class=\"mr-8\" [loading]=\"_exporting\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" type=\"link\"> </sd-button>\r\n              } @else {\r\n                @if (_export.visible === 'ALL' || !_export.visible) {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n                  <mat-menu #menu=\"matMenu\">\r\n                    <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-excel' | translate }}</span>\r\n                    </button>\r\n                    <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                      <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                      <span> {{ 'core.component.table.export-csv' | translate }}</span>\r\n                    </button>\r\n                  </mat-menu>\r\n                } @else if (_export.visible === 'EXCEL') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportExcel()\" type=\"link\"> </sd-button>\r\n                } @else if (_export.visible === 'CSV') {\r\n                  <sd-button class=\"mr-8\" [title]=\"exportTitle()\" prefixIcon=\"get_app\" (click)=\"exportCSV()\" type=\"link\"> </sd-button>\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <ng-container *sdDesktop>\r\n          @if (configComponent()) {\r\n            <sd-button\r\n              class=\"mr-8\"\r\n              [title]=\"'core.component.table.setup-short' | translate\"\r\n              prefixIcon=\"settings\"\r\n              (click)=\"configComponent()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n        <!-- Mobile: n\u00FAt Filter m\u1EDF mobile-filter drawer (inline filter \u1EA9n tr\u00EAn mobile) -->\r\n        <ng-container *sdMobile>\r\n          @if (!_tableOption.filter?.disabled && mobileFilter()) {\r\n            <sd-button\r\n              [autoId]=\"autoId() + 'mobile-filter-open'\"\r\n              class=\"mr-8\"\r\n              prefixIcon=\"filter_alt\"\r\n              (click)=\"mobileFilter()!.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          }\r\n        </ng-container>\r\n      </div>\r\n      @let hidePaginator = !_tableOption.paginate?.pageSize || _total === undefined || _total <= _tableOption.paginate?.pageSize!;\r\n      <!-- Desktop paginator: full config (pageSize dropdown, first/last buttons) -->\r\n      <ng-container *sdDesktop>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"_tableOption.paginate?.pages!\"\r\n          [showFirstLastButtons]=\"_tableOption.paginate?.showFirstLastButtons\"\r\n          [hidePageSize]=\"_tableOption.paginate?.hidePageSize\"></mat-paginator>\r\n      </ng-container>\r\n      <!-- Mobile paginator: \u1EA9n pageSize dropdown + first/last buttons \u0111\u1EC3 ti\u1EBFt ki\u1EC7m kh\u00F4ng gian -->\r\n      <ng-container *sdMobile>\r\n        <mat-paginator\r\n          [class.d-none]=\"_tableOption.paginate?.hidden || hidePaginator\"\r\n          [length]=\"_total\"\r\n          [pageSize]=\"_tableOption.paginate?.pageSize\"\r\n          [showFirstLastButtons]=\"false\"\r\n          hidePageSize></mat-paginator>\r\n      </ng-container>\r\n      <!-- \"\u0110ang hi\u1EC3n th\u1ECB...\" ch\u1EC9 desktop -->\r\n      <ng-container *sdDesktop>\r\n        @if (!_tableOption.paginate?.hidden && hidePaginator && _total !== undefined && _total > 0) {\r\n          <div class=\"T14R pr-16\">\r\n            {{ 'core.component.table.showing' | translate }} <span class=\"T14M ml-2\">1-{{ _total }}/{{ _total }}</span>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <selector-action [tableOption]=\"_tableOption\" [selectedTableItems]=\"selectedTableItems()\" (clear)=\"onClearSelection(groupedItems)\" />\r\n  @if (_tableOption.config?.visible) {\r\n    <config [tableOption]=\"_tableOption\" />\r\n  }\r\n  <!-- Mobile filter drawer \u2014 ch\u1EC9 instantiate khi c\u1EA7n render tr\u00EAn mobile -->\r\n  @if (!_tableOption.filter?.disabled && filterRegister) {\r\n    <mobile-filter\r\n      [autoId]=\"autoId()\"\r\n      [filter]=\"_tableOption.filter!\"\r\n      [externalFilters]=\"_tableOption.filter?.externalFilters!\"\r\n      [columns]=\"_configuration.firstColumns\"\r\n      [filterDefs]=\"sdFilterDefs()\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [cacheValues]=\"cacheValues\">\r\n    </mobile-filter>\r\n  }\r\n}\r\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: () => [] });
 
 const SdConvertToPagingReq = (filterRequest, args) => {
@@ -4331,5 +4520,5 @@ const SdConvertToPagingReq = (filterRequest, args) => {
  * Generated bundle index. Do not edit.
  */
 
-export { MatPaginatorIntlCro, SD_TABLE_CONFIGURATION, SdConvertToPagingReq, SdMaterialFooterDefDirective, SdTable, SdTableCellDefDirective, SdTableExpandDefDirective, SdTableFilterDefDirective, SdTableTitleDefDirective };
+export { MatPaginatorIntlCro, SD_TABLE_CONFIGURATION, SdConvertToPagingReq, SdMaterialFooterDefDirective, SdTable, SdTableCellDefDirective, SdTableExpandDefDirective, SdTableFilterDefDirective, SdTableGroupDefDirective, SdTableTitleDefDirective };
 //# sourceMappingURL=sd-angular-core-components-table.mjs.map