@mediusinc/mng-commons 0.2.16 → 0.2.17

package/fesm2020/mediusinc-mng-commons.mjs

@@ -987,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;
@@ -1012,6 +1013,9 @@ class FieldInputDescriptor extends AFieldDescriptor {
     get numberMaxFractionDigits() {
         return this._numberMaxFractionDigits;
     }
+    get numberUseGrouping() {
+        return this._numberUseGrouping;
+    }
     get radioOptions() {
         return this._radioOptions;
     }
@@ -1063,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() {
@@ -1120,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;
@@ -3446,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;
@@ -4280,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();
@@ -4294,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;
             });
         }
     }
@@ -4373,8 +4379,6 @@ class MngDropdownComponent {
         this.onTouchedFn = () => { };
         this.dropdownFormControl = new FormControl();
         this.items$ = this.itemsSubject.asObservable();
-        this.items = [];
-        this.itemsLoaded = false;
     }
     ngOnInit() {
         this.dropdownFormControl.valueChanges.subscribe(v => {
@@ -4384,10 +4388,7 @@ 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.selectFirstItem && !this.dropdownFormControl?.value) {
@@ -4401,6 +4402,9 @@ class MngDropdownComponent {
             console.warn(`Data provider should be provided for MngDropdownComponent.`);
         }
     }
+    ngOnDestroy() {
+        this.itemsSubscription?.unsubscribe();
+    }
     registerOnChange(fn) {
         this.onChangeFn = fn;
     }
@@ -4611,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 {
@@ -4946,6 +4950,7 @@ class MngTableComponent {
         });
     }
     ngOnDestroy() {
+        this.dataProviderSubscription?.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     reload(emitEvent = false, resetParams = false) {
@@ -4989,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 = [];
@@ -5014,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();
@@ -5252,6 +5254,7 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
         this.subscriptions.push(subscription);
     }
     ngOnDestroy() {
+        this.lookupDataProviderSubscription?.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     openAddDialog() {
@@ -5265,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 = [];
@@ -5811,8 +5814,6 @@ class MngTopbarComponent {
         this.mngCommons.user$.subscribe(u => {
             this.user = u;
         });
-    }
-    ngAfterViewInit() {
         this.mainLayoutService.innerWidth = window.innerWidth;
     }
     switchLanguage(language) {
@@ -6653,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) {
@@ -6748,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
         });
@@ -6837,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;
@@ -7006,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
@@ -7015,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