@mediusinc/mng-commons 7.4.0 → 8.0.0-rc.2

package/fesm2022/{mediusinc-mng-commons-table-mediusinc-mng-commons-table-BfEYZG7s.mjs → mediusinc-mng-commons-table-mediusinc-mng-commons-table-BPgwJRZk.mjs}

@@ -1,45 +1,43 @@
-import { trigger, transition, style, animate } from '@angular/animations';
 import { NgTemplateOutlet, NgClass, getCurrencySymbol, DecimalPipe, CurrencyPipe, DatePipe, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, input, booleanAttribute, model, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, inject, untracked, ElementRef, Renderer2, ChangeDetectorRef, viewChild, LOCALE_ID, Injector, Pipe, output, InjectionToken, Directive, contentChildren, afterNextRender, HostListener, DestroyRef, viewChildren } from '@angular/core';
+import { forwardRef, input, booleanAttribute, model, signal, computed, ViewEncapsulation, Component, Injectable, inject, untracked, viewChild, ElementRef, LOCALE_ID, Injector, Pipe, output, InjectionToken, Directive, contentChildren, afterNextRender, HostListener, DestroyRef, viewChildren } from '@angular/core';
 import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { PrimeTemplate, OverlayService, MessageService } from 'primeng/api';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { InputGroup } from 'primeng/inputgroup';
-import { InputGroupAddon } from 'primeng/inputgroupaddon';
-import { InputNumber } from 'primeng/inputnumber';
-import { InputText } from 'primeng/inputtext';
-import * as i1$1 from 'primeng/table';
-import { TableModule, Table, TableCheckbox, TableRadioButton } from 'primeng/table';
-import { ToggleSwitch } from 'primeng/toggleswitch';
-import { ZIndexUtils } from 'primeng/utils';
+import { DomHandler } from '@openng/optimus-ui/dom';
+import { InputGroup } from '@openng/optimus-ui/inputgroup';
+import { InputGroupAddon } from '@openng/optimus-ui/inputgroupaddon';
+import { InputNumber } from '@openng/optimus-ui/inputnumber';
+import { InputText } from '@openng/optimus-ui/inputtext';
+import { Popover } from '@openng/optimus-ui/popover';
+import * as i1$1 from '@openng/optimus-ui/table';
+import { TableModule, Table, TableCheckbox, TableRadioButton } from '@openng/optimus-ui/table';
+import { ToggleSwitch } from '@openng/optimus-ui/toggleswitch';
 import { Subject, debounceTime, distinctUntilChanged, ReplaySubject, take, switchMap, NEVER, BehaviorSubject, combineLatest, skip, of, filter } from 'rxjs';
-import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, effectWithDeps, getI18nTypePropertyKey, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, isMac, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsService, COMMONS_MODULE_CONFIG_IT, toObservable as toObservable$1, objectDeepEquals, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, dataListParamsToUrlQuery, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToOptimus, fromAngularNumberFormatToFractions, effectWithDeps, getI18nTypePropertyKey, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, isMac, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsService, COMMONS_MODULE_CONFIG_IT, toObservable as toObservable$1, objectDeepEquals, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, dataListParamsToUrlQuery, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
 import { FilterTypeEnum, FilterDescriptor, FilterLookupTypeEnum, FilterLookupDescriptor, FilterDisplayTypeEnum } from '@mediusinc/mng-commons/filter';
 import { InputTrimDirective, DateRangeComponent, AutocompleteComponent, DropdownComponent, NumberRangeComponent, AutocompleteTemplateDirective, DropdownTemplateDirective, DateRangeTemplateDirective, NumberRangeTemplateDirective, DatetimePickerComponent, LookupLabelResolutionService } from '@mediusinc/mng-commons/form';
-import { Chip } from 'primeng/chip';
-import { MultiSelect } from 'primeng/multiselect';
-import { ToggleButton } from 'primeng/togglebutton';
-import { ButtonDirective } from 'primeng/button';
-import { Tooltip } from 'primeng/tooltip';
+import { PrimeTemplate, MessageService } from '@openng/optimus-ui/api';
+import { Chip } from '@openng/optimus-ui/chip';
+import { MultiSelect } from '@openng/optimus-ui/multiselect';
+import { ToggleButton } from '@openng/optimus-ui/togglebutton';
+import { ButtonDirective } from '@openng/optimus-ui/button';
+import { Tooltip } from '@openng/optimus-ui/tooltip';
 import { ColumnDisplayTypeEnum, tableDescriptor, TableDynamicDescriptorInst, TablePaginationModeEnum, TableSizeEnum } from '@mediusinc/mng-commons/table/api';
-import { Divider } from 'primeng/divider';
-import { Menu } from 'primeng/menu';
-import { Tag, TagModule } from 'primeng/tag';
-import { Checkbox } from 'primeng/checkbox';
-import { Message } from 'primeng/message';
+import { Divider } from '@openng/optimus-ui/divider';
+import { Menu } from '@openng/optimus-ui/menu';
+import { Tag, TagModule } from '@openng/optimus-ui/tag';
+import { Checkbox } from '@openng/optimus-ui/checkbox';
+import { Message } from '@openng/optimus-ui/message';
 import { lookupDataProvider } from '@mediusinc/mng-commons/form/api';
-import { IconField } from 'primeng/iconfield';
-import { InputIcon } from 'primeng/inputicon';
-import { Popover } from 'primeng/popover';
-import { Skeleton } from 'primeng/skeleton';
-import { SplitButton } from 'primeng/splitbutton';
+import { IconField } from '@openng/optimus-ui/iconfield';
+import { InputIcon } from '@openng/optimus-ui/inputicon';
+import { Skeleton } from '@openng/optimus-ui/skeleton';
+import { SplitButton } from '@openng/optimus-ui/splitbutton';
 import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { getI18nForModel } from '@mediusinc/mng-commons/model';
-import { PrimeNG } from 'primeng/config';
+import { Optimus } from '@openng/optimus-ui/config';
 
 const VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -54,16 +52,24 @@ class TableFilterInputMultiValueComponent {
         this.onChangeFn = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouchedFn = () => { };
-        this.filterType = input(...(ngDevMode ? [undefined, { debugName: "filterType" }] : []));
-        this.enableCaseSensitive = input(false, { ...(ngDevMode ? { debugName: "enableCaseSensitive" } : {}), transform: booleanAttribute });
-        this.caseSensitiveModel = model(...(ngDevMode ? [undefined, { debugName: "caseSensitiveModel" }] : []));
-        this.inputTrim = input(...(ngDevMode ? [undefined, { debugName: "inputTrim" }] : []));
-        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
-        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-        this.disabled = computed(() => this.disabledInput() || this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.stringValues = computed(() => this.value().map(v => String(v)), ...(ngDevMode ? [{ debugName: "stringValues" }] : []));
+        this.filterType = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filterType" }] : /* istanbul ignore next */ []));
+        this.enableCaseSensitive = input(false, { ...(ngDevMode ? { debugName: "enableCaseSensitive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.caseSensitiveModel = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "caseSensitiveModel" }] : /* istanbul ignore next */ []));
+        this.inputTrim = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "inputTrim" }] : /* istanbul ignore next */ []));
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+        this.className = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.disabledInput() || this._disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.value = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.stringValues = computed(() => this.value().map(v => String(v)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stringValues" }] : /* istanbul ignore next */ []));
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -78,7 +84,7 @@ class TableFilterInputMultiValueComponent {
         this.onTouchedFn();
     }
     onPanelShow(event) {
-        // this is some event type mixup in primeng, we still try to use element within event which should be there
+        // This event type mixup is present in Optimus UI, so use the element when available.
         const motionEvent = event;
         motionEvent.element?.querySelector('input')?.focus();
     }
@@ -126,82 +132,82 @@ class TableFilterInputMultiValueComponent {
         this.value.set(values);
         this.onChangeFn(this.value());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterInputMultiValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableFilterInputMultiValueComponent, isStandalone: true, selector: "mng-table-filter-input-multi-value", inputs: { filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, caseSensitiveModel: { classPropertyName: "caseSensitiveModel", publicName: "caseSensitiveModel", isSignal: true, isRequired: false, transformFunction: null }, inputTrim: { classPropertyName: "inputTrim", publicName: "inputTrim", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { caseSensitiveModel: "caseSensitiveModelChange" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<p-inputgroup>\n    <p-multiSelect\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"value.set($event)\"\n        [options]=\"value()\"\n        [showToggleAll]=\"false\"\n        [filter]=\"false\"\n        [placeholder]=\"'mngFilter.value' | translate\"\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [selectAll]=\"false\"\n        [disabled]=\"disabled()\"\n        (onPanelShow)=\"onPanelShow($event)\"\n        [class]=\"className()\"\n        display=\"chip\"\n        appendTo=\"body\"\n        required=\"true\"\n        panelStyleClass=\"table-filter-input-multi-value-panel p-2 flex flex-col gap-2 w-full max-w-72\">\n        <ng-template pTemplate=\"header\">\n            @if (filterType() === FilterTypeEnum.String) {\n                <input\n                    type=\"text\"\n                    pInputText\n                    class=\"mng-filter-string w-full\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueChange($event)\"\n                    (blur)=\"onValueChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    [mngInputTrim]=\"inputTrim()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-filter-number\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueNumberChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueNumberChange($event)\"\n                    (onBlur)=\"onValueNumberChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    useGrouping=\"false\"\n                    required=\"true\" />\n            }\n        </ng-template>\n        <ng-template pTemplate=\"footer\">\n            <div class=\"flex flex-wrap gap-1 overflow-auto\">\n                @if (value().length) {\n                    @for (val of stringValues(); track val; let i = $index) {\n                        <p-chip [label]=\"val\" removable (onRemove)=\"removeValue(i)\" />\n                    }\n                } @else {\n                    <span class=\"p-1\">{{ 'mngFilter.noValues' | translate }}</span>\n                }\n            </div>\n        </ng-template>\n    </p-multiSelect>\n    @if (filterType() === FilterTypeEnum.String && enableCaseSensitive()) {\n        <p-toggle-button\n            [ngModel]=\"caseSensitiveModel()\"\n            (ngModelChange)=\"caseSensitiveModel.set($event)\"\n            [disabled]=\"disabled()\"\n            name=\"caseSensitive\"\n            class=\"mng-button-xs mng-toggle-button-addon-right\"\n            onLabel=\"Aa\"\n            offLabel=\"Aa\" />\n    }\n</p-inputgroup>\n", styles: [".table-filter-input-multi-value-panel .p-multiselect-list-container,.table-filter-input-multi-value-panel .p-multiselect-header{display:none!important}.p-datatable-header mng-table-filter-input-multi-value{font-size:1rem!important}\n"], dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterInputMultiValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableFilterInputMultiValueComponent, isStandalone: true, selector: "mng-table-filter-input-multi-value", inputs: { filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, caseSensitiveModel: { classPropertyName: "caseSensitiveModel", publicName: "caseSensitiveModel", isSignal: true, isRequired: false, transformFunction: null }, inputTrim: { classPropertyName: "inputTrim", publicName: "inputTrim", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { caseSensitiveModel: "caseSensitiveModelChange" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<p-inputgroup>\n    <p-multiSelect\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"value.set($event)\"\n        [options]=\"value()\"\n        [showToggleAll]=\"false\"\n        [filter]=\"false\"\n        [placeholder]=\"'mngFilter.value' | translate\"\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [selectAll]=\"false\"\n        [disabled]=\"disabled()\"\n        (onPanelShow)=\"onPanelShow($event)\"\n        [class]=\"className()\"\n        display=\"chip\"\n        appendTo=\"body\"\n        required=\"true\"\n        panelStyleClass=\"table-filter-input-multi-value-panel p-2 flex flex-col gap-2 w-full max-w-72\">\n        <ng-template pTemplate=\"header\">\n            @if (filterType() === FilterTypeEnum.String) {\n                <input\n                    type=\"text\"\n                    pInputText\n                    class=\"mng-filter-string w-full\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueChange($event)\"\n                    (blur)=\"onValueChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    [mngInputTrim]=\"inputTrim()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-filter-number\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueNumberChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueNumberChange($event)\"\n                    (onBlur)=\"onValueNumberChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    useGrouping=\"false\"\n                    required=\"true\" />\n            }\n        </ng-template>\n        <ng-template pTemplate=\"footer\">\n            <div class=\"flex flex-wrap gap-1 overflow-auto\">\n                @if (value().length) {\n                    @for (val of stringValues(); track val; let i = $index) {\n                        <p-chip [label]=\"val\" removable (onRemove)=\"removeValue(i)\" />\n                    }\n                } @else {\n                    <span class=\"p-1\">{{ 'mngFilter.noValues' | translate }}</span>\n                }\n            </div>\n        </ng-template>\n    </p-multiSelect>\n    @if (filterType() === FilterTypeEnum.String && enableCaseSensitive()) {\n        <p-toggle-button\n            [ngModel]=\"caseSensitiveModel()\"\n            (ngModelChange)=\"caseSensitiveModel.set($event)\"\n            [disabled]=\"disabled()\"\n            name=\"caseSensitive\"\n            class=\"mng-button-xs mng-toggle-button-addon-right\"\n            onLabel=\"Aa\"\n            offLabel=\"Aa\" />\n    }\n</p-inputgroup>\n", styles: [".table-filter-input-multi-value-panel .p-multiselect-list-container,.table-filter-input-multi-value-panel .p-multiselect-header{display:none!important}.p-datatable-header mng-table-filter-input-multi-value{font-size:1rem!important}\n"], dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterInputMultiValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterInputMultiValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-filter-input-multi-value', providers: [VALUE_ACCESSOR], imports: [Chip, FormsModule, InputNumber, MultiSelect, PrimeTemplate, TranslatePipe, InputGroup, InputText, ToggleButton, InputTrimDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<p-inputgroup>\n    <p-multiSelect\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"value.set($event)\"\n        [options]=\"value()\"\n        [showToggleAll]=\"false\"\n        [filter]=\"false\"\n        [placeholder]=\"'mngFilter.value' | translate\"\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [selectAll]=\"false\"\n        [disabled]=\"disabled()\"\n        (onPanelShow)=\"onPanelShow($event)\"\n        [class]=\"className()\"\n        display=\"chip\"\n        appendTo=\"body\"\n        required=\"true\"\n        panelStyleClass=\"table-filter-input-multi-value-panel p-2 flex flex-col gap-2 w-full max-w-72\">\n        <ng-template pTemplate=\"header\">\n            @if (filterType() === FilterTypeEnum.String) {\n                <input\n                    type=\"text\"\n                    pInputText\n                    class=\"mng-filter-string w-full\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueChange($event)\"\n                    (blur)=\"onValueChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    [mngInputTrim]=\"inputTrim()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-filter-number\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueNumberChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueNumberChange($event)\"\n                    (onBlur)=\"onValueNumberChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    useGrouping=\"false\"\n                    required=\"true\" />\n            }\n        </ng-template>\n        <ng-template pTemplate=\"footer\">\n            <div class=\"flex flex-wrap gap-1 overflow-auto\">\n                @if (value().length) {\n                    @for (val of stringValues(); track val; let i = $index) {\n                        <p-chip [label]=\"val\" removable (onRemove)=\"removeValue(i)\" />\n                    }\n                } @else {\n                    <span class=\"p-1\">{{ 'mngFilter.noValues' | translate }}</span>\n                }\n            </div>\n        </ng-template>\n    </p-multiSelect>\n    @if (filterType() === FilterTypeEnum.String && enableCaseSensitive()) {\n        <p-toggle-button\n            [ngModel]=\"caseSensitiveModel()\"\n            (ngModelChange)=\"caseSensitiveModel.set($event)\"\n            [disabled]=\"disabled()\"\n            name=\"caseSensitive\"\n            class=\"mng-button-xs mng-toggle-button-addon-right\"\n            onLabel=\"Aa\"\n            offLabel=\"Aa\" />\n    }\n</p-inputgroup>\n", styles: [".table-filter-input-multi-value-panel .p-multiselect-list-container,.table-filter-input-multi-value-panel .p-multiselect-header{display:none!important}.p-datatable-header mng-table-filter-input-multi-value{font-size:1rem!important}\n"] }]
+            args: [{ selector: 'mng-table-filter-input-multi-value', providers: [VALUE_ACCESSOR], imports: [Chip, FormsModule, InputNumber, MultiSelect, PrimeTemplate, TranslatePipe, InputGroup, InputText, ToggleButton, InputTrimDirective], encapsulation: ViewEncapsulation.None, template: "<p-inputgroup>\n    <p-multiSelect\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"value.set($event)\"\n        [options]=\"value()\"\n        [showToggleAll]=\"false\"\n        [filter]=\"false\"\n        [placeholder]=\"'mngFilter.value' | translate\"\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [selectAll]=\"false\"\n        [disabled]=\"disabled()\"\n        (onPanelShow)=\"onPanelShow($event)\"\n        [class]=\"className()\"\n        display=\"chip\"\n        appendTo=\"body\"\n        required=\"true\"\n        panelStyleClass=\"table-filter-input-multi-value-panel p-2 flex flex-col gap-2 w-full max-w-72\">\n        <ng-template pTemplate=\"header\">\n            @if (filterType() === FilterTypeEnum.String) {\n                <input\n                    type=\"text\"\n                    pInputText\n                    class=\"mng-filter-string w-full\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueChange($event)\"\n                    (blur)=\"onValueChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    [mngInputTrim]=\"inputTrim()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-filter-number\"\n                    [disabled]=\"disabled()\"\n                    (keydown.enter)=\"onValueNumberChange($event); $event.preventDefault()\"\n                    (keydown.tab)=\"onValueNumberChange($event)\"\n                    (onBlur)=\"onValueNumberChange($event)\"\n                    [placeholder]=\"'mngFilter.value' | translate\"\n                    useGrouping=\"false\"\n                    required=\"true\" />\n            }\n        </ng-template>\n        <ng-template pTemplate=\"footer\">\n            <div class=\"flex flex-wrap gap-1 overflow-auto\">\n                @if (value().length) {\n                    @for (val of stringValues(); track val; let i = $index) {\n                        <p-chip [label]=\"val\" removable (onRemove)=\"removeValue(i)\" />\n                    }\n                } @else {\n                    <span class=\"p-1\">{{ 'mngFilter.noValues' | translate }}</span>\n                }\n            </div>\n        </ng-template>\n    </p-multiSelect>\n    @if (filterType() === FilterTypeEnum.String && enableCaseSensitive()) {\n        <p-toggle-button\n            [ngModel]=\"caseSensitiveModel()\"\n            (ngModelChange)=\"caseSensitiveModel.set($event)\"\n            [disabled]=\"disabled()\"\n            name=\"caseSensitive\"\n            class=\"mng-button-xs mng-toggle-button-addon-right\"\n            onLabel=\"Aa\"\n            offLabel=\"Aa\" />\n    }\n</p-inputgroup>\n", styles: [".table-filter-input-multi-value-panel .p-multiselect-list-container,.table-filter-input-multi-value-panel .p-multiselect-header{display:none!important}.p-datatable-header mng-table-filter-input-multi-value{font-size:1rem!important}\n"] }]
         }], propDecorators: { filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], enableCaseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCaseSensitive", required: false }] }], caseSensitiveModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitiveModel", required: false }] }, { type: i0.Output, args: ["caseSensitiveModelChange"] }], inputTrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTrim", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
 
-function filterGenerateMatchModeOptions(primeConfig, descriptor, cmpSerCfg) {
+function filterGenerateMatchModeOptions(optimusConfig, descriptor, cmpSerCfg) {
     let options = undefined;
     if (descriptor == null || descriptor.filterType === FilterTypeEnum.String) {
         options = [
-            { value: FilterMatchMode.Contains, label: primeConfig.getTranslation(FilterMatchMode.Contains) },
-            { value: FilterMatchMode.NotContains, label: primeConfig.getTranslation(FilterMatchMode.NotContains) },
-            { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
-            { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+            { value: FilterMatchMode.Contains, label: optimusConfig.getTranslation(FilterMatchMode.Contains) },
+            { value: FilterMatchMode.NotContains, label: optimusConfig.getTranslation(FilterMatchMode.NotContains) },
+            { value: FilterMatchMode.Equals, label: optimusConfig.getTranslation(FilterMatchMode.Equals) },
+            { value: FilterMatchMode.NotEquals, label: optimusConfig.getTranslation(FilterMatchMode.NotEquals) },
             ...(descriptor?.isGenericFilter && descriptor?.genericValueProvider != null
                 ? []
                 : [
-                    { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
-                    { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
+                    { value: FilterMatchMode.In, label: optimusConfig.getTranslation(FilterMatchMode.In) },
+                    { value: FilterMatchMode.NotIn, label: optimusConfig.getTranslation(FilterMatchMode.NotIn) }
                 ]),
-            { value: FilterMatchMode.StartsWith, label: primeConfig.getTranslation(FilterMatchMode.StartsWith) },
-            { value: FilterMatchMode.EndsWith, label: primeConfig.getTranslation(FilterMatchMode.EndsWith) }
+            { value: FilterMatchMode.StartsWith, label: optimusConfig.getTranslation(FilterMatchMode.StartsWith) },
+            { value: FilterMatchMode.EndsWith, label: optimusConfig.getTranslation(FilterMatchMode.EndsWith) }
         ];
     }
     else if (descriptor.filterType === FilterTypeEnum.Boolean) {
-        options = [{ value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) }];
+        options = [{ value: FilterMatchMode.Equals, label: optimusConfig.getTranslation(FilterMatchMode.Equals) }];
     }
     else if (descriptor.filterType === FilterTypeEnum.Number) {
         options = [
-            { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
-            { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-            { value: FilterMatchMode.LessThan, label: primeConfig.getTranslation(FilterMatchMode.LessThan) },
-            { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
-            { value: FilterMatchMode.GreaterThan, label: primeConfig.getTranslation(FilterMatchMode.GreaterThan) },
-            { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
-            { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) },
+            { value: FilterMatchMode.Equals, label: optimusConfig.getTranslation(FilterMatchMode.Equals) },
+            { value: FilterMatchMode.NotEquals, label: optimusConfig.getTranslation(FilterMatchMode.NotEquals) },
+            { value: FilterMatchMode.LessThan, label: optimusConfig.getTranslation(FilterMatchMode.LessThan) },
+            { value: FilterMatchMode.LessThanOrEqualTo, label: optimusConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+            { value: FilterMatchMode.GreaterThan, label: optimusConfig.getTranslation(FilterMatchMode.GreaterThan) },
+            { value: FilterMatchMode.GreaterThanOrEqualTo, label: optimusConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+            { value: FilterMatchMode.Between, label: optimusConfig.getTranslation(FilterMatchMode.Between) },
             ...(descriptor.displayFormat === undefined
                 ? [
-                    { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
-                    { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
+                    { value: FilterMatchMode.In, label: optimusConfig.getTranslation(FilterMatchMode.In) },
+                    { value: FilterMatchMode.NotIn, label: optimusConfig.getTranslation(FilterMatchMode.NotIn) }
                 ]
                 : [])
         ];
     }
     else if (descriptor.filterType === FilterTypeEnum.Lookup || descriptor.filterType === FilterTypeEnum.LookupEnum) {
         options = [
-            { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
-            { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-            { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
-            { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
+            { value: FilterMatchMode.Equals, label: optimusConfig.getTranslation(FilterMatchMode.Equals) },
+            { value: FilterMatchMode.NotEquals, label: optimusConfig.getTranslation(FilterMatchMode.NotEquals) },
+            { value: FilterMatchMode.In, label: optimusConfig.getTranslation(FilterMatchMode.In) },
+            { value: FilterMatchMode.NotIn, label: optimusConfig.getTranslation(FilterMatchMode.NotIn) }
         ];
     }
     else if (descriptor.filterType === FilterTypeEnum.Date) {
         if (!descriptor.datePickerShowTime && !descriptor.dateValueNoTime && !cmpSerCfg?.filtersDateOnlyDisabled) {
             options = [
-                { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
-                { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-                { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
-                { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
-                { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
+                { value: FilterMatchMode.Equals, label: optimusConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.NotEquals, label: optimusConfig.getTranslation(FilterMatchMode.NotEquals) },
+                { value: FilterMatchMode.LessThanOrEqualTo, label: optimusConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                { value: FilterMatchMode.GreaterThanOrEqualTo, label: optimusConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                { value: FilterMatchMode.Between, label: optimusConfig.getTranslation(FilterMatchMode.Between) }
             ];
         }
         else {
             options = [
-                { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
-                { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
-                { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
-                { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
+                { value: FilterMatchMode.Equals, label: optimusConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.LessThanOrEqualTo, label: optimusConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                { value: FilterMatchMode.GreaterThanOrEqualTo, label: optimusConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                { value: FilterMatchMode.Between, label: optimusConfig.getTranslation(FilterMatchMode.Between) }
             ];
         }
     }
-    options?.push({ value: FilterMatchMode.Exists, label: primeConfig.getTranslation(FilterMatchMode.Exists) }, { value: FilterMatchMode.DoesNotExist, label: primeConfig.getTranslation(FilterMatchMode.DoesNotExist) });
+    options?.push({ value: FilterMatchMode.Exists, label: optimusConfig.getTranslation(FilterMatchMode.Exists) }, { value: FilterMatchMode.DoesNotExist, label: optimusConfig.getTranslation(FilterMatchMode.DoesNotExist) });
     if (descriptor?.matchModes) {
-        options = descriptor.matchModes.map(mm => ({ value: mm, label: primeConfig.getTranslation(mm) }));
+        options = descriptor.matchModes.map(mm => ({ value: mm, label: optimusConfig.getTranslation(mm) }));
     }
     return options || [];
 }
@@ -249,9 +255,10 @@ function filterSetStateOnChange(filter, matchMode, value, filterType, filterDate
         // display value for calendar cannot be string, convert to date
         displayValue = Array.isArray(displayValue)
             ? displayValue.map(v => (!(v instanceof Date) ? new Date(v) : v))
-            : displayValue instanceof Date
-                ? displayValue
-                : new Date(displayValue);
+            : // eslint-disable-next-line sonarjs/no-nested-conditional
+                displayValue instanceof Date
+                    ? displayValue
+                    : new Date(displayValue);
     }
     if (filterType === FilterTypeEnum.Boolean && displayValue != null && typeof displayValue !== 'boolean') {
         displayValue = (typeof displayValue === 'string' && displayValue.toLowerCase() === 'true') || displayValue === 1;
@@ -307,6 +314,7 @@ function filterSetStateOnDisplayChange(filter, displayMatchMode, displayValue, f
             }
             else if (displayMatchMode === FilterMatchMode.Between) {
                 if (Array.isArray(value) && value.length === 2 && value.every(i => i instanceof Date || typeof i === 'string' || typeof i === 'number')) {
+                    // eslint-disable-next-line sonarjs/use-type-alias
                     const fromDate = new Date(value[0]);
                     let toDate = new Date(value[1]);
                     if (filterAreDatesEqual(fromDate, toDate, filterDateCfg)) {
@@ -340,9 +348,10 @@ function filterSetStateOnDisplayChange(filter, displayMatchMode, displayValue, f
         value =
             value == null
                 ? value
-                : Array.isArray(value)
-                    ? value.filter(i => i != null).map(i => dateToIsoString(i, convertDateType, convertDateTimeOpts))
-                    : dateToIsoString(value, convertDateType, convertDateTimeOpts);
+                : // eslint-disable-next-line sonarjs/no-nested-conditional
+                    Array.isArray(value)
+                        ? value.filter(i => i != null).map(i => dateToIsoString(i, convertDateType, convertDateTimeOpts))
+                        : dateToIsoString(value, convertDateType, convertDateTimeOpts);
     }
     if (matchMode === FilterMatchMode.Exists || matchMode === FilterMatchMode.DoesNotExist) {
         value = null;
@@ -360,6 +369,7 @@ function filterAreDatesEqual(fromDate, toDate, filterDateCfg) {
     const startDate = dateToIsoString(fromDate);
     const endDate = dateToIsoString(toDate);
     // 2020-11-02T11:12:12.000
+    // eslint-disable-next-line sonarjs/no-nested-conditional
     const cmpLength = filterDateCfg?.showTime ? (filterDateCfg?.showSeconds ? 19 : 16) : 10;
     return startDate.substring(0, cmpLength) === endDate.substring(0, cmpLength);
 }
@@ -400,6 +410,7 @@ function filterAdjustDisplayValueOnMatchModeChange(matchMode, value) {
         }
     }
     if (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) {
+        // eslint-disable-next-line sonarjs/no-nested-conditional
         return Array.isArray(value) ? value : value == null ? [] : [value];
     }
     return Array.isArray(value) && value.length > 0 ? value[0] : value;
@@ -414,7 +425,8 @@ function filterGetDateConfig(descriptor, serCfg) {
         valueUtc: descriptor.dateValueUtc ?? serCfg?.dateTimeInUtc,
         valueNoTimezone: descriptor.dateValueNoTimezone ?? !serCfg?.dateTimeWithTimezone,
         valueNoMillis: !serCfg?.dateTimeWithMillis,
-        format: descriptor.datePickerFormat ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? fromAngularDateFormatToPrime(descriptor.displayFormat) : undefined),
+        format: descriptor.datePickerFormat ??
+            (descriptor.displayFormatApplyToField && descriptor.displayFormat ? fromAngularDateFormatToOptimus(descriptor.displayFormat) : undefined),
         showTime: showTime,
         showSeconds: showTime &&
             (descriptor.datePickerShowSeconds ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? angularDateFormatHasSeconds(descriptor.displayFormat) : false))
@@ -463,10 +475,10 @@ function isFilterValueBlank(value) {
 }
 
 class ADataListService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ADataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ADataListService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ADataListService, decorators: [{
             type: Injectable
         }] });
 
@@ -477,14 +489,18 @@ class FilterService {
     #tableFilterState;
     constructor() {
         this.#tableData = inject((ADataListService));
-        this.#config = signal(undefined, ...(ngDevMode ? [{ debugName: "#config" }] : []));
-        this.#state = signal(undefined, ...(ngDevMode ? [{ debugName: "#state" }] : []));
+        this.#config = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#config" }] : /* istanbul ignore next */ []));
+        this.#state = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#state" }] : /* istanbul ignore next */ []));
         this.state = this.#state.asReadonly();
-        this.isActive = computed(() => this.state()?.matchMode === FilterMatchMode.Exists || this.state()?.matchMode === FilterMatchMode.DoesNotExist || !isFilterValueBlank(this.state()?.value), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        this.isActive = computed(() => this.state()?.matchMode === FilterMatchMode.Exists || this.state()?.matchMode === FilterMatchMode.DoesNotExist || !isFilterValueBlank(this.state()?.value), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
         this.#tableFilterState = computed(() => {
             const property = this.#config()?.descriptor.property;
             return property ? this.#tableData.filterStates()?.[property] : undefined;
-        }, ...(ngDevMode ? [{ debugName: "#tableFilterState" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#tableFilterState" }] : /* istanbul ignore next */ []));
         effectWithDeps([this.#config], ([config]) => this.#updateStateIfRequired(config, this.state(), this.#tableFilterState(), false));
         effectWithDeps([this.#tableFilterState], ([currTableFilterState]) => this.#updateStateIfRequired(this.#config(), this.state(), currTableFilterState, false));
     }
@@ -549,32 +565,18 @@ class FilterService {
             currTableFilterState.matchMode ?? state?.matchMode, currTableFilterState.value, untracked(() => config.descriptor.filterType), untracked(() => config.dateConfig)), updateTable);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FilterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 /**
  * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
- * and these must be propagated through to this component and beyond to primeNG.
+ * and these must be propagated through to this component and beyond to Optimus UI.
  */
 class TableFilterComponent {
-    #el;
-    #renderer;
-    #overlayService;
-    #cd;
-    #document;
-    #window;
-    #overlaySubscription;
-    #overlay;
-    #scrollHandler;
-    #documentClickListener;
-    #documentResizeListener;
-    #resetSubscription;
-    #selfClick;
-    #overlayEventListener;
     #numericValueFromModelChange;
     #dateDebounceSubject;
     constructor() {
@@ -582,28 +584,28 @@ class TableFilterComponent {
         this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
         this.FilterTypeEnum = FilterTypeEnum;
         this.FilterMatchMode = FilterMatchMode;
-        this.#el = inject(ElementRef);
-        this.#renderer = inject(Renderer2);
-        this.#overlayService = inject(OverlayService);
-        this.#cd = inject(ChangeDetectorRef);
         this.filter = inject(FilterService);
-        this.#document = window.document;
-        this.#window = this.#document.defaultView;
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
-        this.showFilterIcon = input(false, { ...(ngDevMode ? { debugName: "showFilterIcon" } : {}), transform: booleanAttribute });
-        this.showTitleAsPlaceholder = input(false, { ...(ngDevMode ? { debugName: "showTitleAsPlaceholder" } : {}), transform: booleanAttribute });
-        this.descriptorAsLookup = computed(() => this.config().descriptor instanceof FilterLookupDescriptor ? this.config().descriptor : undefined, ...(ngDevMode ? [{ debugName: "descriptorAsLookup" }] : []));
-        this.icon = viewChild('icon', ...(ngDevMode ? [{ debugName: "icon" }] : []));
-        this.matchModes = computed(() => this.config().matchModes, ...(ngDevMode ? [{ debugName: "matchModes" }] : []));
-        this.isInputDisabled = computed(() => this.filter.state()?.matchMode === FilterMatchMode.Exists || this.filter.state()?.matchMode === FilterMatchMode.DoesNotExist, ...(ngDevMode ? [{ debugName: "isInputDisabled" }] : []));
-        this.overlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.model = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.showFilterIcon = input(false, { ...(ngDevMode ? { debugName: "showFilterIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showTitleAsPlaceholder = input(false, { ...(ngDevMode ? { debugName: "showTitleAsPlaceholder" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.descriptorAsLookup = computed(() => this.config().descriptor instanceof FilterLookupDescriptor ? this.config().descriptor : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptorAsLookup" }] : /* istanbul ignore next */ []));
+        this.icon = viewChild('icon', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.matchModes = computed(() => this.config().matchModes, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matchModes" }] : /* istanbul ignore next */ []));
+        this.isInputDisabled = computed(() => this.filter.state()?.matchMode === FilterMatchMode.Exists || this.filter.state()?.matchMode === FilterMatchMode.DoesNotExist, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInputDisabled" }] : /* istanbul ignore next */ []));
         // display configs
         this.isMultiselect = computed(() => {
             const ft = this.filter.state();
             const matchMode = ft?.displayMatchMode ?? this.config().defaultMatchMode;
             return (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) && (ft?.displayValue == null || Array.isArray(ft.displayValue));
-        }, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiselect" }] : /* istanbul ignore next */ []));
         this.placeholderKey = computed(() => {
             const descriptor = this.config().descriptor;
             let defaultPlaceholderKey = 'mngTable.typeToFilter';
@@ -620,11 +622,16 @@ class TableFilterComponent {
                 defaultPlaceholderKey = 'mngTable.selectToFilter';
             }
             return this.showTitleAsPlaceholder() ? this.#getPropertyLabelKey(this.config().descriptor) : defaultPlaceholderKey;
-        }, ...(ngDevMode ? [{ debugName: "placeholderKey" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
         this.booleanOptions = [
             { label: 'general.yes', value: true },
             { label: 'general.no', value: false }
         ];
+        this.popover = viewChild('popover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+        this.popoverContent = viewChild('popoverContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popoverContent" }] : /* istanbul ignore next */ []));
         this.#numericValueFromModelChange = null;
         this.#dateDebounceSubject = new Subject();
         effectWithDeps([this.config], ([config]) => {
@@ -632,15 +639,6 @@ class TableFilterComponent {
         });
         this.#dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed()).subscribe(v => this.filter.setDisplayValue(v));
     }
-    ngOnDestroy() {
-        if (this.#overlay) {
-            this.#renderer.appendChild(this.#el.nativeElement, this.#overlay);
-            ZIndexUtils.clear(this.#overlay);
-            this.#onOverlayHide();
-        }
-        this.#resetSubscription?.unsubscribe();
-        this.#overlaySubscription?.unsubscribe();
-    }
     onTextModelChange(event) {
         const value = event.target.value;
         if (value === '') {
@@ -696,7 +694,7 @@ class TableFilterComponent {
     }
     onMatchModeChange(displayMatchMode) {
         this.filter.setMatchMode(displayMatchMode);
-        this.#hideOverlay();
+        this.popover()?.hide();
     }
     onMatchModeKeyDown(event) {
         const item = event.target;
@@ -731,73 +729,36 @@ class TableFilterComponent {
             return;
         }
         this.filter.clear();
-        this.#hideOverlay();
+        this.popover()?.hide();
     }
-    toggleMenu(event) {
-        this.overlayVisible.set(!this.overlayVisible());
+    toggleMenu(event, icon) {
+        this.popover()?.toggle(event, icon);
         event.stopPropagation();
     }
-    onToggleButtonKeyDown(event) {
+    onToggleButtonKeyDown(event, icon) {
         switch (event.key) {
             case 'Escape':
             case 'Tab':
-                this.overlayVisible.set(false);
+                this.popover()?.hide();
                 break;
             case 'ArrowDown':
-                if (this.overlayVisible()) {
-                    const focusable = DomHandler.getFocusableElements(this.#overlay);
-                    if (focusable) {
-                        focusable[0].focus();
+                if (this.popover()?.overlayVisible) {
+                    const target = this.popoverContent()?.nativeElement;
+                    if (target) {
+                        const focusable = DomHandler.getFocusableElements(target);
+                        if (focusable && focusable.length > 0) {
+                            focusable[0].focus();
+                        }
                     }
                     event.preventDefault();
                 }
                 else if (event.altKey) {
-                    this.overlayVisible.set(true);
+                    this.popover()?.show(event, icon);
                     event.preventDefault();
                 }
                 break;
         }
     }
-    onEscape() {
-        this.overlayVisible.set(false);
-    }
-    onContentClick() {
-        this.#selfClick = true;
-    }
-    // onOverlayAnimationStart(event: AnimationEvent) {
-    onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.#overlay = event.element;
-                this.#renderer.appendChild(this.#document.body, this.#overlay);
-                // instead of following (commented) line, we use the one below to set z-index of overlay to 1000 (which is primeNG default)
-                // ZIndexUtils.set('overlay', this.#overlay, this.#tableMetadata.primeConfig.zIndex.overlay);
-                ZIndexUtils.set('overlay', this.#overlay, 1000);
-                DomHandler.absolutePosition(this.#overlay, this.icon()?.nativeElement);
-                this.#bindDocumentClickListener();
-                this.#bindDocumentResizeListener();
-                this.#bindScrollListener();
-                this.#overlayEventListener = (e) => {
-                    if (this.#overlay && this.#overlay.contains(e.target)) {
-                        this.#selfClick = true;
-                    }
-                };
-                this.#overlaySubscription = this.#overlayService.clickObservable.subscribe(this.#overlayEventListener);
-                break;
-            case 'void':
-                this.#onOverlayHide();
-                this.#overlaySubscription?.unsubscribe();
-                break;
-        }
-    }
-    // onOverlayAnimationEnd(event: AnimationEvent) {
-    onOverlayAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                ZIndexUtils.clear(event.element);
-                break;
-        }
-    }
     #findNextMenuModeItem(item) {
         const nextItem = item.nextElementSibling;
         if (nextItem)
@@ -812,74 +773,6 @@ class TableFilterComponent {
         else
             return item.parentElement?.lastElementChild;
     }
-    #isOutsideClicked(event) {
-        return !(this.#overlay?.isSameNode(event.target) ||
-            this.#overlay?.contains(event.target) ||
-            this.icon()?.nativeElement.isSameNode(event.target) ||
-            this.icon()?.nativeElement.contains(event.target) ||
-            DomHandler.hasClass(event.target, 'p-column-filter-add-button') ||
-            DomHandler.hasClass(event.target.parentElement, 'p-column-filter-add-button') ||
-            DomHandler.hasClass(event.target, 'p-column-filter-remove-button') ||
-            DomHandler.hasClass(event.target.parentElement, 'p-column-filter-remove-button'));
-    }
-    #bindDocumentClickListener() {
-        if (!this.#documentClickListener) {
-            const documentTarget = this.#el ? this.#el.nativeElement.ownerDocument : 'document';
-            this.#documentClickListener = this.#renderer.listen(documentTarget, 'click', event => {
-                if (this.overlayVisible() && !this.#selfClick && this.#isOutsideClicked(event)) {
-                    this.#hideOverlay();
-                }
-                this.#selfClick = false;
-            });
-        }
-    }
-    #unbindDocumentClickListener() {
-        if (this.#documentClickListener) {
-            this.#documentClickListener();
-            this.#documentClickListener = null;
-            this.#selfClick = false;
-        }
-    }
-    #bindDocumentResizeListener() {
-        if (!this.#documentResizeListener) {
-            this.#documentResizeListener = this.#renderer.listen(this.#window, 'resize', () => {
-                if (this.overlayVisible() && !DomHandler.isTouchDevice()) {
-                    this.#hideOverlay();
-                }
-            });
-        }
-    }
-    #unbindDocumentResizeListener() {
-        if (this.#documentResizeListener) {
-            this.#documentResizeListener();
-            this.#documentResizeListener = null;
-        }
-    }
-    #bindScrollListener() {
-        if (!this.#scrollHandler) {
-            this.#scrollHandler = new ConnectedOverlayScrollHandler(this.icon()?.nativeElement, () => {
-                if (this.overlayVisible()) {
-                    this.#hideOverlay();
-                }
-            });
-        }
-        this.#scrollHandler.bindScrollListener();
-    }
-    #unbindScrollListener() {
-        if (this.#scrollHandler) {
-            this.#scrollHandler.unbindScrollListener();
-        }
-    }
-    #hideOverlay() {
-        this.overlayVisible.set(false);
-        this.#cd.markForCheck();
-    }
-    #onOverlayHide() {
-        this.#unbindDocumentClickListener();
-        this.#unbindDocumentResizeListener();
-        this.#unbindScrollListener();
-        this.#overlay = null;
-    }
     #getPropertyLabelKey(filterDescriptor) {
         let labelKey;
         if (filterDescriptor.title !== undefined && !filterDescriptor.titleUseModelBase) {
@@ -890,15 +783,10 @@ class TableFilterComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableFilterComponent, isStandalone: true, selector: "mng-table-filter", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, showFilterIcon: { classPropertyName: "showFilterIcon", publicName: "showFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, showTitleAsPlaceholder: { classPropertyName: "showTitleAsPlaceholder", publicName: "showTitleAsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FilterService], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n    @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n    @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n    <div\n        class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n        [class.mng-filter-active]=\"filter.isActive()\"\n        [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n        [class.mng-filter-required]=\"requiredFilterMissing\">\n        @switch (config().descriptor.filterType) {\n            @case (FilterTypeEnum.Number) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-number-range\n                        vertical=\"true\"\n                        className=\"mng-filter-number\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onNumericModelChange($event)\"\n                        (keyDown)=\"onNumericInputKeyDown($event)\"\n                        [placeholder]=\"placeholder\"\n                        [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                        [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                        [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericMultiModelChange($event)\"\n                                [filterType]=\"config().descriptor.filterType\"\n                                [disabled]=\"isInputDisabled()\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericModelChange($event)\"\n                                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                                [placeholder]=\"placeholder\"\n                                [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                                [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                                [disabled]=\"isInputDisabled()\" />\n                        }\n                    </p-inputgroup>\n                }\n            }\n\n            @case (FilterTypeEnum.Boolean) {\n                <mng-dropdown\n                    optionsLabelProperty=\"label\"\n                    optionsValueProperty=\"value\"\n                    [ngModel]=\"filter.state()?.displayValue\"\n                    [options]=\"booleanOptions\"\n                    [optionsLabelTranslate]=\"true\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"booleanFilter($event)\"\n                    [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                </mng-dropdown>\n            }\n            @case (FilterTypeEnum.Date) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-date-range\n                        vertical=\"true\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onDateFilterModelChange($event)\"\n                        [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                        [showTime]=\"config().dateConfig?.showTime ?? false\"\n                        [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n                        [dateFormat]=\"config().dateConfig?.format\"\n                        [placeholder]=\"placeholder\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        <mng-datetime-picker\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onDateFilterModelChange($event)\"\n                            [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                            [placeholder]=\"placeholder\"\n                            showIcon=\"true\"\n                            [time]=\"config().dateConfig?.showTime ?? false\"\n                            [seconds]=\"config().dateConfig?.showSeconds ?? false\"\n                            [milliseconds]=\"config().dateConfig?.showMilliseconds ?? false\"\n                            [primeTimePicker]=\"config().dateConfig?.primeTimePicker ?? false\"\n                            [timeSelect]=\"config().dateConfig?.timeSelect ?? true\"\n                            [timeSelectInterval]=\"config().dateConfig?.timeSelectInterval ?? 60\"\n                            [dateFormat]=\"config().dateConfig?.format\"\n                            required=\"true\" />\n                    </p-inputgroup>\n                }\n            }\n            @case (FilterTypeEnum.Lookup) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @case (FilterTypeEnum.LookupEnum) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @default {\n                <p-inputgroup>\n                    @if (showFilterIcon()) {\n                        <p-inputgroup-addon>\n                            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                        </p-inputgroup-addon>\n                    }\n                    @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                        <mng-table-filter-input-multi-value\n                            name=\"value\"\n                            [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onTextMultiModelChange($event)\"\n                            [filterType]=\"config().descriptor.filterType\"\n                            [inputTrim]=\"config().descriptor.trimOption\"\n                            [disabled]=\"isInputDisabled()\" />\n                    } @else {\n                        <input\n                            type=\"text\"\n                            pInputText\n                            class=\"mng-filter-string\"\n                            [value]=\"filter.state()?.displayValue ?? ''\"\n                            [disabled]=\"isInputDisabled()\"\n                            (input)=\"onTextModelChange($event)\"\n                            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                            [attr.placeholder]=\"placeholder\"\n                            [mngInputTrim]=\"config().descriptor.trimOption\" />\n                    }\n                </p-inputgroup>\n            }\n        }\n\n        <ng-template #lookupFilter>\n            @if (descriptorAsLookup(); as lookup) {\n                @switch (lookup.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [multiselect]=\"isMultiselect()\"\n                            [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookup.inlineSearch ?? false\"\n                            [allowInput]=\"lookup.allowInput ?? false\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"config().descriptor.trimOption\"\n                            [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            *mngRerender=\"isMultiselect()\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [inlineSearch]=\"lookup.inlineSearch\"\n                            [allowInput]=\"lookup.allowInput\"\n                            [multiselect]=\"isMultiselect()\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"isMultiselect()\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\"\n                            [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        </ng-template>\n\n        <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n\n        <ng-template #iconTemplate>\n            <button\n                #icon\n                class=\"mng-filter-options mng-filter-icon cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md\"\n                (click)=\"toggleMenu($event)\"\n                (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n        </ng-template>\n\n        @if (overlayVisible()) {\n            <div\n                class=\"p-datatable-filter-overlay\"\n                (click)=\"onContentClick()\"\n                [@overlayAnimation]=\"'visible'\"\n                (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n                (keydown.escape)=\"onEscape()\">\n                <ul class=\"p-datatable-filter-constraint-list\">\n                    @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                        <li\n                            class=\"p-datatable-filter-constraint\"\n                            [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n                            (click)=\"onMatchModeChange(matchMode.value)\"\n                            (keydown)=\"onMatchModeKeyDown($event)\"\n                            (keydown.enter)=\"onMatchModeChange(matchMode.value)\"\n                            [attr.tabindex]=\"i === 0 ? '0' : null\">\n                            {{ matchMode.label }}\n                        </li>\n                    }\n                    @if (config().descriptor.filterType === FilterTypeEnum.String) {\n                        <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                        <li\n                            class=\"p-datatable-filter-constraint\"\n                            (click)=\"onCaseSensitivityToggle()\"\n                            (keydown)=\"onMatchModeKeyDown($event)\"\n                            (keydown.enter)=\"onCaseSensitivityToggle()\">\n                            <div class=\"flex items-center\">\n                                <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n                                <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n                            </div>\n                        </li>\n                    }\n                    <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-disabled]=\"!filter.isActive()\"\n                        (click)=\"clear()\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"clear()\">\n                        {{ 'mngPrime.noFilter' | translate }}\n                    </li>\n                </ul>\n            </div>\n        }\n    </div>\n\n    @if (!showFilterIcon()) {\n        <button\n            #icon\n            class=\"mng-filter-options cursor-pointer ml-1\"\n            [ngClass]=\"{\n                'text-primary': filter.isActive(),\n                'text-slate-400': !filter.isActive()\n            }\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n    }\n</div>\n", styles: ["mng-table-filter{--filter-active-bg: var(--color-primary-50);--filter-active-color: var(--color-primary-600)}mng-table-filter .mng-filter-string{min-width:135px}mng-table-filter .mng-filter-number{min-width:165px}mng-table-filter .mng-filter-date{min-width:170px}mng-table-filter .mng-filter-boolean{min-width:80px}mng-table-filter .mng-filter-lookup,mng-table-filter .mng-filter-lookupenum{min-width:180px}mng-table-filter .mng-filter-required{position:relative}mng-table-filter p-tag.mng-filter-required{border:1px solid var(--color-red-500)}mng-table-filter .mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}mng-table-filter .mng-filter-icon{color:var(--p-inputgroup-addon-color)}mng-table-filter .mng-filter-icon:hover{background:var(--p-select-filled-hover-background)}mng-table-filter .mng-filter-active *{border-color:var(--filter-active-color)!important}mng-table-filter .mng-filter-active p-inputgroup-addon,mng-table-filter .mng-filter-active input,mng-table-filter .mng-filter-active p-select,mng-table-filter .mng-filter-active p-multiselect,mng-table-filter .mng-filter-active .p-autocomplete-input-multiple{background:var(--filter-active-bg)}mng-table-filter .mng-filter-active .mng-filter-icon{color:var(--filter-active-color)}:root[class*=app-dark] mng-table-filter{--filter-active-bg: var(--p-surface-800);--filter-active-color: var(--p-surface-400)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "primeTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "allowInput", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: AutocompleteTemplateDirective, selector: "[mngAutocompleteTemplate]", inputs: ["name"], exportAs: ["mngAutocompleteTemplate"] }, { kind: "directive", type: DropdownTemplateDirective, selector: "[mngDropdownTemplate]", inputs: ["name"], exportAs: ["mngDropdownTemplate"] }, { kind: "directive", type: DateRangeTemplateDirective, selector: "[mngDateRangeTemplate]", inputs: ["name"], exportAs: ["mngDateRangeTemplate"] }, { kind: "directive", type: NumberRangeTemplateDirective, selector: "[mngNumberRangeTemplate]", inputs: ["name"], exportAs: ["mngNumberRangeTemplate"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "component", type: TableFilterInputMultiValueComponent, selector: "mng-table-filter-input-multi-value", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled", "className"], outputs: ["caseSensitiveModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
-            trigger('overlayAnimation', [
-                transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
-                transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableFilterComponent, isStandalone: true, selector: "mng-table-filter", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, showFilterIcon: { classPropertyName: "showFilterIcon", publicName: "showFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, showTitleAsPlaceholder: { classPropertyName: "showTitleAsPlaceholder", publicName: "showTitleAsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FilterService], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n    @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n    @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n    <div\n        class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n        [class.mng-filter-active]=\"filter.isActive()\"\n        [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n        [class.mng-filter-required]=\"requiredFilterMissing\">\n        @switch (config().descriptor.filterType) {\n            @case (FilterTypeEnum.Number) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-number-range\n                        vertical=\"true\"\n                        className=\"mng-filter-number\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onNumericModelChange($event)\"\n                        (keyDown)=\"onNumericInputKeyDown($event)\"\n                        [placeholder]=\"placeholder\"\n                        [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                        [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                        [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericMultiModelChange($event)\"\n                                [filterType]=\"config().descriptor.filterType\"\n                                [disabled]=\"isInputDisabled()\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericModelChange($event)\"\n                                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                                [placeholder]=\"placeholder\"\n                                [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                                [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                                [disabled]=\"isInputDisabled()\" />\n                        }\n                    </p-inputgroup>\n                }\n            }\n\n            @case (FilterTypeEnum.Boolean) {\n                <mng-dropdown\n                    optionsLabelProperty=\"label\"\n                    optionsValueProperty=\"value\"\n                    [ngModel]=\"filter.state()?.displayValue\"\n                    [options]=\"booleanOptions\"\n                    [optionsLabelTranslate]=\"true\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"booleanFilter($event)\"\n                    [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                </mng-dropdown>\n            }\n            @case (FilterTypeEnum.Date) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-date-range\n                        vertical=\"true\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onDateFilterModelChange($event)\"\n                        [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                        [showTime]=\"config().dateConfig?.showTime ?? false\"\n                        [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n                        [dateFormat]=\"config().dateConfig?.format\"\n                        [placeholder]=\"placeholder\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        <mng-datetime-picker\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onDateFilterModelChange($event)\"\n                            [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                            [placeholder]=\"placeholder\"\n                            showIcon=\"true\"\n                            [time]=\"config().dateConfig?.showTime ?? false\"\n                            [seconds]=\"config().dateConfig?.showSeconds ?? false\"\n                            [milliseconds]=\"config().dateConfig?.showMilliseconds ?? false\"\n                            [optimusTimePicker]=\"config().dateConfig?.optimusTimePicker ?? false\"\n                            [timeSelect]=\"config().dateConfig?.timeSelect ?? true\"\n                            [timeSelectInterval]=\"config().dateConfig?.timeSelectInterval ?? 60\"\n                            [dateFormat]=\"config().dateConfig?.format\"\n                            required=\"true\" />\n                    </p-inputgroup>\n                }\n            }\n            @case (FilterTypeEnum.Lookup) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @case (FilterTypeEnum.LookupEnum) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @default {\n                <p-inputgroup>\n                    @if (showFilterIcon()) {\n                        <p-inputgroup-addon>\n                            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                        </p-inputgroup-addon>\n                    }\n                    @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                        <mng-table-filter-input-multi-value\n                            name=\"value\"\n                            [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onTextMultiModelChange($event)\"\n                            [filterType]=\"config().descriptor.filterType\"\n                            [inputTrim]=\"config().descriptor.trimOption\"\n                            [disabled]=\"isInputDisabled()\" />\n                    } @else {\n                        <input\n                            type=\"text\"\n                            pInputText\n                            class=\"mng-filter-string\"\n                            [value]=\"filter.state()?.displayValue ?? ''\"\n                            [disabled]=\"isInputDisabled()\"\n                            (input)=\"onTextModelChange($event)\"\n                            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                            [attr.placeholder]=\"placeholder\"\n                            [mngInputTrim]=\"config().descriptor.trimOption\" />\n                    }\n                </p-inputgroup>\n            }\n        }\n\n        <ng-template #lookupFilter>\n            @if (descriptorAsLookup(); as lookup) {\n                @switch (lookup.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [multiselect]=\"isMultiselect()\"\n                            [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookup.inlineSearch ?? false\"\n                            [allowInput]=\"lookup.allowInput ?? false\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"config().descriptor.trimOption\"\n                            [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            *mngRerender=\"isMultiselect()\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [inlineSearch]=\"lookup.inlineSearch\"\n                            [allowInput]=\"lookup.allowInput\"\n                            [multiselect]=\"isMultiselect()\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"isMultiselect()\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\"\n                            [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        </ng-template>\n\n        <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n\n        <ng-template #iconTemplate>\n            <button\n                #icon\n                class=\"mng-filter-options mng-filter-icon cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md\"\n                (click)=\"toggleMenu($event, icon)\"\n                (keydown)=\"onToggleButtonKeyDown($event, icon)\"></button>\n        </ng-template>\n\n        <p-popover styleClass=\"p-datatable-filter-overlay mng-filter-constraint-list-overlay\" #popover>\n            <ul #popoverContent class=\"p-datatable-filter-constraint-list\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                @if (config().descriptor.filterType === FilterTypeEnum.String) {\n                    <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        (click)=\"onCaseSensitivityToggle()\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"onCaseSensitivityToggle()\">\n                        <div class=\"flex items-center\">\n                            <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n                            <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n                        </div>\n                    </li>\n                }\n                <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                <li\n                    class=\"p-datatable-filter-constraint\"\n                    [class.p-disabled]=\"!filter.isActive()\"\n                    (click)=\"clear()\"\n                    (keydown)=\"onMatchModeKeyDown($event)\"\n                    (keydown.enter)=\"clear()\">\n                    {{ 'optimus.noFilter' | translate }}\n                </li>\n            </ul>\n        </p-popover>\n    </div>\n\n    @if (!showFilterIcon()) {\n        <button\n            #icon\n            class=\"mng-filter-options cursor-pointer ml-1\"\n            [ngClass]=\"{\n                'text-primary': filter.isActive(),\n                'text-slate-400': !filter.isActive()\n            }\"\n            (click)=\"toggleMenu($event, icon)\"\n            (keydown)=\"onToggleButtonKeyDown($event, icon)\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n    }\n</div>\n", styles: ["mng-table-filter{--filter-active-bg: var(--color-primary-50);--filter-active-color: var(--color-primary-600)}mng-table-filter .mng-filter-string{min-width:135px}mng-table-filter .mng-filter-number{min-width:165px}mng-table-filter .mng-filter-date{min-width:170px}mng-table-filter .mng-filter-boolean{min-width:80px}mng-table-filter .mng-filter-lookup,mng-table-filter .mng-filter-lookupenum{min-width:180px}mng-table-filter .mng-filter-required{position:relative}mng-table-filter p-tag.mng-filter-required{border:1px solid var(--color-red-500)}mng-table-filter .mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}mng-table-filter .mng-filter-icon{color:var(--p-inputgroup-addon-color)}mng-table-filter .mng-filter-icon:hover{background:var(--p-select-filled-hover-background)}mng-table-filter .mng-filter-active *{border-color:var(--filter-active-color)!important}mng-table-filter .mng-filter-active p-inputgroup-addon,mng-table-filter .mng-filter-active input,mng-table-filter .mng-filter-active p-select,mng-table-filter .mng-filter-active p-multiselect,mng-table-filter .mng-filter-active .p-autocomplete-input-multiple{background:var(--filter-active-bg)}mng-table-filter .mng-filter-active .mng-filter-icon{color:var(--filter-active-color)}:root[class*=app-dark] mng-table-filter{--filter-active-bg: var(--p-surface-800);--filter-active-color: var(--p-surface-400)}.mng-filter-constraint-list-overlay>.p-popover-content{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "optimusTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "allowInput", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: AutocompleteTemplateDirective, selector: "[mngAutocompleteTemplate]", inputs: ["name"], exportAs: ["mngAutocompleteTemplate"] }, { kind: "directive", type: DropdownTemplateDirective, selector: "[mngDropdownTemplate]", inputs: ["name"], exportAs: ["mngDropdownTemplate"] }, { kind: "directive", type: DateRangeTemplateDirective, selector: "[mngDateRangeTemplate]", inputs: ["name"], exportAs: ["mngDateRangeTemplate"] }, { kind: "directive", type: NumberRangeTemplateDirective, selector: "[mngNumberRangeTemplate]", inputs: ["name"], exportAs: ["mngNumberRangeTemplate"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "optimusTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableFilterInputMultiValueComponent, selector: "mng-table-filter-input-multi-value", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled", "className"], outputs: ["caseSensitiveModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-filter', imports: [
                         TableModule,
@@ -922,14 +810,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         DateRangeTemplateDirective,
                         NumberRangeTemplateDirective,
                         DatetimePickerComponent,
+                        Popover,
                         TableFilterInputMultiValueComponent
-                    ], animations: [
-                        trigger('overlayAnimation', [
-                            transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
-                            transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
-                        ])
-                    ], providers: [FilterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center\">\n    @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n    @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n    <div\n        class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n        [class.mng-filter-active]=\"filter.isActive()\"\n        [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n        [class.mng-filter-required]=\"requiredFilterMissing\">\n        @switch (config().descriptor.filterType) {\n            @case (FilterTypeEnum.Number) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-number-range\n                        vertical=\"true\"\n                        className=\"mng-filter-number\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onNumericModelChange($event)\"\n                        (keyDown)=\"onNumericInputKeyDown($event)\"\n                        [placeholder]=\"placeholder\"\n                        [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                        [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                        [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericMultiModelChange($event)\"\n                                [filterType]=\"config().descriptor.filterType\"\n                                [disabled]=\"isInputDisabled()\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericModelChange($event)\"\n                                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                                [placeholder]=\"placeholder\"\n                                [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                                [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                                [disabled]=\"isInputDisabled()\" />\n                        }\n                    </p-inputgroup>\n                }\n            }\n\n            @case (FilterTypeEnum.Boolean) {\n                <mng-dropdown\n                    optionsLabelProperty=\"label\"\n                    optionsValueProperty=\"value\"\n                    [ngModel]=\"filter.state()?.displayValue\"\n                    [options]=\"booleanOptions\"\n                    [optionsLabelTranslate]=\"true\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"booleanFilter($event)\"\n                    [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                </mng-dropdown>\n            }\n            @case (FilterTypeEnum.Date) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-date-range\n                        vertical=\"true\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onDateFilterModelChange($event)\"\n                        [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                        [showTime]=\"config().dateConfig?.showTime ?? false\"\n                        [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n                        [dateFormat]=\"config().dateConfig?.format\"\n                        [placeholder]=\"placeholder\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        <mng-datetime-picker\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onDateFilterModelChange($event)\"\n                            [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                            [placeholder]=\"placeholder\"\n                            showIcon=\"true\"\n                            [time]=\"config().dateConfig?.showTime ?? false\"\n                            [seconds]=\"config().dateConfig?.showSeconds ?? false\"\n                            [milliseconds]=\"config().dateConfig?.showMilliseconds ?? false\"\n                            [primeTimePicker]=\"config().dateConfig?.primeTimePicker ?? false\"\n                            [timeSelect]=\"config().dateConfig?.timeSelect ?? true\"\n                            [timeSelectInterval]=\"config().dateConfig?.timeSelectInterval ?? 60\"\n                            [dateFormat]=\"config().dateConfig?.format\"\n                            required=\"true\" />\n                    </p-inputgroup>\n                }\n            }\n            @case (FilterTypeEnum.Lookup) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @case (FilterTypeEnum.LookupEnum) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @default {\n                <p-inputgroup>\n                    @if (showFilterIcon()) {\n                        <p-inputgroup-addon>\n                            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                        </p-inputgroup-addon>\n                    }\n                    @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                        <mng-table-filter-input-multi-value\n                            name=\"value\"\n                            [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onTextMultiModelChange($event)\"\n                            [filterType]=\"config().descriptor.filterType\"\n                            [inputTrim]=\"config().descriptor.trimOption\"\n                            [disabled]=\"isInputDisabled()\" />\n                    } @else {\n                        <input\n                            type=\"text\"\n                            pInputText\n                            class=\"mng-filter-string\"\n                            [value]=\"filter.state()?.displayValue ?? ''\"\n                            [disabled]=\"isInputDisabled()\"\n                            (input)=\"onTextModelChange($event)\"\n                            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                            [attr.placeholder]=\"placeholder\"\n                            [mngInputTrim]=\"config().descriptor.trimOption\" />\n                    }\n                </p-inputgroup>\n            }\n        }\n\n        <ng-template #lookupFilter>\n            @if (descriptorAsLookup(); as lookup) {\n                @switch (lookup.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [multiselect]=\"isMultiselect()\"\n                            [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookup.inlineSearch ?? false\"\n                            [allowInput]=\"lookup.allowInput ?? false\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"config().descriptor.trimOption\"\n                            [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            *mngRerender=\"isMultiselect()\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [inlineSearch]=\"lookup.inlineSearch\"\n                            [allowInput]=\"lookup.allowInput\"\n                            [multiselect]=\"isMultiselect()\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"isMultiselect()\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\"\n                            [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        </ng-template>\n\n        <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n\n        <ng-template #iconTemplate>\n            <button\n                #icon\n                class=\"mng-filter-options mng-filter-icon cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md\"\n                (click)=\"toggleMenu($event)\"\n                (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n        </ng-template>\n\n        @if (overlayVisible()) {\n            <div\n                class=\"p-datatable-filter-overlay\"\n                (click)=\"onContentClick()\"\n                [@overlayAnimation]=\"'visible'\"\n                (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n                (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n                (keydown.escape)=\"onEscape()\">\n                <ul class=\"p-datatable-filter-constraint-list\">\n                    @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                        <li\n                            class=\"p-datatable-filter-constraint\"\n                            [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n                            (click)=\"onMatchModeChange(matchMode.value)\"\n                            (keydown)=\"onMatchModeKeyDown($event)\"\n                            (keydown.enter)=\"onMatchModeChange(matchMode.value)\"\n                            [attr.tabindex]=\"i === 0 ? '0' : null\">\n                            {{ matchMode.label }}\n                        </li>\n                    }\n                    @if (config().descriptor.filterType === FilterTypeEnum.String) {\n                        <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                        <li\n                            class=\"p-datatable-filter-constraint\"\n                            (click)=\"onCaseSensitivityToggle()\"\n                            (keydown)=\"onMatchModeKeyDown($event)\"\n                            (keydown.enter)=\"onCaseSensitivityToggle()\">\n                            <div class=\"flex items-center\">\n                                <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n                                <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n                            </div>\n                        </li>\n                    }\n                    <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-disabled]=\"!filter.isActive()\"\n                        (click)=\"clear()\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"clear()\">\n                        {{ 'mngPrime.noFilter' | translate }}\n                    </li>\n                </ul>\n            </div>\n        }\n    </div>\n\n    @if (!showFilterIcon()) {\n        <button\n            #icon\n            class=\"mng-filter-options cursor-pointer ml-1\"\n            [ngClass]=\"{\n                'text-primary': filter.isActive(),\n                'text-slate-400': !filter.isActive()\n            }\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n    }\n</div>\n", styles: ["mng-table-filter{--filter-active-bg: var(--color-primary-50);--filter-active-color: var(--color-primary-600)}mng-table-filter .mng-filter-string{min-width:135px}mng-table-filter .mng-filter-number{min-width:165px}mng-table-filter .mng-filter-date{min-width:170px}mng-table-filter .mng-filter-boolean{min-width:80px}mng-table-filter .mng-filter-lookup,mng-table-filter .mng-filter-lookupenum{min-width:180px}mng-table-filter .mng-filter-required{position:relative}mng-table-filter p-tag.mng-filter-required{border:1px solid var(--color-red-500)}mng-table-filter .mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}mng-table-filter .mng-filter-icon{color:var(--p-inputgroup-addon-color)}mng-table-filter .mng-filter-icon:hover{background:var(--p-select-filled-hover-background)}mng-table-filter .mng-filter-active *{border-color:var(--filter-active-color)!important}mng-table-filter .mng-filter-active p-inputgroup-addon,mng-table-filter .mng-filter-active input,mng-table-filter .mng-filter-active p-select,mng-table-filter .mng-filter-active p-multiselect,mng-table-filter .mng-filter-active .p-autocomplete-input-multiple{background:var(--filter-active-bg)}mng-table-filter .mng-filter-active .mng-filter-icon{color:var(--filter-active-color)}:root[class*=app-dark] mng-table-filter{--filter-active-bg: var(--p-surface-800);--filter-active-color: var(--p-surface-400)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], showFilterIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilterIcon", required: false }] }], showTitleAsPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitleAsPlaceholder", required: false }] }], icon: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }] } });
+                    ], providers: [FilterService], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex items-center\">\n    @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n    @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n    <div\n        class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n        [class.mng-filter-active]=\"filter.isActive()\"\n        [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n        [class.mng-filter-required]=\"requiredFilterMissing\">\n        @switch (config().descriptor.filterType) {\n            @case (FilterTypeEnum.Number) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-number-range\n                        vertical=\"true\"\n                        className=\"mng-filter-number\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onNumericModelChange($event)\"\n                        (keyDown)=\"onNumericInputKeyDown($event)\"\n                        [placeholder]=\"placeholder\"\n                        [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                        [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                        [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericMultiModelChange($event)\"\n                                [filterType]=\"config().descriptor.filterType\"\n                                [disabled]=\"isInputDisabled()\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                [ngModel]=\"filter.state()?.displayValue\"\n                                (ngModelChange)=\"onNumericModelChange($event)\"\n                                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                                [placeholder]=\"placeholder\"\n                                [useGrouping]=\"config().descriptor.numberUseGrouping\"\n                                [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n                                [disabled]=\"isInputDisabled()\" />\n                        }\n                    </p-inputgroup>\n                }\n            }\n\n            @case (FilterTypeEnum.Boolean) {\n                <mng-dropdown\n                    optionsLabelProperty=\"label\"\n                    optionsValueProperty=\"value\"\n                    [ngModel]=\"filter.state()?.displayValue\"\n                    [options]=\"booleanOptions\"\n                    [optionsLabelTranslate]=\"true\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"booleanFilter($event)\"\n                    [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                </mng-dropdown>\n            }\n            @case (FilterTypeEnum.Date) {\n                @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n                    <mng-date-range\n                        vertical=\"true\"\n                        [ngModel]=\"filter.state()?.displayValue\"\n                        (ngModelChange)=\"onDateFilterModelChange($event)\"\n                        [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                        [showTime]=\"config().dateConfig?.showTime ?? false\"\n                        [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n                        [dateFormat]=\"config().dateConfig?.format\"\n                        [placeholder]=\"placeholder\"\n                        [disabled]=\"isInputDisabled()\"\n                        [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n                } @else {\n                    <p-inputgroup>\n                        @if (showFilterIcon()) {\n                            <p-inputgroup-addon>\n                                <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                            </p-inputgroup-addon>\n                        }\n                        <mng-datetime-picker\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onDateFilterModelChange($event)\"\n                            [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n                            [placeholder]=\"placeholder\"\n                            showIcon=\"true\"\n                            [time]=\"config().dateConfig?.showTime ?? false\"\n                            [seconds]=\"config().dateConfig?.showSeconds ?? false\"\n                            [milliseconds]=\"config().dateConfig?.showMilliseconds ?? false\"\n                            [optimusTimePicker]=\"config().dateConfig?.optimusTimePicker ?? false\"\n                            [timeSelect]=\"config().dateConfig?.timeSelect ?? true\"\n                            [timeSelectInterval]=\"config().dateConfig?.timeSelectInterval ?? 60\"\n                            [dateFormat]=\"config().dateConfig?.format\"\n                            required=\"true\" />\n                    </p-inputgroup>\n                }\n            }\n            @case (FilterTypeEnum.Lookup) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @case (FilterTypeEnum.LookupEnum) {\n                <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n            }\n            @default {\n                <p-inputgroup>\n                    @if (showFilterIcon()) {\n                        <p-inputgroup-addon>\n                            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n                        </p-inputgroup-addon>\n                    }\n                    @if (filter.state()?.displayMatchMode === FilterMatchMode.In || filter.state()?.displayMatchMode === FilterMatchMode.NotIn) {\n                        <mng-table-filter-input-multi-value\n                            name=\"value\"\n                            [className]=\"showFilterIcon() ? 'rounded-tl-none! rounded-bl-none!' : ''\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            (ngModelChange)=\"onTextMultiModelChange($event)\"\n                            [filterType]=\"config().descriptor.filterType\"\n                            [inputTrim]=\"config().descriptor.trimOption\"\n                            [disabled]=\"isInputDisabled()\" />\n                    } @else {\n                        <input\n                            type=\"text\"\n                            pInputText\n                            class=\"mng-filter-string\"\n                            [value]=\"filter.state()?.displayValue ?? ''\"\n                            [disabled]=\"isInputDisabled()\"\n                            (input)=\"onTextModelChange($event)\"\n                            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                            [attr.placeholder]=\"placeholder\"\n                            [mngInputTrim]=\"config().descriptor.trimOption\" />\n                    }\n                </p-inputgroup>\n            }\n        }\n\n        <ng-template #lookupFilter>\n            @if (descriptorAsLookup(); as lookup) {\n                @switch (lookup.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [multiselect]=\"isMultiselect()\"\n                            [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookup.inlineSearch ?? false\"\n                            [allowInput]=\"lookup.allowInput ?? false\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"config().descriptor.trimOption\"\n                            [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            *mngRerender=\"isMultiselect()\"\n                            [ngModel]=\"filter.state()?.displayValue\"\n                            [dataProvider]=\"lookup.dataProvider\"\n                            [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                            [inlineSearch]=\"lookup.inlineSearch\"\n                            [allowInput]=\"lookup.allowInput\"\n                            [multiselect]=\"isMultiselect()\"\n                            [placeholder]=\"placeholder\"\n                            [className]=\"lookup.className\"\n                            [dropdownClassName]=\"lookup.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"isMultiselect()\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\"\n                            [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        </ng-template>\n\n        <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n        <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n            <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </ng-template>\n\n        <ng-template #iconTemplate>\n            <button\n                #icon\n                class=\"mng-filter-options mng-filter-icon cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md\"\n                (click)=\"toggleMenu($event, icon)\"\n                (keydown)=\"onToggleButtonKeyDown($event, icon)\"></button>\n        </ng-template>\n\n        <p-popover styleClass=\"p-datatable-filter-overlay mng-filter-constraint-list-overlay\" #popover>\n            <ul #popoverContent class=\"p-datatable-filter-constraint-list\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                @if (config().descriptor.filterType === FilterTypeEnum.String) {\n                    <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        (click)=\"onCaseSensitivityToggle()\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"onCaseSensitivityToggle()\">\n                        <div class=\"flex items-center\">\n                            <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n                            <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n                        </div>\n                    </li>\n                }\n                <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n                <li\n                    class=\"p-datatable-filter-constraint\"\n                    [class.p-disabled]=\"!filter.isActive()\"\n                    (click)=\"clear()\"\n                    (keydown)=\"onMatchModeKeyDown($event)\"\n                    (keydown.enter)=\"clear()\">\n                    {{ 'optimus.noFilter' | translate }}\n                </li>\n            </ul>\n        </p-popover>\n    </div>\n\n    @if (!showFilterIcon()) {\n        <button\n            #icon\n            class=\"mng-filter-options cursor-pointer ml-1\"\n            [ngClass]=\"{\n                'text-primary': filter.isActive(),\n                'text-slate-400': !filter.isActive()\n            }\"\n            (click)=\"toggleMenu($event, icon)\"\n            (keydown)=\"onToggleButtonKeyDown($event, icon)\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n    }\n</div>\n", styles: ["mng-table-filter{--filter-active-bg: var(--color-primary-50);--filter-active-color: var(--color-primary-600)}mng-table-filter .mng-filter-string{min-width:135px}mng-table-filter .mng-filter-number{min-width:165px}mng-table-filter .mng-filter-date{min-width:170px}mng-table-filter .mng-filter-boolean{min-width:80px}mng-table-filter .mng-filter-lookup,mng-table-filter .mng-filter-lookupenum{min-width:180px}mng-table-filter .mng-filter-required{position:relative}mng-table-filter p-tag.mng-filter-required{border:1px solid var(--color-red-500)}mng-table-filter .mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}mng-table-filter .mng-filter-icon{color:var(--p-inputgroup-addon-color)}mng-table-filter .mng-filter-icon:hover{background:var(--p-select-filled-hover-background)}mng-table-filter .mng-filter-active *{border-color:var(--filter-active-color)!important}mng-table-filter .mng-filter-active p-inputgroup-addon,mng-table-filter .mng-filter-active input,mng-table-filter .mng-filter-active p-select,mng-table-filter .mng-filter-active p-multiselect,mng-table-filter .mng-filter-active .p-autocomplete-input-multiple{background:var(--filter-active-bg)}mng-table-filter .mng-filter-active .mng-filter-icon{color:var(--filter-active-color)}:root[class*=app-dark] mng-table-filter{--filter-active-bg: var(--p-surface-800);--filter-active-color: var(--p-surface-400)}.mng-filter-constraint-list-overlay>.p-popover-content{padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], showFilterIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilterIcon", required: false }] }], showTitleAsPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitleAsPlaceholder", required: false }] }], icon: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], popoverContent: [{ type: i0.ViewChild, args: ['popoverContent', { isSignal: true }] }] } });
 
 var filter_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -952,16 +836,20 @@ class TableColumnValueComponent {
         this.getterPipe = new GetterPipe();
         this.templatePipe = new TemplatePipe();
         this.jsonPathPipe = new JsonPathPipe();
-        this.descriptor = input.required(...(ngDevMode ? [{ debugName: "descriptor" }] : []));
-        this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-        this.styleMaxWidth = computed(() => this.descriptor().maxWidth ?? null, ...(ngDevMode ? [{ debugName: "styleMaxWidth" }] : []));
+        this.descriptor = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptor" }] : /* istanbul ignore next */ []));
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.styleMaxWidth = computed(() => this.descriptor().maxWidth ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "styleMaxWidth" }] : /* istanbul ignore next */ []));
         this.className = computed(() => {
             let className = 'nowrap';
             if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.String && this.descriptor().isMultiline) {
                 className += ' multiline';
             }
             return className;
-        }, ...(ngDevMode ? [{ debugName: "className" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
         this.value = computed(() => {
             let value = this.jsonPathPipe.transform(this.item(), `$.${this.descriptor().property}`);
             if (typeof this.descriptor().getter === 'function') {
@@ -971,14 +859,16 @@ class TableColumnValueComponent {
                 value = this.templatePipe.transform(value, this.descriptor().template);
             }
             return value;
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.currency = computed(() => {
             if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.Currency) {
                 return this.descriptor().currencyProperty ? this.item()[this.descriptor().currencyProperty] : (this.descriptor().currencyCode ?? 'EUR');
             }
-            return;
-        }, ...(ngDevMode ? [{ debugName: "currency" }] : []));
-        this.hasCopyToClipboard = computed(() => this.descriptor().hasCopyToClipboard && this.value() != null, ...(ngDevMode ? [{ debugName: "hasCopyToClipboard" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        this.hasCopyToClipboard = computed(() => this.descriptor().hasCopyToClipboard && this.value() != null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCopyToClipboard" }] : /* istanbul ignore next */ []));
         this.componentInputs = computed(() => {
             const inputs = {
                 value: this.value(),
@@ -989,7 +879,8 @@ class TableColumnValueComponent {
                 return { ...inputs, ...this.descriptor().customComponentInputs };
             }
             return inputs;
-        }, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentInputs" }] : /* istanbul ignore next */ []));
         this.getCurrencySymbol = getCurrencySymbol;
     }
     copyToClipboard(event) {
@@ -1004,12 +895,12 @@ class TableColumnValueComponent {
         const message = this.translate.instant('mngTable.copyNotificationMessage', { value });
         this.messageService.add({ severity: 'info', summary: title, detail: message });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()", "style.max-width.px": "styleMaxWidth()" } }, ngImport: i0, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ (descriptor().numberUseGrouping ?? true) ? (value() | number: descriptor().displayFormat : descriptor().locale) : value() }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        @if (descriptor().numberUseGrouping ?? true) {\n            {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n        } @else {\n            @let currencyValue = getCurrencySymbol(currency() ?? '', descriptor().currencyDisplay === 'symbol' ? 'wide' : 'narrow', descriptor().locale);\n            {{ value() }} {{ currencyValue }}\n        }\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton type=\"button\" icon=\"pi pi-copy\" severity=\"info\" rounded=\"true\" size=\"small\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()", "style.max-width.px": "styleMaxWidth()" } }, ngImport: i0, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ (descriptor().numberUseGrouping ?? true) ? (value() | number: descriptor().displayFormat : descriptor().locale) : value() }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        @if (descriptor().numberUseGrouping ?? true) {\n            {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n        } @else {\n            @let currencyValue = getCurrencySymbol(currency() ?? '', descriptor().currencyDisplay === 'symbol' ? 'wide' : 'narrow', descriptor().locale);\n            {{ value() }} {{ currencyValue }}\n        }\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton type=\"button\" icon=\"pi pi-copy\" severity=\"info\" rounded=\"true\" size=\"small\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableColumnValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableColumnValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'className()', '[style.max-width.px]': 'styleMaxWidth()' }, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ (descriptor().numberUseGrouping ?? true) ? (value() | number: descriptor().displayFormat : descriptor().locale) : value() }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        @if (descriptor().numberUseGrouping ?? true) {\n            {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n        } @else {\n            @let currencyValue = getCurrencySymbol(currency() ?? '', descriptor().currencyDisplay === 'symbol' ? 'wide' : 'narrow', descriptor().locale);\n            {{ value() }} {{ currencyValue }}\n        }\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton type=\"button\" icon=\"pi pi-copy\" severity=\"info\" rounded=\"true\" size=\"small\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
+            args: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], host: { '[class]': 'className()', '[style.max-width.px]': 'styleMaxWidth()' }, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ (descriptor().numberUseGrouping ?? true) ? (value() | number: descriptor().displayFormat : descriptor().locale) : value() }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        @if (descriptor().numberUseGrouping ?? true) {\n            {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n        } @else {\n            @let currencyValue = getCurrencySymbol(currency() ?? '', descriptor().currencyDisplay === 'symbol' ? 'wide' : 'narrow', descriptor().locale);\n            {{ value() }} {{ currencyValue }}\n        }\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton type=\"button\" icon=\"pi pi-copy\" severity=\"info\" rounded=\"true\" size=\"small\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
         }], propDecorators: { descriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
 
 class FilterValuePipe {
@@ -1111,10 +1002,10 @@ class FilterValuePipe {
         this.subscription?.unsubscribe();
         this.subject.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FilterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mngFilterValue',
@@ -1126,18 +1017,27 @@ class TableFilterActiveTagComponent {
     constructor() {
         this.translateService = inject(TranslateService);
         this.FilterMatchMode = FilterMatchMode;
-        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
-        this.filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
+        this.model = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.filter = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
         this.edit = output();
         this.remove = output();
         this.toggleDisabled = output();
-        this.label = computed(() => this.getPropertyLabelKey(this.filter().config.descriptor), ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.matchMode = computed(() => this.filter().displayMatchMode, ...(ngDevMode ? [{ debugName: "matchMode" }] : []));
-        this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`, ...(ngDevMode ? [{ debugName: "matchModeSymbol" }] : []));
-        this.value = computed(() => this.filter().displayValue, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.isActive = computed(() => this.filter()?.matchMode === FilterMatchMode.Exists || this.filter()?.matchMode === FilterMatchMode.DoesNotExist || !isFilterValueBlank(this.value()), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-        this.menuItems = signal([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
-        this.tagMenu = viewChild.required(Menu);
+        this.label = computed(() => this.getPropertyLabelKey(this.filter().config.descriptor), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.matchMode = computed(() => this.filter().displayMatchMode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matchMode" }] : /* istanbul ignore next */ []));
+        this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matchModeSymbol" }] : /* istanbul ignore next */ []));
+        this.value = computed(() => this.filter().displayValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.isActive = computed(() => this.filter()?.matchMode === FilterMatchMode.Exists || this.filter()?.matchMode === FilterMatchMode.DoesNotExist || !isFilterValueBlank(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.menuItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.tagMenu = viewChild.required(Menu, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tagMenu" }] : /* istanbul ignore next */ []));
     }
     onRemove(event) {
         event.stopPropagation();
@@ -1197,12 +1097,12 @@ class TableFilterActiveTagComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove", toggleDisabled: "toggleDisabled" }, viewQueries: [{ propertyName: "tagMenu", first: true, predicate: Menu, descendants: true, isSignal: true }], ngImport: i0, template: "<p-tag\n    [class.opacity-70]=\"filter().disabled\"\n    severity=\"secondary\"\n    styleClass=\"mr-1 mng-tag-outlined\"\n    [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n    <div class=\"flex relative items-center gap-2 p-1 cursor-pointer\" (click)=\"openTagMenu($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <p-divider layout=\"vertical\" class=\"!p-0 !mx-[3px]\" />\n\n        @if (isActive()) {\n            <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n        }\n\n        @if (filter().disabled) {\n            <p-divider layout=\"horizontal\" class=\"!absolute left-0 !m-0 border-t opacity-50\"></p-divider>\n        }\n    </div>\n</p-tag>\n<p-menu [popup]=\"true\" [model]=\"menuItems()\" appendTo=\"body\"></p-menu>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"], dependencies: [{ kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove", toggleDisabled: "toggleDisabled" }, viewQueries: [{ propertyName: "tagMenu", first: true, predicate: Menu, descendants: true, isSignal: true }], ngImport: i0, template: "<p-tag\n    [class.opacity-70]=\"filter().disabled\"\n    severity=\"secondary\"\n    styleClass=\"mr-1 mng-tag-outlined\"\n    [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n    <div class=\"flex relative items-center gap-2 p-1 cursor-pointer\" (click)=\"openTagMenu($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <p-divider layout=\"vertical\" class=\"!p-0 !mx-[3px]\" />\n\n        @if (isActive()) {\n            <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n        }\n\n        @if (filter().disabled) {\n            <p-divider layout=\"horizontal\" class=\"!absolute left-0 !m-0 border-t opacity-50\"></p-divider>\n        }\n    </div>\n</p-tag>\n<p-menu [popup]=\"true\" [model]=\"menuItems()\" appendTo=\"body\"></p-menu>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"], dependencies: [{ kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-filter-active-tag', imports: [TranslatePipe, FilterValuePipe, AsyncPipe, Tag, Menu, Divider], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<p-tag\n    [class.opacity-70]=\"filter().disabled\"\n    severity=\"secondary\"\n    styleClass=\"mr-1 mng-tag-outlined\"\n    [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n    <div class=\"flex relative items-center gap-2 p-1 cursor-pointer\" (click)=\"openTagMenu($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <p-divider layout=\"vertical\" class=\"!p-0 !mx-[3px]\" />\n\n        @if (isActive()) {\n            <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n        }\n\n        @if (filter().disabled) {\n            <p-divider layout=\"horizontal\" class=\"!absolute left-0 !m-0 border-t opacity-50\"></p-divider>\n        }\n    </div>\n</p-tag>\n<p-menu [popup]=\"true\" [model]=\"menuItems()\" appendTo=\"body\"></p-menu>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"] }]
+            args: [{ selector: 'mng-table-filter-active-tag', imports: [TranslatePipe, FilterValuePipe, AsyncPipe, Tag, Menu, Divider], encapsulation: ViewEncapsulation.None, template: "<p-tag\n    [class.opacity-70]=\"filter().disabled\"\n    severity=\"secondary\"\n    styleClass=\"mr-1 mng-tag-outlined\"\n    [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n    <div class=\"flex relative items-center gap-2 p-1 cursor-pointer\" (click)=\"openTagMenu($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <p-divider layout=\"vertical\" class=\"!p-0 !mx-[3px]\" />\n\n        @if (isActive()) {\n            <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n        }\n\n        @if (filter().disabled) {\n            <p-divider layout=\"horizontal\" class=\"!absolute left-0 !m-0 border-t opacity-50\"></p-divider>\n        }\n    </div>\n</p-tag>\n<p-menu [popup]=\"true\" [model]=\"menuItems()\" appendTo=\"body\"></p-menu>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], edit: [{ type: i0.Output, args: ["edit"] }], remove: [{ type: i0.Output, args: ["remove"] }], toggleDisabled: [{ type: i0.Output, args: ["toggleDisabled"] }], tagMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Menu), { isSignal: true }] }] } });
 
 var filterActiveTag_component = /*#__PURE__*/Object.freeze({
@@ -1218,15 +1118,23 @@ class TableFilterFormComponent {
         this.FilterMatchMode = FilterMatchMode;
         this.elementRef = inject(ElementRef);
         this.translate = inject(TranslateService);
-        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
-        this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
-        this.genericDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericDescriptor" }] : []));
-        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
-        this.filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
-        this.overlay = input(...(ngDevMode ? [undefined, { debugName: "overlay" }] : []));
-        this.disabledProperties = input([], ...(ngDevMode ? [{ debugName: "disabledProperties" }] : []));
-        this.enableCaseSensitive = input(true, ...(ngDevMode ? [{ debugName: "enableCaseSensitive" }] : []));
-        this.propertySearch = input(false, { ...(ngDevMode ? { debugName: "propertySearch" } : {}), transform: booleanAttribute });
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+        this.metadata = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []));
+        this.genericDescriptor = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "genericDescriptor" }] : /* istanbul ignore next */ []));
+        this.model = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.filter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.overlay = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "overlay" }] : /* istanbul ignore next */ []));
+        this.disabledProperties = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledProperties" }] : /* istanbul ignore next */ []));
+        this.enableCaseSensitive = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableCaseSensitive" }] : /* istanbul ignore next */ []));
+        this.propertySearch = input(false, { ...(ngDevMode ? { debugName: "propertySearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.apply = output();
         this.propertyOptionsWithTranslations = computed(() => {
             const disabledProperties = this.disabledProperties();
@@ -1238,11 +1146,13 @@ class TableFilterFormComponent {
                     disabled: !filter && disabledProperties.includes(d.descriptor.property)
                 };
             }) ?? []);
-        }, ...(ngDevMode ? [{ debugName: "propertyOptionsWithTranslations" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "propertyOptionsWithTranslations" }] : /* istanbul ignore next */ []));
         this.selectedFilterMetadata = computed(() => {
             const property = this.propertyModel();
             return this.metadata().find(d => d.descriptor.property === property);
-        }, ...(ngDevMode ? [{ debugName: "selectedFilterMetadata" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFilterMetadata" }] : /* istanbul ignore next */ []));
         // change value lookup function to include the property name of the generic filter
         this.genericValueDataProvider = computed(() => {
             const genericValueProvider = this.genericDescriptor()?.valueLookup;
@@ -1262,8 +1172,9 @@ class TableFilterFormComponent {
                     return lookupFn(params, service, search);
                 });
             }
-            return;
-        }, ...(ngDevMode ? [{ debugName: "genericValueDataProvider" }] : []));
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "genericValueDataProvider" }] : /* istanbul ignore next */ []));
         this.selectedDescriptorAsLookup = computed(() => {
             const filterDescriptor = this.selectedFilterMetadata()?.descriptor;
             return filterDescriptor !== undefined &&
@@ -1271,18 +1182,28 @@ class TableFilterFormComponent {
                 (filterDescriptor.filterType === FilterTypeEnum.Lookup || filterDescriptor.filterType === FilterTypeEnum.LookupEnum)
                 ? filterDescriptor
                 : undefined;
-        }, ...(ngDevMode ? [{ debugName: "selectedDescriptorAsLookup" }] : []));
-        this.isEdit = computed(() => this.filter() != null, ...(ngDevMode ? [{ debugName: "isEdit" }] : []));
-        this.formSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "formSubmitted" }] : []));
-        this.formErrorMessage = signal([], ...(ngDevMode ? [{ debugName: "formErrorMessage" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDescriptorAsLookup" }] : /* istanbul ignore next */ []));
+        this.isEdit = computed(() => this.filter() != null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEdit" }] : /* istanbul ignore next */ []));
+        this.formSubmitted = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formSubmitted" }] : /* istanbul ignore next */ []));
+        this.formErrorMessage = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formErrorMessage" }] : /* istanbul ignore next */ []));
         // UI utilities
-        this.filterForm = viewChild.required('filterForm');
+        this.filterForm = viewChild.required('filterForm', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterForm" }] : /* istanbul ignore next */ []));
         // Filter form model and form utilities
-        this.propertyModel = signal(null, ...(ngDevMode ? [{ debugName: "propertyModel" }] : []));
-        this.matchModeModel = signal(null, ...(ngDevMode ? [{ debugName: "matchModeModel" }] : []));
-        this.valueModel = signal(null, ...(ngDevMode ? [{ debugName: "valueModel" }] : []));
-        this.caseSensitiveModel = signal(false, ...(ngDevMode ? [{ debugName: "caseSensitiveModel" }] : []));
-        this.isMultiselect = computed(() => this.matchModeModel() === FilterMatchMode.In || this.matchModeModel() === FilterMatchMode.NotIn, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : []));
+        this.propertyModel = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "propertyModel" }] : /* istanbul ignore next */ []));
+        this.matchModeModel = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matchModeModel" }] : /* istanbul ignore next */ []));
+        this.valueModel = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueModel" }] : /* istanbul ignore next */ []));
+        this.caseSensitiveModel = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "caseSensitiveModel" }] : /* istanbul ignore next */ []));
+        this.isMultiselect = computed(() => this.matchModeModel() === FilterMatchMode.In || this.matchModeModel() === FilterMatchMode.NotIn, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiselect" }] : /* istanbul ignore next */ []));
         this.addFilterShortcutText = isMac() ? '⌘ + /' : 'Ctrl + /';
         effectWithDeps([this.filter], ([edit]) => {
             if (edit) {
@@ -1381,10 +1302,10 @@ class TableFilterFormComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <div class=\"flex items-center gap-2\">\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n        @if (!filter()) {\n            <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n        }\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                vertical=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\" />\n                        } @else {\n                            <mng-datetime-picker\n                                name=\"value\"\n                                className=\"w-full\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                showIcon=\"true\"\n                                [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [enableCaseSensitive]=\"enableCaseSensitive()\"\n                                [(caseSensitiveModel)]=\"caseSensitiveModel\"\n                                [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-filter-string w-full\"\n                                    [class.rounded-r-none!]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"mng-filter-submit-button self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "primeTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "allowInput", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "component", type: TableFilterInputMultiValueComponent, selector: "mng-table-filter-input-multi-value", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled", "className"], outputs: ["caseSensitiveModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <div class=\"flex items-center gap-2\">\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n        @if (!filter()) {\n            <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n        }\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                vertical=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [optimusTimePicker]=\"selectedFilterMetadata()?.dateConfig?.optimusTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\" />\n                        } @else {\n                            <mng-datetime-picker\n                                name=\"value\"\n                                className=\"w-full\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                showIcon=\"true\"\n                                [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [optimusTimePicker]=\"selectedFilterMetadata()?.dateConfig?.optimusTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [enableCaseSensitive]=\"enableCaseSensitive()\"\n                                [(caseSensitiveModel)]=\"caseSensitiveModel\"\n                                [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-filter-string w-full\"\n                                    [class.rounded-r-none!]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"mng-filter-submit-button self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "optimusTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "allowInput", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "optimusTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "component", type: TableFilterInputMultiValueComponent, selector: "mng-table-filter-input-multi-value", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled", "className"], outputs: ["caseSensitiveModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-filter-form', imports: [
                         DropdownComponent,
@@ -1403,16 +1324,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         ButtonDirective,
                         DatetimePickerComponent,
                         TableFilterInputMultiValueComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], host: {
                         class: 'flex grow'
-                    }, encapsulation: ViewEncapsulation.None, template: "<div>\n    <div class=\"flex items-center gap-2\">\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n        @if (!filter()) {\n            <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n        }\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                vertical=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\" />\n                        } @else {\n                            <mng-datetime-picker\n                                name=\"value\"\n                                className=\"w-full\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                showIcon=\"true\"\n                                [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [enableCaseSensitive]=\"enableCaseSensitive()\"\n                                [(caseSensitiveModel)]=\"caseSensitiveModel\"\n                                [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-filter-string w-full\"\n                                    [class.rounded-r-none!]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"mng-filter-submit-button self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, template: "<div>\n    <div class=\"flex items-center gap-2\">\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n        @if (!filter()) {\n            <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n        }\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-filter-number\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                vertical=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [optimusTimePicker]=\"selectedFilterMetadata()?.dateConfig?.optimusTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\" />\n                        } @else {\n                            <mng-datetime-picker\n                                name=\"value\"\n                                className=\"w-full\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                showIcon=\"true\"\n                                [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n                                [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n                                [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n                                [optimusTimePicker]=\"selectedFilterMetadata()?.dateConfig?.optimusTimePicker\"\n                                [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n                                [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n                            <mng-table-filter-input-multi-value\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n                                [enableCaseSensitive]=\"enableCaseSensitive()\"\n                                [(caseSensitiveModel)]=\"caseSensitiveModel\"\n                                [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                [disabled]=\"!matchModeModel()\" />\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-filter-string w-full\"\n                                    [class.rounded-r-none!]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n                                    [allowInput]=\"lookupFilterDescriptor.allowInput ?? false\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"mng-filter-submit-button self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: true }] }], genericDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "genericDescriptor", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], disabledProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledProperties", required: false }] }], enableCaseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCaseSensitive", required: false }] }], propertySearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertySearch", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], filterForm: [{ type: i0.ViewChild, args: ['filterForm', { isSignal: true }] }] } });
 
 class ADataListMetaService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListMetaService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ADataListMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ADataListMetaService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListMetaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ADataListMetaService, decorators: [{
             type: Injectable
         }] });
 
@@ -1421,12 +1342,13 @@ const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATUR
 class TableHeaderWithFiltersTemplateDirective extends TemplateDirective {
     constructor() {
         super(...arguments);
-        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: TableHeaderWithFiltersTemplateDirective, isStandalone: true, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: TableHeaderWithFiltersTemplateDirective, isStandalone: true, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mngTableHeaderWithFiltersTemplate]'
@@ -1440,27 +1362,42 @@ class TableHeaderWithFiltersComponent {
         this.tableData = inject((ADataListService));
         this.tableMetadata = inject(ADataListMetaService);
         this.tableConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
-        this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
-        this.genericFilterDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericFilterDescriptor" }] : []));
-        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
-        this.enableSearch = input(false, { ...(ngDevMode ? { debugName: "enableSearch" } : {}), transform: booleanAttribute });
-        this.search = input(...(ngDevMode ? [undefined, { debugName: "search" }] : []));
-        this.searchLimitWordMax = input(undefined, ...(ngDevMode ? [{ debugName: "searchLimitWordMax" }] : []));
-        this.enableCaseSensitive = input(true, { ...(ngDevMode ? { debugName: "enableCaseSensitive" } : {}), transform: booleanAttribute });
-        this.filterMenuItems = signal([], ...(ngDevMode ? [{ debugName: "filterMenuItems" }] : []));
-        this.filterOverlay = viewChild.required(Popover);
-        this.filterFormComponent = viewChild(TableFilterFormComponent, ...(ngDevMode ? [{ debugName: "filterFormComponent" }] : []));
-        this.templates = contentChildren(TableHeaderWithFiltersTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
-        this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'), ...(ngDevMode ? [{ debugName: "titleTemplate" }] : []));
-        this.titleRowRightTemplate = computed(() => findTemplateByName([...this.templates()], 'titleRowRight'), ...(ngDevMode ? [{ debugName: "titleRowRightTemplate" }] : []));
+        this.metadata = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []));
+        this.genericFilterDescriptor = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "genericFilterDescriptor" }] : /* istanbul ignore next */ []));
+        this.model = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.enableSearch = input(false, { ...(ngDevMode ? { debugName: "enableSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.search = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "search" }] : /* istanbul ignore next */ []));
+        this.searchLimitWordMax = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchLimitWordMax" }] : /* istanbul ignore next */ []));
+        this.enableCaseSensitive = input(true, { ...(ngDevMode ? { debugName: "enableCaseSensitive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.filterMenuItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterMenuItems" }] : /* istanbul ignore next */ []));
+        this.filterOverlay = viewChild.required(Popover, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterOverlay" }] : /* istanbul ignore next */ []));
+        this.filterFormComponent = viewChild(TableFilterFormComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterFormComponent" }] : /* istanbul ignore next */ []));
+        this.templates = contentChildren(TableHeaderWithFiltersTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+        this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
+        this.titleRowRightTemplate = computed(() => findTemplateByName([...this.templates()], 'titleRowRight'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleRowRightTemplate" }] : /* istanbul ignore next */ []));
         this.overlayFormMetadata = computed(() => this.metadata().filter(f => (f.descriptor.displayType == null && FilterDisplayTypeEnum.OverlayWithTag === this.tableMetadata.defaultFilterDisplayType()) ||
-            f.descriptor.displayType === FilterDisplayTypeEnum.OverlayWithTag), ...(ngDevMode ? [{ debugName: "overlayFormMetadata" }] : []));
+            f.descriptor.displayType === FilterDisplayTypeEnum.OverlayWithTag), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayFormMetadata" }] : /* istanbul ignore next */ []));
         this.directInputMetadata = computed(() => this.metadata().filter(f => (f.descriptor.displayType == null && FilterDisplayTypeEnum.DirectInput === this.tableMetadata.defaultFilterDisplayType()) ||
-            f.descriptor.displayType === FilterDisplayTypeEnum.DirectInput), ...(ngDevMode ? [{ debugName: "directInputMetadata" }] : []));
+            f.descriptor.displayType === FilterDisplayTypeEnum.DirectInput), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "directInputMetadata" }] : /* istanbul ignore next */ []));
         this.overlayFormFilters = computed(() => {
             return this.getInitialFilters(this.tableData.filterStates(), this.overlayFormMetadata());
-        }, ...(ngDevMode ? [{ debugName: "overlayFormFilters" }] : []));
-        this.showOverlayFilterFormButton = computed(() => this.overlayFormMetadata().length > 0, ...(ngDevMode ? [{ debugName: "showOverlayFilterFormButton" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayFormFilters" }] : /* istanbul ignore next */ []));
+        this.showOverlayFilterFormButton = computed(() => this.overlayFormMetadata().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showOverlayFilterFormButton" }] : /* istanbul ignore next */ []));
         this.activeFilters = computed(() => {
             const filterEntry = this.overlayFormFilters();
             return this.overlayFormMetadata()
@@ -1474,9 +1411,12 @@ class TableHeaderWithFiltersComponent {
                         (filter.value !== undefined && filter.displayValue !== undefined)));
             })
                 .map(d => filterEntry[d.descriptor.property]);
-        }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : []));
-        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.config.descriptor.property), ...(ngDevMode ? [{ debugName: "activeFilterProperties" }] : []));
-        this.filterEdit = signal(undefined, ...(ngDevMode ? [{ debugName: "filterEdit" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.config.descriptor.property), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeFilterProperties" }] : /* istanbul ignore next */ []));
+        this.filterEdit = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterEdit" }] : /* istanbul ignore next */ []));
         this.unsetRequiredFilters = computed(() => {
             const activeFilters = this.activeFilters().map(el => el.config.descriptor.property);
             return this.overlayFormMetadata()
@@ -1488,28 +1428,37 @@ class TableHeaderWithFiltersComponent {
                     config: el
                 };
             });
-        }, ...(ngDevMode ? [{ debugName: "unsetRequiredFilters" }] : []));
-        this.allActiveFiltersDisabled = computed(() => this.activeFilters().filter(f => f.disabled).length === this.activeFilters().length, ...(ngDevMode ? [{ debugName: "allActiveFiltersDisabled" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unsetRequiredFilters" }] : /* istanbul ignore next */ []));
+        this.allActiveFiltersDisabled = computed(() => this.activeFilters().filter(f => f.disabled).length === this.activeFilters().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allActiveFiltersDisabled" }] : /* istanbul ignore next */ []));
         this.addFilterShortcutText = isMac() ? '⌘ + /' : 'Ctrl + /';
         // global search model
-        this.searchValue = computed(() => this.search()?.value, ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
-        this.searchCaseSensitive = computed(() => this.search()?.caseSensitive, ...(ngDevMode ? [{ debugName: "searchCaseSensitive" }] : []));
-        this.searchWordLimitMaxError = signal(false, ...(ngDevMode ? [{ debugName: "searchWordLimitMaxError" }] : []));
+        this.searchValue = computed(() => this.search()?.value, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+        this.searchCaseSensitive = computed(() => this.search()?.caseSensitive, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchCaseSensitive" }] : /* istanbul ignore next */ []));
+        this.searchWordLimitMaxError = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchWordLimitMaxError" }] : /* istanbul ignore next */ []));
         this.searchWordLimitMaxCmp = computed(() => {
             const inputLimit = this.searchLimitWordMax();
             if (inputLimit !== undefined) {
                 return inputLimit;
             }
             return this.tableConfig?.searchLimitMaxWords !== undefined ? this.tableConfig?.searchLimitMaxWords : TableHeaderWithFiltersComponent.SEARCH_WORD_LIMIT_MAX;
-        }, ...(ngDevMode ? [{ debugName: "searchWordLimitMaxCmp" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchWordLimitMaxCmp" }] : /* istanbul ignore next */ []));
         this.searchValueSubject = new BehaviorSubject(undefined);
         this.searchCaseSensitiveSubject = new BehaviorSubject(undefined);
         // UI utilities
         this.clickedOnFilterEvent = undefined;
-        this.filterSplitButton = viewChild.required('filterSplitButton');
-        this.searchInput = viewChild.required('searchInput');
+        this.filterSplitButton = viewChild.required('filterSplitButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterSplitButton" }] : /* istanbul ignore next */ []));
+        this.searchInput = viewChild.required('searchInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
         this.elementRef = inject(ElementRef);
-        this.isInsideOverlay = signal(false, ...(ngDevMode ? [{ debugName: "isInsideOverlay" }] : []));
+        this.isInsideOverlay = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInsideOverlay" }] : /* istanbul ignore next */ []));
         this.overlaySelectors = [
             '.p-dialog',
             '.p-overlaypanel',
@@ -1653,7 +1602,6 @@ class TableHeaderWithFiltersComponent {
                 }
                 this.clickedOnFilterEvent = undefined;
             }, 0);
-            return;
         }
         else {
             // clean state
@@ -1707,10 +1655,15 @@ class TableHeaderWithFiltersComponent {
         // match mode needs to be set for inline search
         this.tableData.updateSearch(searchQuery != null ? { value: searchQuery, caseSensitive: caseSensitive } : undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableHeaderWithFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableHeaderWithFiltersComponent, isStandalone: true, selector: "mng-table-header-with-filters", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:keydown": "filterShortcuts($event)" } }, queries: [{ propertyName: "templates", predicate: TableHeaderWithFiltersTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }, { propertyName: "filterSplitButton", first: true, predicate: ["filterSplitButton"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow flex-wrap\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showOverlayFilterFormButton()) {\n        <p-splitbutton\n            #filterSplitButton\n            [label]=\"'mngFilter.titleAdd' | translate\"\n            [severity]=\"'secondary'\"\n            (onClick)=\"onFilterAdd($event)\"\n            [class]=\"'mng-filter-add-button mr-2' + (titleTemplate() ? ' ml-3' : '')\"\n            (onMenuShow)=\"onFilterSplitButtonShow()\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.titleAdd' | translate) + ' ( ' + addFilterShortcutText + ' )'\"\n            icon=\"pi pi-filter\"\n            [model]=\"filterMenuItems()\">\n        </p-splitbutton>\n    }\n    @if (enableSearch()) {\n        @let shouldShowShortcut = !isInsideOverlay();\n        <div\n            class=\"mng-search mr-3\"\n            [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.search.input' | translate) + (shouldShowShortcut ? ' ( / )' : '')\">\n            <span class=\"p-input-icon-left w-full\">\n                <p-iconfield>\n                    <p-inputicon class=\"pi pi-search\" />\n                    <input\n                        #searchInput\n                        [ngModel]=\"searchValue()\"\n                        (ngModelChange)=\"onSearchChange($event)\"\n                        (keydown.enter)=\"onSearchSubmit($event)\"\n                        name=\"globalSearch\"\n                        type=\"text\"\n                        pInputText\n                        class=\"search-input w-full\"\n                        [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                        [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                        [placeholder]=\"'mngFilter.search.input' | translate\" />\n                    @if (shouldShowShortcut) {\n                        <span class=\"search-shortcut-hint\">/</span>\n                    }\n                </p-iconfield>\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n    @if (directInputMetadata().length > 0) {\n        <div class=\"mng-direct-input-filters flex flex-wrap items-center my-1\">\n            @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n                @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n                    @defer (on idle) {\n                        <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n                    }\n                } @else if (metadata.descriptor.customComponentType) {\n                    <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n                }\n            }\n        </div>\n    }\n    @if (titleRowRightTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n    }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n    <div class=\"flex items-center flex-wrap mt-2\">\n        @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n        @for (filter of activeFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n    </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    @defer (on viewport) {\n        <mng-table-filter-form\n            [model]=\"model()\"\n            [metadata]=\"overlayFormMetadata()\"\n            [genericDescriptor]=\"genericFilterDescriptor()\"\n            [filter]=\"filterEdit()\"\n            [disabledProperties]=\"activeFilterProperties()\"\n            [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n            [overlay]=\"op\"\n            [enableCaseSensitive]=\"enableCaseSensitive()\"\n            (apply)=\"onFilterFormApply($event)\" />\n    } @placeholder {\n        <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n    }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}.search-shortcut-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.5;transition:opacity .15s}.search-input:not(:placeholder-shown)~.search-shortcut-hint,.search-input:focus~.search-shortcut-hint{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [TableFilterFormComponent]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableHeaderWithFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableHeaderWithFiltersComponent, isStandalone: true, selector: "mng-table-header-with-filters", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:keydown": "filterShortcuts($event)" } }, queries: [{ propertyName: "templates", predicate: TableHeaderWithFiltersTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }, { propertyName: "filterSplitButton", first: true, predicate: ["filterSplitButton"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow flex-wrap\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showOverlayFilterFormButton()) {\n        <p-splitbutton\n            #filterSplitButton\n            [label]=\"'mngFilter.titleAdd' | translate\"\n            [severity]=\"'secondary'\"\n            (onClick)=\"onFilterAdd($event)\"\n            [class]=\"'mng-filter-add-button mr-2' + (titleTemplate() ? ' ml-3' : '')\"\n            (onMenuShow)=\"onFilterSplitButtonShow()\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.titleAdd' | translate) + ' ( ' + addFilterShortcutText + ' )'\"\n            icon=\"pi pi-filter\"\n            [model]=\"filterMenuItems()\">\n        </p-splitbutton>\n    }\n    @if (enableSearch()) {\n        @let shouldShowShortcut = !isInsideOverlay();\n        <div\n            class=\"mng-search mr-3\"\n            [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.search.input' | translate) + (shouldShowShortcut ? ' ( / )' : '')\">\n            <span class=\"p-input-icon-left w-full\">\n                <p-iconfield>\n                    <p-inputicon class=\"pi pi-search\" />\n                    <input\n                        #searchInput\n                        [ngModel]=\"searchValue()\"\n                        (ngModelChange)=\"onSearchChange($event)\"\n                        (keydown.enter)=\"onSearchSubmit($event)\"\n                        name=\"globalSearch\"\n                        type=\"text\"\n                        pInputText\n                        class=\"search-input w-full\"\n                        [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                        [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                        [placeholder]=\"'mngFilter.search.input' | translate\" />\n                    @if (shouldShowShortcut) {\n                        <span class=\"search-shortcut-hint\">/</span>\n                    }\n                </p-iconfield>\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n    @if (directInputMetadata().length > 0) {\n        <div class=\"mng-direct-input-filters flex flex-wrap items-center my-1\">\n            @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n                @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n                    @defer (on idle) {\n                        <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n                    }\n                } @else if (metadata.descriptor.customComponentType) {\n                    <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n                }\n            }\n        </div>\n    }\n    @if (titleRowRightTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n    }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n    <div class=\"flex items-center flex-wrap mt-2\">\n        @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n        @for (filter of activeFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n    </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    @defer (on viewport) {\n        <mng-table-filter-form\n            [model]=\"model()\"\n            [metadata]=\"overlayFormMetadata()\"\n            [genericDescriptor]=\"genericFilterDescriptor()\"\n            [filter]=\"filterEdit()\"\n            [disabledProperties]=\"activeFilterProperties()\"\n            [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n            [overlay]=\"op\"\n            [enableCaseSensitive]=\"enableCaseSensitive()\"\n            (apply)=\"onFilterFormApply($event)\" />\n    } @placeholder {\n        <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n    }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}.search-shortcut-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.5;transition:opacity .15s}.search-input:not(:placeholder-shown)~.search-shortcut-hint,.search-input:focus~.search-shortcut-hint{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], deferBlockDependencies: [() => [/* @ts-ignore */
+                Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], () => [/* @ts-ignore */
+                Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [/* @ts-ignore */
+                Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [TableFilterFormComponent]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ngImport: i0, type: TableHeaderWithFiltersComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent), Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], resolveMetadata: (TableFilterComponent, TableFilterActiveTagComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: TableHeaderWithFiltersComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent), /* @ts-ignore */
+        Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], resolveMetadata: (TableFilterComponent, TableFilterActiveTagComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'mng-table-header-with-filters', imports: [
                             TranslatePipe,
@@ -1730,7 +1683,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ng
                             Skeleton,
                             SplitButton,
                             Tooltip
-                        ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center grow flex-wrap\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showOverlayFilterFormButton()) {\n        <p-splitbutton\n            #filterSplitButton\n            [label]=\"'mngFilter.titleAdd' | translate\"\n            [severity]=\"'secondary'\"\n            (onClick)=\"onFilterAdd($event)\"\n            [class]=\"'mng-filter-add-button mr-2' + (titleTemplate() ? ' ml-3' : '')\"\n            (onMenuShow)=\"onFilterSplitButtonShow()\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.titleAdd' | translate) + ' ( ' + addFilterShortcutText + ' )'\"\n            icon=\"pi pi-filter\"\n            [model]=\"filterMenuItems()\">\n        </p-splitbutton>\n    }\n    @if (enableSearch()) {\n        @let shouldShowShortcut = !isInsideOverlay();\n        <div\n            class=\"mng-search mr-3\"\n            [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.search.input' | translate) + (shouldShowShortcut ? ' ( / )' : '')\">\n            <span class=\"p-input-icon-left w-full\">\n                <p-iconfield>\n                    <p-inputicon class=\"pi pi-search\" />\n                    <input\n                        #searchInput\n                        [ngModel]=\"searchValue()\"\n                        (ngModelChange)=\"onSearchChange($event)\"\n                        (keydown.enter)=\"onSearchSubmit($event)\"\n                        name=\"globalSearch\"\n                        type=\"text\"\n                        pInputText\n                        class=\"search-input w-full\"\n                        [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                        [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                        [placeholder]=\"'mngFilter.search.input' | translate\" />\n                    @if (shouldShowShortcut) {\n                        <span class=\"search-shortcut-hint\">/</span>\n                    }\n                </p-iconfield>\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n    @if (directInputMetadata().length > 0) {\n        <div class=\"mng-direct-input-filters flex flex-wrap items-center my-1\">\n            @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n                @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n                    @defer (on idle) {\n                        <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n                    }\n                } @else if (metadata.descriptor.customComponentType) {\n                    <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n                }\n            }\n        </div>\n    }\n    @if (titleRowRightTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n    }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n    <div class=\"flex items-center flex-wrap mt-2\">\n        @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n        @for (filter of activeFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n    </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    @defer (on viewport) {\n        <mng-table-filter-form\n            [model]=\"model()\"\n            [metadata]=\"overlayFormMetadata()\"\n            [genericDescriptor]=\"genericFilterDescriptor()\"\n            [filter]=\"filterEdit()\"\n            [disabledProperties]=\"activeFilterProperties()\"\n            [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n            [overlay]=\"op\"\n            [enableCaseSensitive]=\"enableCaseSensitive()\"\n            (apply)=\"onFilterFormApply($event)\" />\n    } @placeholder {\n        <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n    }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}.search-shortcut-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.5;transition:opacity .15s}.search-input:not(:placeholder-shown)~.search-shortcut-hint,.search-input:focus~.search-shortcut-hint{opacity:0;pointer-events:none}\n"] }]
+                        ], template: "<div class=\"flex items-center grow flex-wrap\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showOverlayFilterFormButton()) {\n        <p-splitbutton\n            #filterSplitButton\n            [label]=\"'mngFilter.titleAdd' | translate\"\n            [severity]=\"'secondary'\"\n            (onClick)=\"onFilterAdd($event)\"\n            [class]=\"'mng-filter-add-button mr-2' + (titleTemplate() ? ' ml-3' : '')\"\n            (onMenuShow)=\"onFilterSplitButtonShow()\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.titleAdd' | translate) + ' ( ' + addFilterShortcutText + ' )'\"\n            icon=\"pi pi-filter\"\n            [model]=\"filterMenuItems()\">\n        </p-splitbutton>\n    }\n    @if (enableSearch()) {\n        @let shouldShowShortcut = !isInsideOverlay();\n        <div\n            class=\"mng-search mr-3\"\n            [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\"\n            showDelay=\"500\"\n            [pTooltip]=\"('mngFilter.search.input' | translate) + (shouldShowShortcut ? ' ( / )' : '')\">\n            <span class=\"p-input-icon-left w-full\">\n                <p-iconfield>\n                    <p-inputicon class=\"pi pi-search\" />\n                    <input\n                        #searchInput\n                        [ngModel]=\"searchValue()\"\n                        (ngModelChange)=\"onSearchChange($event)\"\n                        (keydown.enter)=\"onSearchSubmit($event)\"\n                        name=\"globalSearch\"\n                        type=\"text\"\n                        pInputText\n                        class=\"search-input w-full\"\n                        [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                        [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                        [placeholder]=\"'mngFilter.search.input' | translate\" />\n                    @if (shouldShowShortcut) {\n                        <span class=\"search-shortcut-hint\">/</span>\n                    }\n                </p-iconfield>\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n    @if (directInputMetadata().length > 0) {\n        <div class=\"mng-direct-input-filters flex flex-wrap items-center my-1\">\n            @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n                @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n                    @defer (on idle) {\n                        <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n                    }\n                } @else if (metadata.descriptor.customComponentType) {\n                    <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n                }\n            }\n        </div>\n    }\n    @if (titleRowRightTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n    }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n    <div class=\"flex items-center flex-wrap mt-2\">\n        @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n        @for (filter of activeFilters(); track filter.config.descriptor.property) {\n            @defer (on viewport) {\n                <mng-table-filter-active-tag\n                    [model]=\"model()\"\n                    [filter]=\"filter\"\n                    (edit)=\"onFilterEdit($event)\"\n                    (remove)=\"onFilterRemove($event)\"\n                    (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n            } @placeholder {\n                <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n            }\n        }\n    </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    @defer (on viewport) {\n        <mng-table-filter-form\n            [model]=\"model()\"\n            [metadata]=\"overlayFormMetadata()\"\n            [genericDescriptor]=\"genericFilterDescriptor()\"\n            [filter]=\"filterEdit()\"\n            [disabledProperties]=\"activeFilterProperties()\"\n            [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n            [overlay]=\"op\"\n            [enableCaseSensitive]=\"enableCaseSensitive()\"\n            (apply)=\"onFilterFormApply($event)\" />\n    } @placeholder {\n        <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n    }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}.search-shortcut-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.5;transition:opacity .15s}.search-input:not(:placeholder-shown)~.search-shortcut-hint,.search-input:focus~.search-shortcut-hint{opacity:0;pointer-events:none}\n"] }]
             }], ctorParameters: () => [], propDecorators: { metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: true }] }], genericFilterDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "genericFilterDescriptor", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchLimitWordMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLimitWordMax", required: false }] }], enableCaseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCaseSensitive", required: false }] }], filterOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Popover), { isSignal: true }] }], filterFormComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TableFilterFormComponent), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableHeaderWithFiltersTemplateDirective), { isSignal: true }] }], filterSplitButton: [{ type: i0.ViewChild, args: ['filterSplitButton', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], filterShortcuts: [{
                     type: HostListener,
                     args: ['window:keydown', ['$event']]
@@ -1762,11 +1715,11 @@ function tableNotificationError(translate, messageService, table, error) {
  * @return {Record<string, FilterState>} A mapping of filter keys to their corresponding filter states, constructed from the provided parameters or defaults.
  */
 function tableCreateFilterState(paramsWithDefaults) {
-    const primeFilterMeta = {};
+    const optimusFilterMeta = {};
     // if any filter is present, no default filters should be applied!
     if (paramsWithDefaults?.filters) {
         Object.entries(paramsWithDefaults.filters).forEach(([key, value]) => {
-            primeFilterMeta[key] = {
+            optimusFilterMeta[key] = {
                 value: value?.value,
                 matchMode: value?.matchMode,
                 caseSensitive: value?.caseSensitive,
@@ -1774,7 +1727,7 @@ function tableCreateFilterState(paramsWithDefaults) {
             };
         });
     }
-    return primeFilterMeta;
+    return optimusFilterMeta;
 }
 /**
  * Creates a sort state for a data table based on the provided parameters.
@@ -1807,10 +1760,10 @@ class LocaleDefaultRowClassPipe {
         }
         return value ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mngLocaleDefaultRowClass',
@@ -1828,10 +1781,10 @@ class TableFilterClassPipe {
             return strValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: TableFilterClassPipe, isStandalone: true, name: "mngTableFilterClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: TableFilterClassPipe, isStandalone: true, name: "mngTableFilterClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableFilterClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     pure: true,
@@ -1842,7 +1795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class TableMetadataService extends ADataListMetaService {
     static { this.cmpTypeName = 'TableComponent'; }
     #injector;
-    #primeConfig;
+    #optimusConfig;
     #tableModuleConfig;
     #translationObserver;
     // signal sources
@@ -1859,19 +1812,24 @@ class TableMetadataService extends ADataListMetaService {
     constructor() {
         super();
         this.#injector = inject(Injector);
-        this.#primeConfig = inject(PrimeNG);
+        this.#optimusConfig = inject(Optimus);
         this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
         this.#tableModuleConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
         this.serializationCfg = {};
-        this.#translationObserver = toSignal(this.#primeConfig.translationObserver);
+        this.#translationObserver = toSignal(this.#optimusConfig.translationObserver);
         // signal sources
-        this.#signalSources = signal({}, ...(ngDevMode ? [{ debugName: "#signalSources" }] : []));
+        this.#signalSources = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#signalSources" }] : /* istanbul ignore next */ []));
         // config
-        this.tableConfig = computed(() => ({ ...this.#tableModuleConfig, ...this.#signalSources().featureConfig?.() }), ...(ngDevMode ? [{ debugName: "tableConfig" }] : []));
-        this.defaultFilterDisplayType = computed(() => this.tableConfig()?.filterDisplayType ?? FilterDisplayTypeEnum.OverlayWithTag, ...(ngDevMode ? [{ debugName: "defaultFilterDisplayType" }] : []));
+        this.tableConfig = computed(() => ({ ...this.#tableModuleConfig, ...this.#signalSources().featureConfig?.() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
+        this.defaultFilterDisplayType = computed(() => this.tableConfig()?.filterDisplayType ?? FilterDisplayTypeEnum.OverlayWithTag, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultFilterDisplayType" }] : /* istanbul ignore next */ []));
         // descriptors
-        this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : []));
-        this.#descriptor = signal(tableDescriptor(), ...(ngDevMode ? [{ debugName: "#descriptor" }] : []));
+        this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : /* istanbul ignore next */ []));
+        this.#descriptor = signal(tableDescriptor(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#descriptor" }] : /* istanbul ignore next */ []));
         this.descriptor = this.#descriptor.asReadonly();
         // eslint-disable-next-line no-unused-private-class-members
         this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
@@ -1888,7 +1846,8 @@ class TableMetadataService extends ADataListMetaService {
             else {
                 return [25, 50, 100];
             }
-        }, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
         this.defaultRowsPerPage = computed(() => {
             const defaultNumRows = this.descriptor().defaultNumRows ?? this.tableConfig().defaultNumRows;
             const rowsPerPageOptions = this.rowsPerPageOptions();
@@ -1896,20 +1855,27 @@ class TableMetadataService extends ADataListMetaService {
                 return defaultNumRows;
             }
             return rowsPerPageOptions[0];
-        }, ...(ngDevMode ? [{ debugName: "defaultRowsPerPage" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultRowsPerPage" }] : /* istanbul ignore next */ []));
         // filters
-        this.filterDescriptors = computed(() => this.descriptor().filters, ...(ngDevMode ? [{ debugName: "filterDescriptors" }] : []));
+        this.filterDescriptors = computed(() => this.descriptor().filters, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterDescriptors" }] : /* istanbul ignore next */ []));
         this.filters = computed(() => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars,sonarjs/no-dead-store
             const observer = this.#translationObserver(); // need this one to track language changes
             return this.filterDescriptors().map(d => this.mapFilterDescriptorToConfig(d));
-        }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
-        this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : []));
-        this.#genericFilters = signal([], ...(ngDevMode ? [{ debugName: "#genericFilters" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+        this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : /* istanbul ignore next */ []));
+        this.#genericFilters = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#genericFilters" }] : /* istanbul ignore next */ []));
         this.genericFilters = this.#genericFilters.asReadonly();
         // search
-        this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : []));
-        this.#searchFields = signal([], ...(ngDevMode ? [{ debugName: "#searchFields" }] : []));
+        this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : /* istanbul ignore next */ []));
+        this.#searchFields = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#searchFields" }] : /* istanbul ignore next */ []));
         this.searchFields = this.#searchFields.asReadonly();
         // eslint-disable-next-line no-unused-private-class-members
         this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
@@ -1939,7 +1905,8 @@ class TableMetadataService extends ADataListMetaService {
                 };
             });
             return params;
-        }, ...(ngDevMode ? [{ debugName: "defaultParams" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultParams" }] : /* istanbul ignore next */ []));
         filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
         combineLatest([toObservable(this.genericFilterDescriptor), toObservable(this.#translationObserver)])
             .pipe(switchMap(([genericFilterDescriptor]) => {
@@ -1967,7 +1934,7 @@ class TableMetadataService extends ADataListMetaService {
         }
     }
     mapFilterDescriptorToConfig(descriptor) {
-        const matchModes = filterGenerateMatchModeOptions(this.#primeConfig, descriptor, this.serializationCfg);
+        const matchModes = filterGenerateMatchModeOptions(this.#optimusConfig, descriptor, this.serializationCfg);
         return {
             descriptor: descriptor,
             matchModes: matchModes,
@@ -1976,10 +1943,10 @@ class TableMetadataService extends ADataListMetaService {
             numberConfig: filterGetNumberConfig(descriptor)
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableMetadataService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableMetadataService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1988,7 +1955,7 @@ class TableDataService extends ADataListService {
     #destroyRef;
     #commons;
     #metadata;
-    #primeTable;
+    #optimusTable;
     // signal sources
     #dataSources;
     // data sources
@@ -2019,7 +1986,7 @@ class TableDataService extends ADataListService {
     #count;
     #loading;
     // eslint-disable-next-line no-unused-private-class-members
-    #syncPrimeTableFirstEffect;
+    #syncOptimusTableFirstEffect;
     constructor() {
         super();
         this.#injector = inject(Injector);
@@ -2027,9 +1994,11 @@ class TableDataService extends ADataListService {
         this.#commons = inject(CommonsService);
         this.#metadata = inject(TableMetadataService);
         // signal sources
-        this.#dataSources = signal({}, ...(ngDevMode ? [{ debugName: "#dataSources" }] : []));
+        this.#dataSources = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#dataSources" }] : /* istanbul ignore next */ []));
         // data sources
-        this.#manualLoading = computed(() => this.#dataSources()?.manualLoading?.(), ...(ngDevMode ? [{ debugName: "#manualLoading" }] : []));
+        this.#manualLoading = computed(() => this.#dataSources()?.manualLoading?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#manualLoading" }] : /* istanbul ignore next */ []));
         // results that are set directly via input and are not result of a asynchronous operation (aka data provider)
         this.#synchronousResult = computed(() => {
             const dataSources = this.#dataSources();
@@ -2043,12 +2012,15 @@ class TableDataService extends ADataListService {
                 return { data: dataSources.arrayItems(), totalCount: dataSources.arrayItems()?.length ?? 0 };
             }
             return undefined;
-        }, ...(ngDevMode ? [{ debugName: "#synchronousResult" }] : []));
-        this.#dataProvider = computed(() => this.#dataSources()?.dataProvider?.(), ...(ngDevMode ? [{ debugName: "#dataProvider" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#synchronousResult" }] : /* istanbul ignore next */ []));
+        this.#dataProvider = computed(() => this.#dataSources()?.dataProvider?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#dataProvider" }] : /* istanbul ignore next */ []));
         this.#dataProviderService = computed(() => {
             const dataProvider = this.#dataProvider();
             return dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
-        }, ...(ngDevMode ? [{ debugName: "#dataProviderService" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#dataProviderService" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line no-unused-private-class-members
         this.#synchronousResultEffect = effectWithDeps([this.#synchronousResult], ([res]) => {
             if (res != null) {
@@ -2069,32 +2041,39 @@ class TableDataService extends ADataListService {
         });
         this.#destroyed = false;
         // pagination
-        this.#params = signal(undefined, ...(ngDevMode ? [{ debugName: "#params" }] : []));
+        this.#params = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#params" }] : /* istanbul ignore next */ []));
         this.params = this.#params.asReadonly();
-        this.#sortStates = signal(undefined, ...(ngDevMode ? [{ debugName: "#sortStates" }] : []));
+        this.#sortStates = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#sortStates" }] : /* istanbul ignore next */ []));
         this.sortStates = this.#sortStates.asReadonly();
-        this.#filterStates = signal({}, ...(ngDevMode ? [{ debugName: "#filterStates" }] : []));
+        this.#filterStates = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#filterStates" }] : /* istanbul ignore next */ []));
         this.filterStates = this.#filterStates.asReadonly();
-        this.primeFilterStates = computed(() => {
+        this.optimusFilterStates = computed(() => {
             const filterStates = this.#filterStates();
             const searchState = this.#searchState();
-            const primeFilterStates = { ...filterStates };
+            const optimusFilterStates = { ...filterStates };
             if (searchState != null) {
-                primeFilterStates['global'] = { ...searchState, matchMode: 'contains' };
+                optimusFilterStates['global'] = { ...searchState, matchMode: 'contains' };
             }
-            return primeFilterStates;
-        }, ...(ngDevMode ? [{ debugName: "primeFilterStates" }] : []));
-        this.#isSortAndFilterMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSortAndFilterMetaInitialized" }] : []));
+            return optimusFilterStates;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optimusFilterStates" }] : /* istanbul ignore next */ []));
+        this.#isSortAndFilterMetaInitialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isSortAndFilterMetaInitialized" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line no-unused-private-class-members
         this.#defaultParamsEffect = effectWithDeps([this.#metadata.defaultParams], ([defaultParams]) => {
             this.#sortStates.set(tableCreateSortState(defaultParams));
             this.#filterStates.set(tableCreateFilterState(defaultParams));
             this.#isSortAndFilterMetaInitialized.set(true);
         }, { firstOnly: true });
-        this.#isSearchMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSearchMetaInitialized" }] : []));
-        this.#searchState = signal(undefined, ...(ngDevMode ? [{ debugName: "#searchState" }] : []));
+        this.#isSearchMetaInitialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isSearchMetaInitialized" }] : /* istanbul ignore next */ []));
+        this.#searchState = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#searchState" }] : /* istanbul ignore next */ []));
         this.searchState = this.#searchState.asReadonly();
-        this.isAllPaginationMetaInitialized = computed(() => this.#isSortAndFilterMetaInitialized() && this.#isSortAndFilterMetaInitialized(), ...(ngDevMode ? [{ debugName: "isAllPaginationMetaInitialized" }] : []));
+        this.isAllPaginationMetaInitialized = this.#isSortAndFilterMetaInitialized.asReadonly();
         this.paginationMode = computed(() => {
             const descriptor = this.#metadata.descriptor();
             if (descriptor.paginationMode != null) {
@@ -2108,25 +2087,32 @@ class TableDataService extends ADataListService {
             else {
                 return TablePaginationModeEnum.None;
             }
-        }, ...(ngDevMode ? [{ debugName: "paginationMode" }] : []));
-        this.offset = computed(() => this.params()?.offset ?? 0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginationMode" }] : /* istanbul ignore next */ []));
+        this.offset = computed(() => this.params()?.offset ?? 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
         this.rows = computed(() => {
             const params = this.params();
             if (params?.limit) {
                 return params.limit;
             }
             return this.#metadata.defaultRowsPerPage();
-        }, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
         // data
-        this.#data = signal([], ...(ngDevMode ? [{ debugName: "#data" }] : []));
+        this.#data = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#data" }] : /* istanbul ignore next */ []));
         this.data = this.#data.asReadonly();
-        this.#count = signal(0, ...(ngDevMode ? [{ debugName: "#count" }] : []));
+        this.#count = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#count" }] : /* istanbul ignore next */ []));
         this.count = this.#count.asReadonly();
-        this.#loading = signal(false, ...(ngDevMode ? [{ debugName: "#loading" }] : []));
+        this.#loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#loading" }] : /* istanbul ignore next */ []));
         this.loading = this.#loading.asReadonly();
-        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        this.selectedItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line no-unused-private-class-members
-        this.#syncPrimeTableFirstEffect = effectWithDeps([this.#data, this.primeFilterStates, this.params], () => this.#syncPrimeTableFirst());
+        this.#syncOptimusTableFirstEffect = effectWithDeps([this.#data, this.optimusFilterStates, this.params], () => this.#syncOptimusTableFirst());
         this.#destroyRef.onDestroy(() => {
             this.#destroyed = true;
             this.#dataProviderSubscription?.unsubscribe();
@@ -2135,14 +2121,15 @@ class TableDataService extends ADataListService {
     setDataSources(arrayItems, dataListResult, dataProvider, manualLoading) {
         this.#dataSources.set({ arrayItems, dataListResult, dataProvider, manualLoading });
     }
-    setPrimeTable(cmp) {
-        this.#primeTable = cmp;
-        this.#syncPrimeTableFirst();
+    setOptimusTable(cmp) {
+        this.#optimusTable = cmp;
+        this.#syncOptimusTableFirst();
     }
     fetchWithDataProvider(paramsList, onErrorFn) {
         // remove disabled filters from fetch
         const params = {
             ...paramsList,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             filters: paramsList.filters ? Object.fromEntries(Object.entries(paramsList.filters).filter(([_, f]) => !f?.disabled)) : undefined
         };
         const dataProvider = this.#dataProvider();
@@ -2186,9 +2173,9 @@ class TableDataService extends ADataListService {
         }
     }
     /**
-     * Updates primeNG component with new filters and triggers data reload (if lazy load) or inline filtering.ž
+     * Updates the Optimus UI component with new filters and triggers data reload (if lazy load) or inline filtering.
      * Usually setting the params should trigger the cycle to load data and calculate other states (sort, filter, search, etc.) from params.
-     * In case of PrimeNG's inline filtering, the internal primeNG state must be updated first and the states must subsequently be updated via callback functions.
+     * In case of Optimus UI inline filtering, the internal state must be updated first and the states must subsequently be updated via callback functions.
      *
      * @param filters - { [fieldName]: FilterState | undefined } where:
      *   - fieldName = column field identifier
@@ -2196,18 +2183,18 @@ class TableDataService extends ADataListService {
      *   - undefined = clears filter for that field
      */
     updateFilters(filters) {
-        if (!this.#primeTable)
+        if (!this.#optimusTable)
             return;
         for (const key of Object.keys(filters)) {
-            this.#primeTable.filters[key] = { ...filters[key] };
+            this.#optimusTable.filters[key] = { ...filters[key] };
         }
-        this.#primeTable._filter();
+        this.#optimusTable._filter();
     }
     updateSearch(search) {
-        if (!this.#primeTable)
+        if (!this.#optimusTable)
             return;
-        this.#primeTable.filters['global'] = { ...search, matchMode: 'contains' };
-        this.#primeTable._filter();
+        this.#optimusTable.filters['global'] = { ...search, matchMode: 'contains' };
+        this.#optimusTable._filter();
     }
     /**
      * Compare the given params with the stored params in the DataListService.
@@ -2227,32 +2214,32 @@ class TableDataService extends ADataListService {
     #lastFilterStateKey;
     #lastSearchKey;
     /**
-     * PrimeNG resets the paginator to the first page whenever the client-side filter state is applied
+     * Optimus UI resets the paginator to the first page whenever the client-side filter state is applied
      * to the table (see `Table._filter`). When that happens after the params have already been set
      * (e.g. an offset from url query params on an eagerly loaded table with preset filters), the
-     * requested page would be lost - re-assert the current params offset onto the prime table once
+     * requested page would be lost - re-assert the current params offset onto the optimus table once
      * the ongoing change detection cycle (and therefore the filter application) has settled.
      */
-    #syncPrimeTableFirst() {
-        if (!this.#isPrimeTableFirstSyncable()) {
+    #syncOptimusTableFirst() {
+        if (!this.#isOptimusTableFirstSyncable()) {
             return;
         }
         queueMicrotask(() => {
-            const primeTable = this.#primeTable;
-            if (!primeTable || !this.#isPrimeTableFirstSyncable()) {
+            const optimusTable = this.#optimusTable;
+            if (!optimusTable || !this.#isOptimusTableFirstSyncable()) {
                 return;
             }
-            if (primeTable.first !== this.offset()) {
-                primeTable.first = this.offset();
-                primeTable.cd.detectChanges();
+            if (optimusTable.first !== this.offset()) {
+                optimusTable.first = this.offset();
+                optimusTable.cd.detectChanges();
             }
         });
     }
-    #isPrimeTableFirstSyncable() {
-        const primeTable = this.#primeTable;
+    #isOptimusTableFirstSyncable() {
+        const optimusTable = this.#optimusTable;
         // only non-lazy paginated tables with an active filter state are affected by the reset -
         // everywhere else the [first] binding alone keeps the table and the params in sync
-        return !this.#destroyed && !!primeTable && !primeTable.lazy && !!primeTable.paginator && Object.keys(this.primeFilterStates()).length > 0;
+        return !this.#destroyed && !!optimusTable && !optimusTable.lazy && !!optimusTable.paginator && Object.keys(this.optimusFilterStates()).length > 0;
     }
     /**
      * Returns true when the filter state changed since the last data provider load.
@@ -2291,10 +2278,10 @@ class TableDataService extends ADataListService {
             this.selectedItems.set(reconciled);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableDataService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableDataService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableDataService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2316,17 +2303,21 @@ class TablePreferencesService {
         this.localstorageKey = computed(() => {
             const descriptor = this.#metadata.descriptor();
             return descriptor.model.i18nBaseKey ? generateTableLayoutPrefsKey(descriptor.model.i18nBaseKey, this.#router.url, descriptor.identifier) : null;
-        }, ...(ngDevMode ? [{ debugName: "localstorageKey" }] : []));
-        this.#layoutPrefsSaveCnt = signal(0, ...(ngDevMode ? [{ debugName: "#layoutPrefsSaveCnt" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "localstorageKey" }] : /* istanbul ignore next */ []));
+        this.#layoutPrefsSaveCnt = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#layoutPrefsSaveCnt" }] : /* istanbul ignore next */ []));
         this.layoutPreferences = computed(() => {
             const lsKey = this.localstorageKey();
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars,sonarjs/no-dead-store
             const cnt = this.#layoutPrefsSaveCnt(); // needed to force updates on user changes
             const layoutPrefs = lsKey ? this.#storageService.getItem(TableMetadataService.cmpTypeName, lsKey) : undefined;
             return layoutPrefs ?? { columnWidths: {} };
-        }, ...(ngDevMode ? [{ debugName: "layoutPreferences" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layoutPreferences" }] : /* istanbul ignore next */ []));
         // columns
-        this.columnsWithPrefs = computed(() => this.#computeColumnsWithLayout(), ...(ngDevMode ? [{ debugName: "columnsWithPrefs" }] : []));
+        this.columnsWithPrefs = computed(() => this.#computeColumnsWithLayout(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnsWithPrefs" }] : /* istanbul ignore next */ []));
     }
     #router;
     #storageService;
@@ -2438,10 +2429,10 @@ class TablePreferencesService {
         }
         return columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TablePreferencesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TablePreferencesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TablePreferencesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TablePreferencesService, decorators: [{
             type: Injectable
         }] });
 
@@ -2521,10 +2512,10 @@ class TableRemovableSortDirective {
         }
         return multiSortMeta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableRemovableSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: TableRemovableSortDirective, isStandalone: true, selector: "[mngRemovableSort]", outputs: { sortChange: "sortChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableRemovableSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: TableRemovableSortDirective, isStandalone: true, selector: "[mngRemovableSort]", outputs: { sortChange: "sortChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableRemovableSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableRemovableSortDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mngRemovableSort]'
@@ -2534,16 +2525,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class TableTemplateDirective extends TemplateDirective {
     constructor() {
         super(...arguments);
-        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     }
     // narrow the type of the context using the generic type of the directive.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: TableTemplateDirective, isStandalone: true, selector: "[mngTableTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: TableTemplateDirective, isStandalone: true, selector: "[mngTableTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mngTableTemplate]'
@@ -2566,21 +2559,28 @@ class TableComponent {
         this.prefs = inject(TablePreferencesService);
         this.data = inject((TableDataService));
         // descriptor
-        this.descriptorInput = input.required({ ...(ngDevMode ? { debugName: "descriptorInput" } : {}), alias: 'descriptor' });
+        this.descriptorInput = input.required({ ...(ngDevMode ? { debugName: "descriptorInput" } : /* istanbul ignore next */ {}), alias: 'descriptor' });
         // data source inputs
-        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
-        this.result = input(...(ngDevMode ? [undefined, { debugName: "result" }] : []));
-        this.loadingInput = input(undefined, { ...(ngDevMode ? { debugName: "loadingInput" } : {}), alias: 'loading', transform: booleanOrUndefinedAttribute });
-        this.dataProvider = input(...(ngDevMode ? [undefined, { debugName: "dataProvider" }] : []));
+        this.items = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+        this.result = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "result" }] : /* istanbul ignore next */ []));
+        this.loadingInput = input(undefined, { ...(ngDevMode ? { debugName: "loadingInput" } : /* istanbul ignore next */ {}), alias: 'loading', transform: booleanOrUndefinedAttribute });
+        this.dataProvider = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dataProvider" }] : /* istanbul ignore next */ []));
         // extra features input
-        this.queryParamPrepend = input(...(ngDevMode ? [undefined, { debugName: "queryParamPrepend" }] : []));
-        this.useQueryParams = input(false, { ...(ngDevMode ? { debugName: "useQueryParams" } : {}), transform: booleanAttribute });
-        this.filterKeyPrepend = computed(() => 'f_' + (this.useQueryParams() ? (this.queryParamPrepend() ?? '') : ''), ...(ngDevMode ? [{ debugName: "filterKeyPrepend" }] : []));
-        this.cellClickEnabled = input(true, { ...(ngDevMode ? { debugName: "cellClickEnabled" } : {}), transform: booleanAttribute });
-        this.selectionMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
-        this.selectionEnabled = input(false, { ...(ngDevMode ? { debugName: "selectionEnabled" } : {}), transform: booleanAttribute });
-        this.rowReorderEnabledInput = input(true, { ...(ngDevMode ? { debugName: "rowReorderEnabledInput" } : {}), alias: 'rowReorderEnabled', transform: booleanAttribute });
-        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable, ...(ngDevMode ? [{ debugName: "rowReorderEnabled" }] : []));
+        this.queryParamPrepend = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "queryParamPrepend" }] : /* istanbul ignore next */ []));
+        this.useQueryParams = input(false, { ...(ngDevMode ? { debugName: "useQueryParams" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.filterKeyPrepend = computed(() => 'f_' + (this.useQueryParams() ? (this.queryParamPrepend() ?? '') : ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterKeyPrepend" }] : /* istanbul ignore next */ []));
+        this.cellClickEnabled = input(true, { ...(ngDevMode ? { debugName: "cellClickEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.selectionMode = input('multiple', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        this.selectionEnabled = input(false, { ...(ngDevMode ? { debugName: "selectionEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rowReorderEnabledInput = input(true, { ...(ngDevMode ? { debugName: "rowReorderEnabledInput" } : /* istanbul ignore next */ {}), alias: 'rowReorderEnabled', transform: booleanAttribute });
+        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowReorderEnabled" }] : /* istanbul ignore next */ []));
         this.expandedRowKeys = computed(() => {
             const descriptor = this.metadata.descriptor();
             if (typeof descriptor.isRowExpanded === 'string') {
@@ -2596,19 +2596,27 @@ class TableComponent {
                 }, {});
             }
             return {};
-        }, ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : []));
-        this.featureConfig = input(undefined, ...(ngDevMode ? [{ debugName: "featureConfig" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : /* istanbul ignore next */ []));
+        this.featureConfig = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "featureConfig" }] : /* istanbul ignore next */ []));
         // styling
-        this.columnLastMinWidth = input(...(ngDevMode ? [undefined, { debugName: "columnLastMinWidth" }] : []));
-        this.columnsColspan = computed(() => this.visibleColumns().length + (this.hasLastColumn() ? 1 : 0) + (this.selectionEnabled() ? 1 : 0) + (this.rowReorderEnabled() ? 1 : 0), ...(ngDevMode ? [{ debugName: "columnsColspan" }] : []));
-        this.hasTitleDisplay = computed(() => this.headerTitleTemplate() || this.metadata.descriptor().title, ...(ngDevMode ? [{ debugName: "hasTitleDisplay" }] : []));
-        this.isCaptionVisible = computed(() => this.headerTemplate() || this.hasTitleDisplay() || this.tableHeaderFilters().length > 0 || this.metadata.descriptor().search, ...(ngDevMode ? [{ debugName: "isCaptionVisible" }] : []));
+        this.columnLastMinWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "columnLastMinWidth" }] : /* istanbul ignore next */ []));
+        this.columnsColspan = computed(() => this.visibleColumns().length + (this.hasLastColumn() ? 1 : 0) + (this.selectionEnabled() ? 1 : 0) + (this.rowReorderEnabled() ? 1 : 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnsColspan" }] : /* istanbul ignore next */ []));
+        this.hasTitleDisplay = computed(() => this.headerTitleTemplate() || this.metadata.descriptor().title, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTitleDisplay" }] : /* istanbul ignore next */ []));
+        this.isCaptionVisible = computed(() => this.headerTemplate() || this.hasTitleDisplay() || this.tableHeaderFilters().length > 0 || this.metadata.descriptor().search, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCaptionVisible" }] : /* istanbul ignore next */ []));
         // component inputs
-        this.globalFilterFieldsInput = input(undefined, { ...(ngDevMode ? { debugName: "globalFilterFieldsInput" } : {}), alias: 'globalFilterFields' });
+        this.globalFilterFieldsInput = input(undefined, { ...(ngDevMode ? { debugName: "globalFilterFieldsInput" } : /* istanbul ignore next */ {}), alias: 'globalFilterFields' });
         // cell click
         this.cellClickSubject = new Subject();
-        this.isCellClickObserved = signal(this.cellClickSubject.observed, ...(ngDevMode ? [{ debugName: "isCellClickObserved" }] : []));
-        this.isCellClickEnabled = computed(() => this.cellClickEnabled() && this.isCellClickObserved(), ...(ngDevMode ? [{ debugName: "isCellClickEnabled" }] : []));
+        this.isCellClickObserved = signal(this.cellClickSubject.observed, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCellClickObserved" }] : /* istanbul ignore next */ []));
+        this.isCellClickEnabled = computed(() => this.cellClickEnabled() && this.isCellClickObserved(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCellClickEnabled" }] : /* istanbul ignore next */ []));
         // event outputs
         this.tableLoad = output();
         this.cellClick = outputFromObservable(this.cellClickSubject);
@@ -2618,23 +2626,38 @@ class TableComponent {
         this.searchChange = output();
         this.sortChange = output();
         // content and view queries
-        this.templates = input([], ...(ngDevMode ? [{ debugName: "templates" }] : []));
-        this.contentTemplates = contentChildren(TableTemplateDirective, ...(ngDevMode ? [{ debugName: "contentTemplates" }] : []));
-        this.primeTable = viewChild((Table), ...(ngDevMode ? [{ debugName: "primeTable" }] : []));
-        this.rowSelectCheckboxes = viewChildren(TableCheckbox, ...(ngDevMode ? [{ debugName: "rowSelectCheckboxes" }] : []));
-        this.rowSelectRadioButtons = viewChildren(TableRadioButton, ...(ngDevMode ? [{ debugName: "rowSelectRadioButtons" }] : []));
+        this.templates = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+        this.contentTemplates = contentChildren(TableTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplates" }] : /* istanbul ignore next */ []));
+        this.optimusTable = viewChild((Table), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optimusTable" }] : /* istanbul ignore next */ []));
+        this.rowSelectCheckboxes = viewChildren(TableCheckbox, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowSelectCheckboxes" }] : /* istanbul ignore next */ []));
+        this.rowSelectRadioButtons = viewChildren(TableRadioButton, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowSelectRadioButtons" }] : /* istanbul ignore next */ []));
         // templates
-        this.#templatesMerged = computed(() => [...this.contentTemplates(), ...this.templates()], ...(ngDevMode ? [{ debugName: "#templatesMerged" }] : []));
-        this.headerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
-        this.headerTitleTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'headerTitle'), ...(ngDevMode ? [{ debugName: "headerTitleTemplate" }] : []));
-        this.titleRowRightTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'headerTitleRowRight'), ...(ngDevMode ? [{ debugName: "titleRowRightTemplate" }] : []));
-        this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'columnCustomLast'), ...(ngDevMode ? [{ debugName: "columnCustomLastTemplate" }] : []));
-        this.footerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
-        this.rowExpandTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'rowExpandContent'), ...(ngDevMode ? [{ debugName: "rowExpandTemplate" }] : []));
-        this.columnHeaderTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'columnHeader'), ...(ngDevMode ? [{ debugName: "columnHeaderTemplate" }] : []));
+        this.#templatesMerged = computed(() => [...this.contentTemplates(), ...this.templates()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#templatesMerged" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'header'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.headerTitleTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'headerTitle'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTitleTemplate" }] : /* istanbul ignore next */ []));
+        this.titleRowRightTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'headerTitleRowRight'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleRowRightTemplate" }] : /* istanbul ignore next */ []));
+        this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'columnCustomLast'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnCustomLastTemplate" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'footer'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+        this.rowExpandTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'rowExpandContent'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowExpandTemplate" }] : /* istanbul ignore next */ []));
+        this.columnHeaderTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'columnHeader'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnHeaderTemplate" }] : /* istanbul ignore next */ []));
         // data provider and items
-        this.isLazy = computed(() => this.dataProvider()?.isLazy === true, ...(ngDevMode ? [{ debugName: "isLazy" }] : []));
-        this.isPagination = computed(() => this.data.paginationMode() === TablePaginationModeEnum.Pagination, ...(ngDevMode ? [{ debugName: "isPagination" }] : []));
+        this.isLazy = computed(() => this.dataProvider()?.isLazy === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLazy" }] : /* istanbul ignore next */ []));
+        this.isPagination = computed(() => this.data.paginationMode() === TablePaginationModeEnum.Pagination, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPagination" }] : /* istanbul ignore next */ []));
         // visual
         this.className = computed(() => {
             let className = this.metadata.descriptor().className ?? '';
@@ -2651,17 +2674,22 @@ class TableComponent {
                 className += ' p-datatable-gridlines';
             }
             return className;
-        }, ...(ngDevMode ? [{ debugName: "className" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
         // columns
-        this.visibleColumns = computed(() => this.prefs.columnsWithPrefs().filter(col => col.isVisible), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
-        this.areColumnsReorderable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isReorderable ?? this.metadata.tableConfig()?.columnReorder), ...(ngDevMode ? [{ debugName: "areColumnsReorderable" }] : []));
-        this.areColumnsToggleable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isToggleable ?? this.metadata.tableConfig()?.columnVisibilityToggle), ...(ngDevMode ? [{ debugName: "areColumnsToggleable" }] : []));
+        this.visibleColumns = computed(() => this.prefs.columnsWithPrefs().filter(col => col.isVisible), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        this.areColumnsReorderable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isReorderable ?? this.metadata.tableConfig()?.columnReorder), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "areColumnsReorderable" }] : /* istanbul ignore next */ []));
+        this.areColumnsToggleable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isToggleable ?? this.metadata.tableConfig()?.columnVisibilityToggle), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "areColumnsToggleable" }] : /* istanbul ignore next */ []));
         // filter, sort
         this.hasColumnFilters = computed(() => {
             const defaultFilterDisplayType = this.metadata.defaultFilterDisplayType();
             return ((defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag && this.metadata.filterDescriptors().some(d => d.displayType === FilterDisplayTypeEnum.Column)) ||
                 (defaultFilterDisplayType === FilterDisplayTypeEnum.Column && this.metadata.filterDescriptors().some(d => d.displayType == null)));
-        }, ...(ngDevMode ? [{ debugName: "hasColumnFilters" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasColumnFilters" }] : /* istanbul ignore next */ []));
         this.tableHeaderFilters = computed(() => {
             // statically defined filters AND generic filters
             const defaultFilterDisplayType = this.metadata.defaultFilterDisplayType();
@@ -2670,7 +2698,8 @@ class TableComponent {
                 .filter(d => (d.descriptor.displayType == null && [FilterDisplayTypeEnum.OverlayWithTag, FilterDisplayTypeEnum.DirectInput].includes(defaultFilterDisplayType)) ||
                 (d.descriptor.displayType != null && [FilterDisplayTypeEnum.OverlayWithTag, FilterDisplayTypeEnum.DirectInput].includes(d.descriptor.displayType)));
             return filters.concat(this.metadata.genericFilters());
-        }, ...(ngDevMode ? [{ debugName: "tableHeaderFilters" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableHeaderFilters" }] : /* istanbul ignore next */ []));
         this.requiredFiltersMissing = computed(() => {
             const paramsWithDefaults = this.data.params() ?? this.metadata.defaultParams();
             const requiredFilters = this.metadata
@@ -2683,12 +2712,14 @@ class TableComponent {
                     filter.matchMode === undefined ||
                     (!['exists', 'doesNotExist'].includes(filter.matchMode) && isFilterValueBlank(filter.value)));
             });
-        }, ...(ngDevMode ? [{ debugName: "requiredFiltersMissing" }] : []));
-        this.hasLastColumn = computed(() => this.columnCustomLastTemplate() || this.areColumnsToggleable() || this.areColumnsReorderable(), ...(ngDevMode ? [{ debugName: "hasLastColumn" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredFiltersMissing" }] : /* istanbul ignore next */ []));
+        this.hasLastColumn = computed(() => this.columnCustomLastTemplate() || this.areColumnsToggleable() || this.areColumnsReorderable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasLastColumn" }] : /* istanbul ignore next */ []));
         // other
         this.navigationOutOfTableInProgress = false;
         this.navigationInTableInProgress = false;
-        effectWithDeps([this.primeTable], ([table]) => this.data.setPrimeTable(table));
+        effectWithDeps([this.optimusTable], ([table]) => this.data.setOptimusTable(table));
         effectWithDeps([this.dataProvider], ([dataProvider]) => {
             if (dataProvider?.isLazy === false) {
                 this.loadTableWithDataProvider(this.metadata.defaultParams());
@@ -2730,6 +2761,7 @@ class TableComponent {
         this.data.setDataSources(this.items, this.result, this.dataProvider, this.loadingInput);
     }
     reload(emitEvent) {
+        // eslint-disable-next-line sonarjs/no-nested-conditional
         const params = emitEvent?.params ? emitEvent?.params : emitEvent?.resetParams ? undefined : this.lastParamsWithDefaults;
         const reloadParams = mergeDataListParamsWithDefaults(params ?? {}, this.metadata.defaultParams());
         this.loadTableWithDataProvider(reloadParams, emitEvent?.emitEvent ?? false);
@@ -2869,7 +2901,7 @@ class TableComponent {
     }
     #navigateWithNewParams(params) {
         if (!this.navigationOutOfTableInProgress && !this.navigationInTableInProgress) {
-            // this check is necessary: from some reason, primeNG commits one last lazy load event whenever any angular router navigation occurs
+            // this check is necessary: from some reason, Optimus UI commits one last lazy load event whenever any angular router navigation occurs
             this.navigationInTableInProgress = true;
             const queryParamPrepend = this.queryParamPrepend();
             const newParams = dataListParamsToUrlQuery(params, this.metadata.defaultParams(), {
@@ -2909,16 +2941,20 @@ class TableComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, queryParamPrepend: { classPropertyName: "queryParamPrepend", publicName: "queryParamPrepend", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, featureConfig: { classPropertyName: "featureConfig", publicName: "featureConfig", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", rowReorder: "rowReorder", filterChange: "filterChange", searchChange: "searchChange", sortChange: "sortChange" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, queryParamPrepend: { classPropertyName: "queryParamPrepend", publicName: "queryParamPrepend", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, featureConfig: { classPropertyName: "featureConfig", publicName: "featureConfig", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", rowReorder: "rowReorder", filterChange: "filterChange", searchChange: "searchChange", sortChange: "sortChange" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [
             TableMetadataService,
             TableDataService,
             { provide: ADataListService, useExisting: TableDataService },
             { provide: ADataListMetaService, useExisting: TableMetadataService },
             TablePreferencesService
-        ], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: (Table), descendants: true, isSignal: true }, { propertyName: "rowSelectCheckboxes", predicate: TableCheckbox, descendants: true, isSignal: true }, { propertyName: "rowSelectRadioButtons", predicate: TableRadioButton, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortStates()\"\n            [filters]=\"data.primeFilterStates()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"data.selectedItems()\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns ?? metadata.tableConfig().columnResize ?? false\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (sortChange)=\"onTableSort($event)\"\n            (onPage)=\"onTablePage($event)\"\n            (onRowReorder)=\"onRowReorder($event)\"\n            mngRemovableSort>\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (headerTemplate()) {\n                            <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                        } @else {\n                            <mng-table-header-with-filters\n                                [metadata]=\"tableHeaderFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchState()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n                                        @if (headerTitleTemplate()) {\n                                            <ng-container\n                                                *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                                        } @else if (metadata.descriptor().title) {\n                                            <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                                        }\n                                    </ng-template>\n                                }\n                                @if (titleRowRightTemplate()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n                                        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-header-with-filters>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    <div class=\"flex justify-between items-center\">\n                                        {{\n                                            (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                                ? col.descriptor.title\n                                                : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                            ) | translate\n                                        }}\n                                        <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                    </div>\n                                }\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                }\n                            </ng-template>\n                            @if (col.reorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last text-right!\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n                                    @defer (on idle) {\n                                        <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n                                    }\n                                } @else if (col.filter && col.filter.descriptor.customComponentType) {\n                                    <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    (click)=\"onRowClick($event, item)\"\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    size=\"small\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end text-right!\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        columnCustomLastTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        rowExpandTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #loadingbody>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton width=\"100%\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template #emptymessage>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        @if (requiredFiltersMissing()) {\n                            <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n                        } @else {\n                            {{ 'mngTable.noItems' | translate }}\n                        }\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: TableHeaderWithFiltersComponent, selector: "mng-table-header-with-filters", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: TableRemovableSortDirective, selector: "[mngRemovableSort]", outputs: ["sortChange"] }, { kind: "directive", type: TableHeaderWithFiltersTemplateDirective, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: ["name"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "pipe", type: TableFilterClassPipe, name: "mngTableFilterClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import('./mediusinc-mng-commons-table-column-toggle.component-BS5xvoDR.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "optimusTable", first: true, predicate: (Table), descendants: true, isSignal: true }, { propertyName: "rowSelectCheckboxes", predicate: TableCheckbox, descendants: true, isSignal: true }, { propertyName: "rowSelectRadioButtons", predicate: TableRadioButton, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortStates()\"\n            [filters]=\"data.optimusFilterStates()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"data.selectedItems()\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns ?? metadata.tableConfig().columnResize ?? false\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (sortChange)=\"onTableSort($event)\"\n            (onPage)=\"onTablePage($event)\"\n            (onRowReorder)=\"onRowReorder($event)\"\n            mngRemovableSort>\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (headerTemplate()) {\n                            <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                        } @else {\n                            <mng-table-header-with-filters\n                                [metadata]=\"tableHeaderFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchState()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n                                        @if (headerTitleTemplate()) {\n                                            <ng-container\n                                                *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                                        } @else if (metadata.descriptor().title) {\n                                            <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                                        }\n                                    </ng-template>\n                                }\n                                @if (titleRowRightTemplate()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n                                        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-header-with-filters>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    <div class=\"flex justify-between items-center\">\n                                        {{\n                                            (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                                ? col.descriptor.title\n                                                : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                            ) | translate\n                                        }}\n                                        <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                    </div>\n                                }\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                }\n                            </ng-template>\n                            @if (col.reorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last text-right!\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n                                    @defer (on idle) {\n                                        <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n                                    }\n                                } @else if (col.filter && col.filter.descriptor.customComponentType) {\n                                    <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    (click)=\"onRowClick($event, item)\"\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    size=\"small\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end text-right!\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        columnCustomLastTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        rowExpandTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #loadingbody>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton width=\"100%\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template #emptymessage>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        @if (requiredFiltersMissing()) {\n                            <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n                        } @else {\n                            {{ 'mngTable.noItems' | translate }}\n                        }\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: TableHeaderWithFiltersComponent, selector: "mng-table-header-with-filters", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: TableRemovableSortDirective, selector: "[mngRemovableSort]", outputs: ["sortChange"] }, { kind: "directive", type: TableHeaderWithFiltersTemplateDirective, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: ["name"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "pipe", type: TableFilterClassPipe, name: "mngTableFilterClass" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [/* @ts-ignore */
+                import('./mediusinc-mng-commons-table-column-toggle.component-BHIzrUZz.mjs').then(m => m.TableColumnToggleComponent)], () => [/* @ts-ignore */
+                Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [import('./mediusinc-mng-commons-table-column-toggle.component-BS5xvoDR.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], resolveMetadata: (TableColumnToggleComponent, TableFilterComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./mediusinc-mng-commons-table-column-toggle.component-BHIzrUZz.mjs').then(m => m.TableColumnToggleComponent), /* @ts-ignore */
+        Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], resolveMetadata: (TableColumnToggleComponent, TableFilterComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'mng-table', imports: [
                             ComponentDirective,
@@ -2947,8 +2983,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ng
                             TablePreferencesService
                         ], host: {
                             '[class.mng-table-no-header]': '!isCaptionVisible()'
-                        }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortStates()\"\n            [filters]=\"data.primeFilterStates()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"data.selectedItems()\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns ?? metadata.tableConfig().columnResize ?? false\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (sortChange)=\"onTableSort($event)\"\n            (onPage)=\"onTablePage($event)\"\n            (onRowReorder)=\"onRowReorder($event)\"\n            mngRemovableSort>\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (headerTemplate()) {\n                            <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                        } @else {\n                            <mng-table-header-with-filters\n                                [metadata]=\"tableHeaderFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchState()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n                                        @if (headerTitleTemplate()) {\n                                            <ng-container\n                                                *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                                        } @else if (metadata.descriptor().title) {\n                                            <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                                        }\n                                    </ng-template>\n                                }\n                                @if (titleRowRightTemplate()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n                                        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-header-with-filters>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    <div class=\"flex justify-between items-center\">\n                                        {{\n                                            (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                                ? col.descriptor.title\n                                                : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                            ) | translate\n                                        }}\n                                        <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                    </div>\n                                }\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                }\n                            </ng-template>\n                            @if (col.reorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last text-right!\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n                                    @defer (on idle) {\n                                        <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n                                    }\n                                } @else if (col.filter && col.filter.descriptor.customComponentType) {\n                                    <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    (click)=\"onRowClick($event, item)\"\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    size=\"small\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end text-right!\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        columnCustomLastTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        rowExpandTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #loadingbody>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton width=\"100%\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template #emptymessage>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        @if (requiredFiltersMissing()) {\n                            <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n                        } @else {\n                            {{ 'mngTable.noItems' | translate }}\n                        }\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"] }]
-            }], ctorParameters: () => [], propDecorators: { descriptorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], queryParamPrepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamPrepend", required: false }] }], useQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "useQueryParams", required: false }] }], cellClickEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClickEnabled", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabled", required: false }] }], rowReorderEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorderEnabled", required: false }] }], featureConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureConfig", required: false }] }], columnLastMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnLastMinWidth", required: false }] }], globalFilterFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], tableLoad: [{ type: i0.Output, args: ["tableLoad"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableTemplateDirective), { isSignal: true }] }], primeTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Table), { isSignal: true }] }], rowSelectCheckboxes: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TableCheckbox), { isSignal: true }] }], rowSelectRadioButtons: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TableRadioButton), { isSignal: true }] }] } }) });
+                        }, encapsulation: ViewEncapsulation.None, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortStates()\"\n            [filters]=\"data.optimusFilterStates()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"data.selectedItems()\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns ?? metadata.tableConfig().columnResize ?? false\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (sortChange)=\"onTableSort($event)\"\n            (onPage)=\"onTablePage($event)\"\n            (onRowReorder)=\"onRowReorder($event)\"\n            mngRemovableSort>\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (headerTemplate()) {\n                            <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                        } @else {\n                            <mng-table-header-with-filters\n                                [metadata]=\"tableHeaderFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchState()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n                                        @if (headerTitleTemplate()) {\n                                            <ng-container\n                                                *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                                        } @else if (metadata.descriptor().title) {\n                                            <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                                        }\n                                    </ng-template>\n                                }\n                                @if (titleRowRightTemplate()) {\n                                    <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n                                        <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-header-with-filters>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    <div class=\"flex justify-between items-center\">\n                                        {{\n                                            (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                                ? col.descriptor.title\n                                                : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                            ) | translate\n                                        }}\n                                        <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                    </div>\n                                }\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                @if (columnHeaderTemplate()) {\n                                    <ng-container\n                                        *ngTemplateOutlet=\"\n                                            columnHeaderTemplate();\n                                            context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n                                        \"></ng-container>\n                                } @else {\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                }\n                            </ng-template>\n                            @if (col.reorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last text-right!\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n                                    @defer (on idle) {\n                                        <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n                                    }\n                                } @else if (col.filter && col.filter.descriptor.customComponentType) {\n                                    <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    (click)=\"onRowClick($event, item)\"\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton (click)=\"$event.stopPropagation()\" [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    size=\"small\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end text-right!\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        columnCustomLastTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        rowExpandTemplate();\n                                        context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n                                    \"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #loadingbody>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton width=\"100%\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template #emptymessage>\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        @if (requiredFiltersMissing()) {\n                            <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n                        } @else {\n                            {{ 'mngTable.noItems' | translate }}\n                        }\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"] }]
+            }], ctorParameters: () => [], propDecorators: { descriptorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], queryParamPrepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamPrepend", required: false }] }], useQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "useQueryParams", required: false }] }], cellClickEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClickEnabled", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabled", required: false }] }], rowReorderEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorderEnabled", required: false }] }], featureConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureConfig", required: false }] }], columnLastMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnLastMinWidth", required: false }] }], globalFilterFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], tableLoad: [{ type: i0.Output, args: ["tableLoad"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableTemplateDirective), { isSignal: true }] }], optimusTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Table), { isSignal: true }] }], rowSelectCheckboxes: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TableCheckbox), { isSignal: true }] }], rowSelectRadioButtons: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TableRadioButton), { isSignal: true }] }] } }) });
 
 /**
  * Prepares providers for usage of the tableview functionalities.
@@ -2986,5 +3022,5 @@ function provideTableChild(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADataListService as A, ADataListMetaService as B, TableDataService as C, COMMONS_TABLE_FEATURE_CONFIG_IT as D, withTable as E, FilterService as F, provideTableChild as G, LocaleDefaultRowClassPipe as L, TableMetadataService as T, TablePreferencesService as a, TableFilterComponent as b, TableColumnValueComponent as c, TableFilterActiveTagComponent as d, TableFilterFormComponent as e, TableHeaderWithFiltersComponent as f, TableHeaderWithFiltersTemplateDirective as g, TableComponent as h, TableTemplateDirective as i, filterGenerateMatchModeOptions as j, filterGetDefaultMatchMode as k, filterSetStateOnChange as l, filterSetStateOnDisplayChange as m, filterAreDatesEqual as n, filterApplySerializationConfigToCmp as o, filterAdjustDisplayValueOnMatchModeChange as p, filterGetDateConfig as q, filterGetNumberConfig as r, createFilterDescriptorsFromGeneric as s, isFilterValueBlank as t, tableNotificationError as u, tableCreateFilterState as v, tableCreateSortState as w, generateTableLayoutPrefsKey as x, FilterValuePipe as y, TableFilterClassPipe as z };
-//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-BfEYZG7s.mjs.map
+export { ADataListMetaService as A, tableCreateFilterState as B, COMMONS_TABLE_FEATURE_CONFIG_IT as C, tableCreateSortState as D, tableNotificationError as E, FilterService as F, withTable as G, LocaleDefaultRowClassPipe as L, TableMetadataService as T, TablePreferencesService as a, ADataListService as b, FilterValuePipe as c, TableColumnValueComponent as d, TableComponent as e, TableDataService as f, TableFilterActiveTagComponent as g, TableFilterClassPipe as h, TableFilterComponent as i, TableFilterFormComponent as j, TableHeaderWithFiltersComponent as k, TableHeaderWithFiltersTemplateDirective as l, TableTemplateDirective as m, createFilterDescriptorsFromGeneric as n, filterAdjustDisplayValueOnMatchModeChange as o, filterApplySerializationConfigToCmp as p, filterAreDatesEqual as q, filterGenerateMatchModeOptions as r, filterGetDateConfig as s, filterGetDefaultMatchMode as t, filterGetNumberConfig as u, filterSetStateOnChange as v, filterSetStateOnDisplayChange as w, generateTableLayoutPrefsKey as x, isFilterValueBlank as y, provideTableChild as z };
+//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-BPgwJRZk.mjs.map