@mediusinc/mng-commons 7.1.0-rc.6 → 7.2.0

package/fesm2022/{mediusinc-mng-commons-table-mediusinc-mng-commons-table-Bl_OBqxe.mjs → mediusinc-mng-commons-table-mediusinc-mng-commons-table-BDzq5vNu.mjs}

@@ -1,12 +1,12 @@
 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 { Injectable, inject, signal, computed, untracked, ElementRef, Renderer2, ChangeDetectorRef, input, booleanAttribute, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, LOCALE_ID, Pipe, output, forwardRef, model, InjectionToken, Injector, Directive, contentChildren, HostListener, DestroyRef, afterNextRender } from '@angular/core';
+import { forwardRef, input, booleanAttribute, model, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, inject, untracked, ElementRef, Renderer2, ChangeDetectorRef, viewChild, LOCALE_ID, Pipe, output, InjectionToken, Injector, Directive, contentChildren, HostListener, DestroyRef, afterNextRender } from '@angular/core';
 import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { OverlayService, MessageService, PrimeTemplate } from 'primeng/api';
+import { PrimeTemplate, OverlayService, MessageService } from 'primeng/api';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { InputGroup } from 'primeng/inputgroup';
 import { InputGroupAddon } from 'primeng/inputgroupaddon';
@@ -19,7 +19,10 @@ import { ZIndexUtils } from 'primeng/utils';
 import { Subject, debounceTime, distinctUntilChanged, ReplaySubject, switchMap, NEVER, combineLatest, of, BehaviorSubject, skip, filter } from 'rxjs';
 import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, effectWithDeps, getI18nTypePropertyKey, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, isMac, COMMONS_MODULE_CONFIG_IT, toObservable as toObservable$1, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsService, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
 import { FilterTypeEnum, FilterDescriptor, FilterLookupTypeEnum, FilterLookupDescriptor, FilterDisplayTypeEnum } from '@mediusinc/mng-commons/filter';
-import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective, NumberRangeComponent, AutocompleteTemplateDirective, DropdownTemplateDirective, DateRangeTemplateDirective, NumberRangeTemplateDirective, DatetimePickerComponent } from '@mediusinc/mng-commons/form';
+import { InputTrimDirective, DateRangeComponent, AutocompleteComponent, DropdownComponent, NumberRangeComponent, AutocompleteTemplateDirective, DropdownTemplateDirective, DateRangeTemplateDirective, NumberRangeTemplateDirective, DatetimePickerComponent } 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 { ColumnDisplayTypeEnum, tableDescriptor, TableDynamicDescriptorInst, TablePaginationModeEnum, TableSizeEnum } from '@mediusinc/mng-commons/table/api';
@@ -28,10 +31,7 @@ import { Menu } from 'primeng/menu';
 import { Tag, TagModule } from 'primeng/tag';
 import { Checkbox } from 'primeng/checkbox';
 import { Message } from 'primeng/message';
-import { ToggleButton } from 'primeng/togglebutton';
 import { lookupDataProvider } from '@mediusinc/mng-commons/form/api';
-import { Chip } from 'primeng/chip';
-import { MultiSelect } from 'primeng/multiselect';
 import { IconField } from 'primeng/iconfield';
 import { InputIcon } from 'primeng/inputicon';
 import { Popover } from 'primeng/popover';
@@ -41,6 +41,99 @@ import { PrimeNG } from 'primeng/config';
 import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { getI18nForModel } from '@mediusinc/mng-commons/model';
 
+const VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TableFilterInputMultiValueComponent),
+    multi: true
+};
+class TableFilterInputMultiValueComponent {
+    constructor() {
+        this.String = String;
+        this.FilterTypeEnum = FilterTypeEnum;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        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" }] : []));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    onBlur() {
+        this.onTouchedFn();
+    }
+    onPanelShow(event) {
+        // this is some event type mixup in primeng, we still try to use element within event which should be there
+        const motionEvent = event;
+        motionEvent.element?.querySelector('input')?.focus();
+    }
+    writeValue(obj) {
+        if (obj === undefined || obj === null || !Array.isArray(obj)) {
+            this.value.set([]);
+        }
+        else {
+            this.value.set(obj);
+        }
+    }
+    onValueNumberChange(event) {
+        const el = event?.target;
+        const rawValue = el?.value;
+        const value = Number(rawValue);
+        const values = Array.isArray(this.value()) ? [...this.value()] : [];
+        if (rawValue && !Number.isNaN(value) && !values.includes(value))
+            values.push(value);
+        this.value.set(values);
+        if (el)
+            el.value = '';
+        this.onChangeFn(this.value());
+    }
+    onValueChange(event) {
+        const el = event?.target;
+        const inputValue = el?.value ?? '';
+        const splitValues = this.splitValues(inputValue);
+        const values = Array.isArray(this.value()) ? [...this.value()] : [];
+        for (const val of splitValues) {
+            if (val && !values.includes(val))
+                values.push(val);
+        }
+        this.value.set(values);
+        if (el)
+            el.value = '';
+        this.onChangeFn(this.value());
+    }
+    splitValues(value) {
+        // split on comma, semicolon, newline, or tab
+        return value.split(/[\n,;\t]/g).filter(x => x.length > 0);
+    }
+    removeValue(index) {
+        const values = [...(this.value() || [])];
+        values.splice(index, 1);
+        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}\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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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}\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) {
     let options = undefined;
     if (descriptor == null || descriptor.filterType === FilterTypeEnum.String) {
@@ -49,8 +142,12 @@ function filterGenerateMatchModeOptions(primeConfig, descriptor, cmpSerCfg) {
             { 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.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
-            { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) },
+            ...(descriptor?.isGenericFilter && descriptor?.genericValueProvider != null
+                ? []
+                : [
+                    { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
+                    { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
+                ]),
             { value: FilterMatchMode.StartsWith, label: primeConfig.getTranslation(FilterMatchMode.StartsWith) },
             { value: FilterMatchMode.EndsWith, label: primeConfig.getTranslation(FilterMatchMode.EndsWith) }
         ];
@@ -388,12 +485,8 @@ class FilterService {
             const property = this.#config()?.descriptor.property;
             return property ? this.#tableData.filterStates()?.[property] : undefined;
         }, ...(ngDevMode ? [{ debugName: "#tableFilterState" }] : []));
-        effectWithDeps([this.#config, this.state], ([config, state]) => {
-            this.#updateStateIfRequired(config, state, this.#tableFilterState());
-        });
-        effectWithDeps([this.#tableFilterState], ([currTableFilterState]) => {
-            this.#updateStateIfRequired(this.#config(), this.state(), currTableFilterState, false);
-        });
+        effectWithDeps([this.#config, this.state], ([config, state]) => this.#updateStateIfRequired(config, state, this.#tableFilterState()));
+        effectWithDeps([this.#tableFilterState], ([currTableFilterState]) => this.#updateStateIfRequired(this.#config(), this.state(), currTableFilterState, false));
     }
     setConfig(config) {
         this.#config.set(config);
@@ -451,7 +544,9 @@ class FilterService {
             currTableFilterState = {};
         }
         if (currTableFilterState && (!state || state.value !== currTableFilterState.value || state.matchMode !== currTableFilterState.matchMode)) {
-            this.setState(filterSetStateOnChange(currTableFilterState, currTableFilterState.matchMode, currTableFilterState.value, untracked(() => config.descriptor.filterType), untracked(() => config.dateConfig)), updateTable);
+            this.setState(filterSetStateOnChange(currTableFilterState, 
+            // use state match mode if present to preserve match mode on filter reset
+            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 }); }
@@ -552,6 +647,9 @@ class TableFilterComponent {
             this.filter.setDisplayValue(value);
         }
     }
+    onTextMultiModelChange(value) {
+        this.filter.setDisplayValue(value);
+    }
     onTextInputEnterKeyDown(event) {
         const value = event.target.value;
         this.filter.setDisplayValue(value);
@@ -563,6 +661,9 @@ class TableFilterComponent {
             this.filter.setDisplayValue(value);
         }
     }
+    onNumericMultiModelChange(value) {
+        this.filter.setDisplayValue(value);
+    }
     onNumericInputKeyDown(event) {
         if (event.key === 'Enter') {
             if (this.filter.state()?.displayMatchMode === FilterMatchMode.Between && Array.isArray(this.#numericValueFromModelChange)) {
@@ -787,7 +888,7 @@ 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 === '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                        <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                    </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                    <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                </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                            *mngRerender=\"isMultiselect()\"\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.autocompleteInlineSearch ?? 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                            [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)=\"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 class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (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", "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: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    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                            *mngRerender=\"isMultiselect()\"\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                            [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.dropdownAllowInput\"\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 class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (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", "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 }))])
@@ -817,13 +918,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         DropdownTemplateDirective,
                         DateRangeTemplateDirective,
                         NumberRangeTemplateDirective,
-                        DatetimePickerComponent
+                        DatetimePickerComponent,
+                        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 === '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                        <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                    </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                    <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                </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                            *mngRerender=\"isMultiselect()\"\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.autocompleteInlineSearch ?? 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                            [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)=\"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 class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (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"] }]
+                    ], 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                            *mngRerender=\"isMultiselect()\"\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                            [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.dropdownAllowInput\"\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 class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (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 }] }] } });
 
 var filter_component = /*#__PURE__*/Object.freeze({
@@ -1069,93 +1171,6 @@ var filterActiveTag_component = /*#__PURE__*/Object.freeze({
     TableFilterActiveTagComponent: TableFilterActiveTagComponent
 });
 
-const VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => TableFilterFormMultiselectComponent),
-    multi: true
-};
-class TableFilterFormMultiselectComponent {
-    constructor() {
-        this.String = String;
-        this.FilterTypeEnum = FilterTypeEnum;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        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._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" }] : []));
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
-    }
-    onBlur() {
-        this.onTouchedFn();
-    }
-    writeValue(obj) {
-        if (obj === undefined || obj === null || !Array.isArray(obj)) {
-            this.value.set([]);
-        }
-        else {
-            this.value.set(obj);
-        }
-    }
-    onValueNumberChange(event) {
-        const el = event?.target;
-        const rawValue = el?.value;
-        const value = Number(rawValue);
-        const values = Array.isArray(this.value()) ? [...this.value()] : [];
-        if (rawValue && !Number.isNaN(value) && !values.includes(value))
-            values.push(value);
-        this.value.set(values);
-        if (el)
-            el.value = '';
-        this.onChangeFn(this.value());
-    }
-    onValueChange(event) {
-        const el = event?.target;
-        const inputValue = el?.value ?? '';
-        const splitValues = this.splitValues(inputValue);
-        const values = Array.isArray(this.value()) ? [...this.value()] : [];
-        for (const val of splitValues) {
-            if (val && !values.includes(val))
-                values.push(val);
-        }
-        this.value.set(values);
-        if (el)
-            el.value = '';
-        this.onChangeFn(this.value());
-    }
-    splitValues(value) {
-        // split on comma, semicolon, newline, or tab
-        return value.split(/[\n,;\t]/g).filter(x => x.length > 0);
-    }
-    removeValue(index) {
-        const values = [...(this.value() || [])];
-        values.splice(index, 1);
-        this.value.set(values);
-        this.onChangeFn(this.value());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TableFilterFormMultiselectComponent, isStandalone: true, selector: "mng-table-filter-form-multiselect", 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 } }, 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        display=\"chip\"\n        appendTo=\"body\"\n        required=\"true\"\n        panelStyleClass=\"table-filter-form-multiselect-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", 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterFormMultiselectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mng-table-filter-form-multiselect', providers: [VALUE_ACCESSOR], imports: [Chip, FormsModule, InputNumber, MultiSelect, PrimeTemplate, TranslatePipe, InputGroup, InputText, ToggleButton, InputTrimDirective], changeDetection: ChangeDetectionStrategy.OnPush, 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        display=\"chip\"\n        appendTo=\"body\"\n        required=\"true\"\n        panelStyleClass=\"table-filter-form-multiselect-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" }]
-        }], 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 }] }] } });
-
 class TableFilterFormComponent {
     constructor() {
         this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
@@ -1328,7 +1343,7 @@ 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-form-multiselect\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-form-multiselect\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.autocompleteInlineSearch ?? 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                                    [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}.table-filter-form-multiselect-panel .p-multiselect-list-container,.table-filter-form-multiselect-panel .p-multiselect-header{display:none!important}\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", "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: TableFilterFormMultiselectComponent, selector: "mng-table-filter-form-multiselect", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled"], outputs: ["caseSensitiveModelChange"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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                                    [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.dropdownAllowInput ?? 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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableFilterFormComponent, decorators: [{
             type: Component,
@@ -1347,11 +1362,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         NgTemplateOutlet,
                         ToggleButton,
                         ButtonDirective,
-                        TableFilterFormMultiselectComponent,
-                        DatetimePickerComponent
+                        DatetimePickerComponent,
+                        TableFilterInputMultiValueComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, 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-form-multiselect\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-form-multiselect\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.autocompleteInlineSearch ?? 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                                    [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}.table-filter-form-multiselect-panel .p-multiselect-list-container,.table-filter-form-multiselect-panel .p-multiselect-header{display:none!important}\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                                [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                                    [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.dropdownAllowInput ?? 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 }] }] } });
 
 const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATURE_CONFIG');
@@ -2672,9 +2687,9 @@ class TableComponent {
         this.loadTableWithDataProvider(paramsWithDefaults);
     }
     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 }, 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" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, { provide: ADataListService, useExisting: TableDataService }, TablePreferencesService], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: (Table), 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]=\"[]\"\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            (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                    [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 [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [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]" }, { 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-By6V0r5v.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
+    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 }, 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" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, { provide: ADataListService, useExisting: TableDataService }, TablePreferencesService], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: (Table), 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]=\"[]\"\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            (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                    [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 [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [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]" }, { 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-C9kHux4U.mjs').then(m => m.TableColumnToggleComponent)], () => [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-By6V0r5v.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: "21.0.8", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [import('./mediusinc-mng-commons-table-column-toggle.component-C9kHux4U.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], resolveMetadata: (TableColumnToggleComponent, TableFilterComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'mng-table', imports: [
                             ComponentDirective,
@@ -2737,4 +2752,4 @@ function provideTableChild(config) {
  */
 
 export { ADataListService as A, TableDataService as B, COMMONS_TABLE_FEATURE_CONFIG_IT as C, withTable as D, provideTableChild as E, FilterService as F, 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-Bl_OBqxe.mjs.map
+//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-BDzq5vNu.mjs.map