@mediusinc/mng-commons 0.2.9 → 0.2.14

package/fesm2015/mediusinc-mng-commons.mjs

@@ -6,7 +6,7 @@ import { Injectable, InjectionToken, Inject, Component, ChangeDetectionStrategy,
 import * as i2$3 from '@angular/forms';
 import { Validators, FormGroup, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
+import { NavigationEnd, GuardsCheckEnd, RouterModule } from '@angular/router';
 import * as i3 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
 import * as i2$2 from '@ngx-translate/core';
@@ -36,14 +36,15 @@ import { DynamicDialogModule, DialogService } from 'primeng/dynamicdialog';
 import * as i1$5 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import { FileUploadModule } from 'primeng/fileupload';
+import * as i6$1 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import * as i1$3 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i2$5 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i9$1 from 'primeng/inputtext';
+import * as i10$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i8$1 from 'primeng/inputtextarea';
+import * as i9$1 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i3$1 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
@@ -67,11 +68,11 @@ import { TagModule } from 'primeng/tag';
 import * as i7$1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i8$2 from 'primeng/toolbar';
+import * as i8$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i10 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { of, throwError, Observable, from, BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
+import { of, throwError, Observable, from, BehaviorSubject, Subject, ReplaySubject, distinctUntilChanged, combineLatest } from 'rxjs';
 import 'reflect-metadata';
 import { mergeMap, map, first, catchError, filter, finalize, startWith } from 'rxjs/operators';
 import * as i4 from '@angular/platform-browser';
@@ -1053,6 +1054,15 @@ class FieldInputDescriptor extends AFieldDescriptor {
     get pattern() {
         return this._pattern;
     }
+    get mask() {
+        return this._mask;
+    }
+    get slotChar() {
+        return this._slotChar;
+    }
+    get customComponentName() {
+        return this._customComponentName;
+    }
     asText(minLength, maxLength, pattern, isEmail) {
         this._fieldType = FieldInputDescriptor.TypeEnum.Text;
         this._minLength = minLength;
@@ -1107,6 +1117,17 @@ class FieldInputDescriptor extends AFieldDescriptor {
         this._datePickerShowTime = showTime !== null && showTime !== void 0 ? showTime : false;
         return this;
     }
+    asMask(mask, slotChar) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Mask;
+        this._mask = mask;
+        this._slotChar = slotChar;
+        return this;
+    }
+    asCustomComponent(customComponentName) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Custom;
+        this._customComponentName = customComponentName;
+        return this;
+    }
     copy() {
         const field = new FieldInputDescriptor(this._editor, this._property);
         this.copyFieldsTo(field);
@@ -1125,6 +1146,9 @@ class FieldInputDescriptor extends AFieldDescriptor {
         field._maxLength = this._maxLength;
         field._minLength = this._minLength;
         field._pattern = this._pattern;
+        field._mask = this._mask;
+        field._slotChar = this._slotChar;
+        field._customComponentName = this._customComponentName;
         return field;
     }
 }
@@ -1137,6 +1161,8 @@ class FieldInputDescriptor extends AFieldDescriptor {
         TypeEnum[TypeEnum["Switch"] = 3] = "Switch";
         TypeEnum[TypeEnum["Radio"] = 4] = "Radio";
         TypeEnum[TypeEnum["Datepicker"] = 5] = "Datepicker";
+        TypeEnum[TypeEnum["Mask"] = 6] = "Mask";
+        TypeEnum[TypeEnum["Custom"] = 7] = "Custom";
     })(TypeEnum = FieldInputDescriptor.TypeEnum || (FieldInputDescriptor.TypeEnum = {}));
 })(FieldInputDescriptor || (FieldInputDescriptor = {}));
 class FieldLookupDescriptor extends AFieldDescriptor {
@@ -1225,6 +1251,7 @@ class FieldLookupEnumDescriptor extends FieldLookupDescriptor {
         this.withLookupDataProvider(dataProvider);
         this.withItemsLabelProperty('title');
         this.withItemsValueProperty('value');
+        this.withDataKeyProperty('value');
     }
     get enumType() {
         return this._enumType;
@@ -1589,6 +1616,13 @@ class TableDescriptor {
         this.setDataKeyFromColumn();
         return column;
     }
+    addColumnEnum(property, enumType, nameAsValue = false, titlePath) {
+        const column = new ColumnDescriptor(this, property);
+        column.asEnum(enumType, nameAsValue, titlePath);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
     addColumnObject(property, modelType, displayProperty) {
         const column = new ColumnDescriptor(this, property);
         column.withModelType(modelType);
@@ -1665,6 +1699,7 @@ class ColumnDescriptor {
         this._modelType = null;
         this._columnType = ColumnDescriptor.TypeEnum.String;
         this._isSortEnabled = false;
+        this._enumNameAsValue = false;
         this._table = table;
         this._property = property;
     }
@@ -1695,6 +1730,15 @@ class ColumnDescriptor {
     get property() {
         return this._property;
     }
+    get enumType() {
+        return this._enumType;
+    }
+    get enumTitlePath() {
+        return this._enumTitlePath;
+    }
+    get enumNameAsValue() {
+        return this._enumNameAsValue;
+    }
     asType(type = ColumnDescriptor.TypeEnum.String) {
         this._columnType = type;
         return this;
@@ -1713,6 +1757,16 @@ class ColumnDescriptor {
         this._columnType = ColumnDescriptor.TypeEnum.Boolean;
         return this;
     }
+    asEnum(enumType, nameAsValue = false, titlePath) {
+        this._columnType = ColumnDescriptor.TypeEnum.Enum;
+        this._enumType = enumType;
+        this._enumNameAsValue = nameAsValue;
+        if (typeof titlePath === 'undefined') {
+            titlePath = TypeUtil.findEnumName(enumType);
+        }
+        this._enumTitlePath = titlePath;
+        return this;
+    }
     withModelType(modelType) {
         this._modelType = modelType;
         return this;
@@ -1727,7 +1781,23 @@ class ColumnDescriptor {
     }
     withFilter() {
         this._filterDescriptor = new FilterDescriptor(this._property);
-        this._filterDescriptor.asFilterType(this._columnType);
+        let filterType;
+        switch (this._columnType) {
+            case ColumnDescriptor.TypeEnum.Number:
+                filterType = FilterDescriptor.TypeEnum.Number;
+                break;
+            case ColumnDescriptor.TypeEnum.Boolean:
+                filterType = FilterDescriptor.TypeEnum.Boolean;
+                break;
+            case ColumnDescriptor.TypeEnum.Date:
+                filterType = FilterDescriptor.TypeEnum.Date;
+                break;
+            case ColumnDescriptor.TypeEnum.String:
+            default:
+                filterType = FilterDescriptor.TypeEnum.String;
+                break;
+        }
+        this._filterDescriptor.asFilterType(filterType);
         return this._filterDescriptor;
     }
     withFilterLookup() {
@@ -1735,6 +1805,14 @@ class ColumnDescriptor {
         this._filterDescriptor = filterDescriptor;
         return filterDescriptor;
     }
+    withFilterLookupEnum(options) {
+        if (this._columnType !== ColumnDescriptor.TypeEnum.Enum || !this._enumType) {
+            throw new Error(`Column ${this._property} is not of type enum or enum type is undefined.`);
+        }
+        const filterDescriptor = new FilterLookupEnumDescriptor(this._property, this._enumType, options, this._enumNameAsValue, this._enumTitlePath);
+        this._filterDescriptor = filterDescriptor;
+        return filterDescriptor;
+    }
     withSort(isEnabled = true) {
         this._isSortEnabled = isEnabled;
         return this;
@@ -1757,6 +1835,7 @@ class ColumnDescriptor {
         TypeEnum[TypeEnum["Number"] = 1] = "Number";
         TypeEnum[TypeEnum["Boolean"] = 2] = "Boolean";
         TypeEnum[TypeEnum["Date"] = 3] = "Date";
+        TypeEnum[TypeEnum["Enum"] = 4] = "Enum";
     })(TypeEnum = ColumnDescriptor.TypeEnum || (ColumnDescriptor.TypeEnum = {}));
 })(ColumnDescriptor || (ColumnDescriptor = {}));
 class FilterDescriptor {
@@ -1828,6 +1907,7 @@ class FilterDescriptor {
         TypeEnum[TypeEnum["Boolean"] = 2] = "Boolean";
         TypeEnum[TypeEnum["Date"] = 3] = "Date";
         TypeEnum[TypeEnum["Lookup"] = 4] = "Lookup";
+        TypeEnum[TypeEnum["LookupEnum"] = 5] = "LookupEnum";
     })(TypeEnum = FilterDescriptor.TypeEnum || (FilterDescriptor.TypeEnum = {}));
     let MatchModeEnum;
     (function (MatchModeEnum) {
@@ -1934,6 +2014,31 @@ class FilterLookupDescriptor extends FilterDescriptor {
         descriptor._dataKeyProperty = this._dataKeyProperty;
     }
 }
+class FilterLookupEnumDescriptor extends FilterLookupDescriptor {
+    constructor(property, enumType, options, nameAsValue = false, optionsTitlePath) {
+        super(property, null);
+        this._enumType = enumType;
+        if (typeof optionsTitlePath === 'undefined') {
+            optionsTitlePath = TypeUtil.findEnumName(enumType);
+        }
+        const optionEnumValues = Array.isArray(options)
+            ? EnumUtil.fromValuesAsEnumValueArray(enumType, options, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
+            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
+        const dataProvider = new LookupDataProvider(null).withLookup(() => of(optionEnumValues));
+        this.withLookupDataProvider(dataProvider);
+        this.withItemsLabelProperty('title');
+        this.withItemsValueProperty('value');
+        this.withDataKeyProperty('value');
+    }
+    get enumType() {
+        return this._enumType;
+    }
+    copy() {
+        const field = new FilterLookupEnumDescriptor(this._property, this._enumType, []);
+        this.copyFieldsTo(field);
+        return field;
+    }
+}
 (function (FilterLookupDescriptor) {
     let LookupTypeEnum;
     (function (LookupTypeEnum) {
@@ -2011,6 +2116,9 @@ class TableviewDescriptor {
     addColumnBoolean(property) {
         return this._table.addColumnBoolean(property);
     }
+    addColumnEnum(property, enumType, nameAsValue = false, titlePath) {
+        return this._table.addColumnEnum(property, enumType, nameAsValue, titlePath);
+    }
     addColumnObject(property, modelType, displayProperty) {
         return this._table.addColumnObject(property, modelType, displayProperty);
     }
@@ -2183,6 +2291,12 @@ class EditorFormlyUtil {
                 case FieldInputDescriptor.TypeEnum.Datepicker:
                     field.type = 'datepicker';
                     break;
+                case FieldInputDescriptor.TypeEnum.Mask:
+                    field.type = 'mask';
+                    break;
+                case FieldInputDescriptor.TypeEnum.Custom:
+                    field.type = descriptor.customComponentName;
+                    break;
                 default:
                     field.type = 'input';
                     field.templateOptions.minLength = descriptor.minLength;
@@ -2242,8 +2356,15 @@ class EnumUtil {
      * @param enumType Enum object.
      */
     static getConstantNames(enumType) {
+        return EnumUtil.getConstantNamesFromEnumObject(enumType);
+    }
+    /**
+     * Returns array of names for constants in enum.
+     * @param enumObj Enum object.
+     */
+    static getConstantNamesFromEnumObject(enumObj) {
         // in number enum, the numbers are also represented in objects and should be filtered out
-        return Object.keys(enumType).filter(v => isNaN(+v));
+        return Object.keys(enumObj).filter(v => isNaN(+v));
     }
     /**
      * Returns array of string values for constants in enum.
@@ -2296,6 +2417,21 @@ class EnumUtil {
             return typeof enumType[value] !== 'undefined' ? enumType[value] : null;
         }
     }
+    /**
+     * Gets constant name for value.
+     * @param enumObj Enum object.
+     * @param value Value of enum constant.
+     */
+    static getConstantNameFromEnumObject(enumObj, value) {
+        var _a;
+        const enumObjAny = enumObj;
+        if (typeof value === 'string') {
+            return (_a = this.getConstantNamesFromEnumObject(enumObj).find(c => enumObjAny[c] === value)) !== null && _a !== void 0 ? _a : null;
+        }
+        else {
+            return typeof enumObjAny[value] !== 'undefined' ? enumObjAny[value] : null;
+        }
+    }
 }
 
 class I18nUtil {
@@ -4342,10 +4478,9 @@ class MngDropdownComponent {
         }
     }
     writeValue(obj) {
+        var _a;
         this.dropdownFormControl.setValue(obj, { emitEvent: false });
-        if (this.primeDropdown) {
-            this.primeDropdown.writeValue(obj);
-        }
+        (_a = this.primeDropdown) === null || _a === void 0 ? void 0 : _a.writeValue(obj);
     }
 }
 MngDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
@@ -4539,10 +4674,10 @@ class MngFormlyFieldInputComponent extends FieldType {
     }
 }
 MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></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 [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$3.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", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$5.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$3.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5.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", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$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]" }, { type: i8$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></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 [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$3.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", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$5.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$3.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5.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", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$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]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></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 [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
+            args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></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 [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
         }] });
 
 class MngFormlyFieldDropdownComponent extends FieldType {
@@ -4552,10 +4687,10 @@ class MngFormlyFieldDropdownComponent extends FieldType {
     }
 }
 MngFormlyFieldDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [showClear]=\"!this.to.required\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [showClear]=\"!this.to.required\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [showClear]=\"!this.to.required\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n" }]
+            args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [showClear]=\"!this.to.required\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n" }]
         }] });
 
 class MngTableLoadEvent {
@@ -4640,10 +4775,10 @@ class MngTableColumnFilterComponent {
     }
 }
 MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2$1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\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.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (change)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ 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"] }, { type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i2$2.TranslatePipe } });
+MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\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.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ 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"] }, { type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i2$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\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.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (change)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
+            args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\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.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
         }], ctorParameters: function () { return [{ type: i2$1.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], display: [{
@@ -4704,19 +4839,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 }]
         }] });
 
+class MngEnumPipe {
+    transform(value, enumObj, i18nPath, nameAsValue = false) {
+        const enumConstantName = nameAsValue ? value : EnumUtil.getConstantNameFromEnumObject(enumObj, value);
+        if (typeof i18nPath === 'undefined') {
+            i18nPath = TypeUtil.findEnumName(enumObj);
+        }
+        return i18nPath ? `${i18nPath}.${enumConstantName}` : enumConstantName;
+    }
+}
+MngEnumPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MngEnumPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngEnumPipe, name: "enum" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngEnumPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'enum',
+                    pure: true
+                }]
+        }] });
+
 class MngTableColumnValueComponent {
     constructor() {
         this.columnTypeString = ColumnDescriptor.TypeEnum.String;
         this.columnTypeNumber = ColumnDescriptor.TypeEnum.Number;
         this.columnTypeBoolean = ColumnDescriptor.TypeEnum.Boolean;
         this.columnTypeDate = ColumnDescriptor.TypeEnum.Date;
+        this.columnTypeEnum = ColumnDescriptor.TypeEnum.Enum;
     }
 }
 MngTableColumnValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4$1.DecimalPipe, "date": i4$1.DatePipe, "boolean": MngBooleanPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4$1.DecimalPipe, "date": i4$1.DatePipe, "boolean": MngBooleanPipe, "translate": i2$2.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n" }]
         }], propDecorators: { descriptor: [{
                 type: Input
             }], item: [{
@@ -5486,8 +5641,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
 class MngMenuItemComponent {
-    constructor(router, mngCommons, mainLayoutService) {
+    constructor(injector, router, route, mngCommons, mainLayoutService) {
+        this.injector = injector;
         this.router = router;
+        this.route = route;
         this.mngCommons = mngCommons;
         this.mainLayoutService = mainLayoutService;
         this.index = 0;
@@ -5496,6 +5653,8 @@ class MngMenuItemComponent {
         this.key = '';
         this.active = false;
         this.hover = false;
+        this.isAllowedSubject = new BehaviorSubject(true);
+        this.isAllowed$ = this.isAllowedSubject.asObservable().pipe(distinctUntilChanged());
     }
     ngOnInit() {
         if (!this.mngCommons.menuModeIsSlim && this.item.routerLink) {
@@ -5519,14 +5678,20 @@ class MngMenuItemComponent {
         this.menuResetSubscription = this.mngCommons.menuReset$.subscribe(() => {
             this.active = false;
         });
-        this.routerEventsSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-            if (this.mngCommons.menuModeIsSlim && !this.mainLayoutService.isMobile()) {
-                this.active = false;
+        this.routerEventsSubscription = this.router.events.subscribe(next => {
+            if (next instanceof GuardsCheckEnd && next.shouldActivate) {
+                this.checkIfMenuItemIsAllowedFromGuard(next.state);
             }
-            else {
-                this.updateActiveStateFromRoute();
+            else if (next instanceof NavigationEnd) {
+                if (this.mngCommons.menuModeIsSlim && !this.mainLayoutService.isMobile()) {
+                    this.active = false;
+                }
+                else {
+                    this.updateActiveStateFromRoute();
+                }
             }
         });
+        this.checkIfMenuItemIsAllowedFromGuard(this.router.routerState.snapshot);
     }
     updateActiveStateFromRoute() {
         if (this.itemUrl) {
@@ -5548,10 +5713,6 @@ class MngMenuItemComponent {
         }
         // notify other items
         this.mngCommons.menuChangeActiveKey(this.key);
-        // execute command
-        if (this.item.command) {
-            this.item.command({ originalEvent: event, item: this.item });
-        }
         // toggle active state
         if (this.item.items) {
             this.active = !this.active;
@@ -5580,14 +5741,50 @@ class MngMenuItemComponent {
         }
     }
     ngOnDestroy() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         (_a = this.menuSourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         (_b = this.menuResetSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         (_c = this.routerEventsSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+        (_d = this.guardsSubscription) === null || _d === void 0 ? void 0 : _d.unsubscribe();
+    }
+    checkIfMenuItemIsAllowedFromGuard(routerState) {
+        var _a, _b;
+        (_a = this.guardsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        if ((_b = this.item.guards) === null || _b === void 0 ? void 0 : _b.length) {
+            const obs = [];
+            for (const guard of this.item.guards) {
+                const tokenInjectedInstance = this.injector.get(guard);
+                if (tokenInjectedInstance && 'canActivate' in tokenInjectedInstance) {
+                    const guardInstance = tokenInjectedInstance;
+                    const canActivateRes = guardInstance.canActivate(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.guardsSubscription = combineLatest(obs)
+                .pipe(first())
+                .subscribe(next => {
+                const result = next.every(n => n === true);
+                this.isAllowedSubject.next(result);
+            });
+        }
+        else {
+            this.isAllowedSubject.next(true);
+        }
     }
 }
-MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i1.Router }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false\" class=\"layout-menuitem-root-text\">{{ item.label | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false\"\n        [attr.href]=\"item.url\"\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.class\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.class\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false\"\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.badgeClass\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2$2.TranslatePipe, "async": i4$1.AsyncPipe }, animations: [
+MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\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\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$2.TranslatePipe }, animations: [
         trigger('children', [
             state('void', style({
                 height: '0px'
@@ -5639,8 +5836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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>\n    <div *ngIf=\"root && item.visible !== false\" class=\"layout-menuitem-root-text\">{{ item.label | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false\"\n        [attr.href]=\"item.url\"\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.class\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.class\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false\"\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.badgeClass\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { item: [{
+                    ], template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\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\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\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\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { item: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -5811,7 +6008,7 @@ class MngTableviewComponent {
     }
 }
 MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.MessageService }, { token: i2$2.TranslateService }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, TableviewComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\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 *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($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-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", components: [{ type: i7$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i8$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["tableLoad", "cellClick", "selectionChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i2$2.TranslatePipe } });
+MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, TableviewComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\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 *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($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-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", components: [{ type: i7$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i8$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["tableLoad", "cellClick", "selectionChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i2$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, TableviewComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\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 *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($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-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
@@ -5965,6 +6162,15 @@ const formlyTypesConfig = [
             }
         }
     },
+    {
+        name: 'mask',
+        extends: 'input',
+        defaultOptions: {
+            templateOptions: {
+                type: 'mask'
+            }
+        }
+    },
     {
         name: 'dropdown',
         component: MngFormlyFieldDropdownComponent,
@@ -6121,6 +6327,7 @@ const declarations = [
     MngTemplateDirective,
     // pipes
     MngPropertyPathPipe,
+    MngEnumPipe,
     MngBooleanPipe,
     MngI18nPropertyPipe,
     // layout components
@@ -6213,6 +6420,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngTemplateDirective,
         // pipes
         MngPropertyPathPipe,
+        MngEnumPipe,
         MngBooleanPipe,
         MngI18nPropertyPipe,
         // layout components
@@ -6325,6 +6533,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngTemplateDirective,
         // pipes
         MngPropertyPathPipe,
+        MngEnumPipe,
         MngBooleanPipe,
         MngI18nPropertyPipe,
         // layout components
@@ -6545,8 +6754,12 @@ class RoutesBuilder {
     addRouteRedirect(path, redirectTo, pathMatch = 'prefix') {
         return this.addRouteBuilder(RouteBuilder.createRedirect(path, redirectTo, pathMatch));
     }
-    addLazyRoute(path, loadChildren) {
-        return this.addRouteBuilder(RouteBuilder.createFromRoute({ path: path, loadChildren: loadChildren }));
+    addLazyRoute(path, loadChildren, canLoad) {
+        const route = { path: path, loadChildren: loadChildren };
+        if (canLoad === null || canLoad === void 0 ? void 0 : canLoad.length) {
+            route.canLoad = canLoad;
+        }
+        return this.addRouteBuilder(RouteBuilder.createFromRoute(route));
     }
     addRoute(path, component) {
         return this.addRouteBuilder(RouteBuilder.create(path, component));
@@ -6687,11 +6900,32 @@ class RouteBuilder {
         this.withBreadcrumb(title);
         return this;
     }
+    withCanActivate(diToken) {
+        if (!this.route.canActivate) {
+            this.route.canActivate = [];
+        }
+        this.route.canActivate.push(diToken);
+        return this;
+    }
+    withCanDeactivate(diToken) {
+        if (!this.route.canDeactivate) {
+            this.route.canDeactivate = [];
+        }
+        this.route.canDeactivate.push(diToken);
+        return this;
+    }
+    withResolver(diToken, name) {
+        if (!this.route.resolve) {
+            this.route.resolve = {};
+        }
+        this.route.resolve[name] = diToken;
+        return this;
+    }
     withData(data) {
         this.route.data = data;
         return this;
     }
-    withPrimeMenuItem(menuItem) {
+    withMngMenuItem(menuItem) {
         this.menuItem = menuItem;
         return this;
     }
@@ -6762,35 +6996,62 @@ class RouteBuilder {
                 }
             }
         }
+        if (this.route.canActivate) {
+            angularRoute.canActivate = [...this.route.canActivate];
+        }
+        if (this.route.canActivateChild) {
+            angularRoute.canActivateChild = [...this.route.canActivateChild];
+        }
+        if (this.route.canLoad) {
+            angularRoute.canLoad = [...this.route.canLoad];
+        }
+        if (this.route.canDeactivate) {
+            angularRoute.canDeactivate = [...this.route.canDeactivate];
+        }
+        if (this.route.resolve) {
+            angularRoute.resolve = Object.assign({}, this.route.resolve);
+        }
         return angularRoute;
     }
     buildMenu() {
         var _a, _b;
-        const menuItem = this.menuItem ? Object.assign({}, this.menuItem) : null;
+        const menuItemBuild = this.menuItem ? Object.assign({}, this.menuItem) : null;
         const routeChildrenMenuItems = this.children.flatMap(child => child.buildMenu());
         const menuItemChildren = [];
-        const finalMenuItemChildren = [];
-        if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.items) {
-            finalMenuItemChildren.push(...menuItem.items);
+        const menuItemChildrenBuild = [];
+        if (menuItemBuild === null || menuItemBuild === void 0 ? void 0 : menuItemBuild.items) {
+            menuItemChildrenBuild.push(...menuItemBuild.items);
         }
         for (const menuItemChild of this.menuItemChildren) {
             const finalMenuItemChild = Object.assign({}, menuItemChild);
             if (!finalMenuItemChild.routerLink) {
                 finalMenuItemChild.routerLink = this.routePath;
             }
+            if (typeof finalMenuItemChild.routerLink === 'string') {
+                finalMenuItemChild.routerLink = [finalMenuItemChild.routerLink];
+            }
             finalMenuItemChild.routerLink = RouteUtil.removeEmptyPathSegments(finalMenuItemChild.routerLink);
             menuItemChildren.push(finalMenuItemChild);
         }
-        finalMenuItemChildren.push(...menuItemChildren, ...routeChildrenMenuItems);
-        if (!menuItem) {
-            return finalMenuItemChildren;
+        menuItemChildrenBuild.push(...menuItemChildren, ...routeChildrenMenuItems);
+        if (!menuItemBuild) {
+            return menuItemChildrenBuild;
         }
-        menuItem.label = (_a = menuItem.label) !== null && _a !== void 0 ? _a : this.pageTitle;
-        menuItem.routerLink = RouteUtil.removeEmptyPathSegments((_b = menuItem.routerLink) !== null && _b !== void 0 ? _b : this.routePath);
-        if (finalMenuItemChildren.length > 0) {
-            menuItem.items = finalMenuItemChildren;
+        menuItemBuild.label = (_a = menuItemBuild.label) !== null && _a !== void 0 ? _a : this.pageTitle;
+        if (typeof menuItemBuild.routerLink === 'string') {
+            menuItemBuild.routerLink = [menuItemBuild.routerLink];
         }
-        return [menuItem];
+        menuItemBuild.routerLink = RouteUtil.removeEmptyPathSegments((_b = menuItemBuild.routerLink) !== null && _b !== void 0 ? _b : this.routePath);
+        if (menuItemChildrenBuild.length > 0) {
+            menuItemBuild.items = menuItemChildrenBuild;
+        }
+        if (!menuItemBuild.guards) {
+            const guards = this.findMenuItemGuards();
+            if (guards.length > 0) {
+                menuItemBuild.guards = guards;
+            }
+        }
+        return [menuItemBuild];
     }
     createMenuItem(icon, label, routerLink) {
         const menuItem = {};
@@ -6808,13 +7069,31 @@ class RouteBuilder {
     adjustMenuRouterLinksFromBuilder(menuItems) {
         for (const menuItem of menuItems) {
             if (menuItem.routerLink) {
-                menuItem.routerLink = RouteUtil.appendPathToBasePath(this.routePath, menuItem.routerLink);
+                menuItem.routerLink = RouteUtil.appendPathToBasePath(this.routePath, typeof menuItem.routerLink === 'string' ? [menuItem.routerLink] : menuItem.routerLink);
             }
             if (Array.isArray(menuItem.items)) {
                 this.adjustMenuRouterLinksFromBuilder(menuItem.items);
             }
         }
     }
+    findMenuItemGuards() {
+        var _a;
+        const guards = [];
+        if ((_a = this.route.canActivate) === null || _a === void 0 ? void 0 : _a.length) {
+            guards.push(...this.route.canActivate);
+        }
+        if (this.parent) {
+            // Check for parent guards that should be included in decision to hide menu item!
+            // Some parent routes might have guards, but no menu items, so this guards must be taken into account here,
+            // because there is no parent menu item to hide.
+            this.parent.findMenuItemGuards().forEach(g => {
+                if (guards.indexOf(g) < 0) {
+                    guards.push(g);
+                }
+            });
+        }
+        return guards;
+    }
 }
 
 /*
@@ -6825,5 +7104,5 @@ class RouteBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngCrudApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, MediusRestUtil, MngActionComponent, MngActionDialogComponent, MngActionRouteComponent, MngActionService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, RouteBuilder, RoutesBuilder, TableDescriptor, TableviewComponentService, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngCrudApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, MediusRestUtil, MngActionComponent, MngActionDialogComponent, MngActionRouteComponent, MngActionService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, RouteBuilder, RoutesBuilder, TableDescriptor, TableviewComponentService, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map