@sd-angular/core 19.0.9 → 19.0.11

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,7 +8,7 @@ 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';
@@ -33,7 +33,7 @@ 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 { 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';
@@ -419,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
     // ==========================================
@@ -503,14 +504,34 @@ 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-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 });
 }
@@ -893,7 +914,7 @@ class ExternalFilterComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _filterItems = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _filterItems.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      [collapsible]=\"_filter?.collapsible ?? _filter?.collapsable ?? true\">\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _filterItems; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _filterItems; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsible", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "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: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "inlineError", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _filter = filter();\r\n@let _autoId = autoId();\r\n@let _filterItems = filterItems();\r\n@let _externalFilter = externalFilter();\r\n@let _inlineExternal = inlineExternal();\r\n@let _filtered = filtered();\r\n@let _col = col();\r\n\r\n@if (!_filter?.disabled) {\r\n  @if (!isMobileOrTablet && _filterItems.length) {\r\n    <sd-section\r\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\r\n      icon=\"filter_alt\"\r\n      iconColor=\"secondary\"\r\n      [title]=\"'core.component.table.filter' | translate\"\r\n      [collapsible]=\"_filter?.collapsible ?? _filter?.collapsable ?? true\">\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"_autoId + 'clear'\"\r\n          [disabled]=\"!_filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"_autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          [tooltip]=\"'core.component.table.customize' | translate\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\r\n          @for (externalFilter of _filterItems; track externalFilter.field) {\r\n            <button\r\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\r\n              mat-menu-item\r\n              (click)=\"onCheckboxChange($event, externalFilter)\"\r\n              [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"_inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of _filterItems; track item.field) {\r\n          @if (_inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\r\n                  \">\r\n                </ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (_filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"_autoId + 'submit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            [title]=\"'core.component.table.search' | translate\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsible", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "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: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "inlineError", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
@@ -912,7 +933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         FilterValuesPipe,
                         SdCheckbox,
                         TranslatePipe,
-                    ], template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _filterItems = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _filterItems.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      [collapsible]=\"_filter?.collapsible ?? _filter?.collapsable ?? true\">\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _filterItems; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _filterItems; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"] }]
+                    ], template: "@let _filter = filter();\r\n@let _autoId = autoId();\r\n@let _filterItems = filterItems();\r\n@let _externalFilter = externalFilter();\r\n@let _inlineExternal = inlineExternal();\r\n@let _filtered = filtered();\r\n@let _col = col();\r\n\r\n@if (!_filter?.disabled) {\r\n  @if (!isMobileOrTablet && _filterItems.length) {\r\n    <sd-section\r\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\r\n      icon=\"filter_alt\"\r\n      iconColor=\"secondary\"\r\n      [title]=\"'core.component.table.filter' | translate\"\r\n      [collapsible]=\"_filter?.collapsible ?? _filter?.collapsable ?? true\">\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"_autoId + 'clear'\"\r\n          [disabled]=\"!_filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"_autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          [tooltip]=\"'core.component.table.customize' | translate\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\r\n          @for (externalFilter of _filterItems; track externalFilter.field) {\r\n            <button\r\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\r\n              mat-menu-item\r\n              (click)=\"onCheckboxChange($event, externalFilter)\"\r\n              [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"_inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of _filterItems; track item.field) {\r\n          @if (_inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"_autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"_externalFilter[item.field]\"\r\n                  (sdChange)=\"onFilter(item)\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"_autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"_externalFilter[item.field]\"\r\n                    (sdChange)=\"onFilter(item)\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\r\n                  \">\r\n                </ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (_filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"_autoId + 'submit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            [title]=\"'core.component.table.search' | translate\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -989,7 +1010,7 @@ class MobileFilterComponent {
         this.drawer().close();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MobileFilterComponent, isStandalone: true, selector: "mobile-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filterDefs: { classPropertyName: "filterDefs", publicName: "filterDefs", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: SdSideDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\n@let _externalFilterItems = externalFilterItems();\n@let _columnItems = columnItems();\n@let _filterDefItems = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilterItems.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilterItems; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefItems.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefItems; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columnItems.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columnItems; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass", "autoId"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "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: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MobileFilterComponent, isStandalone: true, selector: "mobile-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filterDefs: { classPropertyName: "filterDefs", publicName: "filterDefs", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: SdSideDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\r\n@let _externalFilterItems = externalFilterItems();\r\n@let _columnItems = columnItems();\r\n@let _filterDefItems = filterDefItems();\r\n@let _workingColumnFilter = workingColumnFilter();\r\n@let _workingColumnOperator = workingColumnOperator();\r\n@let _workingExternalFilter = workingExternalFilter();\r\n@let _cacheValues = cacheValues();\r\n\r\n<sd-side-drawer\r\n  #drawer\r\n  [title]=\"'core.component.table.filter' | translate\"\r\n  width=\"90vw\">\r\n  <div class=\"mobile-filter-body\">\r\n    <!-- ============================ -->\r\n    <!-- 1. External filters (inline) -->\r\n    <!-- ============================ -->\r\n    @if (_externalFilterItems.length) {\r\n      <section class=\"mobile-filter-section\">\r\n        @for (item of _externalFilterItems; track item.field) {\r\n          <div class=\"mobile-filter-row\">\r\n            @if (item.type === 'string') {\r\n              <sd-input\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                type=\"text\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-input>\r\n            } @else if (item.type === 'number') {\r\n              <sd-input-number\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-input-number>\r\n            } @else if (item.type === 'boolean') {\r\n              <sd-select\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [items]=\"[\r\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-select>\r\n            } @else if (item.type === 'date') {\r\n              <sd-date\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                [min]=\"item.minDate\"\r\n                [max]=\"item.maxDate\"\r\n                hideInlineError>\r\n              </sd-date>\r\n            } @else if (item.type === 'datetime') {\r\n              <sd-datetime\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                [min]=\"item.minDate\"\r\n                [max]=\"item.maxDate\"\r\n                hideInlineError>\r\n              </sd-datetime>\r\n            } @else if (item.type === 'daterange') {\r\n              <sd-date-range\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                [required]=\"item.required\"\r\n                [min]=\"item.minDate\"\r\n                [max]=\"item.maxDate\"\r\n                appearance=\"outline\"\r\n                hideInlineError>\r\n              </sd-date-range>\r\n            } @else if (item.type === 'values') {\r\n              <sd-select\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [items]=\"item.option.items | filterValues | async\"\r\n                [valueField]=\"item.option.valueField\"\r\n                [displayField]=\"item.option.displayField\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-select>\r\n            } @else if (item.type === 'lazy-values') {\r\n              <sd-select\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [items]=\"item.option.items\"\r\n                [valueField]=\"item.option.valueField\"\r\n                [displayField]=\"item.option.displayField\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-select>\r\n            } @else if (item.type === 'custom' && item.filterDef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  item.filterDef;\r\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\r\n                \">\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    <!-- ============================ -->\r\n    <!-- 2. Custom filterDef templates -->\r\n    <!-- ============================ -->\r\n    @if (_filterDefItems.length) {\r\n      <section class=\"mobile-filter-section\">\r\n        @for (def of _filterDefItems; track def.sdTableFilterDef()) {\r\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    <!-- ============================ -->\r\n    <!-- 3. Column filters             -->\r\n    <!-- ============================ -->\r\n    @if (_columnItems.length) {\r\n      <section class=\"mobile-filter-section\">\r\n        @for (column of _columnItems; track column.field) {\r\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\r\n            <column-filter\r\n              [autoId]=\"_autoId + 'col'\"\r\n              [column]=\"column\"\r\n              [columnFilter]=\"_workingColumnFilter\"\r\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\r\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\r\n              [cacheValues]=\"_cacheValues\"\r\n              isMobile>\r\n            </column-filter>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n\r\n  <ng-container sdFooter>\r\n    <div class=\"mobile-filter-footer\">\r\n      <sd-button\r\n        [autoId]=\"_autoId + 'cancel'\"\r\n        class=\"mobile-filter-action\"\r\n        (click)=\"onCancel()\"\r\n        [title]=\"'core.confirm.no' | translate\"\r\n        type=\"link\"\r\n        color=\"secondary\">\r\n      </sd-button>\r\n      <sd-button\r\n        [autoId]=\"_autoId + 'apply'\"\r\n        class=\"mobile-filter-action\"\r\n        (click)=\"onApply()\"\r\n        [title]=\"'core.confirm.yes' | translate\"\r\n        type=\"fill\"\r\n        color=\"primary\">\r\n      </sd-button>\r\n    </div>\r\n  </ng-container>\r\n</sd-side-drawer>\r\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass", "autoId"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "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: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, decorators: [{
             type: Component,
@@ -1006,7 +1027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdDateRange$1,
                         FilterValuesPipe,
                         TranslatePipe,
-                    ], template: "@let _autoId = autoId();\n@let _externalFilterItems = externalFilterItems();\n@let _columnItems = columnItems();\n@let _filterDefItems = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilterItems.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilterItems; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefItems.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefItems; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columnItems.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columnItems; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\n"] }]
+                    ], template: "@let _autoId = autoId();\r\n@let _externalFilterItems = externalFilterItems();\r\n@let _columnItems = columnItems();\r\n@let _filterDefItems = filterDefItems();\r\n@let _workingColumnFilter = workingColumnFilter();\r\n@let _workingColumnOperator = workingColumnOperator();\r\n@let _workingExternalFilter = workingExternalFilter();\r\n@let _cacheValues = cacheValues();\r\n\r\n<sd-side-drawer\r\n  #drawer\r\n  [title]=\"'core.component.table.filter' | translate\"\r\n  width=\"90vw\">\r\n  <div class=\"mobile-filter-body\">\r\n    <!-- ============================ -->\r\n    <!-- 1. External filters (inline) -->\r\n    <!-- ============================ -->\r\n    @if (_externalFilterItems.length) {\r\n      <section class=\"mobile-filter-section\">\r\n        @for (item of _externalFilterItems; track item.field) {\r\n          <div class=\"mobile-filter-row\">\r\n            @if (item.type === 'string') {\r\n              <sd-input\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                type=\"text\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-input>\r\n            } @else if (item.type === 'number') {\r\n              <sd-input-number\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-input-number>\r\n            } @else if (item.type === 'boolean') {\r\n              <sd-select\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [items]=\"[\r\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\r\n                ]\"\r\n                valueField=\"value\"\r\n                displayField=\"display\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-select>\r\n            } @else if (item.type === 'date') {\r\n              <sd-date\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                [min]=\"item.minDate\"\r\n                [max]=\"item.maxDate\"\r\n                hideInlineError>\r\n              </sd-date>\r\n            } @else if (item.type === 'datetime') {\r\n              <sd-datetime\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [required]=\"item.required\"\r\n                [min]=\"item.minDate\"\r\n                [max]=\"item.maxDate\"\r\n                hideInlineError>\r\n              </sd-datetime>\r\n            } @else if (item.type === 'daterange') {\r\n              <sd-date-range\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                [required]=\"item.required\"\r\n                [min]=\"item.minDate\"\r\n                [max]=\"item.maxDate\"\r\n                appearance=\"outline\"\r\n                hideInlineError>\r\n              </sd-date-range>\r\n            } @else if (item.type === 'values') {\r\n              <sd-select\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [items]=\"item.option.items | filterValues | async\"\r\n                [valueField]=\"item.option.valueField\"\r\n                [displayField]=\"item.option.displayField\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-select>\r\n            } @else if (item.type === 'lazy-values') {\r\n              <sd-select\r\n                [autoId]=\"_autoId + 'ext-' + item.field\"\r\n                size=\"sm\"\r\n                [label]=\"item.title\"\r\n                [items]=\"item.option.items\"\r\n                [valueField]=\"item.option.valueField\"\r\n                [displayField]=\"item.option.displayField\"\r\n                [(model)]=\"_workingExternalFilter[item.field]\"\r\n                appearance=\"outline\"\r\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\r\n                [required]=\"item.required\"\r\n                hideInlineError>\r\n              </sd-select>\r\n            } @else if (item.type === 'custom' && item.filterDef) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  item.filterDef;\r\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\r\n                \">\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    <!-- ============================ -->\r\n    <!-- 2. Custom filterDef templates -->\r\n    <!-- ============================ -->\r\n    @if (_filterDefItems.length) {\r\n      <section class=\"mobile-filter-section\">\r\n        @for (def of _filterDefItems; track def.sdTableFilterDef()) {\r\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    <!-- ============================ -->\r\n    <!-- 3. Column filters             -->\r\n    <!-- ============================ -->\r\n    @if (_columnItems.length) {\r\n      <section class=\"mobile-filter-section\">\r\n        @for (column of _columnItems; track column.field) {\r\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\r\n            <column-filter\r\n              [autoId]=\"_autoId + 'col'\"\r\n              [column]=\"column\"\r\n              [columnFilter]=\"_workingColumnFilter\"\r\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\r\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\r\n              [cacheValues]=\"_cacheValues\"\r\n              isMobile>\r\n            </column-filter>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n\r\n  <ng-container sdFooter>\r\n    <div class=\"mobile-filter-footer\">\r\n      <sd-button\r\n        [autoId]=\"_autoId + 'cancel'\"\r\n        class=\"mobile-filter-action\"\r\n        (click)=\"onCancel()\"\r\n        [title]=\"'core.confirm.no' | translate\"\r\n        type=\"link\"\r\n        color=\"secondary\">\r\n      </sd-button>\r\n      <sd-button\r\n        [autoId]=\"_autoId + 'apply'\"\r\n        class=\"mobile-filter-action\"\r\n        (click)=\"onApply()\"\r\n        [title]=\"'core.confirm.yes' | translate\"\r\n        type=\"fill\"\r\n        color=\"primary\">\r\n      </sd-button>\r\n    </div>\r\n  </ng-container>\r\n</sd-side-drawer>\r\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\n"] }]
         }] });
 
 class ActionFilterPipe {
@@ -1117,11 +1138,11 @@ class SelectorActionComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectorActionComponent, isStandalone: true, selector: "selector-action", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null }, selectedTableItems: { classPropertyName: "selectedTableItems", publicName: "selectedTableItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: "@let _actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\n@let _selectedTableItems = selectedTableItems();\n@let _autoId = autoId();\n\n<sd-quick-action [opened]=\"opened()\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ message() }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\n    @for (action of _actions; track $index) {\n      @if (action.variant === 'normal') {\n        <sd-button\n          [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon\"\n          [color]=\"action.color\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet\"\n          [title]=\"action.title\"\n          (click)=\"onClickAction(action)\"></sd-button>\n      } @else if (action.variant === 'children') {\n        @let _actionIndex = $index;\n        <sd-button\n          [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon || 'more_vert'\"\n          [color]=\"action.color || 'secondary'\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n          [title]=\"action.title\"\n          [matMenuTriggerFor]=\"menu\">\n        </sd-button>\n        <mat-menu #menu=\"matMenu\">\n          <span>\n            @for (child of action.children; track $index) {\n              <button\n                mat-menu-item\n                [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\n                (click)=\"onClickAction(child)\">\n                @if (child.icon) {\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                }\n                <span> {{ child.title }}</span>\n              </button>\n            }\n          </span>\n        </mat-menu>\n      }\n    }\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n    <sd-button [autoId]=\"_autoId ? _autoId + '-clear-selection' : null\" class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\n  </div>\n</sd-quick-action>\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["opened"] }, { kind: "pipe", type: ActionFilterPipe, name: "actionFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectorActionComponent, isStandalone: true, selector: "selector-action", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null }, selectedTableItems: { classPropertyName: "selectedTableItems", publicName: "selectedTableItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: "@let _actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\r\n@let _selectedTableItems = selectedTableItems();\r\n@let _autoId = autoId();\r\n\r\n<sd-quick-action [opened]=\"opened()\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">\r\n      {{ message() }}\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n    @for (action of _actions; track $index) {\r\n      @if (action.variant === 'normal') {\r\n        <sd-button\r\n          [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\r\n          class=\"ml-4\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [prefixIcon]=\"action.icon\"\r\n          [color]=\"action.color\"\r\n          [type]=\"action.type || 'light'\"\r\n          [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\"\r\n          (click)=\"onClickAction(action)\"></sd-button>\r\n      } @else if (action.variant === 'children') {\r\n        @let _actionIndex = $index;\r\n        <sd-button\r\n          [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\r\n          class=\"ml-4\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [prefixIcon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\"\r\n          [type]=\"action.type || 'light'\"\r\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\r\n          [title]=\"action.title\"\r\n          [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            @for (child of action.children; track $index) {\r\n              <button\r\n                mat-menu-item\r\n                [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\r\n                (click)=\"onClickAction(child)\">\r\n                @if (child.icon) {\r\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\r\n                }\r\n                <span> {{ child.title }}</span>\r\n              </button>\r\n            }\r\n          </span>\r\n        </mat-menu>\r\n      }\r\n    }\r\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\r\n    <sd-button [autoId]=\"_autoId ? _autoId + '-clear-selection' : null\" class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\r\n  </div>\r\n</sd-quick-action>\r\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["opened"] }, { kind: "pipe", type: ActionFilterPipe, name: "actionFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'selector-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatMenuModule, SdButton, SdQuickAction, ActionFilterPipe], template: "@let _actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\n@let _selectedTableItems = selectedTableItems();\n@let _autoId = autoId();\n\n<sd-quick-action [opened]=\"opened()\">\n  <div class=\"d-flex align-items-center\" sdMessage>\n    <div class=\"c-bg-length\">\n      <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\n    </div>\n    <div class=\"c-message\">\n      {{ message() }}\n    </div>\n  </div>\n\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\n    @for (action of _actions; track $index) {\n      @if (action.variant === 'normal') {\n        <sd-button\n          [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon\"\n          [color]=\"action.color\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet\"\n          [title]=\"action.title\"\n          (click)=\"onClickAction(action)\"></sd-button>\n      } @else if (action.variant === 'children') {\n        @let _actionIndex = $index;\n        <sd-button\n          [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\n          class=\"ml-4\"\n          [tooltip]=\"action.tooltip\"\n          [prefixIcon]=\"action.icon || 'more_vert'\"\n          [color]=\"action.color || 'secondary'\"\n          [type]=\"action.type || 'light'\"\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n          [title]=\"action.title\"\n          [matMenuTriggerFor]=\"menu\">\n        </sd-button>\n        <mat-menu #menu=\"matMenu\">\n          <span>\n            @for (child of action.children; track $index) {\n              <button\n                mat-menu-item\n                [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\n                (click)=\"onClickAction(child)\">\n                @if (child.icon) {\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                }\n                <span> {{ child.title }}</span>\n              </button>\n            }\n          </span>\n        </mat-menu>\n      }\n    }\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n    <sd-button [autoId]=\"_autoId ? _autoId + '-clear-selection' : null\" class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\n  </div>\n</sd-quick-action>\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"] }]
+            args: [{ selector: 'selector-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatMenuModule, SdButton, SdQuickAction, ActionFilterPipe], template: "@let _actions = selectedTableItems() | actionFilter: tableOption()?.selector?.actions;\r\n@let _selectedTableItems = selectedTableItems();\r\n@let _autoId = autoId();\r\n\r\n<sd-quick-action [opened]=\"opened()\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">\r\n      {{ message() }}\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n    @for (action of _actions; track $index) {\r\n      @if (action.variant === 'normal') {\r\n        <sd-button\r\n          [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\r\n          class=\"ml-4\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [prefixIcon]=\"action.icon\"\r\n          [color]=\"action.color\"\r\n          [type]=\"action.type || 'light'\"\r\n          [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\"\r\n          (click)=\"onClickAction(action)\"></sd-button>\r\n      } @else if (action.variant === 'children') {\r\n        @let _actionIndex = $index;\r\n        <sd-button\r\n          [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\r\n          class=\"ml-4\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [prefixIcon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\"\r\n          [type]=\"action.type || 'light'\"\r\n          [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\r\n          [title]=\"action.title\"\r\n          [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            @for (child of action.children; track $index) {\r\n              <button\r\n                mat-menu-item\r\n                [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\r\n                (click)=\"onClickAction(child)\">\r\n                @if (child.icon) {\r\n                  <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\r\n                }\r\n                <span> {{ child.title }}</span>\r\n              </button>\r\n            }\r\n          </span>\r\n        </mat-menu>\r\n      }\r\n    }\r\n    <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\r\n    <sd-button [autoId]=\"_autoId ? _autoId + '-clear-selection' : null\" class=\"ml-4\" prefixIcon=\"close\" color=\"secondary\" type=\"outline\" (click)=\"onClear()\" width=\"35px\"></sd-button>\r\n  </div>\r\n</sd-quick-action>\r\n", styles: [".c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:20px;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px}\n"] }]
         }] });
 
 const DEFAULT_TABLE_CONFIG = {
@@ -1133,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',
@@ -1148,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) {
@@ -1340,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
@@ -1580,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) {
@@ -1618,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;
@@ -1629,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) {
@@ -1707,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);
@@ -1718,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();\r\n@let _item = item();\r\n@let filteredCommands = _item | filter: _commands() | async;\r\n\r\n@if (filteredCommands?.length) {\r\n  @for (command of filteredCommands; track command.key) {\r\n    @let _meta = _item | command: command;\r\n    @if (command.type === 'normal') {\r\n      <button\r\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\r\n        (click)=\"command.click(_item.data)\"\r\n        [matTooltip]=\"_meta.title\"\r\n        aria-hidden=\"true\"\r\n        [disabled]=\"_meta.disabled\"\r\n        mat-icon-button>\r\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\r\n          {{ _meta.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-hidden=\"true\"\r\n        mat-icon-button>\r\n        @if (_meta.icon) {\r\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\r\n        } @else {\r\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\r\n        }\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\r\n        <span>\r\n          @for (childCommand of command.children; track childCommand.key) {\r\n            @let _childMeta = _item | command: childCommand;\r\n            <button\r\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\r\n              mat-menu-item\r\n              (click)=\"childCommand.click(_item.data)\"\r\n              [disabled]=\"_childMeta.disabled\">\r\n              @if (_childMeta.htmlTemplate) {\r\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\r\n              } @else {\r\n                <span class=\"sd-command-menu-item__content\">\r\n                  <mat-icon class=\"sd-command-menu-item__icon\" [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\r\n                    {{ _childMeta.icon }}\r\n                  </mat-icon>\r\n                  <span class=\"sd-command-menu-item__title\">{{ _childMeta.title }}</span>\r\n                </span>\r\n              }\r\n            </button>\r\n          }\r\n        </span>\r\n      </mat-menu>\r\n    }\r\n  }\r\n}\r\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();\r\n@let _item = item();\r\n@let filteredCommands = _item | filter: _commands() | async;\r\n\r\n@if (filteredCommands?.length) {\r\n  @for (command of filteredCommands; track command.key) {\r\n    @let _meta = _item | command: command;\r\n    @if (command.type === 'normal') {\r\n      <button\r\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\r\n        (click)=\"command.click(_item.data)\"\r\n        [matTooltip]=\"_meta.title\"\r\n        aria-hidden=\"true\"\r\n        [disabled]=\"_meta.disabled\"\r\n        mat-icon-button>\r\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\r\n          {{ _meta.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-hidden=\"true\"\r\n        mat-icon-button>\r\n        @if (_meta.icon) {\r\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\r\n        } @else {\r\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\r\n        }\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\r\n        <span>\r\n          @for (childCommand of command.children; track childCommand.key) {\r\n            @let _childMeta = _item | command: childCommand;\r\n            <button\r\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\r\n              mat-menu-item\r\n              (click)=\"childCommand.click(_item.data)\"\r\n              [disabled]=\"_childMeta.disabled\">\r\n              @if (_childMeta.htmlTemplate) {\r\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\r\n              } @else {\r\n                <span class=\"sd-command-menu-item__content\">\r\n                  <mat-icon class=\"sd-command-menu-item__icon\" [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\r\n                    {{ _childMeta.icon }}\r\n                  </mat-icon>\r\n                  <span class=\"sd-command-menu-item__title\">{{ _childMeta.title }}</span>\r\n                </span>\r\n              }\r\n            </button>\r\n          }\r\n        </span>\r\n      </mat-menu>\r\n    }\r\n  }\r\n}\r\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 */
@@ -2394,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;
             }
         }