@sd-angular/core 19.0.8 → 19.0.10

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, booleanAttribute, computed, ChangeDetectionStrategy, Component, model, output, isSignal, effect, Pipe, ChangeDetectorRef, signal, untracked, viewChild, InjectionToken, Inject, Optional, Injectable, EventEmitter, Input, Output, ViewChild, ElementRef, DestroyRef, afterNextRender, Renderer2, NgZone, contentChild, contentChildren } from '@angular/core';
+import { input, inject, TemplateRef, Directive, booleanAttribute, computed, ChangeDetectionStrategy, Component, model, output, isSignal, effect, Pipe, ChangeDetectorRef, signal, untracked, viewChild, InjectionToken, Injectable, EventEmitter, Input, Output, ViewChild, ElementRef, DestroyRef, afterNextRender, Renderer2, NgZone, contentChild, contentChildren } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i4$1 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -8,9 +8,10 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i6 from '@angular/material/table';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import * as i1$1 from '@sd-angular/core/services';
-import { SdExcelService, SdNotifyService } from '@sd-angular/core/services';
+import { SdStorageService, SdExcelService, SdNotifyService } from '@sd-angular/core/services';
 import { Subject, fromEvent, Subscription, isObservable, firstValueFrom } from 'rxjs';
 import { debounceTime, startWith, map, switchMap } from 'rxjs/operators';
+import { DateUtilities, StringUtilities } from '@sd-angular/core/utilities';
 import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
 import * as i11 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -32,8 +33,8 @@ 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 { BrowserUtilities, Utilities } from '@sdcorejs/utils/fns';
-import { DateUtilities, ArrayUtilities, NumberUtilities } from '@sd-angular/core/utilities/extensions';
+import { Utilities, BrowserUtilities } from '@sdcorejs/utils/fns';
+import { DateUtilities as DateUtilities$1, 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';
@@ -50,7 +51,6 @@ 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';
 
@@ -162,6 +162,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+const SdConvertToPagingReq = (filterRequest, args) => {
+    const { externalFilters, columns, fieldMapping } = args;
+    const req = {
+        filters: [],
+        orders: args?.orders || [],
+        pageNumber: filterRequest.pageNumber,
+        pageSize: filterRequest.pageSize,
+    };
+    const { filters } = req;
+    const { rawExternalFilter, rawColumnFilter, columnOperator, orderBy, orderDirection } = filterRequest;
+    // Xử lý external filter
+    for (const externalFilter of externalFilters || []) {
+        const value = rawExternalFilter?.[externalFilter.field];
+        const field = fieldMapping?.[externalFilter.field] || externalFilter.field;
+        // Nếu có giá trị thì mới xử lý filter
+        if (value !== undefined && value !== null && value !== '') {
+            if (externalFilter.type === 'string') {
+                if (externalFilter.defaultOperator === 'EQUAL' && typeof value === 'string' && value.includes(',')) {
+                    filters.push({
+                        field,
+                        operator: 'IN',
+                        data: value.split(',').map(val => val.trim()),
+                    });
+                }
+                else {
+                    filters.push({
+                        field,
+                        operator: externalFilter.defaultOperator || 'CONTAIN',
+                        data: value,
+                    });
+                }
+            }
+            else if (externalFilter.type === 'boolean') {
+                filters.push({
+                    field,
+                    operator: 'EQUAL',
+                    data: value === true || value === 1 || value === 'true' || value === '1',
+                });
+            }
+            else if (externalFilter.type === 'daterange') {
+                if (typeof value === 'object' && 'from' in value && 'to' in value) {
+                    if (value?.from) {
+                        filters.push({
+                            field,
+                            operator: 'GREATER_OR_EQUAL',
+                            data: DateUtilities.begin(value?.from).toISOString(),
+                        });
+                    }
+                    if (value?.to) {
+                        filters.push({
+                            field,
+                            operator: 'LESS_THAN',
+                            data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                        });
+                    }
+                }
+            }
+            else if (externalFilter.type === 'date' || externalFilter.type === 'datetime') {
+                if (typeof value === 'object' && 'from' in value && 'to' in value) {
+                    if (value?.from) {
+                        filters.push({
+                            field,
+                            operator: 'GREATER_OR_EQUAL',
+                            data: DateUtilities.begin(value?.from).toISOString(),
+                        });
+                    }
+                    if (value?.to) {
+                        filters.push({
+                            field,
+                            operator: 'LESS_THAN',
+                            data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                        });
+                    }
+                }
+                else if (DateUtilities.isDate(value)) {
+                    if (externalFilter.type === 'date') {
+                        if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
+                            filters.push({
+                                field,
+                                operator: 'GREATER_OR_EQUAL',
+                                data: DateUtilities.begin(value).toISOString(),
+                            });
+                        }
+                        if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
+                            filters.push({
+                                field,
+                                operator: 'LESS_THAN',
+                                data: DateUtilities.begin(DateUtilities.addDays(value, 1)).toISOString(),
+                            });
+                        }
+                    }
+                    else {
+                        if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
+                            filters.push({
+                                field,
+                                operator: 'GREATER_OR_EQUAL',
+                                data: new Date(value).toISOString(),
+                            });
+                        }
+                        if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
+                            filters.push({
+                                field,
+                                operator: 'LESS_OR_EQUAL',
+                                data: new Date(value).toISOString(),
+                            });
+                        }
+                    }
+                }
+            }
+            else {
+                if (Array.isArray(value)) {
+                    if (value.length) {
+                        filters.push({
+                            field,
+                            operator: 'IN',
+                            data: value,
+                        });
+                    }
+                }
+                else if (typeof value === 'object' && 'from' in value && 'to' in value) {
+                    if (value?.from) {
+                        filters.push({
+                            field,
+                            operator: 'GREATER_OR_EQUAL',
+                            data: DateUtilities.begin(value?.from).toISOString(),
+                        });
+                    }
+                    if (value?.to) {
+                        filters.push({
+                            field,
+                            operator: 'LESS_THAN',
+                            data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                        });
+                    }
+                }
+                else {
+                    filters.push({
+                        field,
+                        operator: externalFilter.defaultOperator || 'EQUAL',
+                        data: value,
+                    });
+                }
+            }
+        }
+    }
+    // Xử lý column filter
+    for (const column of columns || []) {
+        const value = rawColumnFilter?.[column.field];
+        const field = fieldMapping?.[column.field] || column.field;
+        const operator = columnOperator?.[column.field] || column.filter?.operator?.default;
+        // Nếu có giá trị thì mới xử lý filter
+        if (value !== undefined && value !== null && value !== '') {
+            if (column.type === 'string') {
+                filters.push({
+                    field,
+                    operator: operator || 'CONTAIN',
+                    data: value,
+                });
+            }
+            else if (column.type === 'boolean') {
+                filters.push({
+                    field,
+                    operator: 'EQUAL',
+                    data: value === true || value === 1 || value === 'true' || value === '1',
+                });
+            }
+            else if (column.type === 'date' || column.type === 'datetime') {
+                if (typeof value === 'object' && 'from' in value && 'to' in value) {
+                    if (value?.from && value?.to) {
+                        filters.push({
+                            field,
+                            operator: 'BETWEEN',
+                            data: {
+                                from: DateUtilities.begin(value?.from).toISOString(),
+                                to: DateUtilities.end(value?.to).toISOString(),
+                            },
+                        });
+                    }
+                    else if (value?.from) {
+                        filters.push({
+                            field,
+                            operator: 'GREATER_OR_EQUAL',
+                            data: DateUtilities.begin(value?.from).toISOString(),
+                        });
+                    }
+                    else if (value?.to) {
+                        filters.push({
+                            field,
+                            operator: 'LESS_THAN',
+                            data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                        });
+                    }
+                }
+                else {
+                    if (DateUtilities.isDate(value)) {
+                        filters.push({
+                            field,
+                            operator: 'BETWEEN',
+                            data: {
+                                from: DateUtilities.begin(value).toISOString(),
+                                to: DateUtilities.end(value).toISOString(),
+                            },
+                        });
+                    }
+                }
+            }
+            else {
+                if (Array.isArray(value)) {
+                    if (value.length) {
+                        filters.push({
+                            field,
+                            operator: 'IN',
+                            data: value,
+                        });
+                    }
+                }
+                else {
+                    filters.push({
+                        field,
+                        operator: operator || 'EQUAL',
+                        data: value,
+                    });
+                }
+            }
+        }
+    }
+    // Xử lý orders
+    if (orderBy && orderDirection) {
+        req.orders.push({
+            field: orderBy,
+            direction: orderDirection,
+        });
+    }
+    return req;
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ColumnTitleComponent {
     column = input.required();
@@ -183,6 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ColumnFilterComponent {
+    #lastOnChangeValueHash;
     // ==========================================
     // 1. SIGNAL INPUTS
     // ==========================================
@@ -234,8 +471,6 @@ class ColumnFilterComponent {
     });
     // Chỉ các Operator value cho phép — truyền vào <sd-operator [operators]>.
     operatorValues = computed(() => this.operators().map(o => o.value));
-    // Margin wrapper operator: số + đang chọn operator → thêm mb-4 (canh baseline với sd-input-number).
-    operatorWrapperClass = computed(() => (this.column()?.type === 'number' && this.operator() ? 'mb-4 mr-2' : 'mr-2'));
     // Items cho sd-select khi column type = values / lazy-values
     items = computed(() => {
         const col = this.column();
@@ -269,20 +504,40 @@ class ColumnFilterComponent {
             if (col.type === 'number' && col.filter?.type === 'split-number') {
                 filter[col.field] = filter[col.field] || { from: null, to: null };
             }
+            this.#lastOnChangeValueHash = this.#filterValueHash(filter[col.field]);
         });
     }
     // ==========================================
     // 4. HANDLERS
     // ==========================================
-    onFilterChange = () => this.filterChange.emit();
+    onFilterChange = () => {
+        this.#emitFilterOnChange();
+        this.filterChange.emit();
+    };
     // Blur input: commit giá trị KHÔNG trigger reload.
-    onFilterCommit = () => this.filterCommit.emit();
+    onFilterCommit = () => {
+        this.#emitFilterOnChange();
+        this.filterCommit.emit();
+    };
+    #emitFilterOnChange = () => {
+        const col = this.column();
+        const filter = this.columnFilter();
+        if (!col?.filter?.onChange || !filter)
+            return;
+        const value = filter[col.field];
+        const hash = this.#filterValueHash(value);
+        if (hash === this.#lastOnChangeValueHash)
+            return;
+        this.#lastOnChangeValueHash = hash;
+        col.filter.onChange(value, col, filter);
+    };
+    #filterValueHash = (value) => Utilities.hash({ value });
     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          (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", "clearable", "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", "clearable", "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", "viewed", "clearable", "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-center\" 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      <sd-operator class=\"mr-4\" [(model)]=\"operator\" [operators]=\"operatorValues()\" />\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 *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 *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.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", "clearable", "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", "clearable", "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", "viewed", "clearable", "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          (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"] }]
+            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-center\" 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      <sd-operator class=\"mr-4\" [(model)]=\"operator\" [operators]=\"operatorValues()\" />\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 *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 *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
@@ -335,7 +590,7 @@ const getChildrenFromData = (data, option) => {
  * mặc định nhánh chưa nạp).
  */
 const resolveDefaultExpanded = (level, option) => {
-    const def = option?.loadType === 'static' ? option.defaultExpanded ?? false : false;
+    const def = option?.loadType === 'static' ? (option.defaultExpanded ?? false) : false;
     if (def === true)
         return true;
     if (def === false)
@@ -391,6 +646,48 @@ const subtreeMatches = (data, predicate, option, visited = new Set()) => {
  * bị mất khi từ khoá search đổi. Đây là bước "prune" của tính năng search-con.
  */
 const filterMatchingChildren = (children, predicate, option) => children.filter(child => subtreeMatches(child, predicate, option));
+const getVisibleChildrenData = (data, option, predicate) => {
+    const children = getChildrenFromData(data, option);
+    return predicate ? filterMatchingChildren(children, predicate, option) : children;
+};
+const saveTreeExpandState = (rows, expandState) => {
+    for (const row of rows) {
+        if (row.meta.tree?.isExpanded) {
+            expandState.set(row.meta.id, true);
+        }
+        const children = row.meta.tree?.childItems;
+        if (children?.length) {
+            saveTreeExpandState(children, expandState);
+        }
+    }
+};
+const clearTreeChildCache = (rows) => {
+    for (const row of rows) {
+        const children = row.meta.tree?.childItems;
+        if (children?.length) {
+            clearTreeChildCache(children);
+            row.meta.tree.childItems = undefined;
+        }
+    }
+};
+const initTreeMeta = (rows, option, args = {}) => {
+    const { expandState, treeSearchPredicate, level = 0, parentId } = args;
+    const searchActive = !!treeSearchPredicate;
+    for (const row of rows) {
+        const saved = expandState?.get(row.meta.id);
+        const hasChildren = searchActive
+            ? getVisibleChildrenData(row.data, option, treeSearchPredicate).length > 0
+            : resolveHasChildren(row, option);
+        row.meta.tree = {
+            ...row.meta.tree,
+            level,
+            parentId,
+            hasChildren,
+            isExpanded: searchActive ? hasChildren : (saved ?? resolveDefaultExpanded(level, option)),
+            isExpanding: false,
+        };
+    }
+};
 const flattenTree = (roots, option, visited = new Set()) => {
     if (!option)
         return roots;
@@ -857,8 +1154,6 @@ const DEFAULT_TABLE_CONFIG = {
 const SD_TABLE_CONFIGURATION = new InjectionToken('sd-table.configuration');
 
 class ConfigService {
-    storageService;
-    tableConfiguration;
     #COLUMNS = {
         SUBINFORMATION: 'sdSubInformationAction',
         COMMAND: 'sdCommand',
@@ -872,10 +1167,8 @@ class ConfigService {
     #storage;
     #widthChange = new Subject();
     widthChange$ = this.#widthChange.asObservable();
-    constructor(storageService, tableConfiguration) {
-        this.storageService = storageService;
-        this.tableConfiguration = tableConfiguration;
-    }
+    storageService = inject(SdStorageService);
+    tableConfiguration = inject(SD_TABLE_CONFIGURATION, { optional: true });
     #loadConfiguredTable = (option) => {
         // Nếu không có key thì không lấy được setting
         if (!option?.key) {
@@ -1064,17 +1357,12 @@ class ConfigService {
             columns,
         };
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.SdStorageService }, { token: SD_TABLE_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.SdStorageService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SD_TABLE_CONFIGURATION]
-                }, {
-                    type: Optional
-                }] }] });
+        }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable-next-line @angular-eslint/component-class-suffix
@@ -1304,18 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }], ctorParameters: () => [] });
 
 /**
- * Pipe gộp resolve metadata của 1 command theo row hiện tại — return 1 object
- * chứa `disabled`, `title`, `icon`, và `htmlTemplate` (khi command là child có
- * htmlTemplate). Một lần gọi cho cả 4 truy vấn, template dùng `@let` để alias.
- *
- * Trước đây tách thành 3 pipe `commandDisable` / `commandTitle` / `commandIcon`.
- *
- * @example
- *   @let meta = item | command:cmd;
- *   <button [disabled]="meta.disabled" [matTooltip]="meta.title">
- *     <mat-icon>{{ meta.icon }}</mat-icon>
- *     <div [innerHTML]="meta.htmlTemplate"></div>
- *   </button>
+ * Resolves command metadata for the current row once, then lets the template reuse it with `@let`.
  */
 class CommandPipe {
     transform(item, command) {
@@ -1342,8 +1619,7 @@ class CommandPipe {
             return '';
         return typeof command.icon === 'string' ? command.icon : command.icon(item.data);
     };
-    // Chỉ child command (SdTableCommandNormal) mới có htmlTemplate.
-    // Parent (SdTableCommandChildren) không khai báo — trả về undefined.
+    // Only child commands can provide htmlTemplate.
     #htmlTemplate = (item, command) => {
         const tpl = command?.htmlTemplate;
         return typeof tpl === 'function' ? tpl(item.data) : undefined;
@@ -1353,18 +1629,11 @@ class CommandPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CommandPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'command' }]
+            args: [{ name: 'command', standalone: true }]
         }] });
 
 /**
- * Lọc danh sách commands theo `hidden` (sync / async) + pre-resolve `icon`, `title`, `key`
- * cho từng row. Output dùng trực tiếp trong template không cần thêm pipe phụ.
- *
- * Đã rename từ `commandFilter` → `filter` sau khi gom toàn bộ pipe command vào
- * `components/command/pipes/`.
- *
- * @example
- *   @let filteredCommands = item | filter:commands | async;
+ * Filters visible commands and pre-resolves icon, title, and stable key for the current row.
  */
 class CommandFilterPipe {
     async transform(item, commands) {
@@ -1431,7 +1700,7 @@ class CommandFilterPipe {
             return '';
         return typeof command.title === 'string' ? command.title : command.title(item.data);
     };
-    // Key dùng để gán cho autoId — cần stable theo (icon, title).
+    // Stable autoId key generated from resolved icon and title.
     #key = (item, command) => {
         const icon = this.#icon(item, command);
         const title = this.#title(item, command);
@@ -1442,42 +1711,34 @@ class CommandFilterPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CommandFilterPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'filter' }]
+            args: [{ name: 'filter', standalone: true }]
         }] });
 
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class DesktopCommand {
-    // ==========================================
-    // 1. SIGNAL INPUTS
-    // ==========================================
     autoIdInput = input(undefined, { alias: 'autoId' });
     item = input.required();
     itemIndex = input.required();
     commands = input([]);
-    // ==========================================
-    // 2. COMPUTED
-    // ==========================================
-    // Key định danh row dùng để build autoId: ưu tiên id → code → value → fallback itemIndex.
+    // Row key for autoId: prefer id, then code, then value, then itemIndex.
     itemKey = computed(() => {
         const data = this.item()?.data;
         return data?.['id']?.toString() || data?.['code']?.toString() || data?.['value']?.toString() || this.itemIndex().toString();
     });
-    // autoId của host: `<base>-command-<itemKey>` — đã unique theo row.
-    // Template ghép tiếp `-<commandKey>` (và `-<childKey>` nếu child) cho mỗi button.
+    // Host autoId: `<base>-command-<itemKey>`. Template appends command and child keys.
     autoId = computed(() => {
         const base = this.autoIdInput();
         return base ? `${base}-command-${this.itemKey()}` : '';
     });
-    // Commands signal (mặc định mảng rỗng).
     _commands = computed(() => this.commands() || []);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DesktopCommand, isStandalone: true, selector: "desktop-command", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemIndex: { classPropertyName: "itemIndex", publicName: "itemIndex", isSignal: true, isRequired: true, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, ngImport: i0, template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span> {{ _childMeta.title }}</span>\n                </div>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: CommandPipe, name: "command" }, { kind: "pipe", type: CommandFilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DesktopCommand, isStandalone: true, selector: "desktop-command", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemIndex: { classPropertyName: "itemIndex", publicName: "itemIndex", isSignal: true, isRequired: true, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, ngImport: i0, template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <span class=\"sd-command-menu-item__content\">\n                  <mat-icon class=\"sd-command-menu-item__icon\" [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span class=\"sd-command-menu-item__title\">{{ _childMeta.title }}</span>\n                </span>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}.sd-command-menu-item__content{display:inline-flex;align-items:center;gap:8px;min-width:0;width:100%}.sd-command-menu-item__icon{color:var(--sd-black400)!important;width:24px;height:24px;font-size:18px;line-height:24px!important;margin-right:0!important;flex:0 0 24px}.sd-command-menu-item__title{min-width:0;line-height:20px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: CommandPipe, name: "command" }, { kind: "pipe", type: CommandFilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCommand, decorators: [{
             type: Component,
             args: [{ selector: 'desktop-command', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[attr.data-autoid]': 'autoId()',
-                    }, imports: [CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, MatIconModule, CommandPipe, CommandFilterPipe], template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <div>\n                  <mat-icon [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span> {{ _childMeta.title }}</span>\n                </div>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}\n"] }]
+                    }, imports: [CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, MatIconModule, CommandPipe, CommandFilterPipe], template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <span class=\"sd-command-menu-item__content\">\n                  <mat-icon class=\"sd-command-menu-item__icon\" [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span class=\"sd-command-menu-item__title\">{{ _childMeta.title }}</span>\n                </span>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}.sd-command-menu-item__content{display:inline-flex;align-items:center;gap:8px;min-width:0;width:100%}.sd-command-menu-item__icon{color:var(--sd-black400)!important;width:24px;height:24px;font-size:18px;line-height:24px!important;margin-right:0!important;flex:0 0 24px}.sd-command-menu-item__title{min-width:0;line-height:20px;white-space:nowrap}\n"] }]
         }] });
 
 /* eslint-disable @angular-eslint/no-input-rename */
@@ -2118,19 +2379,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class SdSelectionDisabledPipe {
     transform = (selectedItems, rowData, selection) => {
         const { disabled, actions } = selection;
+        if (rowData.meta.selector.isSelected) {
+            rowData.meta.selector.selectable = true;
+            return false;
+        }
         if (!actions?.length) {
             if (!disabled) {
                 rowData.meta.selector.selectable = true;
                 return false;
             }
-            rowData.meta.selector.selectable = !disabled(rowData, selectedItems);
+            rowData.meta.selector.selectable = !disabled(rowData.data, selectedItems.map(e => e.data));
             return !rowData.meta.selector.selectable;
         }
         // Kiểm tra có bị disabled theo function không
         // Dữ liệu chưa được check thì kiểm tra hàm disable nếu có
-        if (disabled && !rowData.meta.selector.isSelected) {
+        if (disabled) {
             // Nếu disabled và dữ liệu chưa được check
-            if (disabled(rowData, selectedItems)) {
+            if (disabled(rowData.data, selectedItems.map(e => e.data))) {
                 return true;
             }
         }
@@ -2410,13 +2675,13 @@ class TableExportService {
                             }
                         }
                         else if (column.type === 'date') {
-                            obj[fieldStr] = DateUtilities.toFormat(itemValue, 'yyyy/MM/dd');
+                            obj[fieldStr] = DateUtilities$1.toFormat(itemValue, 'yyyy/MM/dd');
                         }
                         else if (column.type === 'datetime') {
-                            obj[fieldStr] = DateUtilities.toFormat(itemValue, 'yyyy/MM/dd HH:mm:ss');
+                            obj[fieldStr] = DateUtilities$1.toFormat(itemValue, 'yyyy/MM/dd HH:mm:ss');
                         }
                         else if (column.type === 'time') {
-                            obj[fieldStr] = DateUtilities.toFormat(itemValue, 'HH:mm:ss');
+                            obj[fieldStr] = DateUtilities$1.toFormat(itemValue, 'HH:mm:ss');
                         }
                         else if (column.type === 'values' || column.type === 'lazy-values') {
                             const vals = (Array.isArray(itemValue) ? itemValue : [itemValue]).filter(e => !!e?.toString());
@@ -2711,8 +2976,8 @@ class TableFormatService {
     // PRIVATE HELPERS
     // ==========================================
     #formatDateDisplay(value, type) {
-        const date = DateUtilities.toFormat(value, 'dd/MM/yyyy');
-        const time = DateUtilities.toFormat(value, 'HH:mm:ss');
+        const date = DateUtilities$1.toFormat(value, 'dd/MM/yyyy');
+        const time = DateUtilities$1.toFormat(value, 'HH:mm:ss');
         if (type === 'datetime') {
             return time && date ? `<div class="T14R">${date}<span class="T14R text-black400 ml-4">${time}</span></div>` : '';
         }
@@ -2773,25 +3038,286 @@ const buildColumnWidthMap = (column) => {
     return result;
 };
 
-class SdTableFilterService {
-    storageService;
-    #filterConfiguration = 'GRID-FILTER-CONFIGURATION';
-    #filterValue = 'GRID-FILTER-VALUE';
-    #cache = {};
-    constructor(storageService) {
-        this.storageService = storageService;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const isTableItem = (item) => !!item && typeof item === 'object' && 'data' in item && 'meta' in item;
+const resolveItemData = (item) => (isTableItem(item) ? item.data : item);
+const hasActiveColumnFilter = (rawColumnFilter = {}, columns = []) => columns.some(col => {
+    const v = rawColumnFilter[col.field];
+    if (Array.isArray(v))
+        return v.length > 0;
+    if (v && typeof v === 'object')
+        return !!v.from || !!v.to;
+    return v !== undefined && v !== null && v !== '';
+});
+const matchesColumnFilter = (data, columns = [], rawColumnFilter = {}) => {
+    for (const column of columns) {
+        const { field, type } = column;
+        const filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
+        const rawColVal = Utilities.getNestedValue(data, field);
+        const columnValue = (rawColVal || '').toString().trim().toLowerCase();
+        if (filterValue) {
+            if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
+                return false;
+            }
+            if (type === 'string') {
+                if (columnValue.indexOf(filterValue) === -1) {
+                    return false;
+                }
+            }
+            else if (type === 'values' || type === 'lazy-values') {
+                const columnType = column;
+                const isMultiple = columnType.option.selection === 'MULTIPLE';
+                if (isMultiple && Array.isArray(rawColVal)) {
+                    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;
+                    }
+                }
+                else {
+                    if (columnValue !== filterValue) {
+                        return false;
+                    }
+                }
+            }
+            else if (type === 'number') {
+                const fValue = +filterValue.replace('>=', '').replace('<=', '').replace('>', '').replace('<', '');
+                const cValue = +columnValue;
+                if (fValue || fValue === 0) {
+                    if (!cValue && cValue !== 0) {
+                        return false;
+                    }
+                    if (filterValue.indexOf('>=') > -1 && cValue < fValue) {
+                        return false;
+                    }
+                    else if (filterValue.indexOf('<=') > -1 && cValue > fValue) {
+                        return false;
+                    }
+                    else if (filterValue.indexOf('<') > -1 && cValue >= fValue) {
+                        return false;
+                    }
+                    else if (filterValue.indexOf('>') > -1 && cValue <= fValue) {
+                        return false;
+                    }
+                    else if (cValue !== fValue) {
+                        return false;
+                    }
+                }
+            }
+            else if (type === 'boolean') {
+                if ((filterValue === '1' || filterValue === 'true') && columnValue !== '1' && columnValue !== 'true') {
+                    return false;
+                }
+                else if ((filterValue === '0' || filterValue === 'false') && columnValue !== '0' && columnValue !== 'false') {
+                    return false;
+                }
+            }
+            else if (type === 'datetime' || type === 'date' || type === 'time') {
+                const from = rawColumnFilter[field]?.from ?? rawColumnFilter[field];
+                const to = rawColumnFilter[field]?.to ?? rawColumnFilter[field];
+                const fromDate = DateUtilities$1.begin(from);
+                const toDate = DateUtilities$1.end(to);
+                if (fromDate || toDate) {
+                    if (!columnValue) {
+                        return false;
+                    }
+                    const columnTime = new Date(columnValue).getTime();
+                    const fromDateTime = fromDate?.getTime() || null;
+                    const toDateTime = toDate?.getTime() || null;
+                    if (fromDateTime && fromDateTime > columnTime) {
+                        return false;
+                    }
+                    if (toDateTime && columnTime > toDateTime) {
+                        return false;
+                    }
+                }
+            }
+        }
     }
-    register = (filter, args) => {
-        let cacheSession = false;
+    return true;
+};
+const filterLocalItems = (localItems, option, filterInfo) => {
+    const { columns } = option;
+    const { rawColumnFilter, orderBy, orderDirection, pageSize, pageNumber } = filterInfo;
+    const matchesData = (data) => matchesColumnFilter(data, columns, rawColumnFilter);
+    const treeOpt = option.tree;
+    const treeSearch = option.type === 'local' && treeOpt?.loadType === 'static' && hasActiveColumnFilter(rawColumnFilter, columns);
+    const treeSearchPredicate = treeSearch ? matchesData : undefined;
+    const items = treeSearch
+        ? localItems.filter(item => subtreeMatches(resolveItemData(item), matchesData, treeOpt))
+        : localItems.filter(item => matchesData(resolveItemData(item)));
+    if (orderBy && orderDirection) {
+        const column = columns.find(e => e.field === orderBy);
+        if (column) {
+            const { type, field } = column;
+            items.sort((tableItemCurrent, tableItemNext) => {
+                const dataVal = Utilities.getNestedValue(resolveItemData(tableItemCurrent), field);
+                const nextVal = Utilities.getNestedValue(resolveItemData(tableItemNext), field);
+                if (type === 'number') {
+                    return (dataVal || 0) - (nextVal || 0);
+                }
+                if (type === 'date' || type === 'datetime' || type === 'time') {
+                    const d1 = new Date(dataVal || '').getTime();
+                    const d2 = new Date(nextVal || '').getTime();
+                    return d1 - d2;
+                }
+                const s1 = (dataVal || '').toString();
+                const s2 = (nextVal || '').toString();
+                if (s1 > s2) {
+                    return 1;
+                }
+                if (s1 < s2) {
+                    return -1;
+                }
+                return 0;
+            });
+            if (orderDirection === 'DESC') {
+                items.reverse();
+            }
+        }
+    }
+    return {
+        items: items.filter((item, index) => index >= pageNumber * pageSize && index < (pageNumber + 1) * pageSize),
+        total: items.length,
+        treeSearchPredicate,
+    };
+};
+
+const isGroupHeader = (item) => !!item?.meta?.group?.items?.length;
+const isChildRow = (item) => (item?.meta.tree?.level ?? 0) > 0;
+const isRootReorderRow = (item) => !!item && !isGroupHeader(item) && !isChildRow(item);
+const moveItem = (items, fromIndex, toIndex) => {
+    const next = [...items];
+    const [moved] = next.splice(fromIndex, 1);
+    if (!moved)
+        return next;
+    next.splice(toIndex, 0, moved);
+    return next;
+};
+const isReorderDisabled = (item, option, index = -1) => {
+    if (isChildRow(item))
+        return true;
+    if (!option?.disabled || isGroupHeader(item))
+        return false;
+    return option.disabled(item.data, index);
+};
+const sameReorderGroup = (a, b, allItems) => {
+    const groupOf = (item) => {
+        let lastGroupIdx = -1;
+        for (let i = 0; i < allItems.length; i++) {
+            if (isGroupHeader(allItems[i]))
+                lastGroupIdx = i;
+            if (allItems[i] === item)
+                return lastGroupIdx;
+        }
+        return -1;
+    };
+    return groupOf(a) === groupOf(b);
+};
+const canSortReorder = ({ enabled, index, dragItem, allItems = [], hasGroup }) => {
+    if (!enabled)
+        return false;
+    const targetItem = allItems[index];
+    if (!isRootReorderRow(targetItem))
+        return false;
+    if (isChildRow(dragItem))
+        return false;
+    if (hasGroup) {
+        return sameReorderGroup(dragItem, targetItem, allItems);
+    }
+    return true;
+};
+const toReorderItemsIndex = (renderedItems, renderedIndex) => {
+    let count = 0;
+    for (let i = 0; i < renderedIndex; i++) {
+        if (isRootReorderRow(renderedItems[i]))
+            count++;
+    }
+    return count;
+};
+const reorderTableItems = ({ items, renderedItems, previousRenderedIndex, currentRenderedIndex, localItems, }) => {
+    const fromIndex = toReorderItemsIndex(renderedItems, previousRenderedIndex);
+    const toIndex = toReorderItemsIndex(renderedItems, currentRenderedIndex);
+    const nextItems = moveItem(items, fromIndex, toIndex);
+    let nextLocalItems = localItems;
+    if (localItems) {
+        const localPositions = items.map(item => localItems.indexOf(item));
+        if (localPositions.every(p => p >= 0)) {
+            nextLocalItems = [...localItems];
+            nextItems.forEach((item, i) => {
+                nextLocalItems[localPositions[i]] = item;
+            });
+        }
+    }
+    return {
+        items: nextItems,
+        localItems: nextLocalItems,
+        fromIndex,
+        toIndex,
+    };
+};
+
+const getSelectionRows = (roots, treeOpt) => treeOpt ? flattenTree(roots, treeOpt) : roots;
+const getSelectedRowData = (rows) => rows.filter(row => row.meta.selector.isSelected).map(row => row.data);
+const applyDefaultSelected = (roots, treeOpt, defaultSelected) => {
+    if (!defaultSelected)
+        return;
+    const rows = treeOpt ? collectFormattedTreeRows(roots) : roots;
+    rows.forEach(item => {
+        item.meta.selector.isSelected = defaultSelected(item.data);
+    });
+};
+const resolveSelectAllState = (visibleRows) => visibleRows.length > 0 && visibleRows.every(row => row.meta.selector?.isSelected);
+const restorePreservedSelection = (visibleRows, preservedSelectedMap) => {
+    visibleRows.forEach(item => {
+        if (preservedSelectedMap.has(item.meta.id)) {
+            item.meta.selector.isSelected = true;
+            preservedSelectedMap.set(item.meta.id, item);
+        }
+    });
+};
+const syncPreservedSelection = (visibleRows, preservedSelectedMap) => {
+    visibleRows.forEach(item => {
+        const id = item.meta.id;
+        if (item.meta.selector.isSelected) {
+            preservedSelectedMap.set(id, item);
+        }
+        else {
+            preservedSelectedMap.delete(id);
+        }
+    });
+    return Array.from(preservedSelectedMap.values());
+};
+
+class SdTableFilterService {
+    storageService;
+    #filterConfiguration = 'GRID-FILTER-CONFIGURATION';
+    #filterValue = 'GRID-FILTER-VALUE';
+    #cache = {};
+    constructor(storageService) {
+        this.storageService = storageService;
+    }
+    #hasOwnValue = (values, field) => {
+        return !!values && Object.prototype.hasOwnProperty.call(values, field);
+    };
+    #resolveKey = (filter, args) => {
         const { id, columns, externalFilters } = args;
         const tempKey = Utilities.hash({
             id,
             columns: columns?.map(e => e.field).filter(field => !!field) || [],
             externalFilters: externalFilters?.map(e => e.field).filter(field => !!field) || [],
         });
-        const key = filter?.key || tempKey;
-        if (!filter?.key) {
-            cacheSession = true; // Nếu không có key thì chỉ lưu theo session
+        return {
+            tempKey,
+            key: filter?.key || tempKey,
+            cacheSession: !filter?.key,
+        };
+    };
+    register = (filter, args) => {
+        const { key, tempKey, cacheSession } = this.#resolveKey(filter, args);
+        if (args.force) {
+            delete this.#cache[key];
         }
         if (!this.#cache[key]) {
             // Setting của filter configuration
@@ -2958,21 +3484,25 @@ class SdTableFilterService {
         const { columns, externalFilters } = args;
         // Filter column
         for (const item of columns || []) {
-            columnFilter[item.field] = value?.columnFilter?.[item.field] ?? item?.filter?.default;
+            // why: null is a deliberate cached clear from SD controls; only a missing key should fall back to default.
+            columnFilter[item.field] = this.#hasOwnValue(value?.columnFilter, item.field)
+                ? value?.columnFilter?.[item.field]
+                : item?.filter?.default;
             if (item?.filter?.operator?.enable && item?.filter?.operator?.default) {
                 columnOperator[item.field] = item.filter.operator.default;
             }
         }
         // Filter external
         for (const item of externalFilters || []) {
+            const hasExternalValue = this.#hasOwnValue(value?.externalFilter, item.field);
             if (item.type === 'daterange') {
                 externalFilter[item.field] = {
-                    from: value?.externalFilter?.[item.field]?.from ?? item.default?.from,
-                    to: value?.externalFilter?.[item.field]?.to ?? item.default?.to,
+                    from: hasExternalValue ? value?.externalFilter?.[item.field]?.from : item.default?.from,
+                    to: hasExternalValue ? value?.externalFilter?.[item.field]?.to : item.default?.to,
                 };
             }
             else {
-                externalFilter[item.field] = value?.externalFilter?.[item.field] ?? item?.default;
+                externalFilter[item.field] = hasExternalValue ? value?.externalFilter?.[item.field] : item?.default;
             }
         }
         return {
@@ -3089,6 +3619,10 @@ class SdTable {
     columnFilter = {};
     #localItems = [];
     #subscription = new Subscription();
+    #configurationSubscription;
+    #filterRegisterSubscription;
+    #optionInstance;
+    #optionRevision = 0;
     #reload = new Subject();
     #loadCompleted = false;
     cacheValues = {};
@@ -3098,7 +3632,7 @@ class SdTable {
     treeRevision = signal(0);
     // Search ở cấp con (static tree + type 'local'): predicate khớp 1 dòng theo
     // column filter hiện hành. Set ở #filterLocal khi có filter active, đọc lại ở
-    // #render/#initTreeMeta/#ensureChildItemsFormatted để prune + auto-expand các
+    // #render/#ensureChildItemsFormatted dùng predicate này để prune + auto-expand các
     // nhánh có node con khớp. undefined = không search → cây render bình thường.
     #treeSearchPredicate;
     // Lần render trước có đang ở chế độ search hay không (để xử lý chuyển trạng thái).
@@ -3121,27 +3655,40 @@ class SdTable {
             const option = this.option();
             if (option) {
                 untracked(() => {
+                    if (this.#optionInstance !== option) {
+                        this.#optionInstance = option;
+                        this.#resetStateForNewOption();
+                    }
+                    const optionRevision = this.#optionRevision;
                     const initOpt = this.#initConfiguration({ ...option });
                     this.tableOption.set(initOpt);
                     this.#loadCompleted = false;
                     const storage = this.#configService.init(initOpt);
-                    this.#subscription.add(storage.observer.pipe(startWith(storage.subject.getValue())).subscribe(() => {
+                    this.#configurationSubscription?.unsubscribe();
+                    this.#configurationSubscription = storage.observer.pipe(startWith(storage.subject.getValue())).subscribe(() => {
+                        if (optionRevision !== this.#optionRevision)
+                            return;
                         const configurationResult = this.#configService.loadConfigurationResult(initOpt, storage.get());
                         const displayColumns = configurationResult.displayedColumns || [];
                         this.#ref.detectChanges();
                         this.#tableFormatService
                             .loadValues(initOpt.columns.filter(column => displayColumns.includes(column.field)), this.cacheValues, this.#cacheObjValues)
                             .then(() => {
+                            if (optionRevision !== this.#optionRevision)
+                                return;
                             this.configuration.set(configurationResult);
                             this.#loadFilterRegister();
                             if (this.filterRegister) {
-                                this.#reload.next({ force: true });
+                                this.#requestReload(true);
                             }
                         })
                             .finally(() => {
+                            if (optionRevision !== this.#optionRevision)
+                                return;
                             this.#ref.detectChanges();
                         });
-                    }));
+                    });
+                    this.#subscription.add(this.#configurationSubscription);
                 });
             }
         });
@@ -3149,7 +3696,7 @@ class SdTable {
             const paginator = this.paginator();
             if (paginator) {
                 untracked(() => {
-                    this.#subscription.add(paginator.page.subscribe(() => this.#reload.next({ force: false })));
+                    this.#subscription.add(paginator.page.subscribe(() => this.#requestReload(false)));
                 });
             }
         });
@@ -3157,7 +3704,7 @@ class SdTable {
             const sort = this.sort();
             if (sort) {
                 untracked(() => {
-                    this.#subscription.add(sort.sortChange.subscribe(() => this.#reload.next({ force: false })));
+                    this.#subscription.add(sort.sortChange.subscribe(() => this.#requestReload(false)));
                 });
             }
         });
@@ -3171,7 +3718,7 @@ class SdTable {
             const conf = this.configuration();
             if (!conf)
                 return;
-            const firstColumns = conf.firstColumns.map(c => c.field === field ? { ...c, width } : c);
+            const firstColumns = conf.firstColumns.map(c => (c.field === field ? { ...c, width } : c));
             const column = { ...conf.column };
             if (column[field]) {
                 column[field] = { ...column[field], width };
@@ -3183,16 +3730,26 @@ class SdTable {
             this.configuration.set({ ...conf, firstColumns, column, fixedColumn });
         }));
     }
-    ngOnInit() { }
     ngAfterViewInit() {
         this.#subscription.add(this.#reload
             .pipe(debounceTime(200), switchMap(async (data) => {
+            if (data.revision !== this.#optionRevision || !this.filterRegister)
+                return undefined;
             const filterInfo = this.getFilterRequest();
             const result = await this.#load(filterInfo, !this.#loadCompleted || data.force);
+            if (data.revision !== this.#optionRevision)
+                return undefined;
             this.#loadCompleted = true;
-            return result;
+            return {
+                result,
+                revision: data.revision,
+            };
         }))
-            .subscribe(this.#render));
+            .subscribe(loadResult => {
+            if (!loadResult || loadResult.revision !== this.#optionRevision)
+                return;
+            this.#render(loadResult.result);
+        }));
     }
     ngOnDestroy() {
         this.#subscription.unsubscribe();
@@ -3211,6 +3768,49 @@ class SdTable {
             isExported: true,
         };
     };
+    #requestReload = (force) => {
+        this.#reload.next({ force, revision: this.#optionRevision });
+    };
+    #resetStateForNewOption = () => {
+        this.#optionRevision += 1;
+        this.#configurationSubscription?.unsubscribe();
+        this.#configurationSubscription = undefined;
+        this.#filterRegisterSubscription?.unsubscribe();
+        this.#filterRegisterSubscription = undefined;
+        this.filterRegister = undefined;
+        this.#tableId = Utilities.generateUuid();
+        this.key = Utilities.generateUuid();
+        this.#loadCompleted = false;
+        this.tableOption.set(undefined);
+        this.configuration.set(undefined);
+        this.items.set([]);
+        this.selectedTableItems.set([]);
+        this.total.set(undefined);
+        this.loading.set(false);
+        this.isSelectAll.set(false);
+        this.isFiltered.set(false);
+        this.requireFiltered.set(false);
+        this.columnOperator = {};
+        this.#syncColumnFilterInPlace({});
+        this.#localItems = [];
+        this.cacheValues = {};
+        this.#cacheObjValues = {};
+        this.#itemIndexMap = new WeakMap();
+        this.#treeExpandState.clear();
+        this.#treeSearchPredicate = undefined;
+        this.#treeSearchActive = false;
+        this.groupExpandState.clear();
+        this.#preservedSelectedMap.clear();
+        this.treeRevision.update(n => n + 1);
+        if (this.paginator()) {
+            this.paginator().pageIndex = 0;
+        }
+        const sort = this.sort();
+        if (sort) {
+            sort.active = '';
+            sort.direction = '';
+        }
+    };
     #initConfiguration = (option) => {
         option.paginate = {
             hidden: option?.paginate?.hidden,
@@ -3230,7 +3830,10 @@ class SdTable {
                 if (!column.filter?.operator?.list?.length) {
                     column.filter.operator.list = this.tableConfiguration?.filter?.operator?.list?.[column.type] || [];
                 }
-                this.columnOperator[column?.field] = this.tableConfiguration?.filter?.operator?.default?.[column.type];
+                const defaultOperator = this.tableConfiguration?.filter?.operator?.default?.[column.type];
+                if (defaultOperator) {
+                    this.columnOperator[column.field] = defaultOperator;
+                }
                 if (column.filter.operator.default && column.filter.operator.list?.some(el => el === column.filter?.operator?.default)) {
                     this.columnOperator[column.field] = column.filter.operator.default;
                 }
@@ -3240,33 +3843,39 @@ class SdTable {
     };
     #loadFilterRegister = () => {
         const opt = this.tableOption();
-        if (opt && !this.filterRegister) {
-            this.filterRegister = this.#gridFilterService.register(opt?.filter, {
-                id: this.#tableId,
-                columns: opt?.columns,
-                externalFilters: opt?.filter?.externalFilters,
-                filterDefs: [...this.sdFilterDefs()],
-                columnOperator: this.columnOperator,
-            });
-            this.#subscription.add(this.filterRegister.value.observer
-                .pipe(debounceTime(500), map(filterValue => {
-                const { columnOperator, columnFilter, notReload } = filterValue;
-                this.columnOperator = columnOperator || {};
-                // Sync IN PLACE — không gán object clone mới. column-filter chia sẻ
-                // reference this.columnFilter qua [columnFilter] input; nếu gán clone
-                // mới, cf giữ ref cũ (do OnPush + reload async lag) → ghi clear vào
-                // object orphan → giá trị cũ persist. Giữ ref ổn định để cf + table
-                // luôn trỏ cùng 1 object.
-                this.#syncColumnFilterInPlace(columnFilter || {});
-                if (!notReload) {
-                    if (this.paginator()) {
-                        this.paginator().pageIndex = 0;
-                    }
-                    this.#reload.next({ force: false });
+        if (!opt || this.filterRegister)
+            return;
+        this.filterRegister = this.#gridFilterService.register(opt?.filter, {
+            id: this.#tableId,
+            columns: opt?.columns,
+            externalFilters: opt?.filter?.externalFilters,
+            filterDefs: [...this.sdFilterDefs()],
+            columnOperator: this.columnOperator,
+            force: true,
+        });
+        const { columnOperator, columnFilter } = this.filterRegister.value.get();
+        this.columnOperator = columnOperator || {};
+        this.#syncColumnFilterInPlace(columnFilter || {});
+        this.#filterRegisterSubscription?.unsubscribe();
+        this.#filterRegisterSubscription = this.filterRegister.value.observer
+            .pipe(debounceTime(500), map(filterValue => {
+            const { columnOperator, columnFilter, notReload } = filterValue;
+            this.columnOperator = columnOperator || {};
+            // Sync IN PLACE — không gán object clone mới. column-filter chia sẻ
+            // reference this.columnFilter qua [columnFilter] input; nếu gán clone
+            // mới, cf giữ ref cũ (do OnPush + reload async lag) → ghi clear vào
+            // object orphan → giá trị cũ persist. Giữ ref ổn định để cf + table
+            // luôn trỏ cùng 1 object.
+            this.#syncColumnFilterInPlace(columnFilter || {});
+            if (!notReload) {
+                if (this.paginator()) {
+                    this.paginator().pageIndex = 0;
                 }
-            }))
-                .subscribe());
-        }
+                this.#requestReload(false);
+            }
+        }))
+            .subscribe();
+        this.#subscription.add(this.#filterRegisterSubscription);
     };
     // Đồng bộ this.columnFilter với `next` mà GIỮ NGUYÊN reference object.
     // column-filter chia sẻ ref này qua [columnFilter] — reassign clone mới sẽ
@@ -3281,158 +3890,12 @@ class SdTable {
         }
         Object.assign(cur, next);
     };
-    // True nếu column filter hiện có ít nhất một giá trị đang lọc (để bật search-con).
-    #hasActiveColumnFilter = (rawColumnFilter, columns) => columns.some(col => {
-        const v = rawColumnFilter[col.field];
-        if (Array.isArray(v))
-            return v.length > 0;
-        if (v && typeof v === 'object')
-            return !!v.from || !!v.to;
-        return v !== undefined && v !== null && v !== '';
-    });
-    // Predicate khớp MỘT dòng (raw data) theo column filter. Tách riêng để dùng lại
-    // cho cả lọc root lẫn search-con (subtreeMatches/filterMatchingChildren).
-    #matchesColumnFilter = (data, columns, rawColumnFilter) => {
-        for (const column of columns) {
-            const { field, type } = column;
-            const filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
-            // SỬA: Dùng getNestedValue để hỗ trợ nested field trong filterLocal
-            const rawColVal = Utilities.getNestedValue(data, field);
-            const columnValue = (rawColVal || '').toString().trim().toLowerCase();
-            if (filterValue) {
-                if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
-                    return false;
-                }
-                if (type === 'string') {
-                    if (columnValue.indexOf(filterValue) === -1) {
-                        return false;
-                    }
-                }
-                else if (type === 'values' || type === 'lazy-values') {
-                    const columnType = column;
-                    const isMultiple = columnType.option.selection === 'MULTIPLE';
-                    if (isMultiple && Array.isArray(rawColVal)) {
-                        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;
-                        }
-                    }
-                    else {
-                        if (columnValue !== filterValue) {
-                            return false;
-                        }
-                    }
-                }
-                else if (type === 'number') {
-                    const fValue = +filterValue.replace('>=', '').replace('<=', '').replace('>', '').replace('<', '');
-                    const cValue = +columnValue;
-                    if (fValue || fValue === 0) {
-                        if (!cValue && cValue !== 0) {
-                            return false;
-                        }
-                        if (filterValue.indexOf('>=') > -1 && cValue < fValue) {
-                            return false;
-                        }
-                        else if (filterValue.indexOf('<=') > -1 && cValue > fValue) {
-                            return false;
-                        }
-                        else if (filterValue.indexOf('<') > -1 && cValue >= fValue) {
-                            return false;
-                        }
-                        else if (filterValue.indexOf('>') > -1 && cValue <= fValue) {
-                            return false;
-                        }
-                        else if (cValue !== fValue) {
-                            return false;
-                        }
-                    }
-                }
-                else if (type === 'boolean') {
-                    if ((filterValue === '1' || filterValue === 'true') && columnValue !== '1' && columnValue !== 'true') {
-                        return false;
-                    }
-                    else if ((filterValue === '0' || filterValue === 'false') && columnValue !== '0' && columnValue !== 'false') {
-                        return false;
-                    }
-                }
-                else if (type === 'datetime' || type === 'date' || type === 'time') {
-                    const from = rawColumnFilter[field]?.from ?? rawColumnFilter[field];
-                    const to = rawColumnFilter[field]?.to ?? rawColumnFilter[field];
-                    const fromDate = DateUtilities.begin(from);
-                    const toDate = DateUtilities.end(to);
-                    if (fromDate || toDate) {
-                        if (!columnValue) {
-                            return false;
-                        }
-                        const columnTime = new Date(columnValue).getTime();
-                        const fromDateTime = fromDate?.getTime() || null;
-                        const toDateTime = toDate?.getTime() || null;
-                        if (fromDateTime && fromDateTime > columnTime) {
-                            return false;
-                        }
-                        if (toDateTime && columnTime > toDateTime) {
-                            return false;
-                        }
-                    }
-                }
-            }
-        }
-        return true;
-    };
     #filterLocal = (localItems, filterInfo) => {
-        const opt = this.tableOption();
-        const { columns } = opt;
-        const { rawColumnFilter, orderBy, orderDirection, pageSize, pageNumber } = filterInfo;
-        const matchesData = (data) => this.#matchesColumnFilter(data, columns, rawColumnFilter);
-        // Search ở cấp con: chỉ bật cho table local + static tree + đang có filter.
-        // Khi bật, một root được giữ nếu CHÍNH NÓ hoặc bất kỳ hậu duệ nào khớp; và
-        // lưu predicate để #render prune + auto-expand nhánh khớp.
-        const treeOpt = opt.tree;
-        const treeSearch = opt.type === 'local' && treeOpt?.loadType === 'static' && this.#hasActiveColumnFilter(rawColumnFilter, columns);
-        this.#treeSearchPredicate = treeSearch ? matchesData : undefined;
-        const items = treeSearch
-            ? localItems.filter(tableItem => subtreeMatches(tableItem.data, matchesData, treeOpt))
-            : localItems.filter(tableItem => matchesData(tableItem.data));
-        // Sort
-        if (orderBy && orderDirection) {
-            const column = columns.find(e => e.field === orderBy);
-            if (column) {
-                const { type, field } = column;
-                items.sort((tableItemCurrent, tableItemNext) => {
-                    const data = tableItemCurrent.data;
-                    const next = tableItemNext.data;
-                    // SỬA: Dùng getNestedValue cho sorting
-                    const dataVal = Utilities.getNestedValue(data, field);
-                    const nextVal = Utilities.getNestedValue(next, field);
-                    if (type === 'number') {
-                        return (dataVal || 0) - (nextVal || 0);
-                    }
-                    if (type === 'date' || type === 'datetime' || type === 'time') {
-                        const d1 = new Date(dataVal || '').getTime();
-                        const d2 = new Date(nextVal || '').getTime();
-                        return d1 - d2;
-                    }
-                    const s1 = (dataVal || '').toString();
-                    const s2 = (nextVal || '').toString();
-                    if (s1 > s2) {
-                        return 1;
-                    }
-                    if (s1 < s2) {
-                        return -1;
-                    }
-                    return 0;
-                });
-                if (orderDirection === 'DESC') {
-                    items.reverse();
-                }
-            }
-        }
+        const result = filterLocalItems(localItems, this.tableOption(), filterInfo);
+        this.#treeSearchPredicate = result.treeSearchPredicate;
         return {
-            items: items.filter((item, index) => {
-                return index >= pageNumber * pageSize && index < (pageNumber + 1) * pageSize;
-            }),
-            total: items.length,
+            items: result.items,
+            total: result.total,
         };
     };
     getFilterRequest = () => {
@@ -3516,7 +3979,10 @@ class SdTable {
                     total: 0,
                 };
             }
-            const pagingReq = this.#convertPagingReq(filterReq);
+            const pagingReq = SdConvertToPagingReq(filterReq, {
+                columns: opt.columns,
+                externalFilters: opt.filter?.externalFilters,
+            });
             const data = await items(filterReq, pagingReq).catch(err => {
                 console.error(err);
                 return {
@@ -3566,18 +4032,21 @@ class SdTable {
             // why: KHÔNG persist trạng thái bung bị ÉP trong lúc search (tránh nhánh
             // tự bung do search bị ghi nhầm thành lựa chọn của user sau khi clear).
             if (!this.#treeSearchActive) {
-                this.#saveTreeExpandState(this.items());
+                saveTreeExpandState(this.items(), this.#treeExpandState);
             }
             // why: search vừa tắt → childItems đang là tập đã prune theo từ khoá cũ;
             // xoá cache để dựng lại đầy đủ children ở chế độ thường.
             if (this.#treeSearchActive && !searchNow) {
-                this.#clearTreeChildCache(this.#localItems);
+                clearTreeChildCache(this.#localItems);
             }
         }
         this.items.set(args?.items || []);
         this.total.set(args?.total || 0);
         if (treeOpt) {
-            this.#initTreeMeta(this.items(), treeOpt);
+            initTreeMeta(this.items(), treeOpt, {
+                expandState: this.#treeExpandState,
+                treeSearchPredicate: this.#treeSearchPredicate,
+            });
             await this.#expandDefaultBranches(this.items(), treeOpt);
             this.treeRevision.update(n => n + 1);
         }
@@ -3624,7 +4093,10 @@ class SdTable {
         else {
             const filterReq = this.#filterExportInfo(pageNumber, pageSize);
             if (opt.type === 'server') {
-                const pagingReq = this.#convertPagingReq(filterReq);
+                const pagingReq = SdConvertToPagingReq(filterReq, {
+                    columns: opt.columns,
+                    externalFilters: opt.filter?.externalFilters,
+                });
                 const result = opt.items(filterReq, pagingReq);
                 return await result;
             }
@@ -3669,51 +4141,6 @@ class SdTable {
     exportCustom = () => {
         this.#tableExportService.exportCustom(this.#createExportContext());
     };
-    #saveTreeExpandState = (rows) => {
-        for (const row of rows) {
-            if (row.meta.tree?.isExpanded) {
-                this.#treeExpandState.set(row.meta.id, true);
-            }
-            for (const child of row.meta.tree?.childItems ?? []) {
-                this.#saveTreeExpandState([child]);
-            }
-        }
-    };
-    // Children "nhìn thấy được" của một row: bình thường = toàn bộ embedded;
-    // khi search-con = chỉ giữ child có subtree khớp từ khoá (prune).
-    #visibleChildrenData = (data, treeOpt) => {
-        const all = getChildrenFromData(data, treeOpt);
-        const predicate = this.#treeSearchPredicate;
-        return predicate ? filterMatchingChildren(all, predicate, treeOpt) : all;
-    };
-    // Xoá cache childItems trên toàn cây — dùng khi tắt search để dựng lại đầy đủ.
-    #clearTreeChildCache = (rows) => {
-        for (const row of rows) {
-            const children = row.meta.tree?.childItems;
-            if (children?.length) {
-                this.#clearTreeChildCache(children);
-                row.meta.tree.childItems = undefined;
-            }
-        }
-    };
-    #initTreeMeta = (rows, option, level = 0, parentId) => {
-        const searchActive = !!this.#treeSearchPredicate;
-        for (const row of rows) {
-            const saved = this.#treeExpandState.get(row.meta.id);
-            // Khi search: hasChildren tính theo tập con đã prune; auto-expand nhánh còn con.
-            const hasChildren = searchActive
-                ? this.#visibleChildrenData(row.data, option).length > 0
-                : resolveHasChildren(row, option);
-            row.meta.tree = {
-                ...row.meta.tree,
-                level,
-                parentId,
-                hasChildren,
-                isExpanded: searchActive ? hasChildren : (saved ?? resolveDefaultExpanded(level, option)),
-                isExpanding: false,
-            };
-        }
-    };
     #ensureChildItemsFormatted = async (row) => {
         const opt = this.tableOption();
         const treeOpt = opt.tree;
@@ -3722,7 +4149,7 @@ class SdTable {
         // vì tập này phụ thuộc từ khoá (đổi mỗi lần gõ) nên không thể cache.
         if (!searchActive && row.meta.tree?.childItems?.length)
             return;
-        const raw = this.#visibleChildrenData(row.data, treeOpt);
+        const raw = getVisibleChildrenData(row.data, treeOpt, this.#treeSearchPredicate);
         if (!raw.length) {
             if (searchActive && row.meta.tree)
                 row.meta.tree.childItems = [];
@@ -3730,20 +4157,12 @@ class SdTable {
         }
         const formatted = await this.#tableFormatService.format(raw, opt.columns, this.cacheValues, this.#cacheObjValues);
         row.meta.tree.childItems = formatted;
-        const childLevel = (row.meta.tree.level ?? 0) + 1;
-        for (const child of formatted) {
-            const saved = this.#treeExpandState.get(child.meta.id);
-            const childHasChildren = searchActive
-                ? this.#visibleChildrenData(child.data, treeOpt).length > 0
-                : resolveHasChildren(child, treeOpt);
-            child.meta.tree = {
-                level: childLevel,
-                parentId: row.meta.id,
-                hasChildren: childHasChildren,
-                isExpanded: searchActive ? childHasChildren : (saved ?? resolveDefaultExpanded(childLevel, treeOpt)),
-                isExpanding: false,
-            };
-        }
+        initTreeMeta(formatted, treeOpt, {
+            level: (row.meta.tree.level ?? 0) + 1,
+            parentId: row.meta.id,
+            expandState: this.#treeExpandState,
+            treeSearchPredicate: this.#treeSearchPredicate,
+        });
     };
     #expandDefaultBranches = async (rows, option) => {
         const maxDepth = option.maxDepth;
@@ -3902,28 +4321,14 @@ class SdTable {
         this.#updateSelectedItems();
     };
     #getSelectionRows = () => {
-        const roots = this.items();
-        const treeOpt = this.tableOption()?.tree;
-        if (!treeOpt)
-            return roots;
-        return flattenTree(roots, treeOpt);
+        return getSelectionRows(this.items(), this.tableOption()?.tree);
     };
-    #getSelectedRowData = () => this.#getSelectionRows()
-        .filter(e => e.meta.selector.isSelected)
-        .map(e => e.data);
+    #getSelectedRowData = () => getSelectedRowData(this.#getSelectionRows());
     #applyDefaultSelected = () => {
-        const defaultSelected = this.tableOption()?.selector?.defaultSelected;
-        if (!defaultSelected)
-            return;
-        const treeOpt = this.tableOption()?.tree;
-        const rows = treeOpt ? collectFormattedTreeRows(this.items()) : this.items();
-        rows.forEach(item => {
-            item.meta.selector.isSelected = defaultSelected(item.data);
-        });
+        applyDefaultSelected(this.items(), this.tableOption()?.tree, this.tableOption()?.selector?.defaultSelected);
     };
     #syncSelectAllState = () => {
-        const visible = this.#getSelectionRows();
-        this.isSelectAll.set(visible.length > 0 && visible.every(e => e.meta.selector?.isSelected));
+        this.isSelectAll.set(resolveSelectAllState(this.#getSelectionRows()));
     };
     // ==========================================
     // GROUP HELPERS — sync selection + expand state cho group header rows
@@ -3966,9 +4371,7 @@ class SdTable {
             return;
         const key = header.meta.group.key;
         const defaultExpanded = !this.tableOption()?.group?.defaultCollapsed;
-        const current = this.groupExpandState.has(key)
-            ? !!this.groupExpandState.get(key)
-            : defaultExpanded;
+        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.
@@ -3985,7 +4388,7 @@ class SdTable {
      * Colspan cho cell sdGroupHeader trên group row = displayedColumns.length.
      * Span TOÀN BỘ width data row vì group row chỉ có 1 cell.
      */
-    sdGroupColspan = computed(() => (this.configuration()?.displayedColumns?.length || 1));
+    sdGroupColspan = computed(() => this.configuration()?.displayedColumns?.length || 1);
     /** Build context object truyền vào SdTableGroupDefDirective template. */
     groupContext = (header) => {
         const g = header.meta.group;
@@ -4007,9 +4410,7 @@ class SdTable {
         if (!fn)
             return null;
         const tree = row.meta?.tree;
-        const ctx = this.tableOption()?.tree && tree
-            ? { level: tree.level, hasChildren: tree.hasChildren, isExpanded: tree.isExpanded }
-            : undefined;
+        const ctx = this.tableOption()?.tree && tree ? { level: tree.level, hasChildren: tree.hasChildren, isExpanded: tree.isExpanded } : undefined;
         return fn(row.data, index, ctx);
     };
     // why: khi preserveSelection bật, giữ map nội bộ id → SdTableItem để selection
@@ -4023,29 +4424,14 @@ class SdTable {
     #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);
-            }
-        });
+        restorePreservedSelection(this.#getSelectionRows(), this.#preservedSelectedMap);
     };
     #updateSelectedItems = () => {
         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()));
+            this.selectedTableItems.set(syncPreservedSelection(rows, this.#preservedSelectedMap));
         }
         else {
             this.selectedTableItems.set(rows.filter(item => item.meta.selector.isSelected));
@@ -4097,295 +4483,38 @@ class SdTable {
         return (p?.pageIndex ?? 0) * (p?.pageSize ?? 0);
     });
     isReorderDisabled(item) {
-        if ((item.meta.tree?.level ?? 0) > 0)
-            return true;
         const opt = this.tableOption()?.rowReorder;
-        if (!opt?.disabled || item.meta?.group?.items?.length)
-            return false;
         const idx = this.#itemIndexMap.get(item) ?? -1;
-        return opt.disabled(item.data, idx);
-    }
-    #sameGroup(a, b, allItems) {
-        const groupOf = (item) => {
-            let lastGroupIdx = -1;
-            for (let i = 0; i < allItems.length; i++) {
-                if (allItems[i].meta?.group?.items?.length)
-                    lastGroupIdx = i;
-                if (allItems[i] === item)
-                    return lastGroupIdx;
-            }
-            return -1;
-        };
-        return groupOf(a) === groupOf(b);
+        return isReorderDisabled(item, opt, idx);
     }
     reorderSortPredicate = (index, drag, drop) => {
         const opt = this.tableOption()?.rowReorder;
-        if (!opt?.enabled)
-            return false;
-        const allItems = drop.data;
-        const targetItem = allItems?.[index];
-        if (!targetItem)
-            return false;
-        if ((targetItem.meta.tree?.level ?? 0) > 0)
-            return false;
-        if ((drag.data.meta.tree?.level ?? 0) > 0)
-            return false;
-        if (targetItem.meta?.group?.items?.length)
-            return false;
-        if (this.tableOption()?.group) {
-            return this.#sameGroup(drag.data, targetItem, allItems);
-        }
-        return true;
+        return canSortReorder({
+            enabled: opt?.enabled,
+            index,
+            dragItem: drag.data,
+            allItems: drop.data,
+            hasGroup: !!this.tableOption()?.group,
+        });
     };
     onReorderDrop(event) {
         const { previousIndex, currentIndex } = event;
         if (previousIndex === currentIndex)
             return;
-        const groupedItems = event.container.data;
-        const toItemsIndex = (domIdx) => {
-            let count = 0;
-            for (let i = 0; i < domIdx; i++) {
-                if (!groupedItems[i]?.meta?.group?.items?.length && (groupedItems[i]?.meta?.tree?.level ?? 0) === 0)
-                    count++;
-            }
-            return count;
-        };
-        const fromIdx = toItemsIndex(previousIndex);
-        const toIdx = toItemsIndex(currentIndex);
-        const current = [...this.items()];
-        const localPositions = current.map(item => this.#localItems.indexOf(item));
-        moveItemInArray(current, fromIdx, toIdx);
-        this.items.set(current);
-        if (this.tableOption()?.type === 'local' && localPositions.every(p => p >= 0)) {
-            const newLocal = [...this.#localItems];
-            current.forEach((item, i) => {
-                newLocal[localPositions[i]] = item;
-            });
-            this.#localItems = newLocal;
+        const result = reorderTableItems({
+            items: this.items(),
+            renderedItems: event.container.data,
+            previousRenderedIndex: previousIndex,
+            currentRenderedIndex: currentIndex,
+            localItems: this.tableOption()?.type === 'local' ? this.#localItems : undefined,
+        });
+        this.items.set(result.items);
+        if (this.tableOption()?.type === 'local' && result.localItems) {
+            this.#localItems = result.localItems;
         }
         this.table()?.renderRows();
-        this.tableOption()?.rowReorder?.onChange?.(current.map(i => i.data), event.item.data.data, fromIdx, toIdx);
+        this.tableOption()?.rowReorder?.onChange?.(result.items.map(i => i.data), event.item.data.data, result.fromIndex, result.toIndex);
     }
-    #convertPagingReq = (filterReq) => {
-        const opt = this.tableOption();
-        const { columns, filter } = opt;
-        const externalFilters = filter?.externalFilters || [];
-        const req = {
-            filters: [],
-            orders: [],
-            pageNumber: filterReq.pageNumber,
-            pageSize: filterReq.pageSize,
-        };
-        const { filters, orders } = req;
-        const { rawColumnFilter, columnOperator, rawExternalFilter, orderBy, orderDirection } = filterReq;
-        for (const externalFilter of externalFilters || []) {
-            const { field } = externalFilter;
-            const value = rawExternalFilter?.[field];
-            if (value !== undefined && value !== null && value !== '') {
-                if (externalFilter.type === 'string') {
-                    if (externalFilter.defaultOperator === 'EQUAL' && value?.includes(',')) {
-                        filters.push({
-                            field,
-                            operator: 'IN',
-                            data: value.split(',').map(val => val.trim()),
-                        });
-                    }
-                    else {
-                        filters.push({
-                            field,
-                            operator: externalFilter.defaultOperator || 'CONTAIN',
-                            data: value,
-                        });
-                    }
-                }
-                else if (externalFilter.type === 'boolean') {
-                    filters.push({
-                        field,
-                        operator: 'EQUAL',
-                        data: value === true || value === 1 || value === 'true' || value === '1',
-                    });
-                }
-                else if (externalFilter.type === 'daterange') {
-                    if (typeof value === 'object' && 'from' in value && 'to' in value) {
-                        if (value?.from) {
-                            filters.push({
-                                field,
-                                operator: 'GREATER_OR_EQUAL',
-                                data: DateUtilities.begin(value?.from).toISOString(),
-                            });
-                        }
-                        if (value?.to) {
-                            filters.push({
-                                field,
-                                operator: 'LESS_THAN',
-                                data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
-                            });
-                        }
-                    }
-                }
-                else if (externalFilter.type === 'date' || externalFilter.type === 'datetime') {
-                    if (DateUtilities.isDate(value)) {
-                        if (externalFilter.type === 'date') {
-                            if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
-                                filters.push({
-                                    field,
-                                    operator: 'GREATER_OR_EQUAL',
-                                    data: DateUtilities.begin(value).toISOString(),
-                                });
-                            }
-                            if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
-                                filters.push({
-                                    field,
-                                    operator: 'LESS_THAN',
-                                    data: DateUtilities.begin(DateUtilities.addDays(value, 1)).toISOString(),
-                                });
-                            }
-                        }
-                        else {
-                            if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
-                                filters.push({
-                                    field,
-                                    operator: 'GREATER_OR_EQUAL',
-                                    data: new Date(value).toISOString(),
-                                });
-                            }
-                            if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
-                                filters.push({
-                                    field,
-                                    operator: 'LESS_OR_EQUAL',
-                                    data: new Date(value).toISOString(),
-                                });
-                            }
-                        }
-                    }
-                }
-                else {
-                    if (Array.isArray(value)) {
-                        if (value.length) {
-                            filters.push({
-                                field,
-                                operator: 'IN',
-                                data: value,
-                            });
-                        }
-                    }
-                    else if (typeof value === 'object' && 'from' in value && 'to' in value) {
-                        if (value?.from) {
-                            filters.push({
-                                field,
-                                operator: 'GREATER_OR_EQUAL',
-                                data: DateUtilities.begin(value?.from).toISOString(),
-                            });
-                        }
-                        if (value?.to) {
-                            filters.push({
-                                field,
-                                operator: 'LESS_THAN',
-                                data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
-                            });
-                        }
-                    }
-                    else {
-                        filters.push({
-                            field,
-                            operator: externalFilter.defaultOperator || 'EQUAL',
-                            data: value,
-                        });
-                    }
-                }
-            }
-        }
-        for (const column of columns || []) {
-            const { field } = column;
-            const value = rawColumnFilter?.[field];
-            const operator = columnOperator?.[field] || column.filter?.operator?.default;
-            if (value !== undefined && value !== null && value !== '') {
-                if (column.type === 'string') {
-                    // `operator` is the wide `Operator` union; in this data-bearing path it is a
-                    // single-value comparison operator, hence the cast to the `Filter` contract.
-                    filters.push({
-                        field: field,
-                        operator: operator || 'CONTAIN',
-                        data: value,
-                    });
-                }
-                else if (column.type === 'boolean') {
-                    filters.push({
-                        field: field,
-                        operator: 'EQUAL',
-                        data: value === true || value === 1 || value === 'true' || value === '1',
-                    });
-                }
-                else if (column.type === 'date' || column.type === 'datetime') {
-                    if (value && typeof value === 'object' && 'from' in value && 'to' in value) {
-                        if (value?.from && value?.to) {
-                            filters.push({
-                                field: field,
-                                operator: 'BETWEEN',
-                                data: {
-                                    from: DateUtilities.begin(value?.from).toISOString(),
-                                    to: DateUtilities.end(value?.to).toISOString(),
-                                },
-                            });
-                        }
-                        else if (value?.from) {
-                            filters.push({
-                                field: field,
-                                operator: 'GREATER_OR_EQUAL',
-                                data: DateUtilities.begin(value?.from).toISOString(),
-                            });
-                        }
-                        else if (value?.to) {
-                            filters.push({
-                                field: field,
-                                operator: 'LESS_THAN',
-                                data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
-                            });
-                        }
-                    }
-                    else {
-                        if (DateUtilities.isDate(value)) {
-                            filters.push({
-                                field: field,
-                                operator: 'BETWEEN',
-                                data: {
-                                    from: DateUtilities.begin(value).toISOString(),
-                                    to: DateUtilities.end(value).toISOString(),
-                                },
-                            });
-                        }
-                    }
-                }
-                else {
-                    if (Array.isArray(value)) {
-                        if (value.length) {
-                            filters.push({
-                                field: field,
-                                operator: 'IN',
-                                data: value,
-                            });
-                        }
-                    }
-                    else {
-                        // `operator` is the wide `Operator` union; this data-bearing path uses a
-                        // single-value comparison operator, hence the cast to the `Filter` contract.
-                        filters.push({
-                            field: field,
-                            operator: operator || 'EQUAL',
-                            data: value,
-                        });
-                    }
-                }
-            }
-        }
-        if (orderBy && orderDirection) {
-            orders.push({
-                field: orderBy,
-                direction: orderDirection,
-            });
-        }
-        return req;
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdTable, isStandalone: true, selector: "sd-table", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()", "attr.data-loading": "loading() ? \"true\" : \"false\"" } }, providers: [
             DatePipe,
@@ -4467,183 +4596,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     ], 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@let _autoId = autoId();\r\n@let _exportTitle = exportTitle();\r\n@let _cellDef = cellDef();\r\n@let _footerDef = footerDef();\r\n@let _sdSubInformation = sdSubInformation();\r\n@let _configComponent = configComponent();\r\n@let _mobileFilter = mobileFilter();\r\n@let _selectedTableItems = selectedTableItems();\r\n<!-- why: tree kh\u00F4ng c\u00F2n c\u1ED9t ri\u00EAng \u2014 khi KH\u00D4NG c\u00F3 c\u1ED9t Index, icon expand nh\u00FAng v\u00E0o\r\n     c\u1ED9t data \u0111\u1EA7u ti\u00EAn. \u0110\u00E2y l\u00E0 field c\u1EE7a c\u1ED9t \u0111\u00F3 (null n\u1EBFu c\u00F3 Index ho\u1EB7c kh\u00F4ng tree). -->\r\n@let _treeFirstField = _tableOption?.tree && !_tableOption.index?.enabled ? _configuration?.firstColumns?.[0]?.field : null;\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\r\n  <!-- Tree toggle d\u00F9ng chung: indent (theo c\u1EA5p) + slot chevron/spinner. Nh\u00FAng v\u00E0o\r\n       c\u1ED9t Index ho\u1EB7c c\u1ED9t data \u0111\u1EA7u qua *ngTemplateOutlet (context: { row }). -->\r\n  <ng-template #sdTreeToggle let-row=\"row\">\r\n    @let _tree = row?.meta?.tree;\r\n    @if (_tree) {\r\n      <span class=\"sd-tree-indent\" [style.width.px]=\"(_tree.level ?? 0) * (_tableOption.tree?.indentSize ?? 20)\"></span>\r\n      <span class=\"sd-tree-toggle-slot\">\r\n        @if (_tree.hasChildren) {\r\n          @if (_tree.isExpanding) {\r\n            <span class=\"lds-ring sd-tree-spinner\">\r\n              <div></div>\r\n              <div></div>\r\n              <div></div>\r\n              <div></div>\r\n            </span>\r\n          } @else {\r\n            @let _aid = _autoId;\r\n            <button\r\n              type=\"button\"\r\n              class=\"sd-tree-toggle-btn\"\r\n              [attr.data-autoid]=\"_aid ? _aid + '-tree-toggle-' + row.meta.id : null\"\r\n              (click)=\"onTreeToggle(row); $event.stopPropagation()\">\r\n              <mat-icon>{{ _tree.isExpanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>\r\n\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        <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                [autoId]=\"_autoId ? _autoId + '-expand-' + element.meta.id : null\"\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          <!-- why: khi tree, c\u1ED9t Index \"\u00F4m\" th\u00EAm chevron + indent. D\u00F9ng width:1px +\r\n               nowrap (.sd-tree-index-cell) \u0111\u1EC3 c\u1ED9t co S\u00C1T n\u1ED9i dung, kh\u00F4ng chi\u1EBFm ch\u1ED7\r\n               th\u1EEBa; header \"#\" canh tr\u00E1i l\u00F9i v\u00E0o (.sd-tree-index-header) cho th\u1EB3ng s\u1ED1. -->\r\n          @let _treeIndex = !!_tableOption.tree;\r\n          <ng-container matColumnDef=\"sdIndex\" sticky>\r\n            <th\r\n              [class.p-0]=\"!_treeIndex\"\r\n              [class.text-center]=\"!_treeIndex\"\r\n              [class.sd-tree-index-cell]=\"_treeIndex\"\r\n              [class.sd-tree-index-header]=\"_treeIndex\"\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.width]=\"_treeIndex ? '1px' : _indexWidth\"\r\n              [style.min-width]=\"_treeIndex ? null : _indexWidth\"\r\n              [style.max-width]=\"_treeIndex ? null : _indexWidth\"\r\n              [attr.rowspan]=\"_configuration.multipleHeader ? 2 : 1\">\r\n              {{ _tableOption.index?.title || '#' }}\r\n            </th>\r\n            <td\r\n              [class.px-4]=\"!_treeIndex\"\r\n              [class.text-center]=\"!_treeIndex\"\r\n              [class.sd-tree-index-cell]=\"_treeIndex\"\r\n              mat-cell\r\n              *matCellDef=\"let item; let i = dataIndex\"\r\n              [style.width]=\"_treeIndex ? '1px' : null\"\r\n              [style.min-width]=\"_treeIndex ? null : _indexWidth\"\r\n              [style.max-width]=\"_treeIndex ? null : _indexWidth\">\r\n              @if (!item?.meta?.group?.isGroupHeader) {\r\n                @if (_treeIndex) {\r\n                  <!-- why: tree \u2192 chevron + indent + STT ph\u00E2n c\u1EA5p (1, 1.2, 1.2.1). T\u00F4 \u0111\u1EADm root (level 0). -->\r\n                  <span class=\"sd-tree-line\">\r\n                    <ng-container *ngTemplateOutlet=\"sdTreeToggle; context: { row: item }\"></ng-container>\r\n                    @if (item?.meta?.tree?.indexPath?.length) {\r\n                      <span class=\"sd-tree-stt\" [class.sd-stt-root]=\"(item.meta.tree.level ?? 0) === 0\">\r\n                        {{ item.meta.tree.indexPath.join('.') }}\r\n                      </span>\r\n                    }\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.width]=\"_treeIndex ? '1px' : null\" [style.min-width]=\"_treeIndex ? null : _indexWidth\" [style.max-width]=\"_treeIndex ? null : _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                  [autoId]=\"_autoId ? _autoId + '-group-toggle-' + (item.meta.group?.key || item.meta.id) : null\"\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                @if (_treeFirstField && column.field === _treeFirstField) {\r\n                  <!-- why: kh\u00F4ng c\u00F3 c\u1ED9t Index \u2192 chevron + indent nh\u00FAng v\u00E0o c\u1ED9t data \u0111\u1EA7u (nh\u01B0 file explorer). -->\r\n                  <span class=\"sd-tree-line px-8\">\r\n                    <ng-container *ngTemplateOutlet=\"sdTreeToggle; context: { row: item }\"></ng-container>\r\n                    <desktop-cell class=\"d-block\" [column]=\"column\" [item]=\"item\" [cellDef]=\"_cellDef\"></desktop-cell>\r\n                  </span>\r\n                } @else {\r\n                  <desktop-cell class=\"d-block px-8\" [column]=\"column\" [item]=\"item\" [cellDef]=\"_cellDef\"> </desktop-cell>\r\n                }\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              [autoId]=\"_autoId ? _autoId + '-reload' : null\"\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 [autoId]=\"_autoId ? _autoId + '-export' : null\" 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 [autoId]=\"_autoId ? _autoId + '-export' : null\" 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 [autoId]=\"_autoId ? _autoId + '-export' : null\" 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 [attr.data-autoid]=\"_autoId ? _autoId + '-export-excel' : null\" (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 [attr.data-autoid]=\"_autoId ? _autoId + '-export-csv' : null\" (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 [autoId]=\"_autoId ? _autoId + '-export-excel' : null\" 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 [autoId]=\"_autoId ? _autoId + '-export-csv' : null\" 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              [autoId]=\"_autoId ? _autoId + '-config' : null\"\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 ? _autoId + '-mobile-filter-open' : null\"\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 [autoId]=\"_autoId\" [tableOption]=\"_tableOption\" [selectedTableItems]=\"_selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\" />\r\n  @if (_tableOption.config?.visible) {\r\n    <config [autoId]=\"_autoId\" [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-line{display:inline-flex;align-items:center;min-height:32px}:host ::ng-deep .sd-tree-indent{flex:0 0 auto}:host ::ng-deep .sd-tree-toggle-slot{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}:host ::ng-deep .sd-tree-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--sd-text-secondary, #5b6472);transition:background-color .15s ease}:host ::ng-deep .sd-tree-toggle-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}:host ::ng-deep .sd-tree-toggle-btn:hover{background-color:#0f172a14}:host ::ng-deep .sd-tree-spinner{transform:scale(.45)}:host ::ng-deep .sd-tree-stt{margin-left:2px;white-space:nowrap}:host ::ng-deep .sd-tree-index-cell{text-align:left!important;white-space:nowrap;padding-left:8px;padding-right:8px}:host ::ng-deep .sd-tree-index-header{padding-left:32px}: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 .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) => {
-    const { externalFilters, columns, fieldMapping } = args;
-    const req = {
-        filters: [],
-        orders: args?.orders || [],
-        pageNumber: filterRequest.pageNumber,
-        pageSize: filterRequest.pageSize,
-    };
-    const { filters } = req;
-    const { rawExternalFilter, rawColumnFilter, columnOperator, orderBy, orderDirection } = filterRequest;
-    // Xử lý external filter
-    for (const externalFilter of externalFilters || []) {
-        const value = rawExternalFilter?.[externalFilter.field];
-        const field = fieldMapping?.[externalFilter.field] || externalFilter.field;
-        // Nếu có giá trị thì mới xử lý filter
-        if (value !== undefined && value !== null && value !== '') {
-            if (externalFilter.type === 'string') {
-                filters.push({
-                    field,
-                    operator: externalFilter.defaultOperator || 'CONTAIN',
-                    data: value,
-                });
-            }
-            else if (externalFilter.type === 'boolean') {
-                filters.push({
-                    field,
-                    operator: 'EQUAL',
-                    data: value === true || value === 1 || value === 'true' || value === '1',
-                });
-            }
-            else if (externalFilter.type === 'date') {
-                if (typeof value === 'object' && 'from' in value && 'to' in value) {
-                    if (value?.from) {
-                        filters.push({
-                            field,
-                            operator: 'GREATER_OR_EQUAL',
-                            data: DateUtilities$1.begin(value?.from).toISOString(),
-                        });
-                    }
-                    if (value?.to) {
-                        filters.push({
-                            field,
-                            operator: 'LESS_THAN',
-                            data: DateUtilities$1.begin(DateUtilities$1.addDays(value?.to, 1)).toISOString(),
-                        });
-                    }
-                }
-                else {
-                    if (DateUtilities$1.isDate(value)) {
-                        if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
-                            filters.push({
-                                field,
-                                operator: 'GREATER_OR_EQUAL',
-                                data: DateUtilities$1.begin(value).toISOString(),
-                            });
-                        }
-                        if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
-                            filters.push({
-                                field,
-                                operator: 'LESS_THAN',
-                                data: DateUtilities$1.begin(DateUtilities$1.addDays(value, 1)).toISOString(),
-                            });
-                        }
-                    }
-                }
-            }
-            else {
-                if (Array.isArray(value)) {
-                    if (value.length) {
-                        filters.push({
-                            field,
-                            operator: 'IN',
-                            data: value,
-                        });
-                    }
-                }
-                else {
-                    filters.push({
-                        field,
-                        operator: externalFilter.defaultOperator || 'EQUAL',
-                        data: value,
-                    });
-                }
-            }
-        }
-    }
-    // Xử lý column filter
-    for (const column of columns || []) {
-        const value = rawColumnFilter?.[column.field];
-        const field = fieldMapping?.[column.field] || column.field;
-        const operator = columnOperator?.[column.field] || column.filter?.operator?.default;
-        // Nếu có giá trị thì mới xử lý filter
-        if (value !== undefined && value !== null && value !== '') {
-            if (column.type === 'string') {
-                filters.push({
-                    field,
-                    operator: operator || 'CONTAIN',
-                    data: value,
-                });
-            }
-            else if (column.type === 'boolean') {
-                filters.push({
-                    field,
-                    operator: 'EQUAL',
-                    data: value === true || value === 1 || value === 'true' || value === '1',
-                });
-            }
-            else if (column.type === 'date' || column.type === 'datetime') {
-                if (typeof value === 'object' && 'from' in value && 'to' in value) {
-                    if (value?.from && value?.to) {
-                        filters.push({
-                            field,
-                            operator: 'BETWEEN',
-                            data: {
-                                from: DateUtilities$1.begin(value?.from).toISOString(),
-                                to: DateUtilities$1.end(value?.to).toISOString(),
-                            },
-                        });
-                    }
-                    else if (value?.from) {
-                        filters.push({
-                            field,
-                            operator: 'GREATER_OR_EQUAL',
-                            data: DateUtilities$1.begin(value?.from).toISOString(),
-                        });
-                    }
-                    else if (value?.to) {
-                        filters.push({
-                            field,
-                            operator: 'LESS_THAN',
-                            data: DateUtilities$1.begin(DateUtilities$1.addDays(value?.to, 1)).toISOString(),
-                        });
-                    }
-                }
-                else {
-                    if (DateUtilities$1.isDate(value)) {
-                        filters.push({
-                            field,
-                            operator: 'BETWEEN',
-                            data: {
-                                from: DateUtilities$1.begin(value).toISOString(),
-                                to: DateUtilities$1.end(value).toISOString(),
-                            },
-                        });
-                    }
-                }
-            }
-            else {
-                if (Array.isArray(value)) {
-                    if (value.length) {
-                        filters.push({
-                            field,
-                            operator: 'IN',
-                            data: value,
-                        });
-                    }
-                }
-                else {
-                    filters.push({
-                        field,
-                        operator: operator || 'EQUAL',
-                        data: value,
-                    });
-                }
-            }
-        }
-    }
-    // Xử lý orders
-    if (orderBy && orderDirection) {
-        req.orders.push({
-            field: orderBy,
-            direction: orderDirection,
-        });
-    }
-    return req;
-};
-
 /**
  * Generated bundle index. Do not edit.
  */