@mediusinc/mng-commons 5.0.1 → 5.1.0-rc.0

package/fesm2022/mediusinc-mng-commons-tableview.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { AsyncPipe, NgTemplateOutlet, JsonPipe, NgStyle, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, signal, inject, Injector, DestroyRef, input, booleanAttribute, output, viewChild, computed, effect, Component, ChangeDetectionStrategy, Optional, HostListener, EventEmitter, contentChildren, Input, Output, ViewChildren, ViewChild, LOCALE_ID, HostBinding } from '@angular/core';
+import { InjectionToken, Injectable, signal, inject, Injector, DestroyRef, input, booleanAttribute, output, viewChild, computed, effect, Component, ChangeDetectionStrategy, Optional, untracked, HostListener, EventEmitter, contentChildren, Input, Output, ViewChildren, ViewChild, Directive, LOCALE_ID, HostBinding } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable as toObservable$1 } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { NavigationEnd, Router, ActivatedRoute, NavigationStart, NavigationCancel, NavigationError, NavigationSkipped, RouterOutlet } from '@angular/router';
@@ -2057,11 +2057,13 @@ class FormEditorComponent {
         this.submitButtonElementRef = viewChild('submitButton');
         // formly specifics
         this._form = new UntypedFormGroup({});
+        this._formlyStateDisabledSubject = new BehaviorSubject(false);
         this._formlyOptions = {
             formState: {
                 add: false,
                 edit: false,
-                disabled: false
+                disabled: false,
+                disabled$: this._formlyStateDisabledSubject.asObservable().pipe(distinctUntilChanged())
             }
         };
         this._formlyFields = []; // initialized in ngOnInit, should not be changed after
@@ -2079,6 +2081,9 @@ class FormEditorComponent {
         { allowSignalWrites: true });
         effect(() => {
             this._formlyOptions.formState.disabled = this.isFormDisabled() || this._formlyOptions.formState.descriptor?.disabled === true || this._formlyOptions.formState.details;
+            untracked(() => {
+                this._formlyStateDisabledSubject.next(this._formlyOptions.formState.disabled);
+            });
         });
     }
     ngOnInit() {
@@ -3113,14 +3118,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             type: Injectable
         }] });
 
-class FormlyFieldActionComponent extends FieldType {
+class ACommonsFormlyFieldType extends FieldType {
+    get descriptor() {
+        return this.props.descriptor;
+    }
+    get options() {
+        return this.field.options;
+    }
+    get formState() {
+        return this.options?.formState || {};
+    }
+    ngOnInit() {
+        this.props.fieldComponent = this;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ACommonsFormlyFieldType, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ACommonsFormlyFieldType, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ACommonsFormlyFieldType, decorators: [{
+            type: Directive
+        }] });
+
+class FormlyFieldActionComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.buttonClass = 'p-button-primary';
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         this.buttonClass = this.descriptor.button.styleClass.build();
     }
     ngOnDestroy() {
@@ -3163,21 +3187,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{ standalone: true, selector: 'mng-formly-field-action', imports: [ButtonModule, RippleModule, TranslateModule, TooltipModule, JsonPipe, MessageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n    <button\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"$any(descriptor.button.icon)\"\n        [label]=\"$any(descriptor.button.label === null ? null : descriptor.button.label ?? props!.label) | translate\"\n        [pTooltip]=\"$any(descriptor.button.tooltip) | translate\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"onClick()\"\n        [class]=\"buttonClass + (actionMessage ? ' mr-2' : '')\"></button>\n    @if (actionMessage) {\n        <p-message [text]=\"actionMessage.content\" [severity]=\"actionMessage.severity ?? 'success'\"></p-message>\n    }\n</div>\n" }]
         }] });
 
-class FormlyFieldAutocompleteComponent extends FieldType {
+class FormlyFieldAutocompleteComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.destroyRef = inject(DestroyRef);
-        this.subscriptions = [];
     }
     ngOnInit() {
-        this.aFormControl = this.formControl;
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         // emit lifecycle event
         this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        this.aFormControl.valueChanges.pipe(startWith(this.aFormControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
+        this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
             this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
@@ -3196,20 +3217,20 @@ class FormlyFieldAutocompleteComponent extends FieldType {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldAutocompleteComponent, isStandalone: true, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [className]=\"descriptor.inputClassName\"\n    [showClear]=\"!props.required\"\n    [selectFirst]=\"descriptor.autocompleteSelectFirst ?? false\"\n    [autoClear]=\"descriptor.autocompleteAutoClear ?? false\"\n    [openOnFocus]=\"descriptor.autocompleteAutoClear ?? true\"\n    [inlineSearch]=\"descriptor.autocompleteInlineSearch ?? false\">\n</mng-autocomplete>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldAutocompleteComponent, isStandalone: true, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"$any(formControl)\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [className]=\"descriptor.inputClassName\"\n    [showClear]=\"!props.required\"\n    [selectFirst]=\"descriptor.autocompleteSelectFirst ?? false\"\n    [autoClear]=\"descriptor.autocompleteAutoClear ?? false\"\n    [openOnFocus]=\"descriptor.autocompleteAutoClear ?? true\"\n    [inlineSearch]=\"descriptor.autocompleteInlineSearch ?? false\">\n</mng-autocomplete>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-formly-field-autocomplete', imports: [AutocompleteComponent, ReactiveFormsModule, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [className]=\"descriptor.inputClassName\"\n    [showClear]=\"!props.required\"\n    [selectFirst]=\"descriptor.autocompleteSelectFirst ?? false\"\n    [autoClear]=\"descriptor.autocompleteAutoClear ?? false\"\n    [openOnFocus]=\"descriptor.autocompleteAutoClear ?? true\"\n    [inlineSearch]=\"descriptor.autocompleteInlineSearch ?? false\">\n</mng-autocomplete>\n" }]
+            args: [{ standalone: true, selector: 'mng-formly-field-autocomplete', imports: [AutocompleteComponent, ReactiveFormsModule, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"$any(formControl)\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [className]=\"descriptor.inputClassName\"\n    [showClear]=\"!props.required\"\n    [selectFirst]=\"descriptor.autocompleteSelectFirst ?? false\"\n    [autoClear]=\"descriptor.autocompleteAutoClear ?? false\"\n    [openOnFocus]=\"descriptor.autocompleteAutoClear ?? true\"\n    [inlineSearch]=\"descriptor.autocompleteInlineSearch ?? false\">\n</mng-autocomplete>\n" }]
         }] });
 
-class FormlyFieldCustomComponent extends FieldType {
+class FormlyFieldCustomComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.inputs = {};
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
+        super.ngOnInit();
         this.inputs = {
             field: this.field,
             model: this.model,
@@ -3238,20 +3259,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
-class FormlyFieldDropdownComponent extends FieldType {
+class FormlyFieldDropdownComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.destroyRef = inject(DestroyRef);
     }
     ngOnInit() {
-        this.dFormControl = this.formControl;
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         // emit lifecycle event
         this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        this.dFormControl.valueChanges.pipe(startWith(this.dFormControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
+        this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
             this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
@@ -3265,22 +3284,21 @@ class FormlyFieldDropdownComponent extends FieldType {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldDropdownComponent, isStandalone: true, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsLabelTranslate]=\"descriptor.optionsLabelTranslate\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [optionsDisabledProperty]=\"descriptor.optionsDisabledProperty\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [showClear]=\"!props.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n", dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldDropdownComponent, isStandalone: true, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"$any(formControl)\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsLabelTranslate]=\"descriptor.optionsLabelTranslate\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [optionsDisabledProperty]=\"descriptor.optionsDisabledProperty\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [showClear]=\"!props.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n", dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-formly-field-dropdown', imports: [DropdownComponent, ReactiveFormsModule, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsLabelTranslate]=\"descriptor.optionsLabelTranslate\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [optionsDisabledProperty]=\"descriptor.optionsDisabledProperty\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [showClear]=\"!props.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n" }]
+            args: [{ standalone: true, selector: 'mng-formly-field-dropdown', imports: [DropdownComponent, ReactiveFormsModule, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"$any(formControl)\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [optionsLabelProperty]=\"descriptor.optionsLabelProperty\"\n    [optionsLabelTranslate]=\"descriptor.optionsLabelTranslate\"\n    [optionsValueProperty]=\"descriptor.optionsValueProperty\"\n    [optionsDisabledProperty]=\"descriptor.optionsDisabledProperty\"\n    [optionsTrackProperty]=\"descriptor.optionsTrackProperty\"\n    [showClear]=\"!props.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n" }]
         }] });
 
-class FormlyFieldFieldsetComponent extends FieldType {
+class FormlyFieldFieldsetComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.typeFieldset = FieldGroupTypeEnum.Fieldset;
         this.typeLogical = FieldGroupTypeEnum.Logical;
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldFieldsetComponent, isStandalone: true, selector: "mng-formly-field-fieldset", usesInheritance: true, ngImport: i0, template: "@for (group of field.fieldGroup; track group) {\n    @switch (group?.props?.['descriptor']?.type) {\n        @case (typeFieldset) {\n            <p-fieldset [legend]=\"group.props?.label! | translate\">\n                <formly-field [field]=\"group\"></formly-field>\n            </p-fieldset>\n        }\n        @default {\n            <formly-field [field]=\"group\"></formly-field>\n        }\n    }\n}\n", dependencies: [{ kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$4.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3290,7 +3308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{ standalone: true, selector: 'mng-formly-field-fieldset', imports: [FieldsetModule, FormlyModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of field.fieldGroup; track group) {\n    @switch (group?.props?.['descriptor']?.type) {\n        @case (typeFieldset) {\n            <p-fieldset [legend]=\"group.props?.label! | translate\">\n                <formly-field [field]=\"group\"></formly-field>\n            </p-fieldset>\n        }\n        @default {\n            <formly-field [field]=\"group\"></formly-field>\n        }\n    }\n}\n" }]
         }] });
 
-class FormlyFieldInputComponent extends FieldType {
+class FormlyFieldInputComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.NUMBER_MIN_SAFE = Number.MIN_SAFE_INTEGER;
@@ -3305,8 +3323,8 @@ class FormlyFieldInputComponent extends FieldType {
         this.imageFormArray = this.formBuilder.array([]);
     }
     ngOnInit() {
+        super.ngOnInit();
         this.iFormControl = this.formControl;
-        this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
         this.formEditorComponent = this.props.formEditorComponent;
         if (this.descriptor.fieldType === FieldInputTypeEnum.Currency) {
@@ -3458,14 +3476,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (props.type) {\n    @case ('number') {\n        <p-inputNumber\n            [id]=\"$any(key)\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [min]=\"descriptor.numberAutoCorrect ? descriptor.numberMin ?? NUMBER_MIN_SAFE : undefined\"\n            [max]=\"descriptor.numberAutoCorrect ? descriptor.numberMax ?? NUMBER_MAX_SAFE : undefined\"\n            [step]=\"$any(descriptor.numberStep)\"\n            [useGrouping]=\"descriptor.numberUseGrouping\"\n            [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n            [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n            [inputStyleClass]=\"descriptor.inputClassName\"\n            [locale]=\"descriptor.locale ?? applicationLocale\"\n            [mode]=\"numberFieldMode\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"descriptor.currencyDisplay\">\n        </p-inputNumber>\n    }\n\n    @case ('switch') {\n        <div class=\"field flex flex-column\">\n            <label [for]=\"key\" [class]=\"descriptor.labelClassName\"\n                >{{ props.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n            @if (showError) {\n                <small class=\"p-error\">\n                    <formly-validation-message [field]=\"field\"></formly-validation-message>\n                </small>\n            }\n        </div>\n    }\n    @case ('radio') {\n        @for (option of descriptor.radioOptions; track option) {\n            <div [id]=\"key\" class=\"field-radiobutton\">\n                <p-radioButton\n                    [name]=\"$any(key)\"\n                    [value]=\"option.value\"\n                    [formControl]=\"iFormControl\"\n                    [formlyAttributes]=\"field\"\n                    [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n            </div>\n        }\n    }\n    @case ('textarea') {\n        <textarea [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea [class]=\"descriptor.inputClassName\">\n        </textarea>\n    }\n    @case ('mask') {\n        <p-inputMask\n            [id]=\"$any(key)\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [mask]=\"descriptor.mask\"\n            [placeholder]=\"descriptor.placeholder\"\n            [slotChar]=\"$any(descriptor.slotChar)\"\n            [styleClass]=\"descriptor.inputClassName\">\n        </p-inputMask>\n    }\n    @case ('file') {\n        <p-fileUpload\n            #fileUploadInput\n            [id]=\"$any(key)\"\n            [disabled]=\"iFormControl.disabled\"\n            [multiple]=\"descriptor.fileMultiple ?? false\"\n            [accept]=\"descriptor.fileAccept ?? (descriptor.fieldType === DESC_INPUT_TYPE_IMAGE_FILE ? 'image/*' : undefined)\"\n            [maxFileSize]=\"descriptor.fileMaxFileSize ?? 500000\"\n            [showUploadButton]=\"false\"\n            (onSelect)=\"onFileSelect($event)\"\n            (onRemove)=\"onFileRemove($event)\"\n            (onClear)=\"onFileClear($event)\">\n            <ng-template let-file let-idx=\"index\" pTemplate=\"file\">\n                <div class=\"p-fileupload-row\">\n                    <div>\n                        @if (fileUploadInput.isImage(file)) {\n                            @if (isFileImageSvg(file)) {\n                                <span class=\"flex align-items-center justify-content-center\">\n                                    <i class=\"pi pi-image text-2xl\"></i>\n                                </span>\n                            } @else {\n                                <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                            }\n                        } @else {\n                            <span class=\"flex align-items-center justify-content-center\">\n                                <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                            </span>\n                        }\n                    </div>\n                    <div class=\"p-fileupload-filename\">{{ file.name }}</div>\n                    <div>{{ fileUploadInput.formatSize(file.size) }}</div>\n                    <div>\n                        <button\n                            type=\"button\"\n                            pButton\n                            (click)=\"fileUploadInput.remove($event, idx)\"\n                            [disabled]=\"fileUploadInput.uploading\"\n                            class=\"p-button-icon-only\"\n                            [class]=\"fileUploadInput.removeStyleClass\">\n                            @if (!fileUploadInput.cancelIconTemplate) {\n                                <TimesIcon />\n                            }\n                        </button>\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\" let-files>\n                @if (files.length === 0) {\n                    <div class=\"text-gray-300 dropdown-area\">\n                        <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n                    </div>\n                }\n            </ng-template>\n        </p-fileUpload>\n    }\n    @case ('imageUrl') {\n        <div>\n            @if (descriptor.imagePreview) {\n                <div class=\"flex flex-wrap justify-content-start\">\n                    @for (image of imageFormArray.controls; track image; let idx = $index) {\n                        @if (imageFormArray.at(idx).valid && imageFormArray.at(idx).value) {\n                            <p-image [src]=\"imageFormArray.at(idx).value\" [preview]=\"true\" (onImageError)=\"onImageUrlLoadError()\" styleClass=\"mng-image m-2\"></p-image>\n                        } @else {\n                            <span class=\"mng-image m-2 p-image-preview-container no-image\">\n                                <div class=\"p-image-preview-indicator\">\n                                    <i class=\"p-image-preview-icon pi pi-ban\"></i>\n                                </div>\n                            </span>\n                        }\n                    }\n                </div>\n            }\n            @if (!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled) {\n                @for (imageCtrlName of imageFormArray.controls; track imageCtrlName; let idx = $index) {\n                    <div class=\"p-inputgroup mt-1\">\n                        <input\n                            pInputText\n                            [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                            [id]=\"$any(key)\"\n                            type=\"text\"\n                            [formControl]=\"$any(imageFormArray.at(idx))\"\n                            [formlyAttributes]=\"field\" />\n                        @if (descriptor.fileMultiple && !iFormControl.disabled) {\n                            <button type=\"button\" pButton pRipple icon=\"pi pi-minus\" (click)=\"removeImageUrlAt(idx)\"></button>\n                        }\n                    </div>\n                }\n                @if (descriptor.fileMultiple && !iFormControl.disabled) {\n                    <button\n                        type=\"button\"\n                        pButton\n                        pRipple\n                        icon=\"pi pi-plus\"\n                        class=\"p-button-primary w-auto mt-1\"\n                        [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                        (click)=\"addImageUrl()\"></button>\n                }\n            }\n        </div>\n    }\n    @default {\n        <input pInputText [id]=\"$any(key)\" [type]=\"props.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [mngInputTrim]=\"descriptor.trimOption\" />\n    }\n}\n" }]
         }] });
 
-class FormlyFieldLabelComponent extends FieldType {
+class FormlyFieldLabelComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.className = 'hidden';
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         this.formControl?.patchValue(this.descriptor.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -3479,7 +3496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 args: ['class']
             }] } });
 
-class FormlyFieldLookupDialogComponent extends FieldType {
+class FormlyFieldLookupDialogComponent extends ACommonsFormlyFieldType {
     constructor(injector) {
         super();
         this.injector = injector;
@@ -3498,8 +3515,7 @@ class FormlyFieldLookupDialogComponent extends FieldType {
         this.dialogIsLoading$ = this.dialogIsLoadingSubject.asObservable();
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         // emit lifecycle event
         this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
@@ -3663,7 +3679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 args: [TableComponent]
             }] } });
 
-class FormlyFieldTableDialogFormComponent extends FieldType {
+class FormlyFieldTableDialogFormComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.injector = inject(Injector);
@@ -3676,8 +3692,7 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
         this.isEnabled$ = this.isDisabledSubject.asObservable().pipe(distinctUntilChanged(), map(e => !e));
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         const hasViewAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorActionEnum.View);
         const hasAddAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorActionEnum.Add);
         const hasEditAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorActionEnum.Edit);
@@ -3723,7 +3738,7 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withRunNotificationSuccess(undefined, undefined, false)
                 .withRunNotificationError(undefined, undefined, false)
-                .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
+                .withIsVisibleFunction(() => this.formState.disabled$.pipe(map(v => !v)))
                 .withIsEnabledFunction(() => this.isEnabled$);
             addAction.button.withLabel(null).withIcon('pi pi-plus');
             this.actions.push(addAction);
@@ -3754,7 +3769,7 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withRunNotificationSuccess(undefined, undefined, false)
                 .withRunNotificationError(undefined, undefined, false)
-                .withIsVisibleFunction(ctx => (this.hideActionsForRowWithDefaultLocalization(ctx) ? of(false) : of(!this.formControl?.disabled)))
+                .withIsVisibleFunction(ctx => (this.hideActionsForRowWithDefaultLocalization(ctx) ? of(false) : this.formState.disabled$.pipe(map(v => !v))))
                 .withIsEnabledFunction(() => this.isEnabled$);
             editAction.button.withLabel(null).withIcon('pi pi-pencil');
             this.actions.push(editAction);
@@ -3796,7 +3811,7 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withRunNotificationSuccess(undefined, undefined, false)
                 .withRunNotificationError(undefined, undefined, false)
-                .withIsVisibleFunction(ctx => (this.hideActionsForRowWithDefaultLocalization(ctx) ? of(false) : of(!this.options?.formState.disabled)))
+                .withIsVisibleFunction(ctx => (this.hideActionsForRowWithDefaultLocalization(ctx) ? of(false) : this.formState.disabled$.pipe(map(v => !v))))
                 .withIsEnabledFunction(() => this.isEnabled$);
             deleteAction.button.withLabel(null).withIcon('pi pi-trash');
             this.actions.push(deleteAction);
@@ -3862,7 +3877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{ standalone: true, selector: 'mng-formly-table-dialog-form-field', imports: [TranslateModule, ActionComponent, ActionTableComponent, TemplateDirective], providers: [provideViewContainer(false)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-action-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" [actions]=\"actions\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            @for (action of toolbarRightActions; track action) {\n                <mng-action [action]=\"action\"></mng-action>\n            }\n        </div>\n    </ng-template>\n</mng-action-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
         }] });
 
-class FormlyFieldTableDialogMultiselectComponent extends FieldType {
+class FormlyFieldTableDialogMultiselectComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.injector = inject(Injector);
@@ -3883,8 +3898,7 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
         this.searchDebounceSubject = new Subject();
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         this.dialogIsLoadingSubject.next(false);
         if (this.descriptor.lookupTableDataProvider.serviceType) {
             this.dialogDataProviderService = this.injector.get(this.descriptor.lookupTableDataProvider.serviceType);
@@ -4035,7 +4049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 args: ['addTableComponent']
             }] } });
 
-class FormlyFieldTabsComponent extends FieldType {
+class FormlyFieldTabsComponent extends ACommonsFormlyFieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldTabsComponent, isStandalone: true, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView [scrollable]=\"true\">\n    @for (tab of field.fieldGroup; track tab) {\n        <p-tabPanel [header]=\"tab.props?.label! | translate\" [headerStyleClass]=\"formControl!.valid ? 'p-tabview-title' : undefined\">\n            <ng-template pTemplate=\"header\">\n                <span class=\"p-tabview-title\" [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.props?.label!) + '_invalid']\">{{\n                    tab.props?.label! | translate\n                }}</span>\n            </ng-template>\n            <formly-field [field]=\"tab\"></formly-field>\n        </p-tabPanel>\n    }\n</p-tabView>\n", dependencies: [{ kind: "ngmodule", type: TabViewModule }, { kind: "component", type: i1$6.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i1$6.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyField, selector: "formly-field", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4095,7 +4109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{ standalone: true, selector: 'mng-formly-field-wrapper', imports: [TranslateModule, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"props['descriptor']?.['fieldClassName'] ?? 'field'\">\n    <div class=\"grid mt-0\">\n        @if (props.label) {\n            <label [for]=\"key\" class=\"col\" [class]=\"props['descriptor']?.['labelClassName'] ?? ''\"\n                >{{ props!.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n        }\n    </div>\n    <ng-container #fieldComponent></ng-container>\n    @if (props['descriptor']?.['helpText']) {\n        <small class=\"block\">{{ props['descriptor']?.['helpText'] | translate }}</small>\n    }\n    @if (showError) {\n        <small class=\"p-error block\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    }\n</div>\n" }]
         }] });
 
-class FormlyFieldDatepickerComponent extends FieldType {
+class FormlyFieldDatepickerComponent extends ACommonsFormlyFieldType {
     constructor() {
         super(...arguments);
         this.dpFormControl = new FormControl();
@@ -4107,8 +4121,7 @@ class FormlyFieldDatepickerComponent extends FieldType {
         this.dateTimeWithMillis = this.moduleConfig?.serialization?.dateTimeWithMillis ?? true;
     }
     ngOnInit() {
-        this.descriptor = this.props.descriptor;
-        this.props.fieldComponent = this;
+        super.ngOnInit();
         // emit lifecycle event
         this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT