@mediusinc/mng-commons 0.2.14 → 0.2.17

package/fesm2020/mediusinc-mng-commons.mjs

@@ -472,7 +472,6 @@ class LookupDataProvider extends DataProvider {
     }
 }
 
-/* tslint:disable:no-angle-bracket-type-assertion no-trailing-whitespace member-ordering object-literal-key-quotes */
 /**
  * Generated API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -486,16 +485,16 @@ class LookupDataProvider extends DataProvider {
  */
 var MediusFilterMatchType;
 (function (MediusFilterMatchType) {
-    MediusFilterMatchType[MediusFilterMatchType["Equals"] = 'EQUALS'] = "Equals";
-    MediusFilterMatchType[MediusFilterMatchType["NotEquals"] = 'NOT_EQUALS'] = "NotEquals";
-    MediusFilterMatchType[MediusFilterMatchType["Contains"] = 'CONTAINS'] = "Contains";
-    MediusFilterMatchType[MediusFilterMatchType["EndsWith"] = 'ENDS_WITH'] = "EndsWith";
-    MediusFilterMatchType[MediusFilterMatchType["StartsWith"] = 'STARTS_WITH'] = "StartsWith";
-    MediusFilterMatchType[MediusFilterMatchType["FromTo"] = 'FROM_TO'] = "FromTo";
-    MediusFilterMatchType[MediusFilterMatchType["SmallerThan"] = 'SMALLER_THEN'] = "SmallerThan";
-    MediusFilterMatchType[MediusFilterMatchType["GreaterThan"] = 'GREATER_THEN'] = "GreaterThan";
-    MediusFilterMatchType[MediusFilterMatchType["In"] = 'IN'] = "In";
-    MediusFilterMatchType[MediusFilterMatchType["NotIn"] = 'NOT_IN'] = "NotIn";
+    MediusFilterMatchType["Equals"] = "EQUALS";
+    MediusFilterMatchType["NotEquals"] = "NOT_EQUALS";
+    MediusFilterMatchType["FromTo"] = "FROM_TO";
+    MediusFilterMatchType["Contains"] = "CONTAINS";
+    MediusFilterMatchType["StartsWith"] = "STARTS_WITH";
+    MediusFilterMatchType["EndsWith"] = "ENDS_WITH";
+    MediusFilterMatchType["In"] = "IN";
+    MediusFilterMatchType["NotIn"] = "NOT_IN";
+    MediusFilterMatchType["SmallerThan"] = "SMALLER_THAN";
+    MediusFilterMatchType["GreaterThan"] = "GREATER_THAN";
 })(MediusFilterMatchType || (MediusFilterMatchType = {}));
 
 /* tslint:disable:no-angle-bracket-type-assertion no-trailing-whitespace member-ordering object-literal-key-quotes */
@@ -504,23 +503,12 @@ class MediusFilterParam {
         return MediusFilterParam.attributeTypeMap;
     }
 }
-MediusFilterParam.discriminator = undefined;
 MediusFilterParam.attributeTypeMap = [
     {
         name: 'property',
         baseName: 'property',
         type: 'string'
     },
-    {
-        name: 'filterMatchCaseSensitive',
-        baseName: 'filter_match_case_sensitive',
-        type: 'boolean'
-    },
-    {
-        name: 'filterMatchType',
-        baseName: 'filter_match_type',
-        type: 'FilterMatchType'
-    },
     {
         name: 'filterValue',
         baseName: 'filter_value',
@@ -530,6 +518,16 @@ MediusFilterParam.attributeTypeMap = [
         name: 'filterValueTo',
         baseName: 'filter_value_to',
         type: 'object'
+    },
+    {
+        name: 'filterMatchType',
+        baseName: 'filter_match_type',
+        type: 'FilterMatchType'
+    },
+    {
+        name: 'filterMatchCaseSensitive',
+        baseName: 'filter_match_case_sensitive',
+        type: 'boolean'
     }
 ];
 
@@ -547,9 +545,9 @@ MediusFilterParam.attributeTypeMap = [
  */
 var MediusQueryMode;
 (function (MediusQueryMode) {
-    MediusQueryMode[MediusQueryMode["All"] = 'ALL'] = "All";
-    MediusQueryMode[MediusQueryMode["Count"] = 'COUNT'] = "Count";
-    MediusQueryMode[MediusQueryMode["Data"] = 'DATA'] = "Data";
+    MediusQueryMode["Count"] = "COUNT";
+    MediusQueryMode["Data"] = "DATA";
+    MediusQueryMode["All"] = "ALL";
 })(MediusQueryMode || (MediusQueryMode = {}));
 
 /* tslint:disable:no-angle-bracket-type-assertion no-trailing-whitespace member-ordering object-literal-key-quotes */
@@ -558,27 +556,16 @@ class MediusQueryParam {
         return MediusQueryParam.attributeTypeMap;
     }
 }
-MediusQueryParam.discriminator = undefined;
 MediusQueryParam.attributeTypeMap = [
     {
-        name: 'filterAllParam',
-        baseName: 'filter_all_param',
-        type: 'string'
-    },
-    {
-        name: 'filterAllProperties',
-        baseName: 'filter_all_properties',
+        name: 'sortProperty',
+        baseName: 'sort_property',
         type: 'Array<string>'
     },
     {
-        name: 'filterParams',
-        baseName: 'filter_params',
-        type: 'Array<FilterParam>'
-    },
-    {
-        name: 'groupByProperties',
-        baseName: 'group_by_properties',
-        type: 'Array<string>'
+        name: 'sortAsc',
+        baseName: 'sort_asc',
+        type: 'Array<boolean>'
     },
     {
         name: 'itemsOffset',
@@ -591,34 +578,44 @@ MediusQueryParam.attributeTypeMap = [
         type: 'number'
     },
     {
-        name: 'queryMode',
-        baseName: 'query_mode',
-        type: 'QueryMode'
+        name: 'filterParams',
+        baseName: 'filter_params',
+        type: 'Array<MediusFilterParam>'
+    },
+    {
+        name: 'filterAllParam',
+        baseName: 'filter_all_param',
+        type: 'string'
+    },
+    {
+        name: 'filterAllProperties',
+        baseName: 'filter_all_properties',
+        type: 'Array<string>'
+    },
+    {
+        name: 'validateProperties',
+        baseName: 'validate_properties',
+        type: 'Array<string>'
     },
     {
         name: 'selectInTwoSteps',
         baseName: 'select_in_two_steps',
         type: 'boolean'
     },
-    {
-        name: 'sortAsc',
-        baseName: 'sort_asc',
-        type: 'Array<boolean>'
-    },
     {
         name: 'sortEnumByOrdinal',
         baseName: 'sort_enum_by_ordinal',
         type: 'boolean'
     },
     {
-        name: 'sortProperty',
-        baseName: 'sort_property',
+        name: 'groupByProperties',
+        baseName: 'group_by_properties',
         type: 'Array<string>'
     },
     {
-        name: 'validateProperties',
-        baseName: 'validate_properties',
-        type: 'Array<string>'
+        name: 'queryMode',
+        baseName: 'query_mode',
+        type: 'MediusQueryMode'
     }
 ];
 
@@ -990,6 +987,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
     constructor(editor, property) {
         super(editor, property);
         this._fieldType = FieldInputDescriptor.TypeEnum.Text;
+        this._numberUseGrouping = true;
         // radio specific properties
         this._radioOptions = [];
         this._datePickerShowTime = false;
@@ -1015,6 +1013,9 @@ class FieldInputDescriptor extends AFieldDescriptor {
     get numberMaxFractionDigits() {
         return this._numberMaxFractionDigits;
     }
+    get numberUseGrouping() {
+        return this._numberUseGrouping;
+    }
     get radioOptions() {
         return this._radioOptions;
     }
@@ -1066,13 +1067,14 @@ class FieldInputDescriptor extends AFieldDescriptor {
         this._pattern = pattern;
         return this;
     }
-    asNumber(step, min, max, minFractionDigits, maxFractionDigits) {
+    asNumber(step, min, max, minFractionDigits, maxFractionDigits, numberUseGrouping = true) {
         this._fieldType = FieldInputDescriptor.TypeEnum.Number;
         this._numberStep = step;
         this._numberMinFractionDigits = minFractionDigits;
         this._numberMaxFractionDigits = maxFractionDigits;
         this._numberMin = min ?? Number.MIN_SAFE_INTEGER;
         this._numberMax = max ?? Number.MAX_SAFE_INTEGER;
+        this._numberUseGrouping = numberUseGrouping;
         return this;
     }
     asSwitch() {
@@ -1123,6 +1125,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
         field._numberStep = this._numberStep;
         field._numberMinFractionDigits = this._numberMinFractionDigits;
         field._numberMaxFractionDigits = this._numberMaxFractionDigits;
+        field._numberUseGrouping = this._numberUseGrouping;
         field._radioOptions = [...this._radioOptions];
         field._datePickerFormat = this._datePickerFormat;
         field._datePickerMin = this._datePickerMin;
@@ -1236,7 +1239,6 @@ class FieldLookupEnumDescriptor extends FieldLookupDescriptor {
         this.withLookupDataProvider(dataProvider);
         this.withItemsLabelProperty('title');
         this.withItemsValueProperty('value');
-        this.withDataKeyProperty('value');
     }
     get enumType() {
         return this._enumType;
@@ -2011,7 +2013,6 @@ class FilterLookupEnumDescriptor extends FilterLookupDescriptor {
         this.withLookupDataProvider(dataProvider);
         this.withItemsLabelProperty('title');
         this.withItemsValueProperty('value');
-        this.withDataKeyProperty('value');
     }
     get enumType() {
         return this._enumType;
@@ -3451,7 +3452,7 @@ class MngConfigurationService {
             const pathSegments = url.split('/');
             pathSegments[pathSegments.length - 1] = 'env.json';
             return this.http.get(pathSegments.join('/'));
-        }), first(), map(res => {
+        }), map(res => {
             this.jsonEnvironments.push(res);
             this.mergeConfigs();
             return true;
@@ -4285,11 +4286,11 @@ class MngAutocompleteComponent {
             console.warn(`Data provider should be provided for MngAutocompleteComponent.`);
         }
     }
+    ngOnDestroy() {
+        this.searchSubscription?.unsubscribe();
+    }
     onSearch(event) {
-        if (this.searchSubscription) {
-            // try to cancel existing HTTP request subscription
-            this.searchSubscription.unsubscribe();
-        }
+        this.searchSubscription?.unsubscribe();
         if (this.dataProvider) {
             this.isLoading = true;
             const queryParamBuilder = MediusQueryParamBuilder.create();
@@ -4299,11 +4300,11 @@ class MngAutocompleteComponent {
             if (event.query && event.query.length > 0 && this.itemsLabelProperty) {
                 queryParamBuilder.withFilter(this.itemsLabelProperty, event.query, undefined, MediusFilterMatchType.StartsWith);
             }
-            this.searchSubscription = this.dataProvider
-                .lookup(queryParamBuilder.build(), this.dataProviderService, event.query)
-                .pipe(first(), finalize(() => (this.isLoading = false)))
-                .subscribe((res) => {
+            this.searchSubscription = this.dataProvider.lookup(queryParamBuilder.build(), this.dataProviderService, event.query).subscribe((res) => {
                 this.suggestionsSubject.next(res);
+                this.isLoading = false;
+            }, () => {
+                this.isLoading = false;
             });
         }
     }
@@ -4327,9 +4328,6 @@ class MngAutocompleteComponent {
     }
     writeValue(obj) {
         this.autocompleteFormControl.setValue(obj, { emitEvent: false });
-        if (this.primeAutocomplete) {
-            this.primeAutocomplete.writeValue(obj);
-        }
     }
 }
 MngAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
@@ -4369,6 +4367,7 @@ class MngDropdownComponent {
         this.injector = injector;
         this.multiselect = false;
         this.showClear = true;
+        this.selectFirstItem = false;
         this.className = null;
         this.dropdownClassName = null;
         this.valueChangeEventEmitter = new EventEmitter();
@@ -4389,20 +4388,13 @@ class MngDropdownComponent {
         if (this.dataProvider) {
             this.dataProviderService = this.dataProvider.serviceType ? this.injector.get(this.dataProvider.serviceType) : null;
             const queryParamBuilder = MediusQueryParamBuilder.create();
-            this.dataProvider
-                .lookup(queryParamBuilder.build(), this.dataProviderService)
-                .pipe(first())
-                .subscribe(res => {
+            this.itemsSubscription = this.dataProvider.lookup(queryParamBuilder.build(), this.dataProviderService).subscribe(res => {
                 this.itemsSubject.next(res);
             });
-            if (!this.dropdownFormControl?.value) {
+            if (this.selectFirstItem && !this.dropdownFormControl?.value) {
                 this.items$.pipe(first()).subscribe(res => {
-                    // TODO: check if really only way
-                    if (res.length === 1) {
-                        const value = this.itemsValueProperty ? res[0][this.itemsValueProperty] : res[0];
-                        this.dropdownFormControl?.patchValue(value);
-                        console.log('patched dropdown form value with', value);
-                    }
+                    const value = this.itemsValueProperty ? res[0][this.itemsValueProperty] : res[0];
+                    this.dropdownFormControl?.setValue(value);
                 });
             }
         }
@@ -4410,6 +4402,9 @@ class MngDropdownComponent {
             console.warn(`Data provider should be provided for MngDropdownComponent.`);
         }
     }
+    ngOnDestroy() {
+        this.itemsSubscription?.unsubscribe();
+    }
     registerOnChange(fn) {
         this.onChangeFn = fn;
     }
@@ -4426,14 +4421,13 @@ class MngDropdownComponent {
     }
     writeValue(obj) {
         this.dropdownFormControl.setValue(obj, { emitEvent: false });
-        this.primeDropdown?.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 });
-MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"(items$ | async) ?? []\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$4.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$4.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"(items$ | async) ?? []\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
+            args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dataProvider: [{
                 type: Input
             }], dataKeyProperty: [{
@@ -4448,6 +4442,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], showClear: [{
                 type: Input
+            }], selectFirstItem: [{
+                type: Input
             }], className: [{
                 type: Input
             }], dropdownClassName: [{
@@ -4619,10 +4615,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    <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 });
+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        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\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    <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" }]
+            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        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\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 {
@@ -4632,10 +4628,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    [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 });
+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    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [showClear]=\"!this.to.required\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "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    [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" }]
+            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    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [showClear]=\"!this.to.required\">\n</mng-dropdown>\n" }]
         }] });
 
 class MngTableLoadEvent {
@@ -4719,7 +4715,7 @@ 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                (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 } });
+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", "selectFirstItem", "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                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
@@ -4954,6 +4950,7 @@ class MngTableComponent {
         });
     }
     ngOnDestroy() {
+        this.dataProviderSubscription?.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     reload(emitEvent = false, resetParams = false) {
@@ -4997,19 +4994,14 @@ class MngTableComponent {
         if (!this.useDataProvider) {
             return;
         }
-        if (this.dataProviderSubscription) {
-            this.dataProviderSubscription.unsubscribe();
-        }
+        this.dataProviderSubscription?.unsubscribe();
         this.dataProviderLoadingSubject.next(true);
         if (!queryParam) {
             queryParam = MediusQueryParamBuilder.create(this.rowsPerPageOptions[0]).build();
         }
         this.dataProviderLatestQueryParam = queryParam;
         this.dataProviderLatestQueryParamVersion++;
-        this.dataProviderSubscription = this.dataProvider
-            ?.getAll(queryParam, this.dataProviderService)
-            .pipe(first(), finalize(() => this.dataProviderLoadingSubject.next(false)))
-            .subscribe(res => {
+        this.dataProviderSubscription = this.dataProvider?.getAll(queryParam, this.dataProviderService).subscribe(res => {
             if (this.infiniteScroll) {
                 if (this.isFilterChanged || this.isSortChanged) {
                     this.dataProviderInfiniteScrollItems = [];
@@ -5022,12 +5014,14 @@ class MngTableComponent {
             }
             this.isFilterChanged = false;
             this.isSortChanged = false;
+            this.dataProviderLoadingSubject.next(false);
         }, err => {
             ToastUtil.tableNotificationError(this.translate, this.descriptor, err, this.tableviewService);
             const emptyQueryResult = new MediusQueryResult();
             emptyQueryResult.pageData = [];
             emptyQueryResult.allDataCount = 0;
             this.dataProviderQueryResultSubject.next(emptyQueryResult);
+            this.dataProviderLoadingSubject.next(false);
         });
         if (emitEvent) {
             const mngEvent = new MngTableLoadEvent();
@@ -5260,6 +5254,7 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
         this.subscriptions.push(subscription);
     }
     ngOnDestroy() {
+        this.lookupDataProviderSubscription?.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     openAddDialog() {
@@ -5273,12 +5268,12 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
                 const filterValues = this.formControl.value.map((i) => i[this.descriptor.excludeValueProperty]);
                 queryParamBuilder.withFilter(this.descriptor.excludeFilterProperty, filterValues, undefined, MediusFilterMatchType.NotIn);
             }
-            this.descriptor.lookupTableDataProvider
-                ?.getAll(queryParamBuilder.build(), this.dialogDataProviderService)
-                .pipe(first(), finalize(() => this.dialogIsLoadingSubject.next(false)))
-                .subscribe(res => {
+            this.lookupDataProviderSubscription = this.descriptor.lookupTableDataProvider?.getAll(queryParamBuilder.build(), this.dialogDataProviderService).subscribe(res => {
                 this.addItemsSubject.next(res);
                 this.dialogAreItemsLoaded = true;
+                this.dialogIsLoadingSubject.next(false);
+            }, () => {
+                this.dialogIsLoadingSubject.next(false);
             });
         }
         this.dialogSelectedAddItems = [];
@@ -5819,8 +5814,6 @@ class MngTopbarComponent {
         this.mngCommons.user$.subscribe(u => {
             this.user = u;
         });
-    }
-    ngAfterViewInit() {
         this.mainLayoutService.innerWidth = window.innerWidth;
     }
     switchLanguage(language) {
@@ -5863,8 +5856,6 @@ class MngMainLayoutComponent {
         if (routeData?.footerComponent) {
             this.footerComponent = routeData.footerComponent;
         }
-    }
-    ngAfterViewInit() {
         this.mainLayoutService.innerWidth = window.innerWidth;
     }
     onWindowResize(event) {
@@ -6663,12 +6654,30 @@ class RoutesBuilder {
     constructor(layoutRoute) {
         this.routes = [];
         this.layoutRoute = layoutRoute?.withRoot(this);
+        this.currentRoute = layoutRoute;
     }
     static create() {
         return new RoutesBuilder();
     }
-    static createWithLayout(layoutComponent = MngMainLayoutComponent) {
-        const routesBuilder = new RoutesBuilder(RouteBuilder.create('', layoutComponent));
+    static createWithLayout(layoutComponent = MngMainLayoutComponent, topbarComponent, breadcrumbComponent, menuComponent, footerComponent) {
+        const layoutRoute = RouteBuilder.create('', layoutComponent);
+        if (topbarComponent || breadcrumbComponent || menuComponent || footerComponent) {
+            const dataBuilder = RouteDataBuilder.create();
+            if (topbarComponent) {
+                dataBuilder.withTopbarComponent(topbarComponent);
+            }
+            if (breadcrumbComponent) {
+                dataBuilder.withBreadcrumbComponent(breadcrumbComponent);
+            }
+            if (menuComponent) {
+                dataBuilder.withMenuComponent(menuComponent);
+            }
+            if (footerComponent) {
+                dataBuilder.withFooterComponent(footerComponent);
+            }
+            layoutRoute.withDataBuilder(dataBuilder);
+        }
+        const routesBuilder = new RoutesBuilder(layoutRoute);
         return routesBuilder;
     }
     addAngularRoute(route) {
@@ -6758,15 +6767,9 @@ class RouteBuilder {
     static createFromRoute(route) {
         return new RouteBuilder(route);
     }
-    static createTableviewRoutes(path, descriptor, tableviewDataProvider, actions, hasDetails = true, hasEdit = true, hasAdd = true) {
+    static createTableviewRoutes(path, descriptor, dataProvider, actions, hasDetails = true, hasEdit = true, hasAdd = true) {
         const tableviewRoute = RouteBuilder.createFromRoute({
-            data: {
-                tableviewData: {
-                    descriptor: descriptor,
-                    dataProvider: tableviewDataProvider,
-                    actions: actions
-                }
-            },
+            data: RouteDataBuilder.create().withTableview(descriptor, dataProvider, actions).build(),
             path: path,
             component: MngTableviewRouteComponent
         });
@@ -6847,6 +6850,10 @@ class RouteBuilder {
         this.route.data = data;
         return this;
     }
+    withDataBuilder(dataBuilder) {
+        this.route.data = dataBuilder.build();
+        return this;
+    }
     withMngMenuItem(menuItem) {
         this.menuItem = menuItem;
         return this;
@@ -7016,6 +7023,54 @@ class RouteBuilder {
         return guards;
     }
 }
+class RouteDataBuilder {
+    constructor(init) {
+        this.data = init ?? {};
+        if (!this.data.breadcrumb) {
+            this.data.breadcrumb = null;
+        }
+    }
+    static create(data) {
+        return new RouteDataBuilder(data);
+    }
+    withBreadcrumb(breadcrumb) {
+        this.data.breadcrumb = breadcrumb;
+        return this;
+    }
+    withPageTitle(pageTitle) {
+        this.data.pageTitle = pageTitle;
+        return this;
+    }
+    withTableview(descriptor, dataProvider, actions) {
+        this.data.tableview = {
+            descriptor: descriptor,
+            dataProvider: dataProvider
+        };
+        if (actions) {
+            this.data.tableview.actions = actions;
+        }
+        return this;
+    }
+    withTopbarComponent(component) {
+        this.data.topbarComponent = component;
+        return this;
+    }
+    withBreadcrumbComponent(component) {
+        this.data.breadcrumbComponent = component;
+        return this;
+    }
+    withMenuComponent(component) {
+        this.data.menuComponent = component;
+        return this;
+    }
+    withFooterComponent(component) {
+        this.data.footerComponent = component;
+        return this;
+    }
+    build() {
+        return this.data;
+    }
+}
 
 /*
  * Public API Surface of mng-commons
@@ -7025,5 +7080,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, 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 };
+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, RouteDataBuilder, 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