npm - @sd-angular/core - Versions diffs - 19.0.11 → 19.0.13 - Mend

@sd-angular/core 19.0.11 → 19.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

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

@@ -914,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();\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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
@@ -933,7 +933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         FilterValuesPipe,
                         SdCheckbox,
                         TranslatePipe,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1010,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();\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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, decorators: [{
             type: Component,
@@ -1027,7 +1027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdDateRange$1,
                         FilterValuesPipe,
                         TranslatePipe,
-                    ], 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"] }]
+                    ], 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"] }]
         }] });
 class ActionFilterPipe {
@@ -1138,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;\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 });
+    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 });
 }
 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;\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"] }]
+            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"] }]
         }] });
 const DEFAULT_TABLE_CONFIG = {
@@ -1732,13 +1732,13 @@ class DesktopCommand {
     });
     _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();\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DesktopCommand, isStandalone: true, selector: "desktop-command", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemIndex: { classPropertyName: "itemIndex", publicName: "itemIndex", isSignal: true, isRequired: true, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, ngImport: i0, template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <span class=\"sd-command-menu-item__content\">\n                  <mat-icon class=\"sd-command-menu-item__icon\" [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span class=\"sd-command-menu-item__title\">{{ _childMeta.title }}</span>\n                </span>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}.sd-command-menu-item__content{display:inline-flex;align-items:center;gap:8px;min-width:0;width:100%}.sd-command-menu-item__icon{color:var(--sd-black400)!important;width:24px;height:24px;font-size:18px;line-height:24px!important;margin-right:0!important;flex:0 0 24px}.sd-command-menu-item__title{min-width:0;line-height:20px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: CommandPipe, name: "command" }, { kind: "pipe", type: CommandFilterPipe, name: "filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DesktopCommand, decorators: [{
             type: Component,
             args: [{ selector: 'desktop-command', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[attr.data-autoid]': 'autoId()',
-                    }, imports: [CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, MatIconModule, CommandPipe, CommandFilterPipe], template: "@let _autoId = autoId();\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"] }]
+                    }, imports: [CommonModule, MatTooltipModule, MatMenuModule, MatButtonModule, MatIconModule, CommandPipe, CommandFilterPipe], template: "@let _autoId = autoId();\n@let _item = item();\n@let filteredCommands = _item | filter: _commands() | async;\n\n@if (filteredCommands?.length) {\n  @for (command of filteredCommands; track command.key) {\n    @let _meta = _item | command: command;\n    @if (command.type === 'normal') {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        (click)=\"command.click(_item.data)\"\n        [matTooltip]=\"_meta.title\"\n        aria-hidden=\"true\"\n        [disabled]=\"_meta.disabled\"\n        mat-icon-button>\n        <mat-icon class=\"c-icon\" [color]=\"command.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n          {{ _meta.icon }}\n        </mat-icon>\n      </button>\n    } @else {\n      <button\n        [attr.data-autoid]=\"_autoId + '-' + command.key\"\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"true\"\n        mat-icon-button>\n        @if (_meta.icon) {\n          <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet!\">{{ _meta.icon }}</mat-icon>\n        } @else {\n          <mat-icon class=\"c-icon\">more_vert</mat-icon>\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\" [attr.data-autoid]=\"_autoId + '-' + command.key + '-menu'\">\n        <span>\n          @for (childCommand of command.children; track childCommand.key) {\n            @let _childMeta = _item | command: childCommand;\n            <button\n              [attr.data-autoid]=\"_autoId + '-' + command.key + '-' + childCommand.key\"\n              mat-menu-item\n              (click)=\"childCommand.click(_item.data)\"\n              [disabled]=\"_childMeta.disabled\">\n              @if (_childMeta.htmlTemplate) {\n                <div [innerHTML]=\"_childMeta.htmlTemplate\"></div>\n              } @else {\n                <span class=\"sd-command-menu-item__content\">\n                  <mat-icon class=\"sd-command-menu-item__icon\" [color]=\"childCommand.color || 'secondary'\" [fontSet]=\"command.fontSet!\">\n                    {{ _childMeta.icon }}\n                  </mat-icon>\n                  <span class=\"sd-command-menu-item__title\">{{ _childMeta.title }}</span>\n                </span>\n              }\n            </button>\n          }\n        </span>\n      </mat-menu>\n    }\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:flex;align-items:center}button[mat-icon-button]{width:24px;height:24px;line-height:24px;padding:0}mat-icon.c-icon{color:var(--sd-black400)!important;width:16px;height:16px;font-size:16px;line-height:16px}.sd-command-menu-item__content{display:inline-flex;align-items:center;gap:8px;min-width:0;width:100%}.sd-command-menu-item__icon{color:var(--sd-black400)!important;width:24px;height:24px;font-size:18px;line-height:24px!important;margin-right:0!important;flex:0 0 24px}.sd-command-menu-item__title{min-width:0;line-height:20px;white-space:nowrap}\n"] }]
         }] });
 /* eslint-disable @angular-eslint/no-input-rename */
@@ -2379,25 +2379,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class SdSelectionDisabledPipe {
     transform = (selectedItems, rowData, selection) => {
         const { disabled, actions } = selection;
+        const selectedData = selectedItems.map(e => e.data);
+        const setDisabled = (isDisabled) => {
+            rowData.meta.selector.selectable = !isDisabled;
+            return isDisabled;
+        };
         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.data, selectedItems.map(e => e.data));
-            return !rowData.meta.selector.selectable;
+            return setDisabled(false);
         }
         // 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) {
-            // Nếu disabled và dữ liệu chưa được check
-            if (disabled(rowData.data, selectedItems.map(e => e.data))) {
-                return true;
-            }
+        if (disabled?.(rowData.data, selectedData)) {
+            return setDisabled(true);
+        }
+        if (!actions?.length) {
+            return setDisabled(false);
         }
         // Lọc các action theo selectedItems hiện tại
         const availableActions = actions.filter(action => {
@@ -2420,17 +2416,17 @@ class SdSelectionDisabledPipe {
             if ('children' in action) {
                 for (const childAction of action.children) {
                     if (rowData.meta.selector?.actions?.includes(Utilities.hash(childAction))) {
-                        return false;
+                        return setDisabled(false);
                     }
                 }
             }
             else {
                 if (rowData.meta.selector?.actions?.includes(Utilities.hash(action))) {
-                    return false;
+                    return setDisabled(false);
                 }
             }
         }
-        return true;
+        return setDisabled(true);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdSelectionDisabledPipe, isStandalone: true, name: "selectionDisabled" });
@@ -3268,7 +3264,10 @@ const applyDefaultSelected = (roots, treeOpt, defaultSelected) => {
         item.meta.selector.isSelected = defaultSelected(item.data);
     });
 };
-const resolveSelectAllState = (visibleRows) => visibleRows.length > 0 && visibleRows.every(row => row.meta.selector?.isSelected);
+const resolveSelectAllState = (visibleRows) => {
+    const selectableRows = visibleRows.filter(row => row.meta.selector?.selectable);
+    return selectableRows.length > 0 && selectableRows.every(row => row.meta.selector?.isSelected);
+};
 const restorePreservedSelection = (visibleRows, preservedSelectedMap) => {
     visibleRows.forEach(item => {
         if (preservedSelectedMap.has(item.meta.id)) {
@@ -4057,8 +4056,8 @@ class SdTable {
         // Áp dụng defaultSelected: pre-select các item thỏa predicate
         this.#applyDefaultSelected();
         await this.tableOption()?.reload?.onReload?.(this.items(), additionArgs);
-        this.#syncSelectAllState();
         this.#updateSelectedItems();
+        this.#syncSelectAllState();
         setTimeout(() => {
             this.table()?.updateStickyColumnStyles();
         }, 0);
@@ -4275,8 +4274,8 @@ class SdTable {
         if (rowData.meta.group?.items?.length) {
             rowData.meta.group.items.forEach(e => (e.meta.selector.isSelected = rowData.meta.selector.isSelected));
             opt.selector?.onSelect?.(rowData.data, selectedData());
-            this.#syncSelectAllState();
             this.#updateSelectedItems();
+            this.#syncSelectAllState();
         }
         else {
             if (opt.selector?.single) {
@@ -4295,8 +4294,8 @@ class SdTable {
                 return;
             }
             opt.selector?.onSelect?.(rowData.data, selectedData());
-            this.#syncSelectAllState();
             this.#updateSelectedItems();
+            this.#syncSelectAllState();
         }
     };
     onSelectAll = () => {
@@ -4309,6 +4308,7 @@ class SdTable {
         });
         opt?.selector?.onSelectAll?.(this.#getSelectedRowData());
         this.#updateSelectedItems();
+        this.#syncSelectAllState();
     };
     onClearSelection = (items) => {
         items = items || this.items();
@@ -4358,8 +4358,8 @@ class SdTable {
         sel.forEach(c => (c.meta.selector.isSelected = checked));
         const opt = this.tableOption();
         opt?.selector?.onSelectAll?.(this.#getSelectedRowData());
-        this.#syncSelectAllState();
         this.#updateSelectedItems();
+        this.#syncSelectAllState();
     };
     // Map<groupKey, isExpanded> — table own state, pass vào SdGroupPipe arg 3.
     // why: pipe stateless, persist toggle qua các lần re-eval bằng Map external. Mutate Map