@mediusinc/mng-commons 3.5.0 → 3.6.0-rc.1

package/fesm2022/mediusinc-mng-commons.mjs

@@ -1,9 +1,9 @@
 import * as i2$1 from '@angular/common';
-import { DatePipe, AsyncPipe, NgIf, NgForOf, NgSwitch, NgSwitchCase, NgSwitchDefault, DecimalPipe, CurrencyPipe, NgClass, NgStyle, NgTemplateOutlet, JsonPipe, CommonModule } from '@angular/common';
+import { DatePipe, AsyncPipe, NgIf, NgForOf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgClass, DecimalPipe, CurrencyPipe, NgStyle, NgTemplateOutlet, JsonPipe, CommonModule, NgOptimizedImage } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
 import { HttpErrorResponse, HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, inject, Injectable, Inject, EventEmitter, createComponent, Directive, Input, Output, Component, ChangeDetectionStrategy, Optional, HostBinding, ViewChild, ContentChildren, forwardRef, HostListener, LOCALE_ID, ViewChildren, runInInjectionContext, APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
+import { Pipe, InjectionToken, inject, Injectable, Inject, booleanAttribute, EventEmitter, createComponent, Directive, Input, Output, Component, ChangeDetectionStrategy, Optional, HostBinding, ViewChild, ContentChildren, forwardRef, HostListener, LOCALE_ID, ElementRef, Renderer2, ChangeDetectorRef, signal, computed, ViewEncapsulation, ViewChildren, runInInjectionContext, APP_INITIALIZER, ErrorHandler, NgModule, Injector, DestroyRef } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { Validators, FormGroup, FormArray, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl, FormsModule } from '@angular/forms';
 import * as i1 from '@angular/router';
@@ -26,12 +26,12 @@ import { ChipModule } from 'primeng/chip';
 import * as i9 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
-import * as i4$4 from 'primeng/dialog';
-import { DialogModule } from 'primeng/dialog';
+import * as i4$5 from 'primeng/dialog';
+import { Dialog, DialogModule } from 'primeng/dialog';
 import * as i3$1 from 'primeng/dropdown';
 import { Dropdown, DropdownModule } from 'primeng/dropdown';
 import * as i4 from 'primeng/dynamicdialog';
-import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { DialogService, DynamicDialogComponent, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i1$5 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i11$1 from 'primeng/fileupload';
@@ -44,7 +44,7 @@ import * as i3$2 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i6$3 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i14 from 'primeng/inputtext';
+import * as i6$4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i13 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
@@ -53,44 +53,51 @@ import { MessagesModule } from 'primeng/messages';
 import * as i4$2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i6$2 from 'primeng/progressspinner';
+import * as i7 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i7 from 'primeng/radiobutton';
+import * as i7$1 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i6$1 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i6$4 from 'primeng/skeleton';
+import * as i6$5 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { SlideMenuModule } from 'primeng/slidemenu';
 import * as i10 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
-import * as i4$3 from 'primeng/table';
-import { ColumnFilter, TableModule, Table } from 'primeng/table';
+import * as i4$4 from 'primeng/table';
+import { Table, TableModule, ColumnFilter } from 'primeng/table';
 import * as i1$4 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
 import * as i3$3 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i5$1 from 'primeng/toolbar';
+import * as i6$2 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i4$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i1$2 from 'primeng/api';
-import { PrimeNGConfig, FilterService, FilterMatchMode, ConfirmationService, MessageService } from 'primeng/api';
+import { PrimeNGConfig, FilterService, FilterMatchMode, ConfirmationService, MessageService, OverlayService, TranslationKeys } from 'primeng/api';
 import * as i11 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import { isObservable, throwError, BehaviorSubject, Subject, ReplaySubject, distinctUntilChanged, take, mergeMap, of, combineLatest, switchMap, from, timeout, tap, Observable, debounceTime, merge } from 'rxjs';
+import { isObservable, throwError, BehaviorSubject, Subject, ReplaySubject, distinctUntilChanged, take, mergeMap, of, combineLatest, switchMap, from, timeout, tap, Observable, debounceTime, merge, filter as filter$1 } from 'rxjs';
 import { filter, map, startWith, catchError, first, mergeMap as mergeMap$1, take as take$1 } from 'rxjs/operators';
-import { logger } from 'nx/src/utils/logger';
 import 'reflect-metadata';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { ZIndexUtils } from 'primeng/utils';
 import { TimesIcon } from 'primeng/icons/times';
-import * as i5$2 from 'primeng/message';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { FilterIcon } from 'primeng/icons/filter';
+import { FilterSlashIcon } from 'primeng/icons/filterslash';
+import * as i4$3 from 'primeng/tristatecheckbox';
+import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+import * as i5$1 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i3$4 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
 
 /**
  * Generated API
@@ -115,6 +122,8 @@ var MediusFilterMatchType;
     MediusFilterMatchType["NotIn"] = "NOT_IN";
     MediusFilterMatchType["SmallerThan"] = "SMALLER_THAN";
     MediusFilterMatchType["GreaterThan"] = "GREATER_THAN";
+    MediusFilterMatchType["Exists"] = "EXISTS";
+    MediusFilterMatchType["DoesNotExist"] = "DOES_NOT_EXIST";
 })(MediusFilterMatchType || (MediusFilterMatchType = {}));
 
 class MediusFilterParam {
@@ -381,6 +390,17 @@ var LogLevelEnum;
     LogLevelEnum[LogLevelEnum["Error"] = 5] = "Error";
 })(LogLevelEnum || (LogLevelEnum = {}));
 
+var MngCommonsInitEventEnum;
+(function (MngCommonsInitEventEnum) {
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["CommonsInitStart"] = 0] = "CommonsInitStart";
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["ConfigSourceModuleLoaded"] = 1] = "ConfigSourceModuleLoaded";
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["ConfigSourceProjectEnvLoaded"] = 2] = "ConfigSourceProjectEnvLoaded";
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["ConfigSourceJsonAdded"] = 3] = "ConfigSourceJsonAdded";
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["ConfigSourceJsonLoaded"] = 4] = "ConfigSourceJsonLoaded";
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["CommonsInitEnd"] = 5] = "CommonsInitEnd";
+    MngCommonsInitEventEnum[MngCommonsInitEventEnum["CommonsInitError"] = 6] = "CommonsInitError";
+})(MngCommonsInitEventEnum || (MngCommonsInitEventEnum = {}));
+
 class ActionDataProviderUtil {
     static runGetAllOrFail(ctx) {
         const dataProviderExec = ActionDataProviderUtil.runGetAllDataProvider(ctx);
@@ -798,6 +818,8 @@ var FilterMatchModeEnum;
     FilterMatchModeEnum["DateIsNot"] = "dateIsNot";
     FilterMatchModeEnum["DateBefore"] = "dateBefore";
     FilterMatchModeEnum["DateAfter"] = "dateAfter";
+    FilterMatchModeEnum["Exists"] = "is";
+    FilterMatchModeEnum["DoesNotExist"] = "isNot";
 })(FilterMatchModeEnum || (FilterMatchModeEnum = {}));
 var FilterLookupTypeEnum;
 (function (FilterLookupTypeEnum) {
@@ -1903,9 +1925,31 @@ class MngCommonsService {
         // ripple
         this.primengConfig.ripple = true;
         this.primengConfig.filterMatchModeOptions = {
-            text: [FilterMatchModeEnum.Contains, FilterMatchModeEnum.Equals, FilterMatchModeEnum.NotEquals, FilterMatchModeEnum.StartsWith, FilterMatchModeEnum.EndsWith],
-            numeric: [FilterMatchModeEnum.Equals, FilterMatchModeEnum.NotEquals, FilterMatchModeEnum.LessThan, FilterMatchModeEnum.GreaterThan],
-            date: [FilterMatchModeEnum.DateIs, FilterMatchModeEnum.DateBefore, FilterMatchModeEnum.DateAfter, FilterMatchModeEnum.Between]
+            text: [
+                FilterMatchModeEnum.Contains,
+                FilterMatchModeEnum.Equals,
+                FilterMatchModeEnum.NotEquals,
+                FilterMatchModeEnum.StartsWith,
+                FilterMatchModeEnum.EndsWith,
+                FilterMatchModeEnum.Exists,
+                FilterMatchModeEnum.DoesNotExist
+            ],
+            numeric: [
+                FilterMatchModeEnum.Equals,
+                FilterMatchModeEnum.NotEquals,
+                FilterMatchModeEnum.LessThan,
+                FilterMatchModeEnum.GreaterThan,
+                FilterMatchModeEnum.Exists,
+                FilterMatchModeEnum.DoesNotExist
+            ],
+            date: [
+                FilterMatchModeEnum.DateIs,
+                FilterMatchModeEnum.DateBefore,
+                FilterMatchModeEnum.DateAfter,
+                FilterMatchModeEnum.Between,
+                FilterMatchModeEnum.Exists,
+                FilterMatchModeEnum.DoesNotExist
+            ]
         };
         // translate
         this.translate.langs = this.appLanguages;
@@ -2740,11 +2784,11 @@ class MngActionExecutorService {
         }
         // finish related actions
         if (instance.nextActionInstance) {
-            logger.debug(`Finishing instance ${instance.instanceLongName} related next action instance: ${instance.nextActionInstance.instanceLongName}`);
+            this.logger.debug(`Finishing instance ${instance.instanceLongName} related next action instance: ${instance.nextActionInstance.instanceLongName}`);
             this.finishAction(instance.nextActionInstance, onDestroy);
         }
         if (instance.errorActionInstance) {
-            logger.debug(`Finishing instance ${instance.instanceLongName} related error action instance: ${instance.errorActionInstance.instanceLongName}`);
+            this.logger.debug(`Finishing instance ${instance.instanceLongName} related error action instance: ${instance.errorActionInstance.instanceLongName}`);
             this.finishAction(instance.errorActionInstance, onDestroy);
         }
     }
@@ -3702,7 +3746,9 @@ class MediusRestUtil {
             [FilterMatchMode.DATE_IS, 'dteq', MediusFilterMatchType.Equals, FilterTypeEnum.Date],
             [FilterMatchMode.DATE_BEFORE, 'lt', MediusFilterMatchType.SmallerThan, FilterTypeEnum.Date],
             [FilterMatchMode.DATE_AFTER, 'gt', MediusFilterMatchType.GreaterThan, FilterTypeEnum.Date],
-            [FilterMatchMode.DATE_IS_NOT, 'neq', MediusFilterMatchType.NotEquals, FilterTypeEnum.Date]
+            [FilterMatchMode.DATE_IS_NOT, 'neq', MediusFilterMatchType.NotEquals, FilterTypeEnum.Date],
+            [FilterMatchMode.IS, 'ex', MediusFilterMatchType.Exists, null],
+            [FilterMatchMode.IS_NOT, 'dne', MediusFilterMatchType.DoesNotExist, null]
         ];
         this.dateTimeInUtc = true;
         this.dateTimeWithTimezone = true;
@@ -3748,19 +3794,42 @@ class MediusRestUtil {
                 // prepare value
                 let value = filterFieldSplit.length > 2 ? filterFieldSplit.slice(2).join(':') : '';
                 let valueTo = undefined;
-                if (value.startsWith("'")) {
-                    value = value.substring(1, value.length - 1);
-                }
+                const valueTransformer = (v) => {
+                    const vLower = v.toLowerCase();
+                    if (v.startsWith("'")) {
+                        // string
+                        return v.substring(1, v.length - 1);
+                    }
+                    else if (vLower === 'true' || vLower === 'false') {
+                        // boolean
+                        return vLower === 'true';
+                    }
+                    else if (vLower === 'null') {
+                        // null
+                        return null;
+                    }
+                    else {
+                        // number
+                        return parseFloat(v);
+                    }
+                };
                 if (value.startsWith('[') && value.endsWith(']')) {
+                    // array
                     value = value
                         .substring(1, value.length - 1)
                         .split(',')
-                        .map((v) => (v.startsWith("'") ? v.substring(1, v.length - 1) : v));
+                        .map((v) => valueTransformer(v));
+                }
+                else {
+                    value = valueTransformer(value);
                 }
                 if (operator === 'ft') {
                     valueTo = value[1];
                     value = value[0];
                 }
+                else if (operator === 'ex' || operator === 'dne') {
+                    value = null;
+                }
                 const filterDescriptor = filterDescriptors.find(f => f.property === field);
                 const matchMode = this.getMapping(operator, filterDescriptor?.filterType, 1);
                 if (matchMode && filterDescriptor) {
@@ -3800,38 +3869,40 @@ class MediusRestUtil {
                     const primeOperator = fieldFilter.matchMode;
                     let value = fieldFilter.value;
                     const operatorMapping = primeOperator ? this.getMapping(primeOperator, undefined, 0) : undefined;
-                    if (operatorMapping && typeof value !== 'undefined' && value !== null) {
-                        let doAddFilter = false;
-                        if (typeof value === 'string' && value.length > 0) {
-                            value = `'${value}'`;
-                            doAddFilter = true;
-                        }
-                        else if (typeof value === 'number') {
-                            doAddFilter = true;
-                        }
-                        else if (typeof value === 'boolean') {
-                            doAddFilter = true;
-                        }
-                        else if (Array.isArray(value)) {
-                            const joinedValue = value
-                                .map(v => {
-                                if (v instanceof Date) {
-                                    // for query params, always convert to iso string, correct transformation will be done later
-                                    return v.toISOString();
+                    if (operatorMapping) {
+                        if (typeof value !== 'undefined' && value !== null) {
+                            let doAddFilter = false;
+                            const transformValue = (v) => {
+                                if (typeof v === 'string' && v.length > 0) {
+                                    return [`'${v}'`, true];
                                 }
-                                return v;
-                            })
-                                .join(',');
-                            value = `[${joinedValue}]`;
-                            doAddFilter = true;
-                        }
-                        else if (value instanceof Date) {
-                            // for query params, always convert to iso string, correct transformation will be done later
-                            value = value.toISOString();
-                            doAddFilter = true;
+                                else if (typeof v === 'number' || typeof v === 'boolean') {
+                                    return [v, true];
+                                }
+                                else if (v instanceof Date) {
+                                    return [v.toISOString(), true];
+                                }
+                                else {
+                                    return [null, false];
+                                }
+                            };
+                            if (Array.isArray(value)) {
+                                value = `[${value
+                                    .map(v => transformValue(v))
+                                    .filter(v => v[1])
+                                    .map(v => v[0])
+                                    .join(',')}]`;
+                                doAddFilter = true;
+                            }
+                            else {
+                                [value, doAddFilter] = transformValue(value);
+                            }
+                            if (doAddFilter) {
+                                filters.push(`${field}:${operatorMapping[1]}:${value}`);
+                            }
                         }
-                        if (doAddFilter) {
-                            filters.push(`${field}:${operatorMapping[1]}:${value}`);
+                        else if (operatorMapping[2] === MediusFilterMatchType.Exists || operatorMapping[2] === MediusFilterMatchType.DoesNotExist) {
+                            filters.push(`${field}:${operatorMapping[1]}`);
                         }
                     }
                 }
@@ -3904,12 +3975,10 @@ class MediusRestUtil {
             for (const key of Object.keys(event.filters)) {
                 const filterEvent = event.filters[key];
                 if (Array.isArray(filterEvent)) {
-                    filterEvent.filter(e => e.value).forEach(e => this.addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, key, e));
+                    filterEvent.forEach(e => this.addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, key, e));
                 }
                 else if (typeof filterEvent === 'object') {
-                    if (filterEvent.value) {
-                        this.addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, key, filterEvent);
-                    }
+                    this.addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, key, filterEvent);
                 }
             }
         }
@@ -3917,6 +3986,11 @@ class MediusRestUtil {
     }
     addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, property, filterMetadata) {
         const matchType = this.getMediusFilterMatchTypeFromPrimeMatchMode(filterMetadata.matchMode ?? 'equals');
+        if (matchType[2] !== MediusFilterMatchType.Exists &&
+            matchType[2] !== MediusFilterMatchType.DoesNotExist &&
+            (filterMetadata.value === null || typeof filterMetadata.value === 'undefined')) {
+            return;
+        }
         queryParamBuilder.withFilter(property, filterMetadata.value, undefined, matchType);
     }
     getMediusFilterMatchTypeFromPrimeMatchMode(matchMode, dataType) {
@@ -5429,6 +5503,7 @@ class TableDescriptor {
         this._columnResizeMode = 'expand';
         this._autoGenerated = false;
         this._isLocalized = false;
+        this._deprecatedFilters = false;
         this._modelType = modelType;
         this._model = new ModelDescriptor(modelType, idProperty, titleProperty, i18nBaseKey);
         this._dataKeyProperty = idProperty ?? ModelUtil.findIdAttribute(modelType) ?? undefined;
@@ -5545,6 +5620,9 @@ class TableDescriptor {
     get localizationLocaleProperty() {
         return this._localizationLocaleProperty;
     }
+    get deprecatedFilters() {
+        return this._deprecatedFilters;
+    }
     /**
      * dataKey is used for the purpose of combined saving user preferences in localstorage if 2 tables have the same dataKey they will share the same localstorage entry.
      * Similarly, this property can also be used to differentiate two tables of the same model on the same url (so that they have separate entries in localstorage).
@@ -5747,6 +5825,7 @@ class TableDescriptor {
         obj._localizationLocaleProperty = this._localizationLocaleProperty;
         obj._paginationMode = this._paginationMode;
         obj._rowsPerPageOptions = this._rowsPerPageOptions;
+        obj._deprecatedFilters = this._deprecatedFilters;
     }
     copy() {
         const descriptor = new TableDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
@@ -5827,6 +5906,10 @@ class TableDescriptor {
         }
         return this;
     }
+    withDeprecatedFilters(deprecatedFilters = true) {
+        this._deprecatedFilters = deprecatedFilters;
+        return this;
+    }
 }
 class TableDynamicDescriptor extends TableDescriptor {
     constructor(idProperty, titleProperty, i18nBaseKey) {
@@ -6359,23 +6442,35 @@ class AGenericFieldDescriptor {
         this._config = config;
         return this;
     }
+    /**
+     * Override toJSON implementation to prevent overflow with circular dependency.
+     * @ignore
+     */
+    toJSON() {
+        const jsonObj = {
+            ...this,
+            _editor: undefined
+        };
+        const jsonObjStr = JSON.stringify(jsonObj);
+        return jsonObjStr;
+    }
 }
 class AFieldDescriptor extends AGenericFieldDescriptor {
     constructor(editor, property) {
         super(editor);
-        this._required = false;
-        this._requiredHideLabelMarker = false;
-        this._disabled = false;
-        this._validations = [];
-        this._asyncValidations = [];
-        this._updateOn = 'change';
-        this._className = '';
-        this._labelClassName = '';
-        this._inputClassName = '';
-        this._size = FieldSizeEnum.Normal;
+        /** @ignore */ this._required = false;
+        /** @ignore */ this._requiredHideLabelMarker = false;
+        /** @ignore */ this._disabled = false;
+        /** @ignore */ this._validations = [];
+        /** @ignore */ this._asyncValidations = [];
+        /** @ignore */ this._updateOn = 'change';
+        /** @ignore */ this._className = '';
+        /** @ignore */ this._labelClassName = '';
+        /** @ignore */ this._inputClassName = '';
+        /** @ignore */ this._size = FieldSizeEnum.Normal;
         // localization
-        this._isLocalized = false;
-        this._eventsSubject = new Subject();
+        /** @ignore */ this._isLocalized = false;
+        /** @ignore */ this._eventsSubject = new Subject();
         this._property = property;
         this._label = I18nUtils.Type.getPropertyKey(this._editor.model.i18nBaseKey, property);
     }
@@ -7429,36 +7524,42 @@ class FieldGroupDescriptor extends AFieldGroupDescriptor {
 
 class EditorDescriptor {
     static { this.defaultGroupName = '_default'; }
+    /**
+     * Creates new instance of editor descriptor.
+     * @param modelType Model's class.
+     * @param idProperty Id property representing model (optional).
+     * @param titleProperty Title property representing model (optional). If not provided, it will be automatically chosen.
+     * @param tableviewEditorType Type of editor in tableview (add, edit, view or none).
+     * @param i18nBaseKey Base key for translations.
+     */
     constructor(modelType, idProperty, titleProperty, tableviewEditorType = TableviewEditorTypeEnum.None, i18nBaseKey) {
-        this._tabs = [];
-        this._groups = [];
-        this._fields = [];
-        this._disabled = false;
-        this._isLocalized = false;
-        this._eventsSubject = new Subject();
+        /** @ignore */ this._tabs = [];
+        /** @ignore */ this._groups = [];
+        /** @ignore */ this._fields = [];
+        /** @ignore */ this._disabled = false;
+        /** @ignore */ this._isLocalized = false;
+        /** @ignore */ this._eventsSubject = new Subject();
         this._modelType = modelType;
         this._model = new ModelDescriptor(modelType, idProperty, titleProperty, i18nBaseKey);
         this._tableviewEditorType = tableviewEditorType;
     }
     /**
-     * auto generated editor descriptor based on openapi definition
-     * generates all fields from definition
-     * @param modelType class type
-     * @param idProperty
-     * @param titleProperty
-     * @param tableEditorType
+     * Creates editor descriptor automatically based on openapi model's attributes definition which is automatically extracted. All fields will be included.
+     * @param modelType Model's class.
+     * @param idProperty Id property representing model (optional).
+     * @param titleProperty Title property representing model (optional). If not provided, it will be automatically chosen.
+     * @param tableEditorType Type of editor in tableview (add, edit, view or none).
      */
     static from(modelType, idProperty, titleProperty, tableEditorType = TableviewEditorTypeEnum.None) {
         return EditorDescriptor.fromModelWithAttributes(modelType, TableviewUtil.getAttributeDefMap(modelType), titleProperty, idProperty, tableEditorType);
     }
     /**
-     * auto generated editor descriptor based on openapi definition
-     * generates only selected fields
-     * @param modelType class type
-     * @param attributes list of selected properties to generate fields based on
-     * @param idProperty
-     * @param titleProperty
-     * @param tableEditorType
+     * Creates editor descriptor automatically based on openapi model's attributes definition provided in parameters. Only fields for provided attributes will be included.
+     * @param modelType Model's class.
+     * @param attributes List of attribute definitions from which fields should be created.
+     * @param idProperty Id property representing model (optional).
+     * @param titleProperty Title property representing model (optional). If not provided, it will be automatically chosen.
+     * @param tableEditorType Type of editor in tableview (add, edit, view or none).
      */
     static fromModelWithAttributes(modelType, attributes, idProperty, titleProperty, tableEditorType = TableviewEditorTypeEnum.None) {
         const descriptor = new EditorDescriptor(modelType, idProperty, titleProperty, tableEditorType);
@@ -7467,18 +7568,33 @@ class EditorDescriptor {
             .forEach(attr => descriptor.upsertFieldFromAttributeDef(attr, descriptor.fields.find(col => col.property === attr.name)));
         return descriptor;
     }
+    /**
+     * Model descriptor for editor.
+     */
     get model() {
         return this._model;
     }
+    /**
+     * Editor's tabs.
+     */
     get tabs() {
         return this._tabs;
     }
+    /**
+     * Editor's fields.
+     */
     get fields() {
         return this._fields;
     }
+    /**
+     * Type of editor for tableview.
+     */
     get tableviewEditorType() {
         return this._tableviewEditorType;
     }
+    /**
+     * If editor is disabled.
+     */
     get disabled() {
         return this._disabled;
     }
@@ -7497,6 +7613,11 @@ class EditorDescriptor {
     get localeLookup() {
         return this._localeLookup;
     }
+    /**
+     * Creates new tab group. Next added fields are added to newly created tab group.
+     * @param name Name of the group.
+     * @param title Title key for the tab.
+     */
     createTabGroup(name, title) {
         const tabGroup = new FieldTabGroupDescriptor(this, name);
         if (!title) {
@@ -7506,6 +7627,11 @@ class EditorDescriptor {
         this.createTabGroupDescriptor(tabGroup);
         return tabGroup;
     }
+    /**
+     * Creates new field group. Next added fields are added to newly created field group.
+     * @param name Name of the group.
+     * @param title Title key for the group.
+     */
     createFieldGroup(name, title) {
         const fieldGroup = new FieldGroupDescriptor(this, name);
         if (title !== null) {
@@ -7517,20 +7643,28 @@ class EditorDescriptor {
         this.createFieldGroupDescriptor(fieldGroup);
         return fieldGroup;
     }
+    /**
+     * Adds field by the descriptor.
+     * @param field Field descriptor.
+     */
     addFieldDescriptor(field) {
         this.createDefaultGroup();
         this._fields.push(field);
         this._currentGroup?.addField(field);
         return this;
     }
+    /**
+     * Adds field by the model property name.
+     * @param property Model property name.
+     */
     addField(property) {
         const field = new FieldInputDescriptor(this, property);
         this.addFieldDescriptor(field);
         return field;
     }
     /**
-     * removes filed if exists in descriptor
-     * @param property field name
+     * Removes field by the model property name.
+     * @param property Model property name.
      */
     removeField(property) {
         const fieldIdx = this._fields.findIndex(f => f.property === property);
@@ -7546,6 +7680,10 @@ class EditorDescriptor {
         }
         this._fields.splice(fieldIdx, 1);
     }
+    /**
+     * Gets field by the model property name.
+     * @param property Model property name.
+     */
     getField(property) {
         return this._fields.find(f => f.property === property) ?? null;
     }
@@ -7554,35 +7692,72 @@ class EditorDescriptor {
         this.addFieldDescriptor(field);
         return field;
     }
+    /**
+     * Adds lookup field.
+     * @param property Model property name.
+     * @param modelType Model's class type (must be registered in ObjectSerializer!).
+     */
     addFieldLookup(property, modelType) {
         const field = new FieldLookupDescriptor(this, property, modelType);
         this.addFieldDescriptor(field);
         return field;
     }
+    /**
+     * Adds enum lookup field.
+     * @param property Model's property name.
+     * @param enumType Type of enum (must be registered in ObjectSerializer!).
+     * @param options Provides subset of enum's available constants.
+     * @param nameAsValue If constant's name should be used as final value of the enum. Primarily, constant's value will be used.
+     * @param optionsTitlePath Title key path from where translations are provided. If null, the enum's values won't be translated.
+     */
     addFieldLookupEnum(property, enumType, options, nameAsValue = false, optionsTitlePath) {
         const field = new FieldLookupEnumDescriptor(this, property, enumType, options, nameAsValue, optionsTitlePath);
         this.addFieldDescriptor(field);
         return field;
     }
+    /**
+     * Adds table/details/add/edit field for one-to-many (1:n) relations.
+     * @param property Model's property name.
+     * @param tableviewDescriptor Tableview descriptor for related model.
+     */
     addFieldManyEditor(property, tableviewDescriptor) {
         const field = new FieldManyEditorDescriptor(this, property, tableviewDescriptor);
         this.addFieldDescriptor(field);
         return field;
     }
+    /**
+     * Adds tables for many-to-many (m:n) relations.
+     * @param property Model's property name.
+     * @param mainTableDescriptor Main table descriptor for displaying items added to main model's property.
+     * @param lookupTableDescriptor Lookup table descriptor for displaying items to be added to main model's property.
+     */
     addFieldManyToManyEditor(property, mainTableDescriptor, lookupTableDescriptor) {
         const field = new FieldManyToManyEditorDescriptor(this, property, mainTableDescriptor, lookupTableDescriptor);
         this.addFieldDescriptor(field);
         return field;
     }
+    /**
+     * Disables field on editor.
+     * @param disabled
+     */
     withDisabled(disabled = true) {
         this._disabled = disabled;
         return this;
     }
+    /**
+     * Adds group validator to editor.
+     * @param name Name of the validation.
+     * @param validator Field validator function.
+     * @param message Field validation message.
+     */
     addValidation(name, validator, message) {
         if (this._currentGroup) {
             this._currentGroup.withValidation(name, validator, message);
         }
     }
+    /**
+     * Creates a copy of editor descriptor object.
+     */
     copy() {
         const editor = new EditorDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName, this.tableviewEditorType);
         for (const tabGroup of this._tabs) {
@@ -7599,6 +7774,11 @@ class EditorDescriptor {
         editor._disabled = this._disabled;
         return editor;
     }
+    /**
+     * Created group from field group descriptor.
+     * @param fieldGroup Field group descriptor.
+     * @internal
+     */
     createFieldGroupDescriptor(fieldGroup) {
         this.createDefaultTabGroup();
         this._currentGroup = fieldGroup;
@@ -7606,26 +7786,38 @@ class EditorDescriptor {
         this._currentTabGroup?.addField(fieldGroup);
         return this;
     }
+    /**
+     * Creates tab group from tab group descriptor.
+     * @param tabGroup Tab group descriptor.
+     * @internal
+     */
     createTabGroupDescriptor(tabGroup) {
         this._currentTabGroup = tabGroup;
         this._tabs.push(tabGroup);
         return this;
     }
+    /**
+     * Creates default field group.
+     * @internal
+     */
     createDefaultGroup() {
         this.createDefaultTabGroup();
         if (this._currentTabGroup?.fields.length === 0) {
             this.createFieldGroup(EditorDescriptor.defaultGroupName, null);
         }
     }
+    /**
+     * Creates default tab group.
+     * @internal
+     */
     createDefaultTabGroup() {
         if (this._tabs.length === 0) {
             this.createTabGroup(EditorDescriptor.defaultGroupName, 'general.general');
         }
     }
     /**
-     * modifies selected field
-     * do not use it for enums! (use withFieldModifiedEnum instead)
-     * @param property field name
+     * Modifies selected field by field property. For enums use {withFieldModifiedEnum} instead.
+     * @param property Model's property name.
      * @param fieldType new field type for selected field
      * @param args additional parameters for field
      */
@@ -7638,12 +7830,11 @@ class EditorDescriptor {
         return this;
     }
     /**
-     * modifies selected field with enum type
-     * @param property field property name
+     * Modifies selected field with enum type.
+     * @param property Model's property name.
      * @param enumType type of enum for new field
      * @param optionsTitlePath
      * @param values
-     * @param nameAsValue
      */
     withFieldModifiedEnum(property, enumType, optionsTitlePath, values, nameAsValue = false) {
         const attribute = TableviewUtil.getAttributeDefMap(this._modelType).find(a => a.name === property);
@@ -7657,8 +7848,8 @@ class EditorDescriptor {
         return this;
     }
     /**
-     * adds lookup to given field
-     * @param property field property name
+     * Modifies selected field with lookup field.
+     * @param property Model's property name.
      * @param modelType model type of field
      * @param lookupProvider provider to be added to field
      * @param titleProperty
@@ -7672,10 +7863,11 @@ class EditorDescriptor {
         return this;
     }
     /**
-     * generates field based on attribute definition, used for auto model
-     * @param attribute definition
-     * @param field optional, if defined will be replaced, otherwise new will be generated
-     * @param args additional arguments
+     * Generates field based on attribute definition, used for auto model
+     * @param attribute Attribute definition.
+     * @param field Optional, if defined will be replaced, otherwise new will be generated.
+     * @param args Optional additional arguments mapped to filed type. Arguments depend on possible arguments on fields.
+     * @internal
      */
     upsertFieldFromAttributeDef(attribute, field, ...args) {
         if (field == null) {
@@ -9061,6 +9253,10 @@ class FileUtil {
     }
 }
 
+function booleanObsAttribute(value) {
+    return isObservable(value) ? value : of(booleanAttribute(value));
+}
+
 class ModelDescriptor {
     constructor(modelType, idProperty, titleProperty, i18nBaseKey) {
         this._type = modelType;
@@ -9939,6 +10135,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 args: ['instanceCreated']
             }] } });
 
+class MngDialogKeydownHandlerDirective {
+    constructor() {
+        this.dialogService = inject(DialogService);
+        this.dynamicDialog = inject(DynamicDialogComponent, { optional: true });
+        this.dialog = inject(Dialog, { optional: true });
+        this.dialogsWithKeydownListener = [];
+    }
+    ngOnInit() {
+        if (!this.dialog && !this.dynamicDialog) {
+            // not a dialog, return
+            return;
+        }
+        this.dialogService.dialogComponentRefMap.forEach(v => {
+            if ((this.dialog || v.instance !== this.dynamicDialog) && v.instance.documentKeydownListener) {
+                // exclude self dynamic dialog
+                this.dialogsWithKeydownListener.push(v.instance);
+                v.instance.unbindDocumentKeydownListener();
+            }
+        });
+        if (!this.dialog) {
+            // if dialog is present, then do not bind (because it will bind on unbind-ed dynamic dialog
+            this.dynamicDialog?.bindDocumentKeydownListener();
+        }
+    }
+    ngOnDestroy() {
+        if (!this.dialog && !this.dynamicDialog) {
+            // not a dialog, return
+            return;
+        }
+        if (!this.dialog) {
+            this.dynamicDialog?.unbindDocumentKeydownListener();
+        }
+        this.dialogsWithKeydownListener.forEach(c => c.bindDocumentKeydownListener());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngDialogKeydownHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: MngDialogKeydownHandlerDirective, isStandalone: true, selector: "[mngDialogKeydownHandler]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngDialogKeydownHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[mngDialogKeydownHandler]'
+                }]
+        }] });
+
 class MngTemplateDirective {
     constructor(template, viewContainerRef) {
         this.template = template;
@@ -10387,11 +10628,11 @@ class MngActionComponent {
         this.viewContainer = this.viewContainerInit ?? this.viewContainerService ?? undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: MngAuthorizationService }, { token: MngActionExecutorService }, { token: i1$2.ConfirmationService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngActionComponent, isStandalone: true, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", queryParam: "queryParam", dataProvider: "dataProvider", hostComponent: "hostComponent", routeInit: ["route", "routeInit"], inputDisabled: ["disabled", "inputDisabled"], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"], selectedItems: "selectedItems" }, outputs: { finishEventEmitter: "finish" }, host: { properties: { "class": "this.hostClass", "class.m-0": "this.isHostHidden" } }, providers: [ConfirmationService], viewQueries: [{ propertyName: "subactionsMenu", first: true, predicate: ["subactionsMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize : itemId : item : actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["id", "tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: MngParametrizePipe, name: "parametrize" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i9.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i10.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i11.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.6", type: MngActionComponent, isStandalone: true, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", queryParam: "queryParam", dataProvider: "dataProvider", hostComponent: "hostComponent", routeInit: ["route", "routeInit"], inputDisabled: ["disabled", "inputDisabled", booleanObsAttribute], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"], selectedItems: "selectedItems" }, outputs: { finishEventEmitter: "finish" }, host: { properties: { "class": "this.hostClass", "class.m-0": "this.isHostHidden" } }, providers: [ConfirmationService], viewQueries: [{ propertyName: "subactionsMenu", first: true, predicate: ["subactionsMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize : itemId : item : actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" appendTo=\"body\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: MngParametrizePipe, name: "parametrize" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i9.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i10.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps"], outputs: ["onClick", "onDropdownClick"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i11.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngActionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgIf, ButtonModule, RippleModule, TooltipModule, MngParametrizePipe, MngComponentDirective, ConfirmDialogModule, SplitButtonModule, MenuModule], providers: [ConfirmationService], template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize : itemId : item : actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ standalone: true, selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgIf, ButtonModule, RippleModule, TooltipModule, MngParametrizePipe, MngComponentDirective, ConfirmDialogModule, SplitButtonModule, MenuModule], providers: [ConfirmationService], template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize : itemId : item : actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" appendTo=\"body\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: MngAuthorizationService }, { type: MngActionExecutorService }, { type: i1$2.ConfirmationService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { hostClass: [{
@@ -10420,7 +10661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 args: ['route']
             }], inputDisabled: [{
                 type: Input,
-                args: ['disabled']
+                args: [{ alias: 'disabled', transform: booleanObsAttribute }]
             }], inputLoading: [{
                 type: Input,
                 args: ['loading']
@@ -10977,18 +11218,23 @@ class MngAutocompleteComponent {
         this.onTouchedFn = () => { };
         this.autocompleteFormControl = new FormControl();
         this.suggestions$ = this.suggestionsSubject.asObservable();
+        this.isPanelShown = false;
+        this.isFocused = false;
     }
     ngOnInit() {
+        this.autocompleteFormControl.valueChanges.subscribe(v => {
+            this.propagateValueChange(v);
+        });
         this.setItemsAndDataProvider();
-        if (this.selectFirst) {
-            this.suggestionSubscription = this.suggestions$.subscribe(e => this.valueChangeEventEmitter.emit(e.length === 0 ? null : e[0]));
+        if (this.selectFirst && !this.autocompleteFormControl?.value) {
+            this.onSearch({}, true);
         }
     }
     ngOnDestroy() {
         this.searchSubscription?.unsubscribe();
         this.suggestionSubscription?.unsubscribe();
     }
-    onSearch(event) {
+    onSearch(event, isInit = false) {
         this.searchSubscription?.unsubscribe();
         if (this.dataProvider) {
             const queryParamBuilder = MediusQueryParamBuilder.create();
@@ -10998,43 +11244,109 @@ class MngAutocompleteComponent {
             if (event.query && event.query.length > 0 && this.itemsLabelProperty) {
                 queryParamBuilder.withFilter(this.itemsLabelProperty, event.query, undefined, MediusFilterMatchType.StartsWith);
             }
-            this.searchSubscription = this.getLookup(queryParamBuilder.build(), event.query).subscribe({
-                next: items => {
-                    this.setSuggestionsFromItems(items, event.query);
-                },
-                error: err => {
-                    this.setSuggestionsFromItems([], event.query);
-                    const mngError = ErrorUtil.fromSubscribeError(err, 'MngAutocompleteComponentError', {
-                        search: event.query,
-                        queryParam: queryParamBuilder.build()
-                    });
-                    this.logger.log(mngError, ErrorUtil.getErrorLogLevel(mngError));
+            if (!this.queryResultCacheSubject || !this.inlineSearch) {
+                if (!this.queryResultCacheSubject) {
+                    this.queryResultCacheSubject = new ReplaySubject(1);
                 }
-            });
+                this.searchSubscription = this.getLookup(queryParamBuilder.build(), event.query).subscribe({
+                    next: items => {
+                        this.queryResultCacheSubject?.next(items);
+                        this.setSuggestionsFromItems(items, event.query);
+                        if (isInit && !this.autocompleteFormControl.value) {
+                            this.selectFirstItem();
+                        }
+                    },
+                    error: err => {
+                        this.setSuggestionsFromItems([], event.query);
+                        const mngError = ErrorUtil.fromSubscribeError(err, 'MngAutocompleteComponentError', {
+                            search: event.query,
+                            queryParam: queryParamBuilder.build()
+                        });
+                        this.logger.log(mngError, ErrorUtil.getErrorLogLevel(mngError));
+                    }
+                });
+            }
+            else if (this.queryResultCacheSubject) {
+                this.searchSubscription = this.queryResultCacheSubject.pipe(take(1)).subscribe(result => {
+                    this.setSuggestionsFromItems(result, event.query);
+                });
+            }
+        }
+    }
+    selectFirstItem() {
+        if (!this.selectFirst)
+            return;
+        if (this.suggestionsSubject.value.length > 0 && !this.userSelectedItem) {
+            const value = this.itemsValueProperty ? this.suggestionsSubject.value[0][this.itemsValueProperty] : this.suggestionsSubject.value[0];
+            this.setValue(value);
         }
+        else if (!this.userSelectedItem) {
+            // handles the case if the user provides an input and de-focuses the input field before suggestions are loaded or if there are no suggestions at all
+            this.setValue(null);
+        }
+    }
+    /**
+     * Triggered by user when selecting an item from an autocomplete suggestion list.
+     */
+    onSelect(event) {
+        this.setValue(event.value, true);
     }
-    onSelect(value) {
+    /**
+     * Selects and sets new value
+     */
+    setValue(value, fromUser = false) {
         let outputValue = value;
-        if (this.itemsValueProperty && typeof value === 'object') {
+        if (this.itemsValueProperty && value && typeof value === 'object') {
             outputValue = value[this.itemsValueProperty];
         }
-        this.onChangeFn(outputValue);
-        this.valueChangeEventEmitter.next(outputValue);
+        if (fromUser) {
+            this.userSelectedItem = outputValue;
+        }
+        else {
+            this.autocompleteFormControl.setValue(value);
+        }
+        if (!this.multiselect) {
+            this.propagateValueChange(outputValue);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onFocus(event) {
+        this.isFocused = true;
         if (this.openOnFocus) {
             this.primeAutocomplete?.show();
         }
     }
+    /**
+     * calls the selectFirst item anytime the input field goes out of focus and if the suggestions panel is not displayed.
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onBlur(event) {
+        this.isFocused = false;
+        if (!this.isPanelShown) {
+            this.selectFirstItem();
+        }
         this.formlyWrapper?.formControl?.markAsTouched();
     }
+    onShow() {
+        this.isPanelShown = true;
+    }
+    /**
+     * calls the selectFirst item anytime the suggestions panel is closed and input field isn't focused.
+     */
+    onHide() {
+        this.isPanelShown = false;
+        if (!this.isFocused) {
+            this.selectFirstItem();
+        }
+    }
     onClear() {
         this.onChangeFn();
         this.valueChangeEventEmitter.next(null);
     }
+    propagateValueChange(value) {
+        this.onChangeFn(value);
+        this.valueChangeEventEmitter.next(value);
+    }
     registerOnChange(fn) {
         this.onChangeFn = fn;
     }
@@ -11193,17 +11505,19 @@ class MngAutocompleteComponent {
                 return itemLabel.toLowerCase().startsWith(queryLowerCase);
             });
             this.suggestionsSubject.next([...filteredItems]);
+            this.userSelectedItem = undefined;
         }
         else {
             this.suggestionsSubject.next([...items]);
+            this.userSelectedItem = undefined;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngAutocompleteComponent, deps: [{ token: i0.Injector }, { token: i2.TranslateService }, { token: MngFormlyFieldWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngAutocompleteComponent, isStandalone: true, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", inlineSearch: "inlineSearch", openOnFocus: "openOnFocus", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName", showClear: "showClear", autoClear: "autoClear", selectFirst: "selectFirst" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete\n    (onFocus)=\"onFocus($event)\"\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"placeholder\"\n    [dropdown]=\"true\"\n    [dataKey]=\"dataKeyProperty\"\n    [field]=\"itemsLabelProperty\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    [minLength]=\"openOnFocus ? 0 : 1\"\n    [showClear]=\"showClear\"\n    [forceSelection]=\"autoClear\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    (onBlur)=\"onBlur($event)\"\n    (onClear)=\"onClear()\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngAutocompleteComponent, isStandalone: true, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", inlineSearch: "inlineSearch", openOnFocus: "openOnFocus", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName", showClear: "showClear", autoClear: "autoClear", selectFirst: "selectFirst" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete\n    (onFocus)=\"onFocus($event)\"\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"placeholder\"\n    [dropdown]=\"true\"\n    [dataKey]=\"dataKeyProperty\"\n    [optionLabel]=\"itemsLabelProperty\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    [minLength]=\"openOnFocus ? 0 : 1\"\n    [showClear]=\"showClear\"\n    [forceSelection]=\"autoClear\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    (onBlur)=\"onBlur($event)\"\n    (onClear)=\"onClear()\"\n    (onShow)=\"onShow()\"\n    (onHide)=\"onHide()\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], imports: [AutoCompleteModule, ReactiveFormsModule, AsyncPipe, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete\n    (onFocus)=\"onFocus($event)\"\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"placeholder\"\n    [dropdown]=\"true\"\n    [dataKey]=\"dataKeyProperty\"\n    [field]=\"itemsLabelProperty\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    [minLength]=\"openOnFocus ? 0 : 1\"\n    [showClear]=\"showClear\"\n    [forceSelection]=\"autoClear\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    (onBlur)=\"onBlur($event)\"\n    (onClear)=\"onClear()\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n" }]
+            args: [{ standalone: true, selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], imports: [AutoCompleteModule, ReactiveFormsModule, AsyncPipe, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete\n    (onFocus)=\"onFocus($event)\"\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"placeholder\"\n    [dropdown]=\"true\"\n    [dataKey]=\"dataKeyProperty\"\n    [optionLabel]=\"itemsLabelProperty\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    [minLength]=\"openOnFocus ? 0 : 1\"\n    [showClear]=\"showClear\"\n    [forceSelection]=\"autoClear\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    (onBlur)=\"onBlur($event)\"\n    (onClear)=\"onClear()\"\n    (onShow)=\"onShow()\"\n    (onHide)=\"onHide()\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2.TranslateService }, { type: MngFormlyFieldWrapperComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { dataProvider: [{
@@ -11407,11 +11721,11 @@ class MngDropdownComponent {
         return typeof this.onChangeFn !== 'undefined';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }, { token: i2.TranslateService }, { token: MngFormlyFieldWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngDropdownComponent, isStandalone: true, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsDisabledProperty: "itemsDisabledProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName", changeValueOnBlur: "changeValueOnBlur" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"placeholder\"\n    [dataKey]=\"dataKeyProperty\"\n    [optionLabel]=\"itemsLabelProperty\"\n    [optionValue]=\"itemsValueProperty\"\n    [optionDisabled]=\"itemsDisabledProperty\"\n    [options]=\"(items$ | async) ?? undefined\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    (onBlur)=\"onDropdownBlur($event)\"\n    [dropdownIcon]=\"($loading | async) ?? false ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"placeholder\"\n        [dataKey]=\"dataKeyProperty\"\n        [optionLabel]=\"itemsLabelProperty\"\n        [optionValue]=\"itemsValueProperty\"\n        [optionDisabled]=\"itemsDisabledProperty\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"className\"\n        [panelStyleClass]=\"dropdownClassName\"\n        [filter]=\"true\"\n        [showToggleAll]=\"false\"\n        (onPanelHide)=\"onPanelHide($event)\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectionLimit"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngDropdownComponent, isStandalone: true, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsDisabledProperty: "itemsDisabledProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName", changeValueOnBlur: "changeValueOnBlur" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"placeholder\"\n    [dataKey]=\"dataKeyProperty\"\n    [optionLabel]=\"itemsLabelProperty\"\n    [optionValue]=\"itemsValueProperty\"\n    [optionDisabled]=\"itemsDisabledProperty\"\n    [options]=\"(items$ | async) ?? undefined\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    (onBlur)=\"onDropdownBlur($event)\"\n    [dropdownIcon]=\"($loading | async) ?? false ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [formControl]=\"dropdownFormControl\"\n        [placeholder]=\"placeholder\"\n        [dataKey]=\"dataKeyProperty\"\n        [optionLabel]=\"itemsLabelProperty\"\n        [optionValue]=\"itemsValueProperty\"\n        [optionDisabled]=\"itemsDisabledProperty\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"className\"\n        [panelStyleClass]=\"dropdownClassName\"\n        [filter]=\"true\"\n        [showToggleAll]=\"false\"\n        (onPanelHide)=\"onPanelHide($event)\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], imports: [DropdownModule, MultiSelectModule, TranslateModule, AsyncPipe, NgIf, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"placeholder\"\n    [dataKey]=\"dataKeyProperty\"\n    [optionLabel]=\"itemsLabelProperty\"\n    [optionValue]=\"itemsValueProperty\"\n    [optionDisabled]=\"itemsDisabledProperty\"\n    [options]=\"(items$ | async) ?? undefined\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    (onBlur)=\"onDropdownBlur($event)\"\n    [dropdownIcon]=\"($loading | async) ?? false ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"placeholder\"\n        [dataKey]=\"dataKeyProperty\"\n        [optionLabel]=\"itemsLabelProperty\"\n        [optionValue]=\"itemsValueProperty\"\n        [optionDisabled]=\"itemsDisabledProperty\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"className\"\n        [panelStyleClass]=\"dropdownClassName\"\n        [filter]=\"true\"\n        [showToggleAll]=\"false\"\n        (onPanelHide)=\"onPanelHide($event)\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
+            args: [{ standalone: true, selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], imports: [DropdownModule, MultiSelectModule, TranslateModule, AsyncPipe, NgIf, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"placeholder\"\n    [dataKey]=\"dataKeyProperty\"\n    [optionLabel]=\"itemsLabelProperty\"\n    [optionValue]=\"itemsValueProperty\"\n    [optionDisabled]=\"itemsDisabledProperty\"\n    [options]=\"(items$ | async) ?? undefined\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"className\"\n    [panelStyleClass]=\"dropdownClassName\"\n    (onBlur)=\"onDropdownBlur($event)\"\n    [dropdownIcon]=\"($loading | async) ?? false ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        [maxSelectedLabels]=\"1\"\n        [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n        [formControl]=\"dropdownFormControl\"\n        [placeholder]=\"placeholder\"\n        [dataKey]=\"dataKeyProperty\"\n        [optionLabel]=\"itemsLabelProperty\"\n        [optionValue]=\"itemsValueProperty\"\n        [optionDisabled]=\"itemsDisabledProperty\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"className\"\n        [panelStyleClass]=\"dropdownClassName\"\n        [filter]=\"true\"\n        [showToggleAll]=\"false\"\n        (onPanelHide)=\"onPanelHide($event)\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2.TranslateService }, { type: MngFormlyFieldWrapperComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { dataProvider: [{
@@ -11460,6 +11774,7 @@ class MngDateRangeComponent {
         this.formBuilder = formBuilder;
         this.showTime = false;
         this.showSeconds = false;
+        this._disabled = false;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChangeFn = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -11475,12 +11790,17 @@ class MngDateRangeComponent {
     get dateRangeCtrl() {
         return this.fromToFormControl.get('dateRange');
     }
+    set disabled(isDisabled) {
+        this._disabled = isDisabled;
+        this.setDisabledState(isDisabled);
+    }
     ngOnInit() {
         this.fromToFormControl = this.formBuilder.group({
             from: [],
             to: [],
             dateRange: []
         });
+        this.setDisabledState(this._disabled);
         this.subscriptions.push(merge(this.fromCtrl.valueChanges, this.toCtrl.valueChanges, this.dateRangeCtrl.valueChanges).subscribe(() => this.onValueChange()));
     }
     ngOnDestroy() {
@@ -11493,10 +11813,10 @@ class MngDateRangeComponent {
         this.onTouchedFn = fn;
     }
     setDisabledState(isDisabled) {
-        if (isDisabled) {
+        if (isDisabled && this.fromToFormControl.enabled) {
             this.fromToFormControl.disable();
         }
-        else {
+        else if (!isDisabled && this.fromToFormControl.disabled) {
             this.fromToFormControl.enable();
         }
     }
@@ -11537,7 +11857,7 @@ class MngDateRangeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngDateRangeComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngDateRangeComponent, isStandalone: true, selector: "mng-date-range", inputs: { placeholder: "placeholder", showTime: "showTime", showSeconds: "showSeconds", dateFormat: "dateFormat" }, providers: [MNG_DATE_RANGE_VALUE_ACCESSOR], ngImport: i0, template: "<ng-container *ngIf=\"showTime; else defaultRange\">\n    <div class=\"flex gap-2\">\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"fromCtrl\"\n            [maxDate]=\"toCtrl.value\"\n            [placeholder]=\"placeholder\"\n            [dateFormat]=\"dateFormat\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            [firstDayOfWeek]=\"1\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"toCtrl\"\n            [minDate]=\"fromCtrl.value\"\n            [placeholder]=\"placeholder\"\n            [dateFormat]=\"dateFormat\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            [firstDayOfWeek]=\"1\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n    </div>\n</ng-container>\n<ng-template #defaultRange>\n    <p-calendar\n        appendTo=\"body\"\n        [formControl]=\"dateRangeCtrl\"\n        [placeholder]=\"placeholder\"\n        [dateFormat]=\"dateFormat\"\n        selectionMode=\"range\"\n        [showIcon]=\"true\"\n        [firstDayOfWeek]=\"1\"\n        (onFocus)=\"onTouchedFn()\"></p-calendar>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.6", type: MngDateRangeComponent, isStandalone: true, selector: "mng-date-range", inputs: { placeholder: "placeholder", showTime: "showTime", showSeconds: "showSeconds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute] }, providers: [MNG_DATE_RANGE_VALUE_ACCESSOR], ngImport: i0, template: "<ng-container *ngIf=\"showTime; else defaultRange\">\n    <div class=\"flex gap-2\">\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"fromCtrl\"\n            [maxDate]=\"toCtrl.value\"\n            [placeholder]=\"placeholder\"\n            [dateFormat]=\"dateFormat\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            [firstDayOfWeek]=\"1\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"toCtrl\"\n            [minDate]=\"fromCtrl.value\"\n            [placeholder]=\"placeholder\"\n            [dateFormat]=\"dateFormat\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            [firstDayOfWeek]=\"1\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n    </div>\n</ng-container>\n<ng-template #defaultRange>\n    <p-calendar\n        appendTo=\"body\"\n        [formControl]=\"dateRangeCtrl\"\n        [placeholder]=\"placeholder\"\n        [dateFormat]=\"dateFormat\"\n        selectionMode=\"range\"\n        [showIcon]=\"true\"\n        [firstDayOfWeek]=\"1\"\n        (onFocus)=\"onTouchedFn()\"></p-calendar>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngDateRangeComponent, decorators: [{
             type: Component,
@@ -11550,6 +11870,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 type: Input
             }], dateFormat: [{
                 type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 class MngActionEditorComponent {
@@ -11947,11 +12270,11 @@ class MngActionEditorComponent {
         this.instanceReactivationSubscription?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngActionEditorComponent, deps: [{ token: i2.TranslateService }, { token: MngActionExecutorService }, { token: MngCommonsService }, { token: i1$2.ConfirmationService }, { token: i4.DialogService }, { token: i4.DynamicDialogConfig, optional: true }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngActionEditorComponent, isStandalone: true, selector: "mng-action-editor", inputs: { action: "action", itemIdInit: ["itemId", "itemIdInit"], itemInit: ["item", "itemInit"], actionData: "actionData", dataProvider: "dataProvider", viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { actionRunEventEmitter: "actionSubmit", actionCancelEventEmitter: "actionCancel" }, host: { listeners: { "window:beforeunload": "beforeWindowUnload()", "window:keydown.Escape": "onEscapePressed()" } }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<h5 *ngIf=\"!isDialog && title\">{{ title }}</h5>\n<span *ngIf=\"isDialog && action.activationTrigger === ActionActivationTriggerEnum.OnRoute\" class=\"p-dialog-header dialog-close-button-wrapper\">\n    <button\n        class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n        type=\"button\"\n        (click)=\"closeWithUnsavedChangesConfirmation()\"\n        (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n        <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n    </button>\n</span>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1 mng-action-editor-toolbar-container\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor\n            *ngIf=\"action.editorDescriptor && (loading$ | async) === false\"\n            [descriptor]=\"action.editorDescriptor\"\n            [item]=\"item\"\n            [viewContainer]=\"viewContainer\"\n            [isFormDisabled]=\"isFormDisabled\"\n            (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerLeftActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerRightActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n    </div>\n</div>\n<p-confirmDialog [key]=\"confirmDialogKey\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6$2.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "viewContainer", "isFormDisabled"], outputs: ["formSubmit"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i9.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngActionEditorComponent, isStandalone: true, selector: "mng-action-editor", inputs: { action: "action", itemIdInit: ["itemId", "itemIdInit"], itemInit: ["item", "itemInit"], actionData: "actionData", dataProvider: "dataProvider", viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { actionRunEventEmitter: "actionSubmit", actionCancelEventEmitter: "actionCancel" }, host: { listeners: { "window:beforeunload": "beforeWindowUnload()", "window:keydown.Escape": "onEscapePressed()" } }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: MngDialogKeydownHandlerDirective }], ngImport: i0, template: "<h5 *ngIf=\"!isDialog && title\">{{ title }}</h5>\n<span *ngIf=\"isDialog && action.activationTrigger === ActionActivationTriggerEnum.OnRoute\" class=\"p-dialog-header dialog-close-button-wrapper\">\n    <button\n        class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n        type=\"button\"\n        (click)=\"closeWithUnsavedChangesConfirmation()\"\n        (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n        <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n    </button>\n</span>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1 mng-action-editor-toolbar-container\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor\n            *ngIf=\"action.editorDescriptor && (loading$ | async) === false\"\n            [descriptor]=\"action.editorDescriptor\"\n            [item]=\"item\"\n            [viewContainer]=\"viewContainer\"\n            [isFormDisabled]=\"isFormDisabled\"\n            (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerLeftActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerRightActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n    </div>\n</div>\n<p-confirmDialog [key]=\"confirmDialogKey\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i6$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "viewContainer", "isFormDisabled"], outputs: ["formSubmit"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i9.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngActionEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-action-editor', imports: [NgIf, ToolbarModule, MngActionComponent, NgForOf, AsyncPipe, ProgressSpinnerModule, MngFormEditorComponent, ConfirmDialogModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 *ngIf=\"!isDialog && title\">{{ title }}</h5>\n<span *ngIf=\"isDialog && action.activationTrigger === ActionActivationTriggerEnum.OnRoute\" class=\"p-dialog-header dialog-close-button-wrapper\">\n    <button\n        class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n        type=\"button\"\n        (click)=\"closeWithUnsavedChangesConfirmation()\"\n        (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n        <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n    </button>\n</span>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1 mng-action-editor-toolbar-container\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor\n            *ngIf=\"action.editorDescriptor && (loading$ | async) === false\"\n            [descriptor]=\"action.editorDescriptor\"\n            [item]=\"item\"\n            [viewContainer]=\"viewContainer\"\n            [isFormDisabled]=\"isFormDisabled\"\n            (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerLeftActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerRightActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n    </div>\n</div>\n<p-confirmDialog [key]=\"confirmDialogKey\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"] }]
+            args: [{ standalone: true, selector: 'mng-action-editor', imports: [NgIf, ToolbarModule, MngActionComponent, NgForOf, AsyncPipe, ProgressSpinnerModule, MngFormEditorComponent, ConfirmDialogModule], hostDirectives: [MngDialogKeydownHandlerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 *ngIf=\"!isDialog && title\">{{ title }}</h5>\n<span *ngIf=\"isDialog && action.activationTrigger === ActionActivationTriggerEnum.OnRoute\" class=\"p-dialog-header dialog-close-button-wrapper\">\n    <button\n        class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n        type=\"button\"\n        (click)=\"closeWithUnsavedChangesConfirmation()\"\n        (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n        <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n    </button>\n</span>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1 mng-action-editor-toolbar-container\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading$\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                    [viewContainer]=\"viewContainer\"\n                    [hostComponent]=\"this\"\n                    [route]=\"dialogRoute\"\n                    [item]=\"item\"\n                    [itemId]=\"itemId\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor\n            *ngIf=\"action.editorDescriptor && (loading$ | async) === false\"\n            [descriptor]=\"action.editorDescriptor\"\n            [item]=\"item\"\n            [viewContainer]=\"viewContainer\"\n            [isFormDisabled]=\"isFormDisabled\"\n            (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerLeftActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n        <div>\n            <mng-action\n                *ngFor=\"let action of footerRightActions\"\n                [action]=\"action\"\n                [disabled]=\"submitLoading$\"\n                [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading$ : actionDefaultLoadingInput\"\n                [viewContainer]=\"viewContainer\"\n                [hostComponent]=\"this\"\n                [route]=\"dialogRoute\"\n                [item]=\"item\"\n                [itemId]=\"itemId\"></mng-action>\n        </div>\n    </div>\n</div>\n<p-confirmDialog [key]=\"confirmDialogKey\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.TranslateService }, { type: MngActionExecutorService }, { type: MngCommonsService }, { type: i1$2.ConfirmationService }, { type: i4.DialogService }, { type: i4.DynamicDialogConfig, decorators: [{
                     type: Optional
                 }] }, { type: MngViewContainerComponentService, decorators: [{
@@ -12237,7 +12560,7 @@ class MngFormlyFieldInputComponent extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldInputComponent, deps: [{ token: LOCALE_ID }, { token: i1$3.FormBuilder }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldInputComponent, isStandalone: true, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"props.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"descriptor.numberAutoCorrect ? descriptor.numberMin : undefined\"\n        [max]=\"descriptor.numberAutoCorrect ? descriptor.numberMax : undefined\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"descriptor.numberUseGrouping\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [locale]=\"descriptor.locale ?? applicationLocale\"\n        [mode]=\"numberFieldMode\"\n        [currency]=\"currency\"\n        [currencyDisplay]=\"descriptor.currencyDisplay\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"field flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        appendTo=\"body\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showSeconds]=\"descriptor.datePickerShowSeconds\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [firstDayOfWeek]=\"1\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"descriptor.mask\"\n        [placeholder]=\"descriptor.placeholder\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <p-fileUpload\n        #fileUploadInput\n        *ngSwitchCase=\"'file'\"\n        [multiple]=\"descriptor.fileMultiple\"\n        [accept]=\"descriptor.fileAccept\"\n        [maxFileSize]=\"descriptor.fileMaxFileSize\"\n        [showUploadButton]=\"false\"\n        (onSelect)=\"onFileSelect($event)\"\n        (onRemove)=\"onFileRemove($event)\"\n        (onClear)=\"onFileClear($event)\">\n        <ng-template let-file let-idx=\"index\" pTemplate=\"file\">\n            <div class=\"p-fileupload-row\">\n                <div>\n                    <ng-container *ngIf=\"fileUploadInput.isImage(file); else fileInputDocument\">\n                        <span *ngIf=\"isFileImageSvg(file); else fileInputImageDefault\" class=\"flex align-items-center justify-content-center\">\n                            <i class=\"pi pi-image text-2xl\"></i>\n                        </span>\n                        <ng-template #fileInputImageDefault>\n                            <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                        </ng-template>\n                    </ng-container>\n                    <ng-template #fileInputDocument>\n                        <span class=\"flex align-items-center justify-content-center\">\n                            <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                        </span>\n                    </ng-template>\n                </div>\n                <div class=\"p-fileupload-filename\">{{ file.name }}</div>\n                <div>{{ fileUploadInput.formatSize(file.size) }}</div>\n                <div>\n                    <button\n                        type=\"button\"\n                        pButton\n                        (click)=\"fileUploadInput.remove($event, idx)\"\n                        [disabled]=\"fileUploadInput.uploading\"\n                        class=\"p-button-icon-only\"\n                        [class]=\"fileUploadInput.removeStyleClass\">\n                        <TimesIcon *ngIf=\"!fileUploadInput.cancelIconTemplate\" />\n                    </button>\n                </div>\n            </div>\n        </ng-template>\n    </p-fileUpload>\n\n    <div *ngSwitchCase=\"'imageUrl'\">\n        <div *ngIf=\"descriptor.imagePreview\" class=\"flex flex-wrap justify-content-start\">\n            <ng-container *ngFor=\"let image of imageFormArray.controls; let idx = index\">\n                <p-image\n                    *ngIf=\"imageFormArray.at(idx).valid && imageFormArray.at(idx).value; else noImage\"\n                    [src]=\"imageFormArray.at(idx).value\"\n                    [preview]=\"true\"\n                    (onImageError)=\"onImageUrlLoadError()\"\n                    styleClass=\"mng-image m-2\"></p-image>\n            </ng-container>\n            <ng-template #noImage>\n                <span class=\"mng-image m-2 p-image-preview-container no-image\">\n                    <div class=\"p-image-preview-indicator\">\n                        <i class=\"p-image-preview-icon pi pi-ban\"></i>\n                    </div>\n                </span>\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled\">\n            <div *ngFor=\"let imageCtrlName of imageFormArray.controls; let idx = index\" class=\"p-inputgroup mt-1\">\n                <input\n                    pInputText\n                    [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                    [id]=\"$any(key)\"\n                    type=\"text\"\n                    [formControl]=\"$any(imageFormArray.at(idx))\"\n                    [formlyAttributes]=\"field\" />\n                <button *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\" type=\"button\" pButton pRipple icon=\"pi pi-minus\" (click)=\"removeImageUrlAt(idx)\"></button>\n            </div>\n            <button\n                *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\"\n                type=\"button\"\n                pButton\n                pRipple\n                icon=\"pi pi-plus\"\n                class=\"p-button-primary w-auto mt-1\"\n                [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                (click)=\"addImageUrl()\"></button>\n        </ng-container>\n    </div>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"props.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i6$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i7.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i10$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i11$1.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i12.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i13.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldInputComponent, isStandalone: true, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"props.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"descriptor.numberAutoCorrect ? descriptor.numberMin : undefined\"\n        [max]=\"descriptor.numberAutoCorrect ? descriptor.numberMax : undefined\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"descriptor.numberUseGrouping\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [locale]=\"descriptor.locale ?? applicationLocale\"\n        [mode]=\"numberFieldMode\"\n        [currency]=\"currency\"\n        [currencyDisplay]=\"descriptor.currencyDisplay\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"field flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        appendTo=\"body\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showSeconds]=\"descriptor.datePickerShowSeconds\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [firstDayOfWeek]=\"1\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"descriptor.mask\"\n        [placeholder]=\"descriptor.placeholder\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <p-fileUpload\n        #fileUploadInput\n        *ngSwitchCase=\"'file'\"\n        [disabled]=\"iFormControl.disabled\"\n        [multiple]=\"descriptor.fileMultiple\"\n        [accept]=\"descriptor.fileAccept\"\n        [maxFileSize]=\"descriptor.fileMaxFileSize\"\n        [showUploadButton]=\"false\"\n        (onSelect)=\"onFileSelect($event)\"\n        (onRemove)=\"onFileRemove($event)\"\n        (onClear)=\"onFileClear($event)\">\n        <ng-template let-file let-idx=\"index\" pTemplate=\"file\">\n            <div class=\"p-fileupload-row\">\n                <div>\n                    <ng-container *ngIf=\"fileUploadInput.isImage(file); else fileInputDocument\">\n                        <span *ngIf=\"isFileImageSvg(file); else fileInputImageDefault\" class=\"flex align-items-center justify-content-center\">\n                            <i class=\"pi pi-image text-2xl\"></i>\n                        </span>\n                        <ng-template #fileInputImageDefault>\n                            <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                        </ng-template>\n                    </ng-container>\n                    <ng-template #fileInputDocument>\n                        <span class=\"flex align-items-center justify-content-center\">\n                            <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                        </span>\n                    </ng-template>\n                </div>\n                <div class=\"p-fileupload-filename\">{{ file.name }}</div>\n                <div>{{ fileUploadInput.formatSize(file.size) }}</div>\n                <div>\n                    <button\n                        type=\"button\"\n                        pButton\n                        (click)=\"fileUploadInput.remove($event, idx)\"\n                        [disabled]=\"fileUploadInput.uploading\"\n                        class=\"p-button-icon-only\"\n                        [class]=\"fileUploadInput.removeStyleClass\">\n                        <TimesIcon *ngIf=\"!fileUploadInput.cancelIconTemplate\" />\n                    </button>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template pTemplate=\"content\" let-files>\n            <div *ngIf=\"files.length === 0\" class=\"text-gray-300 dropdown-area\">\n                <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n            </div>\n        </ng-template>\n    </p-fileUpload>\n\n    <div *ngSwitchCase=\"'imageUrl'\">\n        <div *ngIf=\"descriptor.imagePreview\" class=\"flex flex-wrap justify-content-start\">\n            <ng-container *ngFor=\"let image of imageFormArray.controls; let idx = index\">\n                <p-image\n                    *ngIf=\"imageFormArray.at(idx).valid && imageFormArray.at(idx).value; else noImage\"\n                    [src]=\"imageFormArray.at(idx).value\"\n                    [preview]=\"true\"\n                    (onImageError)=\"onImageUrlLoadError()\"\n                    styleClass=\"mng-image m-2\"></p-image>\n            </ng-container>\n            <ng-template #noImage>\n                <span class=\"mng-image m-2 p-image-preview-container no-image\">\n                    <div class=\"p-image-preview-indicator\">\n                        <i class=\"p-image-preview-icon pi pi-ban\"></i>\n                    </div>\n                </span>\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled\">\n            <div *ngFor=\"let imageCtrlName of imageFormArray.controls; let idx = index\" class=\"p-inputgroup mt-1\">\n                <input\n                    pInputText\n                    [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                    [id]=\"$any(key)\"\n                    type=\"text\"\n                    [formControl]=\"$any(imageFormArray.at(idx))\"\n                    [formlyAttributes]=\"field\" />\n                <button *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\" type=\"button\" pButton pRipple icon=\"pi pi-minus\" (click)=\"removeImageUrlAt(idx)\"></button>\n            </div>\n            <button\n                *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\"\n                type=\"button\"\n                pButton\n                pRipple\n                icon=\"pi pi-plus\"\n                class=\"p-button-primary w-auto mt-1\"\n                [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                (click)=\"addImageUrl()\"></button>\n        </ng-container>\n    </div>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"props.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i6$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i10$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i11$1.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i12.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i13.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6$4.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldInputComponent, decorators: [{
             type: Component,
@@ -12261,7 +12584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                         InputTextModule,
                         RippleModule,
                         TimesIcon
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"props.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"descriptor.numberAutoCorrect ? descriptor.numberMin : undefined\"\n        [max]=\"descriptor.numberAutoCorrect ? descriptor.numberMax : undefined\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"descriptor.numberUseGrouping\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [locale]=\"descriptor.locale ?? applicationLocale\"\n        [mode]=\"numberFieldMode\"\n        [currency]=\"currency\"\n        [currencyDisplay]=\"descriptor.currencyDisplay\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"field flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        appendTo=\"body\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showSeconds]=\"descriptor.datePickerShowSeconds\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [firstDayOfWeek]=\"1\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"descriptor.mask\"\n        [placeholder]=\"descriptor.placeholder\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <p-fileUpload\n        #fileUploadInput\n        *ngSwitchCase=\"'file'\"\n        [multiple]=\"descriptor.fileMultiple\"\n        [accept]=\"descriptor.fileAccept\"\n        [maxFileSize]=\"descriptor.fileMaxFileSize\"\n        [showUploadButton]=\"false\"\n        (onSelect)=\"onFileSelect($event)\"\n        (onRemove)=\"onFileRemove($event)\"\n        (onClear)=\"onFileClear($event)\">\n        <ng-template let-file let-idx=\"index\" pTemplate=\"file\">\n            <div class=\"p-fileupload-row\">\n                <div>\n                    <ng-container *ngIf=\"fileUploadInput.isImage(file); else fileInputDocument\">\n                        <span *ngIf=\"isFileImageSvg(file); else fileInputImageDefault\" class=\"flex align-items-center justify-content-center\">\n                            <i class=\"pi pi-image text-2xl\"></i>\n                        </span>\n                        <ng-template #fileInputImageDefault>\n                            <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                        </ng-template>\n                    </ng-container>\n                    <ng-template #fileInputDocument>\n                        <span class=\"flex align-items-center justify-content-center\">\n                            <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                        </span>\n                    </ng-template>\n                </div>\n                <div class=\"p-fileupload-filename\">{{ file.name }}</div>\n                <div>{{ fileUploadInput.formatSize(file.size) }}</div>\n                <div>\n                    <button\n                        type=\"button\"\n                        pButton\n                        (click)=\"fileUploadInput.remove($event, idx)\"\n                        [disabled]=\"fileUploadInput.uploading\"\n                        class=\"p-button-icon-only\"\n                        [class]=\"fileUploadInput.removeStyleClass\">\n                        <TimesIcon *ngIf=\"!fileUploadInput.cancelIconTemplate\" />\n                    </button>\n                </div>\n            </div>\n        </ng-template>\n    </p-fileUpload>\n\n    <div *ngSwitchCase=\"'imageUrl'\">\n        <div *ngIf=\"descriptor.imagePreview\" class=\"flex flex-wrap justify-content-start\">\n            <ng-container *ngFor=\"let image of imageFormArray.controls; let idx = index\">\n                <p-image\n                    *ngIf=\"imageFormArray.at(idx).valid && imageFormArray.at(idx).value; else noImage\"\n                    [src]=\"imageFormArray.at(idx).value\"\n                    [preview]=\"true\"\n                    (onImageError)=\"onImageUrlLoadError()\"\n                    styleClass=\"mng-image m-2\"></p-image>\n            </ng-container>\n            <ng-template #noImage>\n                <span class=\"mng-image m-2 p-image-preview-container no-image\">\n                    <div class=\"p-image-preview-indicator\">\n                        <i class=\"p-image-preview-icon pi pi-ban\"></i>\n                    </div>\n                </span>\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled\">\n            <div *ngFor=\"let imageCtrlName of imageFormArray.controls; let idx = index\" class=\"p-inputgroup mt-1\">\n                <input\n                    pInputText\n                    [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                    [id]=\"$any(key)\"\n                    type=\"text\"\n                    [formControl]=\"$any(imageFormArray.at(idx))\"\n                    [formlyAttributes]=\"field\" />\n                <button *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\" type=\"button\" pButton pRipple icon=\"pi pi-minus\" (click)=\"removeImageUrlAt(idx)\"></button>\n            </div>\n            <button\n                *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\"\n                type=\"button\"\n                pButton\n                pRipple\n                icon=\"pi pi-plus\"\n                class=\"p-button-primary w-auto mt-1\"\n                [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                (click)=\"addImageUrl()\"></button>\n        </ng-container>\n    </div>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"props.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"props.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"descriptor.numberAutoCorrect ? descriptor.numberMin : undefined\"\n        [max]=\"descriptor.numberAutoCorrect ? descriptor.numberMax : undefined\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"descriptor.numberUseGrouping\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [locale]=\"descriptor.locale ?? applicationLocale\"\n        [mode]=\"numberFieldMode\"\n        [currency]=\"currency\"\n        [currencyDisplay]=\"descriptor.currencyDisplay\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"field flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        appendTo=\"body\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showSeconds]=\"descriptor.datePickerShowSeconds\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\"\n        [firstDayOfWeek]=\"1\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"descriptor.mask\"\n        [placeholder]=\"descriptor.placeholder\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <p-fileUpload\n        #fileUploadInput\n        *ngSwitchCase=\"'file'\"\n        [disabled]=\"iFormControl.disabled\"\n        [multiple]=\"descriptor.fileMultiple\"\n        [accept]=\"descriptor.fileAccept\"\n        [maxFileSize]=\"descriptor.fileMaxFileSize\"\n        [showUploadButton]=\"false\"\n        (onSelect)=\"onFileSelect($event)\"\n        (onRemove)=\"onFileRemove($event)\"\n        (onClear)=\"onFileClear($event)\">\n        <ng-template let-file let-idx=\"index\" pTemplate=\"file\">\n            <div class=\"p-fileupload-row\">\n                <div>\n                    <ng-container *ngIf=\"fileUploadInput.isImage(file); else fileInputDocument\">\n                        <span *ngIf=\"isFileImageSvg(file); else fileInputImageDefault\" class=\"flex align-items-center justify-content-center\">\n                            <i class=\"pi pi-image text-2xl\"></i>\n                        </span>\n                        <ng-template #fileInputImageDefault>\n                            <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                        </ng-template>\n                    </ng-container>\n                    <ng-template #fileInputDocument>\n                        <span class=\"flex align-items-center justify-content-center\">\n                            <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                        </span>\n                    </ng-template>\n                </div>\n                <div class=\"p-fileupload-filename\">{{ file.name }}</div>\n                <div>{{ fileUploadInput.formatSize(file.size) }}</div>\n                <div>\n                    <button\n                        type=\"button\"\n                        pButton\n                        (click)=\"fileUploadInput.remove($event, idx)\"\n                        [disabled]=\"fileUploadInput.uploading\"\n                        class=\"p-button-icon-only\"\n                        [class]=\"fileUploadInput.removeStyleClass\">\n                        <TimesIcon *ngIf=\"!fileUploadInput.cancelIconTemplate\" />\n                    </button>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template pTemplate=\"content\" let-files>\n            <div *ngIf=\"files.length === 0\" class=\"text-gray-300 dropdown-area\">\n                <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n            </div>\n        </ng-template>\n    </p-fileUpload>\n\n    <div *ngSwitchCase=\"'imageUrl'\">\n        <div *ngIf=\"descriptor.imagePreview\" class=\"flex flex-wrap justify-content-start\">\n            <ng-container *ngFor=\"let image of imageFormArray.controls; let idx = index\">\n                <p-image\n                    *ngIf=\"imageFormArray.at(idx).valid && imageFormArray.at(idx).value; else noImage\"\n                    [src]=\"imageFormArray.at(idx).value\"\n                    [preview]=\"true\"\n                    (onImageError)=\"onImageUrlLoadError()\"\n                    styleClass=\"mng-image m-2\"></p-image>\n            </ng-container>\n            <ng-template #noImage>\n                <span class=\"mng-image m-2 p-image-preview-container no-image\">\n                    <div class=\"p-image-preview-indicator\">\n                        <i class=\"p-image-preview-icon pi pi-ban\"></i>\n                    </div>\n                </span>\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled\">\n            <div *ngFor=\"let imageCtrlName of imageFormArray.controls; let idx = index\" class=\"p-inputgroup mt-1\">\n                <input\n                    pInputText\n                    [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                    [id]=\"$any(key)\"\n                    type=\"text\"\n                    [formControl]=\"$any(imageFormArray.at(idx))\"\n                    [formlyAttributes]=\"field\" />\n                <button *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\" type=\"button\" pButton pRipple icon=\"pi pi-minus\" (click)=\"removeImageUrlAt(idx)\"></button>\n            </div>\n            <button\n                *ngIf=\"descriptor.fileMultiple && !iFormControl.disabled\"\n                type=\"button\"\n                pButton\n                pRipple\n                icon=\"pi pi-plus\"\n                class=\"p-button-primary w-auto mt-1\"\n                [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                (click)=\"addImageUrl()\"></button>\n        </ng-container>\n    </div>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"props.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -12347,69 +12670,117 @@ class MngTableReloadEvent {
  * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
  * and these must be propagated through to this component and beyond to primeNG.
  */
-class MngTableColumnFilterComponent {
-    constructor(primeConfig) {
-        this.primeConfig = primeConfig;
+class MngTableColumnFilterFullComponent {
+    get activeMatchMode() {
+        const filter = this.primeTable.filters[this.primeField];
+        return filter?.matchMode;
+    }
+    constructor() {
         this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
         this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
+        this.el = inject(ElementRef);
+        this.primeTable = inject(Table);
+        this.mngTable = inject(MngTableComponent);
+        this.renderer = inject(Renderer2);
+        this.primeConfig = inject(PrimeNGConfig);
+        this.overlayService = inject(OverlayService);
+        this.cd = inject(ChangeDetectorRef);
+        this.document = window.document;
         this.primeType = 'text';
-        this.primeShowMatchMode = true;
-        this.primeDisplay = 'row';
+        // public matchModes: SelectItem[] = [];
+        this.matchModes = signal([]);
+        this.filterConstraint = signal(undefined);
+        this.isFilterSet = computed(() => this.filterConstraint()?.matchMode === FilterMatchModeEnum.Exists ||
+            this.filterConstraint()?.matchMode === FilterMatchModeEnum.DoesNotExist ||
+            !this.primeTable.isFilterBlank(this.filterConstraint()?.value));
+        this.isInputDisabled = computed(() => this.filterConstraint()?.matchMode === FilterMatchModeEnum.Exists || this.filterConstraint()?.matchMode === FilterMatchModeEnum.DoesNotExist);
+        this.overlayVisible = signal(false);
+        this.window = this.document.defaultView;
+        // eslint-disable-next-line @typescript-eslint/ban-types
         this.dateDebounceSubject = new Subject();
-        this.dateDebounceSubscription = this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged()).subscribe(v => {
-            this.dateFilterCallback?.(v);
+        this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed()).subscribe(v => {
+            this.updateFilterValue(v);
         });
     }
-    get activeMatchMode() {
-        const filter = this.primeColumnFilter?.dt.filters[this.descriptor.property];
-        return filter?.matchMode;
-    }
     ngOnInit() {
-        this.primeDefaultMatchMode = this.descriptor.defaultFilterMatchMode ?? FilterMatchModeEnum.Equals;
+        this.primeField = this.descriptor.property;
         switch (this.descriptor.filterType) {
             case FilterTypeEnum.Boolean:
                 this.primeType = 'boolean';
-                this.primeShowMatchMode = false;
                 break;
             case FilterTypeEnum.Number:
                 this.primeType = 'numeric';
                 break;
             case FilterTypeEnum.Date:
                 this.primeType = 'date';
-                this.primeDefaultMatchMode = FilterMatchModeEnum.DateIs;
                 break;
             case FilterTypeEnum.Lookup:
+            case FilterTypeEnum.LookupEnum:
                 this.primeType = 'lookup';
                 this.lookupDescriptor = this.descriptor;
-                this.primeField = `${this.descriptor.property}${this.lookupDescriptor.itemsValueProperty ? `.${this.lookupDescriptor.itemsValueProperty}` : ''}`;
-                this.primeMatchModeCustomOptions = [
-                    { value: FilterMatchModeEnum.Equals, label: this.primeConfig.getTranslation(FilterMatchModeEnum.Equals) },
-                    { value: FilterMatchModeEnum.NotEquals, label: this.primeConfig.getTranslation(FilterMatchModeEnum.NotEquals) }
-                ];
-                if (this.lookupDescriptor.multiselect) {
-                    this.primeMatchModeCustomOptions = undefined;
-                    this.primeDefaultMatchMode = FilterMatchModeEnum.In;
-                }
                 break;
             case FilterTypeEnum.String:
                 this.primeType = 'text';
-                this.primeDefaultMatchMode = FilterMatchModeEnum.Contains;
                 break;
         }
-        if (this.descriptor.matchModes) {
-            this.primeMatchModeCustomOptions = this.descriptor.matchModes.map(mm => ({ value: mm, label: this.primeConfig.getTranslation(mm) }));
-            if (!this.primeMatchModeCustomOptions.map(matchMode => matchMode.value).includes(this.primeDefaultMatchMode)) {
-                this.primeDefaultMatchMode = this.descriptor.matchModes[0];
+        // generate match mode options
+        this.translationSubscription = this.primeConfig.translationObserver.subscribe(() => {
+            this.generateMatchModeOptions();
+        });
+        this.generateMatchModeOptions();
+        this.initFilterConstraint();
+        this.mngTableFilterMetadataSubscription = this.mngTable.filterMetadata$
+            .pipe(filter$1(e => !!e[this.primeField]), map(e => e[this.primeField]))
+            .subscribe(e => {
+            if (e && (!this.filterConstraint() || this.filterConstraint().value !== e.value || this.filterConstraint().matchMode !== e.matchMode)) {
+                this.filterConstraint.set(e);
             }
-            this.primeShowMatchMode = this.primeMatchModeCustomOptions?.length > 1;
-        }
+        });
     }
     ngOnDestroy() {
-        this.dateDebounceSubscription?.unsubscribe();
+        if (this.overlay) {
+            this.renderer.appendChild(this.el.nativeElement, this.overlay);
+            ZIndexUtils.clear(this.overlay);
+            this.onOverlayHide();
+        }
+        this.translationSubscription?.unsubscribe();
+        this.resetSubscription?.unsubscribe();
+        this.overlaySubscription?.unsubscribe();
+        this.mngTableFilterMetadataSubscription?.unsubscribe();
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
-    dateFilter(value, filterCallback) {
-        this.dateFilterCallback = filterCallback;
+    onTextModelChange(event) {
+        const value = event.target.value;
+        if (value === '') {
+            this.updateFilterValue(value);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onTextInputEnterKeyDown(event) {
+        const value = event.target.value;
+        this.updateFilterValue(value);
+        event.preventDefault();
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onNumericModelChange(value) {
+        if (value === null) {
+            this.updateFilterValue(value);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onNumericInputKeyDown(event) {
+        if (event.key === 'Enter') {
+            const value = event?.target?.value ?? null;
+            this.updateFilterValue(value !== null ? +value : null);
+            event.preventDefault();
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onTristateModelChange(value) {
+        this.updateFilterValue(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dateFilter(value) {
         if (this.activeMatchMode === FilterMatchModeEnum.Between && Array.isArray(value)) {
             const dateValues = value.filter(v => v instanceof Date);
             if (dateValues.length <= 1) {
@@ -12419,46 +12790,436 @@ class MngTableColumnFilterComponent {
         this.dateDebounceSubject.next(value);
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
-    dateRangeChange(value, filterCallback) {
-        filterCallback(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    autocompleteFilter(value, filterCallback) {
-        filterCallback(value);
+    autocompleteFilter(value) {
+        this.updateFilterValue(value);
     }
     // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
-    dropdownFilter(value, filterCallback) {
+    dropdownFilter(value) {
         if (Array.isArray(value) && value.length === 0) {
             value = undefined;
         }
-        filterCallback(value);
+        this.updateFilterValue(value);
+    }
+    onMatchModeChange(matchMode) {
+        this.filterConstraint.set({ ...this.filterConstraint(), matchMode: matchMode });
+        this.updateDtFilter();
+        this.hideOverlay();
+    }
+    onMatchModeKeyDown(event) {
+        const item = event.target;
+        switch (event.key) {
+            case 'ArrowDown':
+                // eslint-disable-next-line no-case-declarations
+                const nextItem = this.findNextMenuModeItem(item);
+                if (nextItem) {
+                    item.removeAttribute('tabindex');
+                    nextItem.tabIndex = '0';
+                    nextItem.focus();
+                }
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                // eslint-disable-next-line no-case-declarations
+                const prevItem = this.findPrevMenuModeItem(item);
+                if (prevItem) {
+                    item.removeAttribute('tabindex');
+                    prevItem.tabIndex = '0';
+                    prevItem.focus();
+                }
+                event.preventDefault();
+                break;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i1$2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableColumnFilterComponent, isStandalone: true, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, viewQueries: [{ propertyName: "primeColumnFilter", first: true, predicate: ColumnFilter, descendants: true }], ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"primeMatchModeCustomOptions\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n            <mng-date-range\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [dateFormat]=\"descriptor.datePickerFormat\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"></mng-date-range>\n        </ng-container>\n        <ng-template #datePicker>\n            <p-calendar\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [showIcon]=\"true\"\n                [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [firstDayOfWeek]=\"1\">\n            </p-calendar>\n        </ng-template>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"false\"\n                [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$3.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MngDateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst"], outputs: ["valueChange"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur"], outputs: ["valueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-table-column-filter', imports: [TableModule, TranslateModule, MngDateRangeComponent, CalendarModule, FormsModule, NgSwitch, MngAutocompleteComponent, NgSwitchCase, MngDropdownComponent, NgIf], template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"primeMatchModeCustomOptions\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n            <mng-date-range\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [dateFormat]=\"descriptor.datePickerFormat\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"></mng-date-range>\n        </ng-container>\n        <ng-template #datePicker>\n            <p-calendar\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [showIcon]=\"true\"\n                [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [firstDayOfWeek]=\"1\">\n            </p-calendar>\n        </ng-template>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"false\"\n                [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
-                type: Input,
-                args: [{ required: true }]
-            }], display: [{
-                type: Input,
-                args: [{ required: true }]
-            }], primeColumnFilter: [{
-                type: ViewChild,
-                args: [ColumnFilter]
-            }] } });
-
-class MngTableColumnValueComponent {
-    constructor(elementRef, messageService, translate, jsonPathPipe, getterPipe, templatePipe) {
-        this.elementRef = elementRef;
-        this.messageService = messageService;
-        this.translate = translate;
-        this.jsonPathPipe = jsonPathPipe;
-        this.getterPipe = getterPipe;
-        this.templatePipe = templatePipe;
-        this.columnDisplayTypeString = ColumnDisplayTypeEnum.String;
+    onRowClearItemClick() {
+        this.clearFilter();
+        this.hideOverlay();
+    }
+    toggleMenu(event) {
+        this.overlayVisible.set(!this.overlayVisible());
+        event.stopPropagation();
+    }
+    onToggleButtonKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+            case 'Tab':
+                this.overlayVisible.set(false);
+                break;
+            case 'ArrowDown':
+                if (this.overlayVisible()) {
+                    const focusable = DomHandler.getFocusableElements(this.overlay);
+                    if (focusable) {
+                        focusable[0].focus();
+                    }
+                    event.preventDefault();
+                }
+                else if (event.altKey) {
+                    this.overlayVisible.set(true);
+                    event.preventDefault();
+                }
+                break;
+        }
+    }
+    onEscape() {
+        this.overlayVisible.set(false);
+    }
+    onContentClick() {
+        this.selfClick = true;
+    }
+    // onOverlayAnimationStart(event: AnimationEvent) {
+    onOverlayAnimationStart(event) {
+        switch (event.toState) {
+            case 'visible':
+                this.overlay = event.element;
+                this.renderer.appendChild(this.document.body, this.overlay);
+                ZIndexUtils.set('overlay', this.overlay, this.primeConfig.zIndex.overlay);
+                DomHandler.absolutePosition(this.overlay, this.icon?.nativeElement);
+                this.bindDocumentClickListener();
+                this.bindDocumentResizeListener();
+                this.bindScrollListener();
+                this.overlayEventListener = (e) => {
+                    if (this.overlay && this.overlay.contains(e.target)) {
+                        this.selfClick = true;
+                    }
+                };
+                this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
+                break;
+            case 'void':
+                this.onOverlayHide();
+                if (this.overlaySubscription) {
+                    this.overlaySubscription.unsubscribe();
+                }
+                break;
+        }
+    }
+    // onOverlayAnimationEnd(event: AnimationEvent) {
+    onOverlayAnimationEnd(event) {
+        switch (event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+                break;
+        }
+    }
+    get noFilterLabel() {
+        return this.primeConfig.getTranslation(TranslationKeys.NO_FILTER);
+    }
+    clearFilter() {
+        this.initFilterConstraint(true);
+        this.primeTable._filter();
+        this.hideOverlay();
+    }
+    generateMatchModeOptions() {
+        let options = undefined;
+        if (this.descriptor.filterType === FilterTypeEnum.Lookup) {
+            options = [
+                { value: FilterMatchModeEnum.Equals, label: this.primeConfig.getTranslation(FilterMatchModeEnum.Equals) },
+                { value: FilterMatchModeEnum.NotEquals, label: this.primeConfig.getTranslation(FilterMatchModeEnum.NotEquals) },
+                { value: FilterMatchModeEnum.Exists, label: this.primeConfig.getTranslation(FilterMatchModeEnum.Exists) },
+                { value: FilterMatchModeEnum.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchModeEnum.DoesNotExist) }
+            ];
+            if (this.lookupDescriptor?.multiselect) {
+                options = [{ value: FilterMatchModeEnum.In, label: this.primeConfig.getTranslation(FilterMatchModeEnum.In) }];
+            }
+        }
+        if (this.descriptor.matchModes) {
+            options = this.descriptor.matchModes.map(mm => ({ value: mm, label: this.primeConfig.getTranslation(mm) }));
+        }
+        if (!options) {
+            let primeMathcModeOptionByType = undefined;
+            if (this.primeType === 'text') {
+                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.text;
+            }
+            else if (this.primeType === 'numeric') {
+                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.numeric;
+            }
+            else if (this.primeType === 'date') {
+                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.date;
+            }
+            if (primeMathcModeOptionByType) {
+                options = primeMathcModeOptionByType.map(key => ({ label: this.primeConfig.getTranslation(key), value: key }));
+            }
+        }
+        this.matchModes.set(options || []);
+    }
+    getDefaultMatchMode() {
+        let defaultMatchMode = FilterMatchModeEnum.Contains;
+        if (this.primeType === 'text')
+            defaultMatchMode = FilterMatchModeEnum.StartsWith;
+        else if (this.primeType === 'numeric')
+            defaultMatchMode = FilterMatchModeEnum.Equals;
+        else if (this.primeType === 'date')
+            defaultMatchMode = FilterMatchModeEnum.DateIs;
+        else if (this.primeType === 'lookup')
+            defaultMatchMode = this.lookupDescriptor?.multiselect ? FilterMatchModeEnum.In : FilterMatchModeEnum.Equals;
+        // overwrite type default set in descriptor
+        if (this.descriptor.defaultFilterMatchMode) {
+            defaultMatchMode = this.descriptor.defaultFilterMatchMode;
+        }
+        // check if default mode exists!
+        if (this.matchModes().length > 0 && !this.matchModes().some(m => m.value === defaultMatchMode)) {
+            defaultMatchMode = this.matchModes()[0].value;
+        }
+        return defaultMatchMode;
+    }
+    findNextMenuModeItem(item) {
+        const nextItem = item.nextElementSibling;
+        if (nextItem)
+            return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextMenuModeItem(nextItem) : nextItem;
+        else
+            return item.parentElement?.firstElementChild;
+    }
+    findPrevMenuModeItem(item) {
+        const prevItem = item.previousElementSibling;
+        if (prevItem)
+            return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevMenuModeItem(prevItem) : prevItem;
+        else
+            return item.parentElement?.lastElementChild;
+    }
+    isOutsideClicked(event) {
+        return !(this.overlay?.isSameNode(event.target) ||
+            this.overlay?.contains(event.target) ||
+            this.icon?.nativeElement.isSameNode(event.target) ||
+            this.icon?.nativeElement.contains(event.target) ||
+            DomHandler.hasClass(event.target, 'p-column-filter-add-button') ||
+            DomHandler.hasClass(event.target.parentElement, 'p-column-filter-add-button') ||
+            DomHandler.hasClass(event.target, 'p-column-filter-remove-button') ||
+            DomHandler.hasClass(event.target.parentElement, 'p-column-filter-remove-button'));
+    }
+    bindDocumentClickListener() {
+        if (!this.documentClickListener) {
+            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
+            this.documentClickListener = this.renderer.listen(documentTarget, 'click', event => {
+                if (this.overlayVisible() && !this.selfClick && this.isOutsideClicked(event)) {
+                    this.hideOverlay();
+                }
+                this.selfClick = false;
+            });
+        }
+    }
+    unbindDocumentClickListener() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+            this.selfClick = false;
+        }
+    }
+    bindDocumentResizeListener() {
+        if (!this.documentResizeListener) {
+            this.documentResizeListener = this.renderer.listen(this.window, 'resize', () => {
+                if (this.overlayVisible() && !DomHandler.isTouchDevice()) {
+                    this.hideOverlay();
+                }
+            });
+        }
+    }
+    unbindDocumentResizeListener() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    bindScrollListener() {
+        if (!this.scrollHandler) {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.icon?.nativeElement, () => {
+                if (this.overlayVisible()) {
+                    this.hideOverlay();
+                }
+            });
+        }
+        this.scrollHandler.bindScrollListener();
+    }
+    unbindScrollListener() {
+        if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+        }
+    }
+    hideOverlay() {
+        this.overlayVisible.set(false);
+        this.cd.markForCheck();
+    }
+    onOverlayHide() {
+        this.unbindDocumentClickListener();
+        this.unbindDocumentResizeListener();
+        this.unbindScrollListener();
+        this.overlay = null;
+    }
+    updateFilterValue(value) {
+        this.filterConstraint.set({ ...this.filterConstraint(), value: value });
+        this.updateDtFilter();
+    }
+    updateDtFilter() {
+        this.primeTable.filters[this.primeField] = this.filterConstraint();
+        this.primeTable._filter();
+    }
+    initFilterConstraint(reset = false) {
+        if (!this.primeTable.filters[this.primeField] || reset) {
+            const defaultMatchMode = this.getDefaultMatchMode();
+            this.primeTable.filters[this.primeField] = { value: null, matchMode: defaultMatchMode };
+        }
+        // set internal filter constraint
+        const metadata = this.primeTable.filters[this.primeField];
+        if (Array.isArray(metadata)) {
+            this.filterConstraint.set(metadata[0]);
+        }
+        else {
+            this.filterConstraint.set(metadata);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnFilterFullComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableColumnFilterFullComponent, isStandalone: true, selector: "mng-table-column-filter-full", inputs: { descriptor: "descriptor" }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    <ng-container [ngSwitch]=\"primeType\">\n        <input\n            *ngSwitchCase=\"'text'\"\n            type=\"text\"\n            pInputText\n            [value]=\"filterConstraint()?.value\"\n            [disabled]=\"isInputDisabled()\"\n            (input)=\"onTextModelChange($event)\"\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n            [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\" />\n        <p-inputNumber\n            *ngSwitchCase=\"'numeric'\"\n            [ngModel]=\"filterConstraint()?.value\"\n            (ngModelChange)=\"onNumericModelChange($event)\"\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\n            [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n            [useGrouping]=\"descriptor.numberUseGrouping\"\n            [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n            [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n            [disabled]=\"isInputDisabled()\"></p-inputNumber>\n        <p-triStateCheckbox *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint()?.value\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.value\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            </ng-container>\n            <ng-template #datePicker>\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.value\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'lookup'\">\n            <ng-container *ngIf=\"lookupDescriptor\" [ngSwitch]=\"lookupDescriptor.lookupType\">\n                <mng-autocomplete\n                    *ngSwitchCase=\"lookupTypeAutocomplete\"\n                    [ngModel]=\"filterConstraint()?.value\"\n                    [dataProvider]=\"lookupDescriptor.dataProvider\"\n                    [dataKeyProperty]=\"lookupDescriptor.itemsValueProperty\"\n                    [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                    [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                    [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                    [multiselect]=\"lookupDescriptor.multiselect\"\n                    [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                    [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                    [className]=\"lookupDescriptor.className\"\n                    [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"autocompleteFilter($event)\">\n                </mng-autocomplete>\n                <mng-dropdown\n                    *ngSwitchCase=\"lookupTypeDropdown\"\n                    [ngModel]=\"filterConstraint()?.value\"\n                    [dataProvider]=\"lookupDescriptor.dataProvider\"\n                    [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                    [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                    [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                    [multiselect]=\"lookupDescriptor.multiselect\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                    [className]=\"lookupDescriptor.className\"\n                    [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                    [showClear]=\"false\"\n                    [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"dropdownFilter($event)\">\n                </mng-dropdown>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <button\n        *ngIf=\"matchModes().length > 1\"\n        #icon\n        type=\"button\"\n        class=\"p-column-filter-menu-button p-link\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"overlayVisible()\"\n        [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n        (click)=\"toggleMenu($event)\"\n        (keydown)=\"onToggleButtonKeyDown($event)\">\n        <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n    </button>\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    <div\n        *ngIf=\"overlayVisible()\"\n        class=\"p-column-filter-overlay p-component p-fluid\"\n        (click)=\"onContentClick()\"\n        [@overlayAnimation]=\"'visible'\"\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n        (keydown.escape)=\"onEscape()\">\n        <ul class=\"p-column-filter-row-items\">\n            <li\n                class=\"p-column-filter-row-item\"\n                *ngFor=\"let matchMode of matchModes(); let i = index\"\n                (click)=\"onMatchModeChange(matchMode.value)\"\n                (keydown)=\"onMatchModeKeyDown($event)\"\n                (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.matchMode}\"\n                [attr.tabindex]=\"i === 0 ? '0' : null\">\n                {{ matchMode.label }}\n            </li>\n            <li class=\"p-column-filter-separator\"></li>\n            <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                {{ noFilterLabel }}\n            </li>\n        </ul>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MngDateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst"], outputs: ["valueChange"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur"], outputs: ["valueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i4$3.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6$4.InputText, selector: "[pInputText]" }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            trigger('overlayAnimation', [
+                transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
+                transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnFilterFullComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-table-column-filter-full', imports: [
+                        TableModule,
+                        TranslateModule,
+                        MngDateRangeComponent,
+                        CalendarModule,
+                        FormsModule,
+                        NgSwitch,
+                        MngAutocompleteComponent,
+                        NgSwitchCase,
+                        MngDropdownComponent,
+                        NgIf,
+                        TriStateCheckboxModule,
+                        InputNumberModule,
+                        InputTextModule,
+                        FilterIcon,
+                        FilterSlashIcon,
+                        NgClass,
+                        DropdownModule,
+                        NgForOf
+                    ], 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 }))])
+                        ])
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-column-filter p-column-filter-row\">\n    <ng-container [ngSwitch]=\"primeType\">\n        <input\n            *ngSwitchCase=\"'text'\"\n            type=\"text\"\n            pInputText\n            [value]=\"filterConstraint()?.value\"\n            [disabled]=\"isInputDisabled()\"\n            (input)=\"onTextModelChange($event)\"\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n            [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\" />\n        <p-inputNumber\n            *ngSwitchCase=\"'numeric'\"\n            [ngModel]=\"filterConstraint()?.value\"\n            (ngModelChange)=\"onNumericModelChange($event)\"\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\n            [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n            [useGrouping]=\"descriptor.numberUseGrouping\"\n            [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n            [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n            [disabled]=\"isInputDisabled()\"></p-inputNumber>\n        <p-triStateCheckbox *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint()?.value\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.value\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            </ng-container>\n            <ng-template #datePicker>\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.value\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'lookup'\">\n            <ng-container *ngIf=\"lookupDescriptor\" [ngSwitch]=\"lookupDescriptor.lookupType\">\n                <mng-autocomplete\n                    *ngSwitchCase=\"lookupTypeAutocomplete\"\n                    [ngModel]=\"filterConstraint()?.value\"\n                    [dataProvider]=\"lookupDescriptor.dataProvider\"\n                    [dataKeyProperty]=\"lookupDescriptor.itemsValueProperty\"\n                    [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                    [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                    [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                    [multiselect]=\"lookupDescriptor.multiselect\"\n                    [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                    [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                    [className]=\"lookupDescriptor.className\"\n                    [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"autocompleteFilter($event)\">\n                </mng-autocomplete>\n                <mng-dropdown\n                    *ngSwitchCase=\"lookupTypeDropdown\"\n                    [ngModel]=\"filterConstraint()?.value\"\n                    [dataProvider]=\"lookupDescriptor.dataProvider\"\n                    [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                    [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                    [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                    [multiselect]=\"lookupDescriptor.multiselect\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                    [className]=\"lookupDescriptor.className\"\n                    [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                    [showClear]=\"false\"\n                    [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                    [disabled]=\"isInputDisabled()\"\n                    (valueChange)=\"dropdownFilter($event)\">\n                </mng-dropdown>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <button\n        *ngIf=\"matchModes().length > 1\"\n        #icon\n        type=\"button\"\n        class=\"p-column-filter-menu-button p-link\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"overlayVisible()\"\n        [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n        (click)=\"toggleMenu($event)\"\n        (keydown)=\"onToggleButtonKeyDown($event)\">\n        <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n    </button>\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    <div\n        *ngIf=\"overlayVisible()\"\n        class=\"p-column-filter-overlay p-component p-fluid\"\n        (click)=\"onContentClick()\"\n        [@overlayAnimation]=\"'visible'\"\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n        (keydown.escape)=\"onEscape()\">\n        <ul class=\"p-column-filter-row-items\">\n            <li\n                class=\"p-column-filter-row-item\"\n                *ngFor=\"let matchMode of matchModes(); let i = index\"\n                (click)=\"onMatchModeChange(matchMode.value)\"\n                (keydown)=\"onMatchModeKeyDown($event)\"\n                (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.matchMode}\"\n                [attr.tabindex]=\"i === 0 ? '0' : null\">\n                {{ matchMode.label }}\n            </li>\n            <li class=\"p-column-filter-separator\"></li>\n            <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                {{ noFilterLabel }}\n            </li>\n        </ul>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { descriptor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], icon: [{
+                type: ViewChild,
+                args: ['icon']
+            }] } });
+
+/**
+ * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
+ * and these must be propagated through to this component and beyond to primeNG.
+ */
+class MngTableColumnFilterComponent {
+    constructor(primeConfig) {
+        this.primeConfig = primeConfig;
+        this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
+        this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
+        this.primeType = 'text';
+        this.primeShowMatchMode = true;
+        this.primeDisplay = 'row';
+        this.dateDebounceSubject = new Subject();
+        this.dateDebounceSubscription = this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged()).subscribe(v => {
+            this.dateFilterCallback?.(v);
+        });
+    }
+    get activeMatchMode() {
+        const filter = this.primeColumnFilter?.dt.filters[this.descriptor.property];
+        return filter?.matchMode;
+    }
+    ngOnInit() {
+        this.primeDefaultMatchMode = this.descriptor.defaultFilterMatchMode ?? FilterMatchModeEnum.Equals;
+        switch (this.descriptor.filterType) {
+            case FilterTypeEnum.Boolean:
+                this.primeType = 'boolean';
+                this.primeShowMatchMode = false;
+                break;
+            case FilterTypeEnum.Number:
+                this.primeType = 'numeric';
+                break;
+            case FilterTypeEnum.Date:
+                this.primeType = 'date';
+                this.primeDefaultMatchMode = FilterMatchModeEnum.DateIs;
+                break;
+            case FilterTypeEnum.Lookup:
+                this.primeType = 'lookup';
+                this.lookupDescriptor = this.descriptor;
+                this.primeField = `${this.descriptor.property}${this.lookupDescriptor.itemsValueProperty ? `.${this.lookupDescriptor.itemsValueProperty}` : ''}`;
+                this.primeMatchModeCustomOptions = [
+                    { value: FilterMatchModeEnum.Equals, label: this.primeConfig.getTranslation(FilterMatchModeEnum.Equals) },
+                    { value: FilterMatchModeEnum.NotEquals, label: this.primeConfig.getTranslation(FilterMatchModeEnum.NotEquals) }
+                ];
+                if (this.lookupDescriptor.multiselect) {
+                    this.primeMatchModeCustomOptions = undefined;
+                    this.primeDefaultMatchMode = FilterMatchModeEnum.In;
+                }
+                break;
+            case FilterTypeEnum.String:
+                this.primeType = 'text';
+                this.primeDefaultMatchMode = FilterMatchModeEnum.Contains;
+                break;
+        }
+        if (this.descriptor.matchModes) {
+            this.primeMatchModeCustomOptions = this.descriptor.matchModes.map(mm => ({ value: mm, label: this.primeConfig.getTranslation(mm) }));
+            if (!this.primeMatchModeCustomOptions.map(matchMode => matchMode.value).includes(this.primeDefaultMatchMode)) {
+                this.primeDefaultMatchMode = this.descriptor.matchModes[0];
+            }
+            this.primeShowMatchMode = this.primeMatchModeCustomOptions?.length > 1;
+        }
+    }
+    ngOnDestroy() {
+        this.dateDebounceSubscription?.unsubscribe();
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dateFilter(value, filterCallback) {
+        this.dateFilterCallback = filterCallback;
+        if (this.activeMatchMode === FilterMatchModeEnum.Between && Array.isArray(value)) {
+            const dateValues = value.filter(v => v instanceof Date);
+            if (dateValues.length <= 1) {
+                return;
+            }
+        }
+        this.dateDebounceSubject.next(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dateRangeChange(value, filterCallback) {
+        filterCallback(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    autocompleteFilter(value, filterCallback) {
+        filterCallback(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+    dropdownFilter(value, filterCallback) {
+        if (Array.isArray(value) && value.length === 0) {
+            value = undefined;
+        }
+        filterCallback(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i1$2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableColumnFilterComponent, isStandalone: true, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor" }, viewQueries: [{ propertyName: "primeColumnFilter", first: true, predicate: ColumnFilter, descendants: true }], ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"primeMatchModeCustomOptions\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n            <mng-date-range\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [dateFormat]=\"descriptor.datePickerFormat\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"></mng-date-range>\n        </ng-container>\n        <ng-template #datePicker>\n            <p-calendar\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [showIcon]=\"true\"\n                [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [firstDayOfWeek]=\"1\">\n            </p-calendar>\n        </ng-template>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"false\"\n                [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$4.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MngDateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst"], outputs: ["valueChange"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur"], outputs: ["valueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-table-column-filter', imports: [TableModule, TranslateModule, MngDateRangeComponent, CalendarModule, FormsModule, NgSwitch, MngAutocompleteComponent, NgSwitchCase, MngDropdownComponent, NgIf], template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"primeMatchModeCustomOptions\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n            <mng-date-range\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [dateFormat]=\"descriptor.datePickerFormat\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"></mng-date-range>\n        </ng-container>\n        <ng-template #datePicker>\n            <p-calendar\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [showIcon]=\"true\"\n                [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [firstDayOfWeek]=\"1\">\n            </p-calendar>\n        </ng-template>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"false\"\n                [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], primeColumnFilter: [{
+                type: ViewChild,
+                args: [ColumnFilter]
+            }] } });
+
+class MngTableColumnValueComponent {
+    constructor(elementRef, messageService, translate, jsonPathPipe, getterPipe, templatePipe) {
+        this.elementRef = elementRef;
+        this.messageService = messageService;
+        this.translate = translate;
+        this.jsonPathPipe = jsonPathPipe;
+        this.getterPipe = getterPipe;
+        this.templatePipe = templatePipe;
+        this.columnDisplayTypeString = ColumnDisplayTypeEnum.String;
         this.columnDisplayTypeNumber = ColumnDisplayTypeEnum.Number;
         this.columnDisplayTypeCurrency = ColumnDisplayTypeEnum.Currency;
         this.columnDisplayTypeBoolean = ColumnDisplayTypeEnum.Boolean;
@@ -12509,7 +13270,7 @@ class MngTableColumnValueComponent {
         this.messageService.add({ severity: 'info', summary: title, detail: message });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnValueComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.MessageService }, { token: i2.TranslateService }, { token: JsonPathPipe }, { token: MngGetterPipe }, { token: MngTemplatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnDisplayType\">\n    <i\n        *ngIf=\"descriptor.localizationExistsProperty && !item[descriptor.localizationExistsProperty]\"\n        class=\"pi pi-exclamation-circle\"\n        [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeString\">\n        <span *ngIf=\"descriptor.hasValueAsTooltip\" [pTooltip]=\"value\" tooltipPosition=\"left\">{{ value }}</span>\n        <ng-container *ngIf=\"!descriptor.hasValueAsTooltip\">{{ value }}</ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeHtml\">\n        <span [innerHTML]=\"value\"></span>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeNumber\">\n        {{ value | number : descriptor.displayFormat : descriptor.locale }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeCurrency\">\n        {{ value | currency : currency : descriptor.currencyDisplay : descriptor.displayFormat : descriptor.locale }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeDate\">\n        {{ value | date : descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\">\n            <i [class]=\"value | boolean : descriptor.booleanYes : descriptor.booleanNo : true\"></i>\n        </ng-container>\n        <ng-template #booleanText>\n            {{ value | boolean : descriptor.booleanYes : descriptor.booleanNo | translate }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeEnum\">\n        {{ value | enum : descriptor.enumType : descriptor.enumTitlePath : descriptor.enumNameAsValue | translate }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeComponent\">\n        <ng-container\n            [mngComponent]=\"descriptor.customComponentType!\"\n            [inputs]=\"{\n                value: value,\n                item: item,\n                descriptor: descriptor\n            }\"></ng-container>\n    </ng-container>\n</ng-container>\n<div class=\"help-buttons\" *ngIf=\"descriptor.hasCopyToClipboard\">\n    <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n</div>\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["id", "tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: MngBooleanPipe, name: "boolean" }, { kind: "pipe", type: MngEnumPipe, name: "enum" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnDisplayType\">\n    <i\n        *ngIf=\"descriptor.localizationExistsProperty && !item[descriptor.localizationExistsProperty]\"\n        class=\"pi pi-exclamation-circle\"\n        [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeString\">\n        <span *ngIf=\"descriptor.hasValueAsTooltip\" [pTooltip]=\"value\" tooltipPosition=\"left\">{{ value }}</span>\n        <ng-container *ngIf=\"!descriptor.hasValueAsTooltip\">{{ value }}</ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeHtml\">\n        <span [innerHTML]=\"value\"></span>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeNumber\">\n        {{ value | number : descriptor.displayFormat : descriptor.locale }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeCurrency\">\n        {{ value | currency : currency : descriptor.currencyDisplay : descriptor.displayFormat : descriptor.locale }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeDate\">\n        {{ value | date : descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\">\n            <i [class]=\"value | boolean : descriptor.booleanYes : descriptor.booleanNo : true\"></i>\n        </ng-container>\n        <ng-template #booleanText>\n            {{ value | boolean : descriptor.booleanYes : descriptor.booleanNo | translate }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeEnum\">\n        {{ value | enum : descriptor.enumType : descriptor.enumTitlePath : descriptor.enumNameAsValue | translate }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnDisplayTypeComponent\">\n        <ng-container\n            [mngComponent]=\"descriptor.customComponentType!\"\n            [inputs]=\"{\n                value: value,\n                item: item,\n                descriptor: descriptor\n            }\"></ng-container>\n    </ng-container>\n</ng-container>\n<div class=\"help-buttons\" *ngIf=\"descriptor.hasCopyToClipboard\">\n    <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n</div>\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: MngBooleanPipe, name: "boolean" }, { kind: "pipe", type: MngEnumPipe, name: "enum" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
             type: Component,
@@ -12543,6 +13304,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
             }] } });
 
 class MngTableComponent {
+    get filterMetadata() {
+        return this.filterMetadataSubject.value;
+    }
+    get filterMetadata$() {
+        return this.filterMetadataSubject.asObservable();
+    }
     constructor(injector, router, route, translate, mngCommonsService, actionExecutor, viewContainerService, localStorageService) {
         this.injector = injector;
         this.router = router;
@@ -12552,7 +13319,6 @@ class MngTableComponent {
         this.actionExecutor = actionExecutor;
         this.viewContainerService = viewContainerService;
         this.localStorageService = localStorageService;
-        this.filterDisplayRow = TableFilterDisplayEnum.Row;
         this.cmpTypeName = 'MngTableComponent';
         this.logger = inject(MngLoggerService).create(this.cmpTypeName);
         this.useQueryParams = false;
@@ -12572,13 +13338,13 @@ class MngTableComponent {
         this.isLazy = false;
         this.isPagination = false;
         this.useDataProvider = false;
-        this.useQueryParamsInitializedSubejct = new BehaviorSubject(false);
-        this.useQueryParamsInitialized$ = this.useQueryParamsInitializedSubejct.asObservable();
+        this.useQueryParamsInitializedSubject = new BehaviorSubject(false);
+        this.useQueryParamsInitialized$ = this.useQueryParamsInitializedSubject.asObservable();
         this.dataProviderInfiniteScrollItems = [];
         this.itemsSubject = new ReplaySubject(1);
         this.offset = 0;
         this.multiSortMeta = null;
-        this.filterMetadata = {};
+        this.filterMetadataSubject = new BehaviorSubject({});
         this.globalFilterFields = [];
         // infinite scroll
         this.infiniteScroll = false;
@@ -12779,6 +13545,7 @@ class MngTableComponent {
         this.dataProviderSubscription?.unsubscribe();
         this.queryResultSubscription?.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
+        this.filterMetadataSubject.complete();
     }
     reload(emitEvent = false, resetParams = false) {
         const queryParamsBuilder = resetParams
@@ -12925,7 +13692,7 @@ class MngTableComponent {
             // update only if new version from query params will be higher
             this.updatePrimeSortAndFilter(mediusQueryParam);
         }
-        this.useQueryParamsInitializedSubejct.next(true);
+        this.useQueryParamsInitializedSubject.next(true);
         this.loadTableWithDataProvider(mediusQueryParam);
     }
     setMainAndRelatedDescriptors(descriptor) {
@@ -12974,7 +13741,7 @@ class MngTableComponent {
     }
     updatePrimeSortAndFilter(mediusQueryParam) {
         this.multiSortMeta = this.createSortMeta(mediusQueryParam);
-        this.filterMetadata = this.createFilterMeta(mediusQueryParam);
+        this.filterMetadataSubject.next(this.createFilterMeta(mediusQueryParam));
         this.rows = mediusQueryParam?.itemsPerPage ?? this.rows;
         this.offset = mediusQueryParam?.itemsOffset ?? 0;
     }
@@ -13035,7 +13802,7 @@ class MngTableComponent {
         });
         params.filterParams?.forEach(f => {
             const descriptor = this.filterDescriptors.find(fd => fd.filterProperty === f.property || fd.property === f.property);
-            const matchMode = f.filterMatchType && descriptor ? MediusRestUtil.get().getMapping(f.filterMatchType, descriptor.filterType, 2)?.[0] : MediusFilterMatchType.Equals;
+            const matchMode = f.filterMatchType && descriptor ? MediusRestUtil.get().getMapping(f.filterMatchType, descriptor.filterType, 2)?.[0] : FilterMatchModeEnum.Equals;
             if (descriptor && matchMode) {
                 let filterValue = f.filterValue;
                 if (descriptor.filterType === FilterTypeEnum.Date && typeof filterValue !== 'undefined') {
@@ -13114,7 +13881,7 @@ class MngTableComponent {
             }
             const defaultFilter = this.createFilterMeta();
             if (defaultFilter) {
-                this.filterMetadata = defaultFilter;
+                this.filterMetadataSubject.next(defaultFilter);
             }
         }
     }
@@ -13165,7 +13932,7 @@ class MngTableComponent {
         this.layoutPreferences = {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: MngCommonsService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }, { token: MngLocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableComponent, isStandalone: true, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth", globalFilterFieldsInit: ["globalFilterFields", "globalFilterFieldsInit"] }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        defaultLabel=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allChecked\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.toggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allChecked\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allChecked,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.toggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allChecked}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n                            (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$3.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }, { kind: "pipe", type: MngLocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectionLimit"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["id", "tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableComponent, isStandalone: true, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth", globalFilterFieldsInit: ["globalFilterFields", "globalFilterFieldsInit"] }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        placeholder=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allSelected,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.onToggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allSelected}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </th>\n            </tr>\n            <tr *ngIf=\"hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter-full\n                                *ngIf=\"!descriptor?.deprecatedFilters; else deprecatedFilters\"\n                                [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter-full>\n                            <ng-template #deprecatedFilters>\n                                <mng-table-column-filter [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                            </ng-template>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n                            (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$4.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$4.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }, { kind: "pipe", type: MngLocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MngTableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
@@ -13180,17 +13947,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                         NgClass,
                         NgStyle,
                         NgTemplateOutlet,
-                        MngTableColumnFilterComponent,
+                        MngTableColumnValueComponent,
                         MngClassMapPipe,
                         MngLocaleDefaultRowClassPipe,
-                        MngTableColumnValueComponent,
                         MngActionComponent,
                         SkeletonModule,
                         MultiSelectModule,
                         ButtonModule,
                         TooltipModule,
-                        FormsModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        defaultLabel=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allChecked\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.toggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allChecked\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allChecked,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.toggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allChecked}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n                            (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n" }]
+                        FormsModule,
+                        MngTableColumnFilterFullComponent,
+                        MngTableColumnFilterComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        placeholder=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allSelected,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.onToggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allSelected}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </th>\n            </tr>\n            <tr *ngIf=\"hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter-full\n                                *ngIf=\"!descriptor?.deprecatedFilters; else deprecatedFilters\"\n                                [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter-full>\n                            <ng-template #deprecatedFilters>\n                                <mng-table-column-filter [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                            </ng-template>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n                            (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n                    alignFrozen=\"right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: MngCommonsService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }, { type: MngLocalStorageService }]; }, propDecorators: { initialDescriptor: [{
@@ -13345,7 +14113,7 @@ class MngTableviewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1$2.MessageService }, { token: MngViewContainerComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableviewComponent, isStandalone: true, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast>\n        <ng-template let-message pTemplate=\"message\">\n            <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n            <div class=\"p-toast-message-text\">\n                <div class=\"p-toast-summary\">{{ message.summary }}</div>\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                <div\n                    *ngIf=\"message.detail.length > notificationCutoff\"\n                    (click)=\"onShowNotificationInDialog(message)\"\n                    class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            </div>\n        </ng-template>\n    </p-toast>\n    <p-dialog\n        [(visible)]=\"isDialogNotificationVisible\"\n        [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification?.severity ?? '')\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-dialog-title font-bold mng-dialog-success\">\n                <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification)\"></span>\n                {{ dialogNotification?.summary ?? '' }}\n            </span>\n        </ng-template>\n        <div>\n            {{ dialogNotification?.detail ?? '' }}\n        </div>\n    </p-dialog>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i3$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableviewComponent, isStandalone: true, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast>\n        <ng-template let-message pTemplate=\"message\">\n            <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n            <div class=\"p-toast-message-text\">\n                <div class=\"p-toast-summary\">{{ message.summary }}</div>\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                <div\n                    *ngIf=\"message.detail.length > notificationCutoff\"\n                    (click)=\"onShowNotificationInDialog(message)\"\n                    class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            </div>\n        </ng-template>\n    </p-toast>\n    <p-dialog\n        [(visible)]=\"isDialogNotificationVisible\"\n        [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification?.severity ?? '')\">\n        <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n            <span class=\"p-dialog-title font-bold mng-dialog-success\">\n                <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification)\"></span>\n                {{ dialogNotification?.summary ?? '' }}\n            </span>\n        </ng-template>\n        <div>\n            {{ dialogNotification?.detail ?? '' }}\n        </div>\n    </p-dialog>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i3$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4$5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i6$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: MngDialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
@@ -13360,8 +14128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                         MngActionComponent,
                         MngTableComponent,
                         MngTemplateDirective,
-                        RouterOutlet
-                    ], providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast>\n        <ng-template let-message pTemplate=\"message\">\n            <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n            <div class=\"p-toast-message-text\">\n                <div class=\"p-toast-summary\">{{ message.summary }}</div>\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                <div\n                    *ngIf=\"message.detail.length > notificationCutoff\"\n                    (click)=\"onShowNotificationInDialog(message)\"\n                    class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            </div>\n        </ng-template>\n    </p-toast>\n    <p-dialog\n        [(visible)]=\"isDialogNotificationVisible\"\n        [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification?.severity ?? '')\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-dialog-title font-bold mng-dialog-success\">\n                <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification)\"></span>\n                {{ dialogNotification?.summary ?? '' }}\n            </span>\n        </ng-template>\n        <div>\n            {{ dialogNotification?.detail ?? '' }}\n        </div>\n    </p-dialog>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
+                        RouterOutlet,
+                        MngDialogKeydownHandlerDirective
+                    ], providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast>\n        <ng-template let-message pTemplate=\"message\">\n            <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n            <div class=\"p-toast-message-text\">\n                <div class=\"p-toast-summary\">{{ message.summary }}</div>\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                <div\n                    *ngIf=\"message.detail.length > notificationCutoff\"\n                    (click)=\"onShowNotificationInDialog(message)\"\n                    class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            </div>\n        </ng-template>\n    </p-toast>\n    <p-dialog\n        [(visible)]=\"isDialogNotificationVisible\"\n        [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification?.severity ?? '')\">\n        <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n            <span class=\"p-dialog-title font-bold mng-dialog-success\">\n                <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification)\"></span>\n                {{ dialogNotification?.summary ?? '' }}\n            </span>\n        </ng-template>\n        <div>\n            {{ dialogNotification?.detail ?? '' }}\n        </div>\n    </p-dialog>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action\n                    *ngFor=\"let action of toolbarLeftActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action\n                    *ngFor=\"let action of toolbarRightActions\"\n                    [action]=\"action\"\n                    [queryParam]=\"tableQueryParam\"\n                    [hostComponent]=\"this\"\n                    [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.MessageService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
                 type: Input,
                 args: [{ required: true }]
@@ -13734,11 +14503,24 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldLookupDialogComponent, isStandalone: true, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!props.required && formControl?.value && !formControl?.disabled\"></i>\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate : {item: ''}\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate : {item: props.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config.table?.captionComponent\"\n            [columnActionComponent]=\"config.table?.columnActionComponent\"\n            [viewContainer]=\"viewContainer\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldLookupDialogComponent, isStandalone: true, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!props.required && formControl?.value && !formControl?.disabled\"></i>\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate : {item: ''}\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate : {item: props.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\" mngDialogKeydownHandler>\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config.table?.captionComponent\"\n            [columnActionComponent]=\"config.table?.columnActionComponent\"\n            [viewContainer]=\"viewContainer\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4$5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6$4.InputText, selector: "[pInputText]" }, { kind: "directive", type: MngDialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-formly-field-lookup-dialog', imports: [TranslateModule, FormlyModule, ReactiveFormsModule, ButtonModule, RippleModule, DialogModule, AsyncPipe, NgIf, MngTableComponent, MessagesModule, InputTextModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!props.required && formControl?.value && !formControl?.disabled\"></i>\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate : {item: ''}\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate : {item: props.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config.table?.captionComponent\"\n            [columnActionComponent]=\"config.table?.columnActionComponent\"\n            [viewContainer]=\"viewContainer\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
+            args: [{ standalone: true, selector: 'mng-formly-field-lookup-dialog', imports: [
+                        TranslateModule,
+                        FormlyModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        RippleModule,
+                        DialogModule,
+                        AsyncPipe,
+                        NgIf,
+                        MngTableComponent,
+                        MessagesModule,
+                        InputTextModule,
+                        MngDialogKeydownHandlerDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!props.required && formControl?.value && !formControl?.disabled\"></i>\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate : {item: ''}\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate : {item: props.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\" mngDialogKeydownHandler>\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config.table?.captionComponent\"\n            [columnActionComponent]=\"config.table?.columnActionComponent\"\n            [viewContainer]=\"viewContainer\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { mngTable: [{
                 type: ViewChild,
                 args: [MngTableComponent]
@@ -14091,11 +14873,23 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
         this.searchDebounceSubject.next(query);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldTableDialogMultiselectComponent, isStandalone: true, selector: "mng-formly-table-multiselect-add-field", viewQueries: [{ propertyName: "addTableComponent", first: true, predicate: ["addTableComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\" [viewContainer]=\"viewContainer\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label\n            >\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate : {item: props.label! | translate}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\" class=\"table-container\">\n        <div class=\"h-full flex flex-column\">\n            <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                    <mng-table\n                        #addTableComponent\n                        [descriptor]=\"descriptor.lookupTableDescriptor\"\n                        [globalFilterFields]=\"descriptor.searchFields\"\n                        [queryResult]=\"addItemsAsync\"\n                        [selectionEnabled]=\"true\"\n                        [loading]=\"dialogIsLoading$\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        [viewContainer]=\"viewContainer\">\n                        <ng-template *ngIf=\"descriptor.searchEnabled\" mngTemplate=\"caption\">\n                            <div class=\"flex\">\n                                <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                    <i class=\"pi pi-search\"></i>\n                                    <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                </span>\n                            </div>\n                        </ng-template>\n                    </mng-table>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    [label]=\"'general.add' | translate\"\n                    icon=\"pi pi-check\"\n                    class=\"p-button-primary\"\n                    (click)=\"addItems()\"\n                    [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                    loadingIcon=\"pi pi-spin pi-spinner\"\n                    [disabled]=\"form.disabled\"></button>\n            </div>\n        </div>\n    </ng-template>\n</p-dialog>\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldTableDialogMultiselectComponent, isStandalone: true, selector: "mng-formly-table-multiselect-add-field", viewQueries: [{ propertyName: "addTableComponent", first: true, predicate: ["addTableComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\" [viewContainer]=\"viewContainer\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label\n            >\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate : {item: props.label! | translate}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\" class=\"table-container\" mngDialogKeydownHandler>\n        <div class=\"h-full flex flex-column\">\n            <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                    <mng-table\n                        #addTableComponent\n                        [descriptor]=\"descriptor.lookupTableDescriptor\"\n                        [globalFilterFields]=\"descriptor.searchFields\"\n                        [queryResult]=\"addItemsAsync\"\n                        [selectionEnabled]=\"true\"\n                        [loading]=\"dialogIsLoading$\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        [viewContainer]=\"viewContainer\">\n                        <ng-template *ngIf=\"descriptor.searchEnabled\" mngTemplate=\"caption\">\n                            <div class=\"flex\">\n                                <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                    <i class=\"pi pi-search\"></i>\n                                    <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                </span>\n                            </div>\n                        </ng-template>\n                    </mng-table>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    [label]=\"'general.add' | translate\"\n                    icon=\"pi pi-check\"\n                    class=\"p-button-primary\"\n                    (click)=\"addItems()\"\n                    [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                    loadingIcon=\"pi pi-spin pi-spinner\"\n                    [disabled]=\"form.disabled\"></button>\n            </div>\n        </div>\n    </ng-template>\n</p-dialog>\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4$5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6$4.InputText, selector: "[pInputText]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MngDialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-formly-table-multiselect-add-field', imports: [TranslateModule, NgIf, AsyncPipe, MngTableComponent, DialogModule, ButtonModule, RippleModule, MngTemplateDirective, InputTextModule, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\" [viewContainer]=\"viewContainer\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label\n            >\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate : {item: props.label! | translate}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\" class=\"table-container\">\n        <div class=\"h-full flex flex-column\">\n            <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                    <mng-table\n                        #addTableComponent\n                        [descriptor]=\"descriptor.lookupTableDescriptor\"\n                        [globalFilterFields]=\"descriptor.searchFields\"\n                        [queryResult]=\"addItemsAsync\"\n                        [selectionEnabled]=\"true\"\n                        [loading]=\"dialogIsLoading$\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        [viewContainer]=\"viewContainer\">\n                        <ng-template *ngIf=\"descriptor.searchEnabled\" mngTemplate=\"caption\">\n                            <div class=\"flex\">\n                                <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                    <i class=\"pi pi-search\"></i>\n                                    <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                </span>\n                            </div>\n                        </ng-template>\n                    </mng-table>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    [label]=\"'general.add' | translate\"\n                    icon=\"pi pi-check\"\n                    class=\"p-button-primary\"\n                    (click)=\"addItems()\"\n                    [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                    loadingIcon=\"pi pi-spin pi-spinner\"\n                    [disabled]=\"form.disabled\"></button>\n            </div>\n        </div>\n    </ng-template>\n</p-dialog>\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"] }]
+            args: [{ standalone: true, selector: 'mng-formly-table-multiselect-add-field', imports: [
+                        TranslateModule,
+                        NgIf,
+                        AsyncPipe,
+                        MngTableComponent,
+                        DialogModule,
+                        ButtonModule,
+                        RippleModule,
+                        MngTemplateDirective,
+                        InputTextModule,
+                        NgStyle,
+                        MngDialogKeydownHandlerDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\" [viewContainer]=\"viewContainer\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }} <span *ngIf=\"props.required && props['hideRequiredMarker'] !== true\">*</span></label\n            >\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate : {item: props.label! | translate}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\" class=\"table-container\" mngDialogKeydownHandler>\n        <div class=\"h-full flex flex-column\">\n            <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                    <mng-table\n                        #addTableComponent\n                        [descriptor]=\"descriptor.lookupTableDescriptor\"\n                        [globalFilterFields]=\"descriptor.searchFields\"\n                        [queryResult]=\"addItemsAsync\"\n                        [selectionEnabled]=\"true\"\n                        [loading]=\"dialogIsLoading$\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        [viewContainer]=\"viewContainer\">\n                        <ng-template *ngIf=\"descriptor.searchEnabled\" mngTemplate=\"caption\">\n                            <div class=\"flex\">\n                                <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                    <i class=\"pi pi-search\"></i>\n                                    <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                </span>\n                            </div>\n                        </ng-template>\n                    </mng-table>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    [label]=\"'general.add' | translate\"\n                    icon=\"pi pi-check\"\n                    class=\"p-button-primary\"\n                    (click)=\"addItems()\"\n                    [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                    loadingIcon=\"pi pi-spin pi-spinner\"\n                    [disabled]=\"form.disabled\"></button>\n            </div>\n        </div>\n    </ng-template>\n</p-dialog>\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { addTableComponent: [{
                 type: ViewChild,
                 args: ['addTableComponent']
@@ -14103,7 +14897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
 
 class MngFormlyFieldTabsComponent extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldTabsComponent, isStandalone: true, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView [scrollable]=\"true\">\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.props?.label! | translate\"\n        [headerStyleClass]=\"formControl!.valid ? 'p-tabview-title' : undefined\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-tabview-title\" [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.props?.label!) + '_invalid']\">{{\n                tab.props?.label! | translate\n            }}</span>\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", dependencies: [{ kind: "ngmodule", type: TabViewModule }, { kind: "component", type: i1$4.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i1$4.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyField, selector: "formly-field", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldTabsComponent, isStandalone: true, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView [scrollable]=\"true\">\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.props?.label! | translate\"\n        [headerStyleClass]=\"formControl!.valid ? 'p-tabview-title' : undefined\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-tabview-title\" [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.props?.label!) + '_invalid']\">{{\n                tab.props?.label! | translate\n            }}</span>\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", dependencies: [{ kind: "ngmodule", type: TabViewModule }, { kind: "component", type: i1$4.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i1$4.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyField, selector: "formly-field", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldTabsComponent, decorators: [{
             type: Component,
@@ -14167,7 +14961,7 @@ class MngFormlyFieldActionComponent extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldActionComponent, isStandalone: true, selector: "mng-formly-field-action", usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\n    <button\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"$any(descriptor.button.icon)\"\n        [label]=\"$any(descriptor.button.label === null ? null : descriptor.button.label ?? props!.label) | translate\"\n        [pTooltip]=\"$any(descriptor.button.tooltip) | translate\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"onClick()\"\n        [class]=\"buttonClass + (actionMessage ? ' mr-2' : '')\"></button>\n    <p-message *ngIf=\"actionMessage\" [text]=\"actionMessage.content\" [severity]=\"actionMessage.severity ?? 'success'\"></p-message>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["id", "tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5$2.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFormlyFieldActionComponent, isStandalone: true, selector: "mng-formly-field-action", usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\n    <button\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"$any(descriptor.button.icon)\"\n        [label]=\"$any(descriptor.button.label === null ? null : descriptor.button.label ?? props!.label) | translate\"\n        [pTooltip]=\"$any(descriptor.button.tooltip) | translate\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"onClick()\"\n        [class]=\"buttonClass + (actionMessage ? ' mr-2' : '')\"></button>\n    <p-message *ngIf=\"actionMessage\" [text]=\"actionMessage.content\" [severity]=\"actionMessage.severity ?? 'success'\"></p-message>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5$1.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFormlyFieldActionComponent, decorators: [{
             type: Component,
@@ -14274,7 +15068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 args: ['formState']
             }] } });
 
-class MngBreadcrumbComponent {
+let MngBreadcrumbComponent$1 = class MngBreadcrumbComponent {
     constructor(mngCommons) {
         this.mngCommons = mngCommons;
         this.mappedBreadcrumbHome$ = this.mngCommons.breadcrumbHome$.pipe(map((el) => {
@@ -14294,21 +15088,21 @@ class MngBreadcrumbComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngBreadcrumbComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngBreadcrumbComponent, isStandalone: true, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"(mappedBreadcrumbHome$ | async) ?? undefined\" [model]=\"(mappedBreadcrumbs$ | async) ?? undefined\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i2$4.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngBreadcrumbComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngBreadcrumbComponent$1, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-breadcrumb', imports: [BreadcrumbModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"(mappedBreadcrumbHome$ | async) ?? undefined\" [model]=\"(mappedBreadcrumbs$ | async) ?? undefined\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
-class MngFooterComponent {
+let MngFooterComponent$1 = class MngFooterComponent {
     constructor(mngCommons) {
         this.mngCommons = mngCommons;
         this.currentYear = new Date().getFullYear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFooterComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFooterComponent, isStandalone: true, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFooterComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFooterComponent$1, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-footer', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
@@ -14335,6 +15129,30 @@ class RouteUtil {
             return basePath;
         }
     }
+    static doesUrlMatchRouterLink(link, url) {
+        if (typeof url === 'string' && url.startsWith('/')) {
+            url = url.substring(1);
+        }
+        else if (Array.isArray(url) && url.length > 0 && url[0].startsWith('/')) {
+            url[0] = url[0].substring(1);
+        }
+        const routeSegments = Array.isArray(link) ? link : link.split('/');
+        const urlSegments = Array.isArray(url) ? url : url.split('#')[0].split('?')[0].split('/');
+        if (routeSegments.length > 0 && urlSegments.length > 0) {
+            for (let i = 0; i < routeSegments.length; i++) {
+                if (i < urlSegments.length) {
+                    if (routeSegments[i] !== urlSegments[i]) {
+                        return false;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            return true;
+        }
+        return false;
+    }
     static adjustMenuLazyChildrenRouterLinks(rootMenuItem, lazyChildren) {
         return lazyChildren.map(i => {
             const childMenuItem = { ...i };
@@ -14539,7 +15357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
-class MngMenuItemComponent {
+let MngMenuItemComponent$1 = class MngMenuItemComponent {
     constructor(injector, router, route, mngRouter, authorization, mngCommons, mainLayoutService) {
         this.injector = injector;
         this.router = router;
@@ -14742,7 +15560,7 @@ class MngMenuItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: MngRouterService }, { token: MngAuthorizationService }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMenuItemComponent, isStandalone: true, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active", "class.py-0": "this.hostClassNoPadding", "class.hidden": "this.hostClassChildrenHidden" } }, ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n    <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n        {{ item.label! | translate }}\n    </div>\n    <a\n        *ngIf=\"!item.routerLink || item.items\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{paths: 'exact', matrixParams: 'ignored', queryParams: 'ignored', fragment: 'ignored'}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", dependencies: [{ kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMenuItemComponent, isStandalone: true, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active", "class.py-0": "this.hostClassNoPadding", "class.hidden": "this.hostClassChildrenHidden" } }, ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n    <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"!item.href && (!item.routerLink || item.items)\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"!item.href && item.routerLink && !item.items\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{paths: 'exact', matrixParams: 'ignored', queryParams: 'ignored', fragment: 'ignored'}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.href && !item.items\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [attr.href]=\"item.href\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", dependencies: [{ kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
             trigger('children', [
                 state('void', style({
                     height: '0px'
@@ -14766,8 +15584,8 @@ class MngMenuItemComponent {
                 transition('void => visibleAnimated, visibleAnimated => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
             ])
         ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuItemComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuItemComponent$1, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: '[mng-menuitem]', host: {
                         '[class.layout-root-menuitem]': 'root',
@@ -14795,7 +15613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                             transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
                             transition('void => visibleAnimated, visibleAnimated => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
                         ])
-                    ], template: "<ng-container *ngIf=\"isVisible$ | async\">\n    <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n        {{ item.label! | translate }}\n    </div>\n    <a\n        *ngIf=\"!item.routerLink || item.items\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{paths: 'exact', matrixParams: 'ignored', queryParams: 'ignored', fragment: 'ignored'}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n" }]
+                    ], template: "<ng-container *ngIf=\"isVisible$ | async\">\n    <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"!item.href && (!item.routerLink || item.items)\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"!item.href && item.routerLink && !item.items\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{paths: 'exact', matrixParams: 'ignored', queryParams: 'ignored', fragment: 'ignored'}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.href && !item.items\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [attr.href]=\"item.href\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: MngRouterService }, { type: MngAuthorizationService }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
@@ -14816,7 +15634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 args: ['class.hidden']
             }] } });
 
-class MngVersionComponent {
+let MngVersionComponent$1 = class MngVersionComponent {
     constructor(versionService, jsonPathPipe) {
         this.versionService = versionService;
         this.jsonPathPipe = jsonPathPipe;
@@ -14859,8 +15677,8 @@ class MngVersionComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngVersionComponent, deps: [{ token: MngVersionService }, { token: JsonPathPipe }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngVersionComponent, isStandalone: true, selector: "mng-version", inputs: { initVersion: ["version", "initVersion"] }, ngImport: i0, template: "<ng-container *ngIf=\"versions; else version\">\n    <ng-container *ngFor=\"let v of versions; let last = last\"> <mng-version [version]=\"v\"></mng-version><br *ngIf=\"!last\" /> </ng-container>\n</ng-container>\n<ng-template #version>\n    <ng-container *ngIf=\"displayName\">{{ displayName }}: </ng-container>\n    <ng-container *ngIf=\"(loading$ | async) === false\">{{ displayVersion }}</ng-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: MngVersionComponent, selector: "mng-version", inputs: ["version"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngVersionComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngVersionComponent$1, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-version', imports: [AsyncPipe, NgForOf, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"versions; else version\">\n    <ng-container *ngFor=\"let v of versions; let last = last\"> <mng-version [version]=\"v\"></mng-version><br *ngIf=\"!last\" /> </ng-container>\n</ng-container>\n<ng-template #version>\n    <ng-container *ngIf=\"displayName\">{{ displayName }}: </ng-container>\n    <ng-container *ngIf=\"(loading$ | async) === false\">{{ displayVersion }}</ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: MngVersionService }, { type: JsonPathPipe }]; }, propDecorators: { initVersion: [{
@@ -14868,7 +15686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 args: ['version']
             }] } });
 
-class MngMenuComponent {
+let MngMenuComponent$1 = class MngMenuComponent {
     constructor(route, mngCommons, mainLayoutService) {
         this.route = route;
         this.mngCommons = mngCommons;
@@ -14884,14 +15702,14 @@ class MngMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuComponent, deps: [{ token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMenuComponent, isStandalone: true, selector: "mng-menu", ngImport: i0, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n\n    <div class=\"menu-version\">\n        <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "component", type: MngVersionComponent, selector: "mng-version", inputs: ["version"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuComponent, decorators: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMenuComponent, isStandalone: true, selector: "mng-menu", ngImport: i0, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n\n    <div class=\"menu-version\">\n        <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MngMenuItemComponent$1, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "component", type: MngVersionComponent$1, selector: "mng-version", inputs: ["version"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuComponent$1, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-menu', imports: [NgClass, AsyncPipe, NgIf, NgForOf, MngMenuItemComponent, MngVersionComponent, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n\n    <div class=\"menu-version\">\n        <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'mng-menu', imports: [NgClass, AsyncPipe, NgIf, NgForOf, MngMenuItemComponent$1, MngVersionComponent$1, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n\n    <div class=\"menu-version\">\n        <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; } });
 
-class MngTopbarUserComponent {
+let MngTopbarUserComponent$1 = class MngTopbarUserComponent {
     constructor(mngCommons, mainLayoutService, elementRef) {
         this.mngCommons = mngCommons;
         this.mainLayoutService = mainLayoutService;
@@ -14920,22 +15738,22 @@ class MngTopbarUserComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarUserComponent, deps: [{ token: MngCommonsService }, { token: MngMainLayoutComponentService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTopbarUserComponent, isStandalone: true, selector: "mng-topbar-user-component", ngImport: i0, template: "<a href=\"#\" class=\"user-block\" (click)=\"click($event)\">\n    <i class=\"pi pi-fw pi-user\"></i>\n    <span class=\"profile-item-username hidden sm:inline-block\">&nbsp; {{ user?.displayName ?? user?.username }}</span>\n</a>\n<ul class=\"fadeInDown dropdown-window\">\n    <li role=\"menuitem\">\n        <a>\n            <div class=\"flex\">\n                <div class=\"flex-grow-0\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </div>\n                <div class=\"flex-grow-1\">\n                    <strong>{{ user?.displayName ?? user?.username }}</strong>\n                    <small *ngIf=\"((userRoles$ | async)?.length ?? 0) > 0\">\n                        <br />\n                        {{ userRoles$ | mgnEnumerateAsync : undefined : undefined : undefined : 'roles' | async }}\n                    </small>\n                </div>\n            </div>\n        </a>\n    </li>\n    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n        <a [href]=\"user?.logoutUrl ?? hrefJsVoid\" (click)=\"logout(user, $event)\">\n            <i class=\"pi pi-fw pi-sign-out\"></i>\n            <span>{{ 'mngTopbar.logout' | translate }}</span>\n        </a>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngEnumerateAsyncPipe, name: "mgnEnumerateAsync" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarUserComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarUserComponent$1, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-topbar-user-component', imports: [NgClass, NgIf, AsyncPipe, TranslateModule, MngEnumerateAsyncPipe], template: "<a href=\"#\" class=\"user-block\" (click)=\"click($event)\">\n    <i class=\"pi pi-fw pi-user\"></i>\n    <span class=\"profile-item-username hidden sm:inline-block\">&nbsp; {{ user?.displayName ?? user?.username }}</span>\n</a>\n<ul class=\"fadeInDown dropdown-window\">\n    <li role=\"menuitem\">\n        <a>\n            <div class=\"flex\">\n                <div class=\"flex-grow-0\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </div>\n                <div class=\"flex-grow-1\">\n                    <strong>{{ user?.displayName ?? user?.username }}</strong>\n                    <small *ngIf=\"((userRoles$ | async)?.length ?? 0) > 0\">\n                        <br />\n                        {{ userRoles$ | mgnEnumerateAsync : undefined : undefined : undefined : 'roles' | async }}\n                    </small>\n                </div>\n            </div>\n        </a>\n    </li>\n    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n        <a [href]=\"user?.logoutUrl ?? hrefJsVoid\" (click)=\"logout(user, $event)\">\n            <i class=\"pi pi-fw pi-sign-out\"></i>\n            <span>{{ 'mngTopbar.logout' | translate }}</span>\n        </a>\n    </li>\n</ul>\n" }]
         }], ctorParameters: function () { return [{ type: MngCommonsService }, { type: MngMainLayoutComponentService }, { type: i0.ElementRef }]; } });
 
-class MngTopbarComponent {
+let MngTopbarComponent$1 = class MngTopbarComponent {
     constructor(applicationRef, route, mngCommons, mainLayoutService, config) {
         this.applicationRef = applicationRef;
         this.route = route;
         this.mngCommons = mngCommons;
         this.mainLayoutService = mainLayoutService;
         this.config = config;
-        this.breadcrumbComponent = MngBreadcrumbComponent;
-        this.menuComponent = MngMenuComponent;
-        this.topbarUserComponent = MngTopbarUserComponent;
+        this.breadcrumbComponent = MngBreadcrumbComponent$1;
+        this.menuComponent = MngMenuComponent$1;
+        this.topbarUserComponent = MngTopbarUserComponent$1;
         this.languages = ['en'];
         this.selectedLanguage = 'en';
     }
@@ -14956,9 +15774,9 @@ class MngTopbarComponent {
         this.mngCommons.appLanguage = language;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarComponent, deps: [{ token: i0.ApplicationRef }, { token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }, { token: MNG_MODULE_CONFIG_IT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTopbarComponent, isStandalone: true, selector: "mng-topbar", viewQueries: [{ propertyName: "topbarInjectionRef", first: true, predicate: ["userMenuItem"], descendants: true }, { propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li\n                #userMenuItem\n                class=\"profile-item profile-item-extended\"\n                [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === userMenuItem}\"\n                [mngComponent]=\"topbarUserComponent\"\n                [attachToHost]=\"true\"></li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarComponent, decorators: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTopbarComponent, isStandalone: true, selector: "mng-topbar", viewQueries: [{ propertyName: "topbarInjectionRef", first: true, predicate: ["userMenuItem"], descendants: true }, { propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li\n                #userMenuItem\n                class=\"profile-item profile-item-extended\"\n                [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === userMenuItem}\"\n                [mngComponent]=\"topbarUserComponent\"\n                [attachToHost]=\"true\"></li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarComponent$1, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-topbar', imports: [AsyncPipe, NgClass, TranslateModule, NgIf, MngComponentDirective, MngEnumerateAsyncPipe, DropdownModule, FormsModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li\n                #userMenuItem\n                class=\"profile-item profile-item-extended\"\n                [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === userMenuItem}\"\n                [mngComponent]=\"topbarUserComponent\"\n                [attachToHost]=\"true\"></li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i1.ActivatedRoute }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }, { type: undefined, decorators: [{
@@ -14978,9 +15796,9 @@ class MngMainLayoutComponent {
         this.mngCommons = mngCommons;
         this.mainLayoutService = mainLayoutService;
         this.config = config;
-        this.topbarComponent = MngTopbarComponent;
-        this.menuComponent = MngMenuComponent;
-        this.footerComponent = MngFooterComponent;
+        this.topbarComponent = MngTopbarComponent$1;
+        this.menuComponent = MngMenuComponent$1;
+        this.footerComponent = MngFooterComponent$1;
     }
     ngOnInit() {
         if (this.config.components?.layout?.topbar) {
@@ -15020,11 +15838,11 @@ class MngErrorPageComponent {
         this.mngCommons = mngCommons;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngErrorPageComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngErrorPageComponent, isStandalone: true, selector: "mng-error-page", ngImport: i0, template: "<div class=\"exception-body error\">\n    <div class=\"exception-panel\">\n        <h1>{{ 'pages.error.title' | translate }}</h1>\n        <h3>{{ 'pages.error.subtitle' | translate }}</h3>\n        <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n    </div>\n    <div class=\"exception-footer\">\n        <img alt=\"logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" />\n        <img alt=\"logo_appname\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname\" />\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngErrorPageComponent, isStandalone: true, selector: "mng-error-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (mngCommons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngErrorPageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-error-page', imports: [ButtonModule, TranslateModule, RouterLink], template: "<div class=\"exception-body error\">\n    <div class=\"exception-panel\">\n        <h1>{{ 'pages.error.title' | translate }}</h1>\n        <h3>{{ 'pages.error.subtitle' | translate }}</h3>\n        <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n    </div>\n    <div class=\"exception-footer\">\n        <img alt=\"logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" />\n        <img alt=\"logo_appname\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname\" />\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'mng-error-page', imports: [ButtonModule, TranslateModule, RouterLink], template: "<div [class]=\"'exception-body min-h-screen ' + (mngCommons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
 class MngNotFoundPageComponent {
@@ -15032,11 +15850,11 @@ class MngNotFoundPageComponent {
         this.mngCommons = mngCommons;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngNotFoundPageComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngNotFoundPageComponent, isStandalone: true, selector: "mng-not-found-page", ngImport: i0, template: "<div class=\"exception-body notfound\">\n    <div class=\"exception-panel\">\n        <h1>{{ 'pages.notFound.title' | translate }}</h1>\n        <h3>{{ 'pages.notFound.subtitle' | translate }}</h3>\n        <p>{{ 'pages.notFound.message' | translate }}</p>\n        <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n    </div>\n    <div class=\"exception-footer\">\n        <img alt=\"logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" />\n        <img alt=\"logo_appname\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname\" />\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngNotFoundPageComponent, isStandalone: true, selector: "mng-not-found-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (mngCommons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngNotFoundPageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-not-found-page', imports: [ButtonModule, RouterLink, TranslateModule], template: "<div class=\"exception-body notfound\">\n    <div class=\"exception-panel\">\n        <h1>{{ 'pages.notFound.title' | translate }}</h1>\n        <h3>{{ 'pages.notFound.subtitle' | translate }}</h3>\n        <p>{{ 'pages.notFound.message' | translate }}</p>\n        <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n    </div>\n    <div class=\"exception-footer\">\n        <img alt=\"logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" />\n        <img alt=\"logo_appname\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname\" />\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'mng-not-found-page', imports: [ButtonModule, RouterLink, TranslateModule], template: "<div [class]=\"'exception-body min-h-screen ' + (mngCommons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
 class MngErrorHandler {
@@ -15070,6 +15888,14 @@ class MngCommonsInitService {
         this.moduleConfig = inject(MNG_MODULE_CONFIG_IT, { optional: true });
         this.commonsInitializers = inject(MNG_COMMONS_INITIALIZER_IT, { optional: true });
         this.isInitialized = false;
+        this.isInitializedSubject = new ReplaySubject();
+        this.commonsInitServiceEvents = new Subject();
+    }
+    get events$() {
+        return this.commonsInitServiceEvents.asObservable();
+    }
+    get isInitialized$() {
+        return this.isInitializedSubject.asObservable().pipe(take(1));
     }
     initialize() {
         if (this.isInitialized) {
@@ -15079,13 +15905,16 @@ class MngCommonsInitService {
         MngLoggerService.configure({ timestampFormat: this.moduleConfig?.log?.timestampFormat });
         const ctxLogger = this.logger.create('MngCommonsInitService');
         ctxLogger.debug('Commons initialization is starting');
+        this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.CommonsInitStart);
         // init router
         this.mngRouter.initialize();
         // init configurations with settings from module config
         this.config.init(this.httpClient, this.logger);
         this.config.addModuleConfigSource(this.moduleConfig ?? undefined);
+        this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.ConfigSourceModuleLoaded);
         if (this.moduleConfig?.configuration?.projectEnvironment) {
             this.config.addEnvironmentSource(this.moduleConfig.configuration.projectEnvironment);
+            this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.ConfigSourceProjectEnvLoaded);
         }
         // init configurations with settings from module config for json source
         if (!(this.moduleConfig?.configuration?.skipJsonSourceInit ?? false)) {
@@ -15100,8 +15929,12 @@ class MngCommonsInitService {
             else {
                 this.config.addJsonSource({ url: jsonSource, enableEnvProd: jsonSourceEnableEnvProd });
             }
+            this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.ConfigSourceJsonAdded);
         }
         return this.config.loadJsonConfigurations().pipe(mergeMap(() => {
+            if (!(this.moduleConfig?.configuration?.skipJsonSourceInit ?? false)) {
+                this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.ConfigSourceJsonLoaded);
+            }
             // init logger
             MngLoggerService.init(this.config, this.logPublishers ?? []);
             if (this.commonsInitializers) {
@@ -15113,7 +15946,16 @@ class MngCommonsInitService {
             }
         }), map(() => {
             ctxLogger.debug('Commons initialization is finished');
+            this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.CommonsInitEnd);
+            this.commonsInitServiceEvents.complete();
+            this.isInitializedSubject.next(true);
             return this.mngCommons.reset();
+        }), catchError(err => {
+            ctxLogger.warn('Commons initialization failed with error', err);
+            this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.CommonsInitError);
+            this.commonsInitServiceEvents.complete();
+            this.isInitializedSubject.next(false);
+            return throwError(() => err);
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngCommonsInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -15514,6 +16356,7 @@ const standalone = [
     MngActionRouteComponent,
     // directives
     MngComponentDirective,
+    MngDialogKeydownHandlerDirective,
     MngTemplateDirective,
     // pipes
     JsonPathPipe,
@@ -15528,14 +16371,14 @@ const standalone = [
     MngEnumerateAsyncPipe,
     MngLocaleDefaultRowClassPipe,
     // layout components
-    MngBreadcrumbComponent,
-    MngFooterComponent,
+    MngBreadcrumbComponent$1,
+    MngFooterComponent$1,
     MngMainLayoutComponent,
-    MngMenuComponent,
-    MngMenuItemComponent,
-    MngTopbarComponent,
-    MngTopbarUserComponent,
-    MngVersionComponent,
+    MngMenuComponent$1,
+    MngMenuItemComponent$1,
+    MngTopbarComponent$1,
+    MngTopbarUserComponent$1,
+    MngVersionComponent$1,
     // mng fields
     MngAutocompleteComponent,
     MngDropdownComponent,
@@ -15560,6 +16403,7 @@ const standalone = [
     MngTableviewComponent,
     MngTableColumnValueComponent,
     MngTableColumnFilterComponent,
+    MngTableColumnFilterFullComponent,
     MngTableviewRouteComponent,
     // editor components
     MngFormEditorComponent,
@@ -15622,6 +16466,7 @@ class MngCommonsModule {
             ImageModule, MngActionRouteComponent,
             // directives
             MngComponentDirective,
+            MngDialogKeydownHandlerDirective,
             MngTemplateDirective,
             // pipes
             JsonPathPipe,
@@ -15636,14 +16481,14 @@ class MngCommonsModule {
             MngEnumerateAsyncPipe,
             MngLocaleDefaultRowClassPipe,
             // layout components
-            MngBreadcrumbComponent,
-            MngFooterComponent,
+            MngBreadcrumbComponent$1,
+            MngFooterComponent$1,
             MngMainLayoutComponent,
-            MngMenuComponent,
-            MngMenuItemComponent,
-            MngTopbarComponent,
-            MngTopbarUserComponent,
-            MngVersionComponent,
+            MngMenuComponent$1,
+            MngMenuItemComponent$1,
+            MngTopbarComponent$1,
+            MngTopbarUserComponent$1,
+            MngVersionComponent$1,
             // mng fields
             MngAutocompleteComponent,
             MngDropdownComponent,
@@ -15668,6 +16513,7 @@ class MngCommonsModule {
             MngTableviewComponent,
             MngTableColumnValueComponent,
             MngTableColumnFilterComponent,
+            MngTableColumnFilterFullComponent,
             MngTableviewRouteComponent,
             // editor components
             MngFormEditorComponent,
@@ -15715,6 +16561,7 @@ class MngCommonsModule {
             ImageModule, MngActionRouteComponent,
             // directives
             MngComponentDirective,
+            MngDialogKeydownHandlerDirective,
             MngTemplateDirective,
             // pipes
             JsonPathPipe,
@@ -15729,14 +16576,14 @@ class MngCommonsModule {
             MngEnumerateAsyncPipe,
             MngLocaleDefaultRowClassPipe,
             // layout components
-            MngBreadcrumbComponent,
-            MngFooterComponent,
+            MngBreadcrumbComponent$1,
+            MngFooterComponent$1,
             MngMainLayoutComponent,
-            MngMenuComponent,
-            MngMenuItemComponent,
-            MngTopbarComponent,
-            MngTopbarUserComponent,
-            MngVersionComponent,
+            MngMenuComponent$1,
+            MngMenuItemComponent$1,
+            MngTopbarComponent$1,
+            MngTopbarUserComponent$1,
+            MngVersionComponent$1,
             // mng fields
             MngAutocompleteComponent,
             MngDropdownComponent,
@@ -15761,6 +16608,7 @@ class MngCommonsModule {
             MngTableviewComponent,
             MngTableColumnValueComponent,
             MngTableColumnFilterComponent,
+            MngTableColumnFilterFullComponent,
             MngTableviewRouteComponent,
             // editor components
             MngFormEditorComponent,
@@ -15782,12 +16630,12 @@ class MngCommonsModule {
             }),
             FormlyModule.forChild(), primeNgModules, MngActionRouteComponent,
             // layout components
-            MngBreadcrumbComponent,
-            MngFooterComponent,
-            MngMenuComponent,
-            MngMenuItemComponent,
-            MngTopbarComponent,
-            MngTopbarUserComponent,
+            MngBreadcrumbComponent$1,
+            MngFooterComponent$1,
+            MngMenuComponent$1,
+            MngMenuItemComponent$1,
+            MngTopbarComponent$1,
+            MngTopbarUserComponent$1,
             // mng fields
             MngAutocompleteComponent,
             MngDropdownComponent,
@@ -15810,6 +16658,7 @@ class MngCommonsModule {
             MngTableviewComponent,
             MngTableColumnValueComponent,
             MngTableColumnFilterComponent,
+            MngTableColumnFilterFullComponent,
             MngTableviewRouteComponent,
             // editor components
             MngFormEditorComponent,
@@ -16032,12 +16881,708 @@ class AMngCrudApiService extends AMngGetAllApiService {
     }
 }
 
+class MngBreadcrumbComponent {
+    constructor() {
+        this.mngCommons = inject(MngCommonsService);
+        this.mappedBreadcrumbs$ = this.mngCommons.breadcrumbs$.pipe(map((items) => items.map(el => this.mapMngMenuItem(el))));
+    }
+    mapMngMenuItem(item) {
+        return {
+            ...item,
+            url: item.href,
+            badgeStyleClass: item.badgeClassName,
+            styleClass: item.className
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngBreadcrumbComponent, isStandalone: true, selector: "mng-breadcrumb-v2", ngImport: i0, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n    <nav>\n        <ol class=\"relative z-2\">\n            <ng-template ngFor let-item let-last=\"last\" [ngForOf]=\"mappedBreadcrumbs$ | async\">\n                <li>{{ item.label! | translate }}</li>\n                <li *ngIf=\"!last\" class=\"layout-breadcrumb-chevron\">/</li>\n            </ng-template>\n        </ol>\n    </nav>\n</div>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-breadcrumb-v2', imports: [NgForOf, NgClass, InputTextModule, ButtonModule, AsyncPipe, NgIf, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n    <nav>\n        <ol class=\"relative z-2\">\n            <ng-template ngFor let-item let-last=\"last\" [ngForOf]=\"mappedBreadcrumbs$ | async\">\n                <li>{{ item.label! | translate }}</li>\n                <li *ngIf=\"!last\" class=\"layout-breadcrumb-chevron\">/</li>\n            </ng-template>\n        </ol>\n    </nav>\n</div>\n" }]
+        }] });
+
+class MngFooterComponent {
+    constructor() {
+        this.mngCommons = inject(MngCommonsService);
+        this.currentYear = new Date().getFullYear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngFooterComponent, isStandalone: true, selector: "mng-footer-v2", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngFooterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-footer-v2', imports: [TranslateModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n" }]
+        }] });
+
+class MngMainLayoutComponentV2Service {
+    constructor() {
+        this.config = inject(MNG_MODULE_CONFIG_IT);
+        this.state = {
+            staticMenuDesktopInactive$: new BehaviorSubject(false),
+            overlayMenuActive$: new BehaviorSubject(false),
+            rightMenuActive$: new BehaviorSubject(false),
+            configSidebarVisible$: new BehaviorSubject(false),
+            staticMenuMobileActive$: new BehaviorSubject(false),
+            menuHoverActive$: new BehaviorSubject(false),
+            sidebarActive$: new BehaviorSubject(false),
+            anchored$: new BehaviorSubject(false)
+        };
+        this.overlayOpen = new Subject();
+        this.overlayOpen$ = this.overlayOpen.asObservable();
+    }
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.state.overlayMenuActive$.next(!this.state.overlayMenuActive$.value);
+            if (this.state.overlayMenuActive$.value) {
+                this.overlayOpen.next(null);
+            }
+        }
+        if (this.isDesktop()) {
+            this.state.staticMenuDesktopInactive$.next(!this.state.staticMenuDesktopInactive$.value);
+        }
+        else {
+            this.state.staticMenuMobileActive$.next(!this.state.staticMenuMobileActive$.value);
+            if (this.state.staticMenuMobileActive$.value) {
+                this.overlayOpen.next(null);
+            }
+        }
+    }
+    isOverlay() {
+        return this.config.menuV2?.mode === 'overlay';
+    }
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+    isMobile() {
+        return !this.isDesktop();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMainLayoutComponentV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMainLayoutComponentV2Service }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMainLayoutComponentV2Service, decorators: [{
+            type: Injectable
+        }] });
+
+class MenuService {
+    constructor() {
+        this.logger = MngLoggerService.create('MenuService');
+        this.router = inject(Router);
+        this.mngRouter = inject(MngRouterService);
+        this.menuSource = new ReplaySubject(1);
+        this.resetSource = new Subject();
+        this.menuSource$ = this.menuSource.asObservable();
+        this.resetSource$ = this.resetSource.asObservable();
+        this.menuItems = [];
+        this.routeLoadedChildrenSubscriptions = [];
+    }
+    initialize(menuItems) {
+        this.menuItems = menuItems;
+        this.routeLoadedChildrenSubscriptions.forEach(s => s.unsubscribe());
+        this.routeLoadedChildrenSubscriptions = [];
+        this.generateMenuItemKeys(menuItems);
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(e => {
+            this.findAndSetActiveMenuItem(e.urlAfterRedirects);
+        });
+        this.findAndSetActiveMenuItem(this.router.url);
+    }
+    generateMenuItemKeys(menuItems, parentKey = '') {
+        menuItems.forEach((item, idx) => {
+            if (!item.index) {
+                item.index = idx;
+                item.key = parentKey ? parentKey + '-' + idx : idx.toString();
+            }
+            if (item.items) {
+                this.generateMenuItemKeys(item.items, item.key);
+            }
+            else if (item.lazyChildren) {
+                this.listenToMenuItemLazyChildrenLoad(item);
+            }
+        });
+    }
+    findAndSetActiveMenuItem(url) {
+        const matches = this.findActiveRouteMatches(this.menuItems, url);
+        if (matches.length === 0) {
+            this.reset();
+        }
+        else {
+            const matchKey = matches[0][matches[0].length - 1].key;
+            if (matchKey) {
+                this.menuSource.next({
+                    key: matchKey,
+                    routeEvent: true
+                });
+            }
+            else {
+                this.logger.warn(`Found active menu item for url ${url}, but item key is not present`, matches);
+                this.reset();
+            }
+            if (matches.length > 1) {
+                this.logger.warn(`Multiple active menu items found for url ${url}`, matches);
+            }
+        }
+    }
+    listenToMenuItemLazyChildrenLoad(menuItem) {
+        this.routeLoadedChildrenSubscriptions.push(this.mngRouter
+            .getRouteLoadedChildren$(menuItem.routerLink ?? '/')
+            .pipe(take(1))
+            .subscribe({
+            next: routes => {
+                let menuItems = routes.filter(r => Array.isArray(r.data?.menuItems)).flatMap(r => r.data.menuItems);
+                menuItems = RouteUtil.adjustMenuLazyChildrenRouterLinks(menuItem, menuItems);
+                menuItem.items = menuItems;
+                menuItem.lazyChildren = false;
+                this.generateMenuItemKeys(menuItem.items, menuItem.key);
+                this.findAndSetActiveMenuItem(this.router.url);
+            }
+        }));
+    }
+    findActiveRouteMatches(menuItems, url) {
+        const matches = [];
+        for (const menuItem of menuItems) {
+            if (menuItem.routerLink) {
+                const isActive = RouteUtil.doesUrlMatchRouterLink(menuItem.routerLink, url);
+                if (isActive) {
+                    if (Array.isArray(menuItem.items)) {
+                        const itemsMatches = this.findActiveRouteMatches(menuItem.items, url);
+                        if (itemsMatches.length > 0) {
+                            matches.push(...itemsMatches.map(c => [menuItem, ...c]));
+                        }
+                        else {
+                            matches.push([menuItem]);
+                        }
+                    }
+                    else {
+                        matches.push([menuItem]);
+                    }
+                }
+            }
+            else if (Array.isArray(menuItem.items)) {
+                const itemsMatches = this.findActiveRouteMatches(menuItem.items, url);
+                if (itemsMatches.length > 0) {
+                    matches.push(...itemsMatches.map(c => [menuItem, ...c]));
+                }
+            }
+        }
+        return matches;
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MenuService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MngMenuItemComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.route = inject(ActivatedRoute);
+        this.menuService = inject(MenuService);
+        this.authorization = inject(MngAuthorizationService);
+        this.layoutService = inject(MngMainLayoutComponentV2Service);
+        this.isPermittedSubject = new BehaviorSubject(true);
+        this.guardsIsAllowedSubject = new BehaviorSubject(true);
+        this.childrenVisibilitySubject = [];
+        this.root = false;
+        this.visibleChangeEventEmitter = new EventEmitter();
+        this.active = signal(false);
+        this.visible = signal(false);
+        this.guardsIsAllowed$ = this.guardsIsAllowedSubject.asObservable().pipe(distinctUntilChanged());
+        this.isPermitted$ = this.isPermittedSubject.asObservable().pipe(distinctUntilChanged());
+        this.menuService.menuSource$.pipe(takeUntilDestroyed()).subscribe(value => {
+            setTimeout(() => {
+                this.active.set(this.item.key === value.key || value.key.startsWith((this.item.key ?? '') + '-'));
+            });
+        });
+        this.menuService.resetSource$.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.active.set(false);
+        });
+    }
+    ngOnInit() {
+        if (this.item.routerLink) {
+            if (typeof this.item.routerLink === 'string') {
+                this.itemUrl = this.item.routerLink;
+            }
+            else {
+                this.itemUrl = this.router.parseUrl(this.item.routerLink.join('/'));
+            }
+        }
+        this.routerEventsSubscription = this.router.events.subscribe(next => {
+            if (next instanceof GuardsCheckEnd && next.shouldActivate) {
+                this.checkIfMenuItemIsAllowedFromGuard(next.state);
+            }
+            else if (next instanceof NavigationEnd) {
+                if (!this.layoutService.isMobile()) {
+                    this.active.set(false);
+                }
+                else {
+                    this.updateActiveStateFromRoute();
+                }
+            }
+        });
+        if (this.item.permissions) {
+            this.authorization
+                .isPermitted(this.item.permissions)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: isPermitted => {
+                    this.isPermittedSubject.next(isPermitted);
+                }
+            });
+        }
+        this.checkIfMenuItemIsAllowedFromGuard(this.router.routerState.snapshot);
+        combineLatest([of(this.item.visible !== false), this.isPermitted$, this.guardsIsAllowed$])
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: res => {
+                const isVisible = res.every(r => r === true);
+                this.active.set(!isVisible);
+                this.visible.set(isVisible);
+            }
+        });
+        this.processItemChildrenVisibility();
+    }
+    ngOnDestroy() {
+        this.routerEventsSubscription?.unsubscribe();
+        this.guardsIsAllowedSubscription?.unsubscribe();
+    }
+    get submenuAnimation() {
+        return this.root ? 'expanded' : this.active() ? 'expanded' : 'collapsed';
+    }
+    get activeClass() {
+        return this.active() && !this.root;
+    }
+    itemClick(event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // toggle active state
+        if (!(this.item.items || this.item.lazyChildren)) {
+            if (this.layoutService.isMobile()) {
+                this.layoutService.state.staticMenuMobileActive$.next(false);
+            }
+        }
+    }
+    onChildVisibleChange(visible, item, idx) {
+        this.childrenVisibilitySubject[idx].next(visible);
+    }
+    checkIfMenuItemIsAllowedFromGuard(routerState) {
+        this.guardsIsAllowedSubscription?.unsubscribe();
+        if (this.item.guards?.length) {
+            const obs = [];
+            for (const guard of this.item.guards) {
+                if (guard && typeof guard === 'function') {
+                    const guardFnInstance = guard;
+                    runInInjectionContext(this.injector, () => {
+                        const canActivateRes = guardFnInstance(this.route.snapshot, routerState);
+                        let canActivateObs;
+                        if (canActivateRes instanceof Observable) {
+                            canActivateObs = canActivateRes;
+                        }
+                        else if (canActivateRes instanceof Promise) {
+                            canActivateObs = from(canActivateRes);
+                        }
+                        else {
+                            canActivateObs = of(canActivateRes);
+                        }
+                        obs.push(canActivateObs.pipe(first(), map(res => res === true) // if url tree is present, that means redirect and implies not allowed
+                        ));
+                    });
+                }
+            }
+            this.guardsIsAllowedSubscription = combineLatest(obs)
+                .pipe(first())
+                .subscribe(next => {
+                const result = next.every(n => n === true);
+                this.guardsIsAllowedSubject.next(result);
+            });
+        }
+        else {
+            this.guardsIsAllowedSubject.next(true);
+        }
+    }
+    updateActiveStateFromRoute() {
+        if (this.itemUrl) {
+            this.active.set(this.router.isActive(this.itemUrl, {
+                matrixParams: 'ignored',
+                queryParams: 'ignored',
+                paths: this.item.items ? 'subset' : 'exact',
+                fragment: 'ignored'
+            }));
+        }
+        else {
+            this.active.set(false);
+        }
+    }
+    processItemChildrenVisibility() {
+        if (this.item.items) {
+            this.childrenVisibilitySubject = this.item.items.map(() => new BehaviorSubject(true));
+            combineLatest(this.childrenVisibilitySubject.map(s => s.asObservable().pipe(distinctUntilChanged())))
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(visible => {
+                const anyChildVisible = visible.some(v => v === true);
+                this.active.set(!anyChildVisible);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMenuItemComponent, isStandalone: true, selector: "[mng-menuitem-v2]", inputs: { item: "item", root: "root" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, viewQueries: [{ propertyName: "submenu", first: true, predicate: ["submenu"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"visible()\">\n    <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n        {{ item.label! | translate }}\n    </div>\n    <a\n        *ngIf=\"!item.href && (!item.routerLink || item.items)\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"!item.href && item.routerLink && !item.items\"\n        (click)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? '' + (this.active() ? ' active-route' : '')\"\n        [preserveFragment]=\"item.preserveFragment\"\n        [skipLocationChange]=\"item.skipLocationChange\"\n        [replaceUrl]=\"item.replaceUrl\"\n        [queryParams]=\"item.queryParams\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.href && !item.items\"\n        (click)=\"itemClick($event)\"\n        [attr.href]=\"item.href\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n\n    <ul #submenu *ngIf=\"item.items\" [@children]=\"submenuAnimation\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem-v2 [item]=\"child\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", dependencies: [{ kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem-v2]", inputs: ["item", "root"], outputs: ["visibleChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [
+            trigger('children', [
+                state('collapsed', style({
+                    height: '0'
+                })),
+                state('expanded', style({
+                    height: '*'
+                })),
+                state('hidden', style({
+                    display: 'none'
+                })),
+                state('visible', style({
+                    display: 'block'
+                })),
+                transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: '[mng-menuitem-v2]', imports: [NgIf, NgClass, RippleModule, TooltipModule, RouterModule, NgForOf, TranslateModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('children', [
+                            state('collapsed', style({
+                                height: '0'
+                            })),
+                            state('expanded', style({
+                                height: '*'
+                            })),
+                            state('hidden', style({
+                                display: 'none'
+                            })),
+                            state('visible', style({
+                                display: 'block'
+                            })),
+                            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                        ])
+                    ], template: "<ng-container *ngIf=\"visible()\">\n    <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n        {{ item.label! | translate }}\n    </div>\n    <a\n        *ngIf=\"!item.href && (!item.routerLink || item.items)\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"!item.href && item.routerLink && !item.items\"\n        (click)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? '' + (this.active() ? ' active-route' : '')\"\n        [preserveFragment]=\"item.preserveFragment\"\n        [skipLocationChange]=\"item.skipLocationChange\"\n        [replaceUrl]=\"item.replaceUrl\"\n        [queryParams]=\"item.queryParams\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.href && !item.items\"\n        (click)=\"itemClick($event)\"\n        [attr.href]=\"item.href\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items || item.lazyChildren\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n\n    <ul #submenu *ngIf=\"item.items\" [@children]=\"submenuAnimation\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem-v2 [item]=\"child\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], root: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.layout-root-menuitem']
+            }], visibleChangeEventEmitter: [{
+                type: Output,
+                args: ['visibleChange']
+            }], submenu: [{
+                type: ViewChild,
+                args: ['submenu']
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['class.active-menuitem']
+            }] } });
+
+class MngMenuComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.menuService = inject(MenuService);
+        this.mngCommons = inject(MngCommonsService);
+        this.menuItems = [];
+    }
+    ngOnInit() {
+        if (Array.isArray(this.mngCommons.menuItems)) {
+            this.menuItems = [{ items: this.mngCommons.menuItems }];
+        }
+        else if (Array.isArray(this.route.snapshot.data?.menuItems)) {
+            this.menuItems = [{ items: this.route.snapshot.data.menuItems }];
+        }
+        this.menuService.initialize(this.menuItems);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMenuComponent, isStandalone: true, selector: "mng-menu-v2", ngImport: i0, template: "<ul class=\"layout-menu\">\n    <ng-container *ngFor=\"let item of menuItems\">\n        <li mng-menuitem-v2 *ngIf=\"!item.separator\" [item]=\"item\" [root]=\"true\"></li>\n        <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n    </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem-v2]", inputs: ["item", "root"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMenuComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-menu-v2', imports: [NgForOf, NgIf, MngMenuItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"layout-menu\">\n    <ng-container *ngFor=\"let item of menuItems\">\n        <li mng-menuitem-v2 *ngIf=\"!item.separator\" [item]=\"item\" [root]=\"true\"></li>\n        <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n    </ng-container>\n</ul>\n" }]
+        }] });
+
+class MngVersionComponent {
+    constructor(versionService, jsonPathPipe) {
+        this.versionService = versionService;
+        this.jsonPathPipe = jsonPathPipe;
+        this.loadingSubject = new BehaviorSubject(false);
+        this.loading$ = this.loadingSubject.asObservable();
+    }
+    ngOnInit() {
+        if (Array.isArray(this.initVersion)) {
+            this.versions = this.initVersion;
+        }
+        else if (typeof this.initVersion === 'string') {
+            this.displayVersion = this.initVersion;
+        }
+        else if (typeof this.initVersion !== 'undefined') {
+            if (this.initVersion['info'] || this.initVersion['urlPath']) {
+                const config = this.initVersion;
+                this.displayName = config.displayName;
+                if (config.urlPath) {
+                    this.loadingSubject.next(true);
+                    this.versionService
+                        .loadVersion(config.urlPath, config.urlBaseConfigKey)
+                        .pipe(take(1))
+                        .subscribe({
+                        next: res => {
+                            this.displayVersion = this.jsonPathPipe.transform(res, config.infoJsonPath ?? '$');
+                            this.loadingSubject.next(false);
+                        },
+                        error: () => {
+                            this.displayVersion = '';
+                            this.loadingSubject.next(false);
+                        }
+                    });
+                }
+                else {
+                    this.displayVersion = this.jsonPathPipe.transform(config.info, config.infoJsonPath ?? '$.raw');
+                }
+            }
+            else {
+                const info = this.initVersion;
+                this.displayVersion = this.jsonPathPipe.transform(info, '$.raw');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngVersionComponent, deps: [{ token: MngVersionService }, { token: JsonPathPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngVersionComponent, isStandalone: true, selector: "mng-version-v2", inputs: { initVersion: ["version", "initVersion"] }, ngImport: i0, template: "<ng-container *ngIf=\"versions; else version\">\n    <ng-container *ngFor=\"let v of versions; let last = last\"> <mng-version-v2 [version]=\"v\"></mng-version-v2><br *ngIf=\"!last\" /> </ng-container>\n</ng-container>\n<ng-template #version>\n    <ng-container *ngIf=\"displayName\">{{ displayName }}: </ng-container>\n    <ng-container *ngIf=\"(loading$ | async) === false\">{{ displayVersion }}</ng-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: MngVersionComponent, selector: "mng-version-v2", inputs: ["version"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngVersionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-version-v2', imports: [AsyncPipe, NgForOf, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"versions; else version\">\n    <ng-container *ngFor=\"let v of versions; let last = last\"> <mng-version-v2 [version]=\"v\"></mng-version-v2><br *ngIf=\"!last\" /> </ng-container>\n</ng-container>\n<ng-template #version>\n    <ng-container *ngIf=\"displayName\">{{ displayName }}: </ng-container>\n    <ng-container *ngIf=\"(loading$ | async) === false\">{{ displayVersion }}</ng-container>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: MngVersionService }, { type: JsonPathPipe }]; }, propDecorators: { initVersion: [{
+                type: Input,
+                args: ['version']
+            }] } });
+
+class MngSidebarComponent {
+    constructor() {
+        this.config = inject(MNG_MODULE_CONFIG_IT);
+        this.mngCommons = inject(MngCommonsService);
+        this.layoutService = inject(MngMainLayoutComponentV2Service);
+        this.el = inject(ElementRef);
+        this.timeout = null;
+        this.menuComponent = MngMenuComponent;
+    }
+    ngOnInit() {
+        if (this.config.components?.layout?.menu) {
+            this.menuComponent = this.config.components.layout.menu;
+        }
+    }
+    onMouseEnter() {
+        if (!this.layoutService.state.anchored$.value) {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+                this.timeout = null;
+            }
+            this.layoutService.state.sidebarActive$.next(true);
+        }
+    }
+    onMouseLeave() {
+        if (!this.layoutService.state.anchored$.value) {
+            if (!this.timeout) {
+                this.timeout = setTimeout(() => this.layoutService.state.sidebarActive$.next(false), 300);
+            }
+        }
+    }
+    anchor() {
+        this.layoutService.state.anchored$.next(!this.layoutService.state.anchored$.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngSidebarComponent, isStandalone: true, selector: "mng-sidebar-v2", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    <div #menuContainer class=\"layout-menu-container\">\n        <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n    </div>\n\n    <div class=\"menu-version\">\n        <mng-version-v2 [version]=\"mngCommons.appVersion\"></mng-version-v2>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MngVersionComponent, selector: "mng-version-v2", inputs: ["version"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-sidebar-v2', imports: [RouterModule, MngMenuComponent, MngVersionComponent, MngComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    <div #menuContainer class=\"layout-menu-container\">\n        <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n    </div>\n\n    <div class=\"menu-version\">\n        <mng-version-v2 [version]=\"mngCommons.appVersion\"></mng-version-v2>\n    </div>\n</div>\n" }]
+        }], propDecorators: { menuContainer: [{
+                type: ViewChild,
+                args: ['menuContainer']
+            }] } });
+
+class MngTopbarUserComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.mngCommons = inject(MngCommonsService);
+        this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
+    }
+    ngOnInit() {
+        this.mngCommons.user$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(u => {
+            this.user = u;
+        });
+        this.userRoles$ = this.mngCommons.userRoles$;
+    }
+    logout(user, event) {
+        if (typeof user?.logout === 'function') {
+            event.preventDefault();
+            event.stopPropagation();
+            user.logout();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTopbarUserComponent, isStandalone: true, selector: "mng-topbar-user-component-v2", ngImport: i0, template: "<a\n    class=\"cursor-pointer lg:pr-4\"\n    pStyleClass=\"@next\"\n    enterClass=\"ng-hidden\"\n    enterActiveClass=\"px-scalein\"\n    leaveToClass=\"ng-hidden\"\n    leaveActiveClass=\"px-fadeout\"\n    [hideOnOutsideClick]=\"true\"\n    pRipple>\n    <i class=\"pi pi-fw pi-user text-2xl\"></i>\n    <span class=\"hidden sm:inline-block\">&nbsp; {{ user?.displayName ?? user?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu w-15rem z-5 ng-hidden border-round\">\n    <li role=\"menuitem\">\n        <a\n            class=\"flex align-items-center transition-duration-200\"\n            pStyleClass=\"@grandparent\"\n            enterClass=\"ng-hidden\"\n            enterActiveClass=\"px-scalein\"\n            leaveToClass=\"ng-hidden\"\n            leaveActiveClass=\"px-fadeout\">\n            <i class=\"pi pi-fw pi-user text-base mr-2\"></i>\n            <div>\n                <strong>{{ user?.displayName ?? user?.username }}</strong>\n                <small *ngIf=\"((userRoles$ | async)?.length ?? 0) > 0\">\n                    <br />\n                    {{ userRoles$ | mgnEnumerateAsync : undefined : undefined : undefined : 'roles' | async }}\n                </small>\n            </div>\n        </a>\n    </li>\n    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n        <a\n            [href]=\"user?.logoutUrl ?? hrefJsVoid\"\n            (click)=\"logout(user, $event)\"\n            class=\"flex align-items-center hover:text-primary-500 transition-duration-200\"\n            pStyleClass=\"@grandparent\"\n            enterClass=\"ng-hidden\"\n            enterActiveClass=\"px-scalein\"\n            leaveToClass=\"ng-hidden\"\n            leaveActiveClass=\"px-fadeout\">\n            <i class=\"pi pi-fw pi-sign-out text-base mr-2\"></i>\n            <span>{{ 'mngTopbar.logout' | translate }}</span>\n        </a>\n    </li>\n</ul>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MngEnumerateAsyncPipe, name: "mgnEnumerateAsync" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$4.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarUserComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-topbar-user-component-v2', imports: [AsyncPipe, MngEnumerateAsyncPipe, NgIf, TranslateModule, RippleModule, StyleClassModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    class=\"cursor-pointer lg:pr-4\"\n    pStyleClass=\"@next\"\n    enterClass=\"ng-hidden\"\n    enterActiveClass=\"px-scalein\"\n    leaveToClass=\"ng-hidden\"\n    leaveActiveClass=\"px-fadeout\"\n    [hideOnOutsideClick]=\"true\"\n    pRipple>\n    <i class=\"pi pi-fw pi-user text-2xl\"></i>\n    <span class=\"hidden sm:inline-block\">&nbsp; {{ user?.displayName ?? user?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu w-15rem z-5 ng-hidden border-round\">\n    <li role=\"menuitem\">\n        <a\n            class=\"flex align-items-center transition-duration-200\"\n            pStyleClass=\"@grandparent\"\n            enterClass=\"ng-hidden\"\n            enterActiveClass=\"px-scalein\"\n            leaveToClass=\"ng-hidden\"\n            leaveActiveClass=\"px-fadeout\">\n            <i class=\"pi pi-fw pi-user text-base mr-2\"></i>\n            <div>\n                <strong>{{ user?.displayName ?? user?.username }}</strong>\n                <small *ngIf=\"((userRoles$ | async)?.length ?? 0) > 0\">\n                    <br />\n                    {{ userRoles$ | mgnEnumerateAsync : undefined : undefined : undefined : 'roles' | async }}\n                </small>\n            </div>\n        </a>\n    </li>\n    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n        <a\n            [href]=\"user?.logoutUrl ?? hrefJsVoid\"\n            (click)=\"logout(user, $event)\"\n            class=\"flex align-items-center hover:text-primary-500 transition-duration-200\"\n            pStyleClass=\"@grandparent\"\n            enterClass=\"ng-hidden\"\n            enterActiveClass=\"px-scalein\"\n            leaveToClass=\"ng-hidden\"\n            leaveActiveClass=\"px-fadeout\">\n            <i class=\"pi pi-fw pi-sign-out text-base mr-2\"></i>\n            <span>{{ 'mngTopbar.logout' | translate }}</span>\n        </a>\n    </li>\n</ul>\n" }]
+        }] });
+
+class MngTopbarComponent {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.mngCommons = inject(MngCommonsService);
+        this.mainLayoutService = inject(MngMainLayoutComponentV2Service);
+        this.config = inject(MNG_MODULE_CONFIG_IT);
+        this.breadcrumbComponent = MngBreadcrumbComponent;
+        this.topbarUserComponent = MngTopbarUserComponent;
+        this.languages = ['en'];
+        this.selectedLanguage = 'en';
+    }
+    ngOnInit() {
+        if (this.config.components?.layout?.topbarUser) {
+            this.topbarUserComponent = this.config.components.layout.topbarUser;
+        }
+        if (this.config.components?.layout?.breadcrumb) {
+            this.breadcrumbComponent = this.config.components.layout.breadcrumb;
+        }
+        this.languages = this.mngCommons.appLanguages;
+        this.selectedLanguage = this.mngCommons.getOrInitLanguage();
+    }
+    onMenuButtonClick() {
+        this.mainLayoutService.onMenuToggle();
+    }
+    switchLanguage(language) {
+        this.mngCommons.appLanguage = language;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTopbarComponent, isStandalone: true, selector: "mng-topbar-v2", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "topbarInjectionRef", first: true, predicate: ["userMenuItem"], descendants: true }, { propertyName: "appSidebar", first: true, predicate: MngSidebarComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"topbar-start\">\n        <button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\n            <i class=\"pi pi-bars\"></i>\n        </button>\n\n        <div class=\"topbar-breadcrumb\">\n            <div [mngComponent]=\"breadcrumbComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    </div>\n    <div class=\"layout-topbar-menu-section\">\n        <mng-sidebar-v2></mng-sidebar-v2>\n    </div>\n    <div class=\"topbar-end\">\n        <ul class=\"topbar-menu\">\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n            <li #userMenuItem class=\"profile-item topbar-item mr-3\" [mngComponent]=\"topbarUserComponent\" [attachToHost]=\"true\"></li>\n        </ul>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: MngSidebarComponent, selector: "mng-sidebar-v2" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: StyleClassModule }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTopbarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-topbar-v2', imports: [
+                        MngSidebarComponent,
+                        NgClass,
+                        ButtonModule,
+                        InputTextModule,
+                        StyleClassModule,
+                        RippleModule,
+                        MngBreadcrumbComponent,
+                        AsyncPipe,
+                        DropdownModule,
+                        NgIf,
+                        MngComponentDirective,
+                        FormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"topbar-start\">\n        <button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\n            <i class=\"pi pi-bars\"></i>\n        </button>\n\n        <div class=\"topbar-breadcrumb\">\n            <div [mngComponent]=\"breadcrumbComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    </div>\n    <div class=\"layout-topbar-menu-section\">\n        <mng-sidebar-v2></mng-sidebar-v2>\n    </div>\n    <div class=\"topbar-end\">\n        <ul class=\"topbar-menu\">\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n            <li #userMenuItem class=\"profile-item topbar-item mr-3\" [mngComponent]=\"topbarUserComponent\" [attachToHost]=\"true\"></li>\n        </ul>\n    </div>\n</div>\n" }]
+        }], propDecorators: { menuButton: [{
+                type: ViewChild,
+                args: ['menubutton']
+            }], topbarInjectionRef: [{
+                type: ViewChild,
+                args: ['userMenuItem']
+            }], appSidebar: [{
+                type: ViewChild,
+                args: [MngSidebarComponent]
+            }] } });
+
+class MngMainLayoutV2Component {
+    constructor() {
+        this.config = inject(MNG_MODULE_CONFIG_IT);
+        this.layoutService = inject(MngMainLayoutComponentV2Service);
+        this.menuService = inject(MenuService);
+        this.renderer = inject(Renderer2);
+        this.topbarComponent = MngTopbarComponent;
+        this.breadcrumbsComponent = MngBreadcrumbComponent;
+        this.footerComponent = MngFooterComponent;
+        this.layoutService.overlayOpen$.pipe(takeUntilDestroyed()).subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(this.appTopbar?.nativeElement.isSameNode(event.target) || this.appTopbar?.nativeElement.contains(event.target));
+                    if (isOutsideClicked) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if (this.layoutService.state.staticMenuMobileActive$.value) {
+                this.blockBodyScroll();
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.config.components?.layout?.topbar) {
+            this.topbarComponent = this.config.components.layout.topbar;
+        }
+        if (this.config.components?.layout?.breadcrumb) {
+            this.breadcrumbsComponent = this.config.components.layout.breadcrumb;
+        }
+        if (this.config.components?.layout?.footer) {
+            this.footerComponent = this.config.components.layout.footer;
+        }
+    }
+    blockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+    unblockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+    hideMenu() {
+        this.layoutService.state.overlayMenuActive$.next(false);
+        this.layoutService.state.staticMenuMobileActive$.next(false);
+        this.layoutService.state.menuHoverActive$.next(false);
+        this.menuService.reset();
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+    ngOnDestroy() {
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMainLayoutV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngMainLayoutV2Component, isStandalone: true, selector: "mng-main-layout-v2", providers: [MngMainLayoutComponentV2Service], viewQueries: [{ propertyName: "appTopbar", first: true, predicate: ["topbarCmp"], descendants: true }], ngImport: i0, template: "<div\n    class=\"layout-container\"\n    [ngClass]=\"{\n        'layout-light': config.app?.colorScheme === 'light',\n        'layout-dark': config.app?.colorScheme === 'dark',\n        'layout-overlay': config.menuV2?.mode === 'overlay',\n        'layout-static': config.menuV2?.mode === 'static',\n        'layout-reveal': config.menuV2?.mode === 'reveal',\n        'layout-drawer': config.menuV2?.mode === 'drawer',\n        'layout-static-inactive': (layoutService.state.staticMenuDesktopInactive$ | async) && config.menuV2?.mode === 'static',\n        'layout-overlay-active': layoutService.state.overlayMenuActive$ | async,\n        'layout-mobile-active': layoutService.state.staticMenuMobileActive$ | async,\n        'p-ripple-disabled': !config.menuV2?.ripple,\n        'layout-sidebar-active': layoutService.state.sidebarActive$ | async,\n        'layout-sidebar-anchored': layoutService.state.anchored$ | async\n    }\">\n    <div class=\"layout-content-wrapper\">\n        <div #topbarCmp class=\"layout-topbar-wrapper\" [mngComponent]=\"topbarComponent\" [attachToHost]=\"true\"></div>\n        <div class=\"content-breadcrumb\">\n            <div [mngComponent]=\"breadcrumbsComponent\" [attachToHost]=\"true\"></div>\n        </div>\n        <div class=\"layout-content\">\n            <router-outlet></router-outlet>\n        </div>\n        <div class=\"layout-mask\"></div>\n        <div [mngComponent]=\"footerComponent\" [attachToHost]=\"true\"></div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngMainLayoutV2Component, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-main-layout-v2', imports: [NgClass, RouterModule, MngTopbarComponent, MngBreadcrumbComponent, MngComponentDirective, NgIf, AsyncPipe], providers: [MngMainLayoutComponentV2Service], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-container\"\n    [ngClass]=\"{\n        'layout-light': config.app?.colorScheme === 'light',\n        'layout-dark': config.app?.colorScheme === 'dark',\n        'layout-overlay': config.menuV2?.mode === 'overlay',\n        'layout-static': config.menuV2?.mode === 'static',\n        'layout-reveal': config.menuV2?.mode === 'reveal',\n        'layout-drawer': config.menuV2?.mode === 'drawer',\n        'layout-static-inactive': (layoutService.state.staticMenuDesktopInactive$ | async) && config.menuV2?.mode === 'static',\n        'layout-overlay-active': layoutService.state.overlayMenuActive$ | async,\n        'layout-mobile-active': layoutService.state.staticMenuMobileActive$ | async,\n        'p-ripple-disabled': !config.menuV2?.ripple,\n        'layout-sidebar-active': layoutService.state.sidebarActive$ | async,\n        'layout-sidebar-anchored': layoutService.state.anchored$ | async\n    }\">\n    <div class=\"layout-content-wrapper\">\n        <div #topbarCmp class=\"layout-topbar-wrapper\" [mngComponent]=\"topbarComponent\" [attachToHost]=\"true\"></div>\n        <div class=\"content-breadcrumb\">\n            <div [mngComponent]=\"breadcrumbsComponent\" [attachToHost]=\"true\"></div>\n        </div>\n        <div class=\"layout-content\">\n            <router-outlet></router-outlet>\n        </div>\n        <div class=\"layout-mask\"></div>\n        <div [mngComponent]=\"footerComponent\" [attachToHost]=\"true\"></div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { appTopbar: [{
+                type: ViewChild,
+                args: ['topbarCmp']
+            }] } });
+
 class RouteBuilder {
     constructor(route) {
         this.routePath = [];
         this.routeData = { breadcrumb: null };
         this.children = [];
         this.menuItemChildren = [];
+        this.menuItemChildrenAfter = []; // append after route children
         this.route = route;
         if (this.route.path && this.route.path.length > 0) {
             this.routePath = [this.route.path];
@@ -16073,9 +17618,15 @@ class RouteBuilder {
     static createFromRoute(route) {
         return new RouteBuilder(route);
     }
+    /**
+     * @deprecated use createLayoutRouteV2() instead
+     */
     static createLayoutRoute(path, layoutComponent = MngMainLayoutComponent) {
         return RouteBuilder.create(path, layoutComponent);
     }
+    static createLayoutRouteV2(path, layoutComponent = MngMainLayoutV2Component) {
+        return RouteBuilder.create(path, layoutComponent);
+    }
     withRoot(routesBuilder) {
         this.root = routesBuilder;
         return this;
@@ -16147,16 +17698,43 @@ class RouteBuilder {
         this.menuItem = menuItem;
         return this;
     }
-    withMenuItem(icon, label, routerLink) {
+    withMenuItem(icon, label, routerLink, breadcrumb = false) {
         this.menuItem = this.createMenuItem(icon, label, routerLink);
+        if (breadcrumb && label) {
+            this.withBreadcrumb({
+                label: label
+            });
+        }
         return this;
     }
-    withMenuItemChild(label, icon, routerLink) {
-        this.menuItemChildren.push(this.createMenuItem(icon, label, routerLink));
+    /**
+     * Adds menu item child to this instance of menu item.
+     * @param label Label.
+     * @param icon Icon.
+     * @param routerLink Router link.
+     * @param afterRouteChildren If false, menu item child will be appended before route children menu items, at the end otherwise.
+     */
+    withMenuItemChild(label, icon, routerLink, afterRouteChildren = false) {
+        if (afterRouteChildren) {
+            this.menuItemChildrenAfter.push(this.createMenuItem(icon, label, routerLink));
+        }
+        else {
+            this.menuItemChildren.push(this.createMenuItem(icon, label, routerLink));
+        }
         return this;
     }
-    withMngMenuItemChild(menuItem) {
-        this.menuItemChildren.push(menuItem);
+    /**
+     * Adds menu item child to this instance of menu item.
+     * @param menuItem Configuration object for menu item.
+     * @param afterRouteChildren If false, menu item child will be appended before route children menu items, at the end otherwise.
+     */
+    withMngMenuItemChild(menuItem, afterRouteChildren = false) {
+        if (afterRouteChildren) {
+            this.menuItemChildrenAfter.push(menuItem);
+        }
+        else {
+            this.menuItemChildren.push(menuItem);
+        }
         return this;
     }
     withMenuItemLazyChildren() {
@@ -16257,18 +17835,22 @@ class RouteBuilder {
         if (menuItemBuild?.items) {
             menuItemChildrenBuild.push(...menuItemBuild.items);
         }
-        for (const menuItemChild of this.menuItemChildren) {
-            const finalMenuItemChild = { ...menuItemChild };
-            if (!finalMenuItemChild.routerLink) {
-                finalMenuItemChild.routerLink = this.routePath;
+        const processMenuItemChild = (child) => {
+            const finalChild = { ...child };
+            if (typeof finalChild.routerLink === 'undefined') {
+                finalChild.routerLink = this.routePath;
             }
-            if (typeof finalMenuItemChild.routerLink === 'string') {
-                finalMenuItemChild.routerLink = [finalMenuItemChild.routerLink];
+            if (typeof finalChild.routerLink === 'string') {
+                finalChild.routerLink = [finalChild.routerLink];
             }
-            finalMenuItemChild.routerLink = RouteUtil.removeEmptyPathSegments(finalMenuItemChild.routerLink);
-            menuItemChildren.push(finalMenuItemChild);
-        }
-        menuItemChildrenBuild.push(...menuItemChildren, ...routeChildrenMenuItems);
+            if (finalChild.routerLink) {
+                finalChild.routerLink = RouteUtil.removeEmptyPathSegments(finalChild.routerLink);
+            }
+            return finalChild;
+        };
+        this.menuItemChildren.forEach(child => menuItemChildren.push(processMenuItemChild(child)));
+        const menuItemChildrenAfterBuild = this.menuItemChildrenAfter.map(child => processMenuItemChild(child));
+        menuItemChildrenBuild.push(...menuItemChildren, ...routeChildrenMenuItems, ...menuItemChildrenAfterBuild);
         if (!menuItemBuild) {
             return menuItemChildrenBuild;
         }
@@ -16345,10 +17927,17 @@ class RoutesBuilder {
     static create() {
         return new RoutesBuilder();
     }
+    /**
+     * @deprecated use createWithLayoutV2() instead
+     */
     static createWithLayout(layoutComponent = MngMainLayoutComponent) {
         const layoutRoute = RouteBuilder.createLayoutRoute('', layoutComponent);
         return new RoutesBuilder(layoutRoute);
     }
+    static createWithLayoutV2(layoutComponent = MngMainLayoutV2Component) {
+        const layoutRoute = RouteBuilder.createLayoutRouteV2('', layoutComponent);
+        return new RoutesBuilder(layoutRoute);
+    }
     addAngularRoute(route) {
         return this.addRouteBuilder(RouteBuilder.createFromRoute(route));
     }
@@ -16624,5 +18213,5 @@ function EnumName(typeName) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngErrorBase, AMngFormlyCustomFieldComponent, AMngGetAllApiService, AMngTableviewRouteComponent, APermissions, ActionActivationTriggerEnum, ActionButtonDescriptor, ActionConfirmationDialogDescriptor, ActionContext, ActionContextValidation, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionEditorSubmitTypeEnum, ActionError, ActionInstance, ActionInstanceStateEnum, ActionLinkDescriptor, ActionParameters, ActionPositionEnum, ActionSimpleDescriptor, ActionTypeEnum, AuthorizationTypeEnum, AuthorizationUtil, ButtonStyleBuilder, ButtonStyleRoundedEnum, ColumnDescriptor, ColumnDisplayTypeEnum, ColumnDynamicDescriptor, ColumnTypeEnum, DataProvider, DateUtil, DefaultActionMngErrorMapperService, DynamicTableviewDataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, EnumeratePipeI18nHelper, ErrorUtil, ExportUtils, FieldActionDescriptor, FieldGroupDescriptor, FieldGroupTypeEnum, FieldInputDescriptor, FieldInputTypeEnum, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorDescriptor, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorDescriptor, FieldManyToManyEditorTypeEnum, FieldSizeEnum, FieldTabGroupDescriptor, FieldValidationDescriptor, FileUtil, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, FilterLookupTypeEnum, FilterMatchModeEnum, FilterTypeEnum, I18nUtils, IdProperty, JsonPathPipe, LogLevelEnum, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DATE_RANGE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_LOG_PUBLISHERS, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionError, MngActionErrorMapperService, MngActionExecutorService, MngActionRouteComponent, MngAuthorizationService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngClassMapPipe, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDataLanguageDropdownComponent, MngDateRangeComponent, MngDropdownComponent, MngEnumPipe, MngEnumerateAsyncPipe, MngEnumeratePipe, MngErrorHandler, MngErrorPageComponent, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormEvent, MngFormEventTypeEnum, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldActionComponent, MngFormlyFieldAutocompleteComponent, MngFormlyFieldCustomComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldNoLabelWrapperComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngGetterPipe, MngHttpError, MngI18nPropertyPipe, MngInternalError, MngLocalStorageService, MngLocaleDefaultRowClassPipe, MngLogPublisherConsoleService, MngLoggerService, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngNotFoundPageComponent, MngParametrizePipe, MngRouterService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTemplatePipe, MngTopbarComponent, MngTopbarUserComponent, MngVersionComponent, MngVersionService, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, ObjectUtil, Permissions, RouteBuilder, RoutesBuilder, StringUtil, StyleLevelEnum, StyleSizeEnum, StylesUtil, TableDataProvider, TableDescriptor, TableDynamicColumnsModeEnum, TableDynamicDescriptor, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum, TableviewActionDefaultCategories, TableviewCrudDataProvider, TableviewDataProvider, TableviewDescriptor, TableviewDynamicDescriptor, TableviewEditorTypeEnum, TableviewRouteBuilder, TableviewRouteBuilderInternal, TitleProperty, TypeName, TypeUtil, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxDateValidationMessage, getMaxLengthValidationMessage, getMaxValidationMessage, getMinDateValidationMessage, getMinLengthValidationMessage, getMinValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngAuthorizationGuard, mngFormlyConfigProvider, primeNgModules, provideMngCommons, typeMapBase };
+export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngErrorBase, AMngFormlyCustomFieldComponent, AMngGetAllApiService, AMngTableviewRouteComponent, APermissions, ActionActivationTriggerEnum, ActionButtonDescriptor, ActionConfirmationDialogDescriptor, ActionContext, ActionContextValidation, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionEditorSubmitTypeEnum, ActionError, ActionInstance, ActionInstanceStateEnum, ActionLinkDescriptor, ActionParameters, ActionPositionEnum, ActionSimpleDescriptor, ActionTypeEnum, AuthorizationTypeEnum, AuthorizationUtil, ButtonStyleBuilder, ButtonStyleRoundedEnum, ColumnDescriptor, ColumnDisplayTypeEnum, ColumnDynamicDescriptor, ColumnTypeEnum, DataProvider, DateUtil, DefaultActionMngErrorMapperService, DynamicTableviewDataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, EnumeratePipeI18nHelper, ErrorUtil, ExportUtils, FieldActionDescriptor, FieldGroupDescriptor, FieldGroupTypeEnum, FieldInputDescriptor, FieldInputTypeEnum, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorDescriptor, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorDescriptor, FieldManyToManyEditorTypeEnum, FieldSizeEnum, FieldTabGroupDescriptor, FieldValidationDescriptor, FileUtil, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, FilterLookupTypeEnum, FilterMatchModeEnum, FilterTypeEnum, I18nUtils, IdProperty, JsonPathPipe, LogLevelEnum, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DATE_RANGE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_LOG_PUBLISHERS, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionError, MngActionErrorMapperService, MngActionExecutorService, MngActionRouteComponent, MngAuthorizationService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent$1 as MngBreadcrumbComponent, MngClassMapPipe, MngCommonsInitEventEnum, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDataLanguageDropdownComponent, MngDateRangeComponent, MngDialogKeydownHandlerDirective, MngDropdownComponent, MngEnumPipe, MngEnumerateAsyncPipe, MngEnumeratePipe, MngErrorHandler, MngErrorPageComponent, MngFooterComponent$1 as MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormEvent, MngFormEventTypeEnum, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldActionComponent, MngFormlyFieldAutocompleteComponent, MngFormlyFieldCustomComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldNoLabelWrapperComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngGetterPipe, MngHttpError, MngI18nPropertyPipe, MngInternalError, MngLocalStorageService, MngLocaleDefaultRowClassPipe, MngLogPublisherConsoleService, MngLoggerService, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent$1 as MngMenuComponent, MngMenuItemComponent$1 as MngMenuItemComponent, MngNavigationService, MngNotFoundPageComponent, MngParametrizePipe, MngRouterService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnFilterFullComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTemplatePipe, MngTopbarComponent$1 as MngTopbarComponent, MngTopbarUserComponent$1 as MngTopbarUserComponent, MngVersionComponent$1 as MngVersionComponent, MngVersionService, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, ObjectUtil, Permissions, RouteBuilder, RoutesBuilder, StringUtil, StyleLevelEnum, StyleSizeEnum, StylesUtil, TableDataProvider, TableDescriptor, TableDynamicColumnsModeEnum, TableDynamicDescriptor, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum, TableviewActionDefaultCategories, TableviewCrudDataProvider, TableviewDataProvider, TableviewDescriptor, TableviewDynamicDescriptor, TableviewEditorTypeEnum, TableviewRouteBuilder, TableviewRouteBuilderInternal, TitleProperty, TypeName, TypeUtil, booleanObsAttribute, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxDateValidationMessage, getMaxLengthValidationMessage, getMaxValidationMessage, getMinDateValidationMessage, getMinLengthValidationMessage, getMinValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngAuthorizationGuard, mngFormlyConfigProvider, primeNgModules, provideMngCommons, typeMapBase };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map