@mediusinc/mng-commons 5.0.0-rc.1 → 5.0.0-rc.3

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

@@ -1,74 +1,74 @@
 import * as i2 from '@angular/common';
 import { AsyncPipe, NgTemplateOutlet, JsonPipe, NgStyle, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, Injector, EventEmitter, Component, ChangeDetectionStrategy, Optional, HostBinding, Input, Output, ViewChild, ContentChildren, DestroyRef, signal, effect, HostListener, contentChildren, computed, ViewChildren, LOCALE_ID, Inject } 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 { 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';
-import * as i2$1 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i10 from 'primeng/menu';
-import { MenuModule } from 'primeng/menu';
+import { Menu, MenuModule } from 'primeng/menu';
 import * as i7 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i9 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import * as i8 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { ReplaySubject, BehaviorSubject, distinctUntilChanged, Subject, take, of, switchMap, mergeMap as mergeMap$1, from, timeout, combineLatest, Observable, debounceTime, isObservable, throwError } from 'rxjs';
-import * as i1$1 from '@mediusinc/mng-commons/core';
-import { getI18n, getI18nAsync, toastMessage, getI18nForError, LoggerService, CommonsService, ParametrizePipe, escapeHtmlAny, toObservable, CommonsInternalError, StyleSizeEnum, CommonsHttpError, Permissions, boolean$Attribute, ComponentDirective, objectDeepCopy, TemplateDirective, DialogKeydownHandlerDirective, Styles, findTemplateByName, fromSubscribeError, getErrorLogLevel, StyleLevelEnum, getObjectPropertyByPath, FilterMatchMode, RouteBuilder, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
-import { ActionActivationTriggerEnum, ActionTypeEnum, DataProviderExecutor, ActionDeleteDescriptorInst, ActionEditorEditDescriptorInst, ActionEditorAddDescriptorInst, ActionEditorDescriptorInst, CommonsActionError, ActionLinkDescriptorInst, TableviewEditorTypeEnum, TableviewDescriptor, FieldInputDescriptor, FieldInputTypeEnum, FieldActionDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldLookupDescriptor, FieldManyToManyEditorDescriptor, FieldManyEditorDescriptor, FormEventTypeEnum, FormFieldEventComponentSubtype, ActionEditorSubmitTypeEnum, ActionEditorSubmitDescriptorInst, ActionPositionEnum, runFnFromDataProviderOrFallback, runGetAllFromDataProvider, runFetchFromDataProvider, runCreateFromDataProvider, runUpdateFromDataProvider, runDeleteFromDataProvider, FormFieldEventTypeEnum, FieldGroupTypeEnum, FormFieldEventDialogSubtype, FieldManyEditorActionEnum, ActionEditorDescriptor, ActionEditorSubmitDescriptor, ActionDescriptor, FieldManyToManyEditorActionEnum, TableviewActionDefaultCategories, ActionEditorDetailsDescriptorInst, DATA_LANGUAGE_DROPDOWN_COMPONENT_IT } from '@mediusinc/mng-commons/tableview/api';
+import { ReplaySubject, BehaviorSubject, distinctUntilChanged, Subject, take, of, switchMap, mergeMap as mergeMap$1, from, timeout, combineLatest, debounceTime, combineLatestWith, isObservable, throwError, filter as filter$1 } from 'rxjs';
+import * as i3 from '@mediusinc/mng-commons/core';
+import { getI18n, getI18nAsync, toastMessage, getI18nForError, LoggerService, CommonsService, ParametrizePipe, escapeHtmlAny, toObservable, CommonsInternalError, StyleSizeEnum, CommonsHttpError, Permissions, ComponentDirective, objectDeepCopy, DialogKeydownHandlerDirective, Styles, TemplateDirective, findTemplateByName, boolean$Attribute, fromSubscribeError, getErrorLogLevel, StyleLevelEnum, getObjectPropertyByPath, FilterMatchMode, COMMONS_MODULE_CONFIG_IT, dateToIsoString, RouteBuilder, createLazyRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { ActionActivationTriggerEnum, ActionTypeEnum, DataProviderExecutor, ActionDeleteDescriptorInst, ActionEditorEditDescriptorInst, ActionEditorAddDescriptorInst, ActionEditorDescriptorInst, CommonsActionError, ActionLinkDescriptorInst, TableviewEditorTypeEnum, TableviewDescriptorInst, FieldInputDescriptor, FieldInputTypeEnum, FieldActionDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldLookupDescriptor, FieldManyToManyEditorDescriptor, FieldManyEditorDescriptor, FormEventTypeEnum, FormFieldEventComponentSubtype, ActionEditorSubmitTypeEnum, ActionEditorSubmitDescriptorInst, ActionPositionEnum, runFnFromDataProviderOrFallback, runGetAllFromDataProvider, runFetchFromDataProvider, runCreateFromDataProvider, runUpdateFromDataProvider, runDeleteFromDataProvider, FormFieldEventTypeEnum, FieldGroupTypeEnum, FormFieldEventDialogSubtype, FieldManyEditorActionEnum, ActionEditorDescriptor, actionEditorCancel, ActionDescriptorInst, FieldManyToManyEditorActionEnum, TableviewActionDefaultCategories, DATA_LANGUAGE_DROPDOWN_COMPONENT_IT } from '@mediusinc/mng-commons/tableview/api';
 import { mergeMap, map, filter, startWith, catchError, first, take as take$1 } from 'rxjs/operators';
 import { getI18nModelParams, getI18nModelParamsAsync, type } from '@mediusinc/mng-commons/model';
 import { HttpErrorResponse } from '@angular/common/http';
-import * as i2$4 from 'primeng/api';
+import * as i2$3 from 'primeng/api';
 import { MessageService, ConfirmationService, SharedModule } from 'primeng/api';
 import { DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i2$3 from 'primeng/toolbar';
+import * as i2$2 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import { ZIndexUtils } from 'primeng/utils';
 import * as i1$2 from '@angular/forms';
-import { FormGroup, FormArray, ReactiveFormsModule, FormsModule, Validators, FormControl } from '@angular/forms';
-import * as i2$2 from '@ngx-formly/core';
-import { FormlyModule, FieldType, FieldWrapper, FORMLY_CONFIG } from '@ngx-formly/core';
-import * as i3 from 'primeng/messages';
+import { UntypedFormGroup, FormGroup, FormArray, ReactiveFormsModule, FormsModule, FormBuilder, Validators, FormControl } from '@angular/forms';
+import * as i2$1 from '@ngx-formly/core';
+import { FormlyConfig, FormlyModule, FieldType, FieldWrapper, FORMLY_CONFIG } from '@ngx-formly/core';
+import * as i3$1 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
 import { DropdownComponent, AutocompleteComponent, InputTrimDirective } from '@mediusinc/mng-commons/form';
-import { LookupDataProvider, ActionButtonDescriptor, ButtonStyleBuilder } from '@mediusinc/mng-commons/form/api';
+import { lookupDataProvider, ActionButtonDescriptor, ButtonStyleBuilder } from '@mediusinc/mng-commons/form/api';
 import { TableComponent } from '@mediusinc/mng-commons/table';
 import { TableSizeEnum } from '@mediusinc/mng-commons/table/api';
 import * as i5 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 import * as i1$4 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
-import * as i8$1 from 'primeng/calendar';
-import { CalendarModule } from 'primeng/calendar';
-import * as i11 from 'primeng/fileupload';
+import * as i9$1 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import { TimesIcon } from 'primeng/icons/times';
-import * as i12 from 'primeng/image';
+import * as i11 from 'primeng/image';
 import { ImageModule } from 'primeng/image';
-import * as i10$1 from 'primeng/inputmask';
+import * as i8$1 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
-import * as i3$1 from 'primeng/inputnumber';
+import * as i1$5 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i6 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i14 from 'primeng/inputtext';
+import * as i13 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i13 from 'primeng/inputtextarea';
+import * as i12 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i7$1 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i7$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i1$5 from 'primeng/tabview';
+import * as i1$6 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
+import * as i3$2 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
 
 function getI18nForAction(translate, action, actionPathKeys, customKey, item, fallbackKey, params, missingTranslationStrategy = 'returnFirstKey') {
     const keys = getKeysByPriority(action, actionPathKeys, customKey, fallbackKey);
@@ -442,7 +442,7 @@ class NavigationService {
         this.router = router;
         this.location = location;
         this.history = [];
-        this.router.events.subscribe(event => {
+        this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {
             if (event instanceof NavigationEnd) {
                 this.history.push(event.urlAfterRedirects);
             }
@@ -476,10 +476,10 @@ class NavigationService {
             this.router.navigateByUrl('/');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NavigationService, deps: [{ token: i1.Router }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NavigationService, deps: [{ token: i1.Router }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.Router }, { type: i2.Location }] });
 
@@ -490,23 +490,13 @@ const ACTION_EDITOR_COMPONENT_IT = new InjectionToken('ACTION_EDITOR_COMPONENT')
  */
 class ViewContainer {
     constructor() {
-        this._actions = [];
+        this.dataProvider = signal(undefined);
+        this.routeTriggeredActionInstance = signal(undefined);
+        this.actions = signal([]);
         this._tableReloadSubject = new Subject();
         this._editorResetSubject = new Subject();
         this._editorCloseSubject = new Subject();
     }
-    set dataProvider(dataProvider) {
-        this._dataProvider = dataProvider;
-    }
-    get dataProvider() {
-        return this._dataProvider;
-    }
-    get actions() {
-        return this._actions;
-    }
-    set actions(actions) {
-        this._actions = actions;
-    }
     get tableReload$() {
         return this._tableReloadSubject.asObservable();
     }
@@ -525,16 +515,10 @@ class ViewContainer {
     closeEditor(event) {
         this._editorCloseSubject.next(event ?? {});
     }
-    get routeTriggeredActionInstance() {
-        return this._routeTriggeredActionInstance;
-    }
-    set routeTriggeredActionInstance(instance) {
-        this._routeTriggeredActionInstance = instance;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ViewContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ViewContainer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ViewContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ViewContainer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ViewContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ViewContainer, decorators: [{
             type: Injectable
         }] });
 
@@ -564,7 +548,7 @@ class ActionExecutorService {
      * @param dataProvider Data provider.
      */
     prepareActionContextValidation(action, parameters, dataProvider) {
-        const ctxDataProvider = dataProvider ?? action.dataProvider ?? this.viewContainer?.dataProvider;
+        const ctxDataProvider = dataProvider ?? action.dataProvider ?? this.viewContainer?.dataProvider();
         return {
             descriptor: action,
             parameters: parameters,
@@ -883,7 +867,7 @@ class ActionExecutorService {
             ctxDataProvider = editorAction.dataProvider;
         }
         if (!ctxDataProvider) {
-            const viewContainerDataProvider = this.viewContainer?.dataProvider;
+            const viewContainerDataProvider = this.viewContainer?.dataProvider();
             if (viewContainerDataProvider) {
                 ctxDataProvider = viewContainerDataProvider;
             }
@@ -906,7 +890,7 @@ class ActionExecutorService {
      */
     prepareContext(action, parameters, dataProvider, instance, previousActionInstance) {
         instance = this.getOrCreateInstance(instance, action, parameters, ActionInstanceStateEnum.ActivationEnd);
-        const ctxDataProvider = dataProvider ?? instance.action.dataProvider ?? this.viewContainer?.dataProvider;
+        const ctxDataProvider = dataProvider ?? instance.action.dataProvider ?? this.viewContainer?.dataProvider();
         let service = undefined;
         if (ctxDataProvider != null) {
             const dataProviderService = this.dataProviderExecutor.getDataProviderService(this.injector, ctxDataProvider);
@@ -1007,7 +991,7 @@ class ActionExecutorService {
             throw new Error(`Action ${action.actionName} is not of type editor, cannot be activated through "onActionEditorOnInit"`);
         }
         if (instance && action.activationTrigger === ActionActivationTriggerEnum.OnRoute) {
-            const triggeredInstance = this.viewContainer?.routeTriggeredActionInstance;
+            const triggeredInstance = this.viewContainer?.routeTriggeredActionInstance();
             if (triggeredInstance && triggeredInstance.instanceLongName !== instance.instanceLongName) {
                 this.logger.debug(`WARNING: Found triggered parameters view container instance ${triggeredInstance.instanceLongName} and it does not match instance ${instance.instanceLongName} retrieved on editor init.`);
             }
@@ -1101,7 +1085,7 @@ class ActionExecutorService {
         }
         // unset instance in view container
         if (this.viewContainer) {
-            this.viewContainer.routeTriggeredActionInstance = undefined;
+            this.viewContainer.routeTriggeredActionInstance.set(undefined);
         }
         // set final state on instance
         instance.state = finalState;
@@ -1113,13 +1097,13 @@ class ActionExecutorService {
             // must skip initialization from view container, because it would only get old instance.
             // we need new instance before we can set new one on the view container.
             const newInstance = this.getOrCreateInstance(undefined, instance.action, undefined, newInstanceStatus, true);
-            newInstance.previousInstance = instance;
+            newInstance.reactivationPreviousInstance = instance;
             // copy some additional settings
             newInstance.activationDialogRef = instance.activationDialogRef;
             newInstance.triggerParameters = instance.triggerParameters;
             newInstance.activationParameters = instance.activationParameters;
             if (this.viewContainer) {
-                this.viewContainer.routeTriggeredActionInstance = newInstance;
+                this.viewContainer.routeTriggeredActionInstance.set(newInstance);
             }
             instance.reactivationInstance = newInstance;
         }
@@ -1156,7 +1140,7 @@ class ActionExecutorService {
             const actionUrlSegments = this.parametrize.transform(actionUrl, parameters.itemId, parameters.item, parameters.actionData).split('/');
             // set instance in view container
             if (this.viewContainer) {
-                this.viewContainer.routeTriggeredActionInstance = instance;
+                this.viewContainer.routeTriggeredActionInstance.set(instance);
             }
             from(this.router.navigate([baseUrl, ...actionUrlSegments], { relativeTo: parameters.route, queryParams: parsedUrl.queryParams }))
                 .pipe(take(1))
@@ -1262,7 +1246,7 @@ class ActionExecutorService {
      */
     getOrCreateInstance(instance, action, parameters, instanceInitialStatus, skipInitializationFromViewContainer = false) {
         if (!skipInitializationFromViewContainer && !instance && action?.activationTrigger === ActionActivationTriggerEnum.OnRoute && parameters) {
-            instance = this.viewContainer?.routeTriggeredActionInstance;
+            instance = this.viewContainer?.routeTriggeredActionInstance();
         }
         if (!instance) {
             if (!action) {
@@ -1293,10 +1277,10 @@ class RootActionExecutorService extends ActionExecutorService {
     get instances() {
         return this._instances;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: RootActionExecutorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: RootActionExecutorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RootActionExecutorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RootActionExecutorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: RootActionExecutorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RootActionExecutorService, decorators: [{
             type: Injectable
         }] });
 
@@ -1308,10 +1292,10 @@ class ComponentActionExecutorService extends ActionExecutorService {
     get instances() {
         return this.rootActionExecutorService.instances;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ComponentActionExecutorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ComponentActionExecutorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComponentActionExecutorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComponentActionExecutorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ComponentActionExecutorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComponentActionExecutorService, decorators: [{
             type: Injectable
         }] });
 
@@ -1329,68 +1313,51 @@ class ActionComponent {
         this.authorization = authorization;
         this.actionExecutor = actionExecutor;
         this.viewContainer = viewContainer;
-        this.hostClass = 'mng-action-button';
-        this.isHostHidden = false;
-        this.inputDisabled = of(false);
-        this.inputLoading = of(false);
-        this.selectedItems = [];
-        this.finishEventEmitter = new EventEmitter();
-        this.loadingSubject = new ReplaySubject(1);
-        this.$loading = this.loadingSubject.asObservable();
-        this.isVisibleSubject = new ReplaySubject(1);
-        this.$isVisible = this.isVisibleSubject.asObservable().pipe(distinctUntilChanged());
-        this.isPermittedSubject = new ReplaySubject(1);
-        this.$isPermitted = this.isPermittedSubject.asObservable().pipe(distinctUntilChanged());
-        this.isEnabledSubject = new ReplaySubject(1);
-        this.$isEnabled = this.isEnabledSubject.asObservable().pipe(distinctUntilChanged());
-        this.labelSubject = new ReplaySubject(1);
-        this.$label = this.labelSubject.asObservable().pipe(distinctUntilChanged());
-        this.tooltipSubject = new ReplaySubject(1);
-        this.$tooltip = this.tooltipSubject.asObservable().pipe(distinctUntilChanged());
-        this.hasNoTitle = false;
-        this.subscriptions = [];
-        this.buttonClass = 'p-button-primary';
-        this.subactions = [];
-        this.subactionSubscriptions = [];
-        this.actionOrSubactionHasRunConfirmation = false;
-        this.loadingSubject.next(false);
-    }
-    ngOnInit() {
-        this.route = this.routeInit ?? this.routeService;
-        this.hasNoTitle = this.action.button.label === null;
-        this.isEnabledSubject.next(true);
-        this.isVisibleSubject.next(true);
-        this.isPermittedSubject.next(true);
-        this.labelSubject.next(null);
-        this.tooltipSubject.next(null);
-        const routeData = this.route.snapshot.data;
-        if (this.action instanceof ActionLinkDescriptorInst) {
-            this.actionLink = this.action;
-        }
-        if (this.action.tableviewCategory && routeData.tableviewPermissions) {
-            if (routeData.tableviewPermissions[this.action.tableviewCategory]) {
-                this.routePermissions = routeData.tableviewPermissions[this.action.tableviewCategory];
+        this.destroyRef = inject(DestroyRef);
+        // metadata and editor mode input
+        this.action = input.required();
+        this.item = input();
+        this.itemId = input();
+        this.actionData = input();
+        this.dataListParams = input();
+        this.dataProvider = input();
+        this.hostComponent = input();
+        this.routeInit = input(undefined, { alias: 'route' });
+        this.inputDisabled = input(false, { alias: 'disabled', transform: booleanAttribute });
+        this.inputLoading = input(false, { alias: 'loading', transform: booleanAttribute });
+        this.selectedItems = input([]);
+        this.finish = output();
+        this.subactionsMenu = viewChild(Menu);
+        this.hostClass = computed(() => this.action().className ?? 'mng-action-button');
+        this.isHostHidden = computed(() => !this.isVisible() || !this.isPermitted());
+        this.loading = signal(false);
+        this.isVisible = signal(true);
+        this.isPermitted = signal(true);
+        this.isEnabled = signal(true);
+        this.label = signal('');
+        this.tooltip = signal('');
+        this.actionLink = computed(() => {
+            const action = this.action();
+            return action instanceof ActionLinkDescriptorInst ? action : undefined;
+        });
+        this.hasNoTitle = computed(() => this.action().button.label === null);
+        this.route = computed(() => this.routeInit() ?? this.routeService);
+        this.routeData = toSignal(this.route().data);
+        this.routePermissions = computed(() => {
+            const routeData = this.routeData();
+            const action = this.action();
+            if (action.tableviewCategory && routeData && routeData['tableviewPermissions']) {
+                const tableviewPermissions = routeData['tableviewPermissions'];
+                if (tableviewPermissions[action.tableviewCategory]) {
+                    return tableviewPermissions[action.tableviewCategory];
+                }
             }
-        }
-        this.processSubscriptions();
-        if (this.action.className) {
-            this.hostClass = this.action.className;
-        }
-        const hostVisibilitySubscription = combineLatest([this.$isVisible, this.$isPermitted]).subscribe(([isVisible, isPermitted]) => {
-            this.isHostHidden = !isVisible || !isPermitted;
+            return undefined;
         });
-        this.subscriptions.push(hostVisibilitySubscription);
-        this.buttonClass = this.action.button.styleClass.build(this.hasNoTitle);
-        // Here we check if an action or any subaction has confirmation dialog
-        this.actionOrSubactionHasRunConfirmation = this.action.subactions.some(sub => sub.hasRunConfirmation) || this.action.hasRunConfirmation;
-    }
-    ngOnChanges(changes) {
-        if (!(changes['item']?.firstChange ?? true) ||
-            !(changes['itemId']?.firstChange ?? true) ||
-            !(changes['actionData']?.firstChange ?? true) ||
-            (this.action.hasItemsSelection && !(changes['selectedItems']?.firstChange ?? true))) {
-            this.processSubscriptions();
-        }
+        this.buttonClass = computed(() => this.action().button.styleClass.build(this.hasNoTitle()));
+        this.subactions = signal([]);
+        this.subactionSubscriptions = [];
+        effect(() => this.processSubscriptions(), { allowSignalWrites: true });
     }
     ngOnDestroy() {
         this.actionExecutor.onActionDestroy(this.instance);
@@ -1399,24 +1366,27 @@ class ActionComponent {
         this.isEnabledSubscription?.unsubscribe();
         this.labelSubscription?.unsubscribe();
         this.tooltipSubscription?.unsubscribe();
-        this.subscriptions.forEach(s => s.unsubscribe());
+        this.resultSubscription?.unsubscribe();
+        this.errorSubscription?.unsubscribe();
+        this.stateSubscription?.unsubscribe();
+        this.cmpInstSubscription?.unsubscribe();
         this.subactionSubscriptions.forEach(s => s.unsubscribe());
     }
     triggerAction(action, parameters, event) {
         if (action.subactionsAsMenu) {
-            this.subactionsMenu?.toggle(event ?? new Event('trigger'));
+            this.subactionsMenu()?.toggle(event ?? new Event('trigger'));
             return;
         }
-        const actionData = this.actionData ? this.actionData : {};
+        const actionData = this.actionData() ? this.actionData() : {};
         parameters ??= {
-            itemId: this.itemId,
-            item: this.item,
+            itemId: this.itemId(),
+            item: this.item(),
             actionData: actionData,
-            dataListParams: this.dataListParams,
-            route: this.route,
+            dataListParams: this.dataListParams(),
+            route: this.route(),
             sourceComponent: this,
-            hostComponent: this.hostComponent,
-            selectedItems: this.selectedItems
+            hostComponent: this.hostComponent(),
+            selectedItems: this.selectedItems()
         };
         const instance = this.actionExecutor.triggerAction(action, parameters);
         this.instance = instance;
@@ -1426,79 +1396,128 @@ class ActionComponent {
             // it is in another component jurisdiction to handle contexts
             return;
         }
-        this.subscriptions.push(instance.result$.subscribe({
+        this.resultSubscription?.unsubscribe();
+        this.resultSubscription = instance.result$.subscribe({
             next: () => {
-                this.finishEventEmitter.next(instance);
+                this.finish.emit(instance);
                 if (action.hasItemsSelection) {
                     this.viewContainer?.reloadTable({ data: { event: event } });
                 }
             }
-        }));
-        this.subscriptions.push(instance.error$.subscribe({
+        });
+        this.errorSubscription?.unsubscribe();
+        this.errorSubscription = instance.error$.subscribe({
             next: () => {
-                this.finishEventEmitter.next(instance);
+                this.finish.emit(instance);
             }
-        }));
-        this.subscriptions.push(this.instance.state$.subscribe(s => {
+        });
+        this.stateSubscription?.unsubscribe();
+        this.stateSubscription = this.instance.state$.subscribe(s => {
             switch (s) {
                 case ActionInstanceStateEnum.RunStart:
-                    this.loadingSubject.next(true);
+                    this.loading.set(true);
                     break;
                 case ActionInstanceStateEnum.RunEnd:
                 case ActionInstanceStateEnum.RunError:
-                    this.loadingSubject.next(false);
+                    this.loading.set(false);
                     break;
                 case ActionInstanceStateEnum.NextActionStart:
                     if (this.instance?.nextActionInstance?.action.type === ActionTypeEnum.Direct) {
-                        this.loadingSubject.next(true);
+                        this.loading.set(true);
                     }
                     break;
                 case ActionInstanceStateEnum.NextActionEnd:
                     if (this.instance?.nextActionInstance?.action.type === ActionTypeEnum.Direct) {
-                        this.loadingSubject.next(false);
+                        this.loading.set(false);
                     }
                     break;
                 case ActionInstanceStateEnum.ErrorActionStart:
                     if (this.instance?.errorActionInstance?.action.type === ActionTypeEnum.Direct) {
-                        this.loadingSubject.next(true);
+                        this.loading.set(true);
                     }
                     break;
                 case ActionInstanceStateEnum.ErrorActionEnd:
                     if (this.instance?.errorActionInstance?.action.type === ActionTypeEnum.Direct) {
-                        this.loadingSubject.next(false);
+                        this.loading.set(false);
                     }
                     break;
             }
-        }));
+        });
         this.actionExecutor.run(context);
     }
     onCustomActionCmpInst(instance) {
-        const cmpInstSubscription = instance.triggerActionEventEmitter.subscribe(params => this.triggerAction(this.action, params));
-        this.subscriptions.push(cmpInstSubscription);
+        this.cmpInstSubscription?.unsubscribe();
+        this.cmpInstSubscription = instance.trigger.subscribe(params => this.triggerAction(this.action(), params));
+    }
+    processSubscriptions() {
+        const parameters = {
+            itemId: this.itemId(),
+            item: this.item(),
+            actionData: this.actionData(),
+            sourceComponent: this
+        };
+        const action = this.action();
+        if (action.hasItemsSelection) {
+            parameters.selectedItems = this.selectedItems();
+        }
+        const context = this.actionExecutor.prepareActionContextValidation(action, parameters, this.dataProvider());
+        if (typeof action.isVisibleFunction === 'function') {
+            this.isVisibleSubscription?.unsubscribe();
+            this.isVisibleSubscription = toObservable(action.isVisibleFunction(context)).subscribe({
+                next: res => this.isVisible.set(res)
+            });
+        }
+        const routePermissions = this.routePermissions();
+        if (typeof action.permissions !== 'undefined' || typeof routePermissions !== 'undefined') {
+            this.isPermittedSubscription?.unsubscribe();
+            const permissions = action.permissions && routePermissions ? Permissions.All.of(routePermissions, action.permissions) : routePermissions ?? action.permissions;
+            this.isVisibleSubscription = this.authorization.isPermitted(permissions, this.route().snapshot, context).subscribe({
+                next: res => this.isPermitted.set(res)
+            });
+        }
+        if (typeof action.isEnabledFunction === 'function') {
+            this.isEnabledSubscription?.unsubscribe();
+            this.isEnabledSubscription = toObservable(action.isEnabledFunction(context)).subscribe({
+                next: res => this.isEnabled.set(res)
+            });
+        }
+        if (!this.hasNoTitle()) {
+            this.labelSubscription?.unsubscribe();
+            this.labelSubscription = getI18nForActionAsync(this.translate, action, 'title', action.button.label ?? undefined, this.item()).subscribe({
+                next: i18n => this.label.set(i18n ?? '')
+            });
+        }
+        this.tooltipSubscription?.unsubscribe();
+        if (action.button.tooltip) {
+            this.tooltipSubscription = getI18nForActionAsync(this.translate, action, 'tooltip', action.button.tooltip, this.item(), undefined, undefined).subscribe({
+                next: i18n => this.tooltip.set(i18n ?? '')
+            });
+        }
+        this.subactions.set(this.processSubactions());
     }
     processSubactions() {
         this.subactionSubscriptions.forEach(s => s.unsubscribe());
         this.subactionSubscriptions = [];
         const menuItems = [];
-        for (const subaction of this.action.subactions) {
+        for (const subaction of this.action().subactions) {
             const menuItem = {};
             menuItem.icon = subaction.button.icon ?? undefined;
-            this.subactionSubscriptions.push(getI18nForActionAsync(this.translate, subaction, 'title', subaction.button.label ?? undefined, this.item).subscribe({
+            this.subactionSubscriptions.push(getI18nForActionAsync(this.translate, subaction, 'title', subaction.button.label ?? undefined, this.item()).subscribe({
                 next: res => (menuItem.label = res)
             }));
-            this.subactionSubscriptions.push(getI18nForActionAsync(this.translate, subaction, 'tooltip', this.action.button.tooltip, this.item).subscribe({
+            this.subactionSubscriptions.push(getI18nForActionAsync(this.translate, subaction, 'tooltip', this.action().button.tooltip, this.item()).subscribe({
                 next: res => (menuItem.tooltip = res)
             }));
             const parameters = {
-                itemId: this.itemId,
-                item: this.item,
-                actionData: this.actionData,
+                itemId: this.itemId(),
+                item: this.item(),
+                actionData: this.actionData(),
                 sourceComponent: this
             };
             if (subaction.hasItemsSelection) {
-                parameters.selectedItems = this.selectedItems;
+                parameters.selectedItems = this.selectedItems();
             }
-            const context = this.actionExecutor.prepareActionContextValidation(subaction, parameters, this.dataProvider);
+            const context = this.actionExecutor.prepareActionContextValidation(subaction, parameters, this.dataProvider());
             if (typeof subaction.isEnabledFunction === 'function') {
                 this.subactionSubscriptions.push(toObservable(subaction.isEnabledFunction(context)).subscribe({
                     next: res => (menuItem.disabled = !res)
@@ -1509,12 +1528,12 @@ class ActionComponent {
                 visibilityObservables.push(toObservable(subaction.isVisibleFunction(context)));
             }
             if (typeof subaction.permissions !== 'undefined') {
-                visibilityObservables.push(this.authorization.isPermitted(subaction.permissions, this.route.snapshot, context));
+                visibilityObservables.push(this.authorization.isPermitted(subaction.permissions, this.route().snapshot, context));
             }
-            const routeData = this.route.snapshot.data;
+            const routeData = this.route().snapshot.data;
             if (subaction.tableviewCategory && routeData.tableviewPermissions && routeData.tableviewPermissions[subaction.tableviewCategory]) {
                 const routePermissions = routeData.tableviewPermissions[subaction.tableviewCategory];
-                visibilityObservables.push(this.authorization.isPermitted(routePermissions, this.route.snapshot, context));
+                visibilityObservables.push(this.authorization.isPermitted(routePermissions, this.route().snapshot, context));
             }
             this.subactionSubscriptions.push(combineLatest(visibilityObservables).subscribe(visibilities => {
                 menuItem.visible = visibilities.every(value => value);
@@ -1524,111 +1543,27 @@ class ActionComponent {
         }
         return menuItems;
     }
-    processSubscriptions() {
-        const parameters = {
-            itemId: this.itemId,
-            item: this.item,
-            actionData: this.actionData,
-            sourceComponent: this
-        };
-        if (this.action.hasItemsSelection) {
-            parameters.selectedItems = this.selectedItems;
-        }
-        const context = this.actionExecutor.prepareActionContextValidation(this.action, parameters, this.dataProvider);
-        if (typeof this.action.isVisibleFunction === 'function') {
-            this.isVisibleSubscription?.unsubscribe();
-            this.isVisibleSubscription = toObservable(this.action.isVisibleFunction(context)).subscribe({
-                next: res => this.isVisibleSubject.next(res)
-            });
-        }
-        if (typeof this.action.permissions !== 'undefined' || typeof this.routePermissions !== 'undefined') {
-            this.isPermittedSubscription?.unsubscribe();
-            const permissions = this.action.permissions && this.routePermissions
-                ? Permissions.All.of(this.routePermissions, this.action.permissions)
-                : this.routePermissions ?? this.action.permissions;
-            this.isVisibleSubscription = this.authorization.isPermitted(permissions, this.route.snapshot, context).subscribe({
-                next: res => this.isPermittedSubject.next(res)
-            });
-        }
-        if (typeof this.action.isEnabledFunction === 'function') {
-            this.isEnabledSubscription?.unsubscribe();
-            this.isEnabledSubscription = toObservable(this.action.isEnabledFunction(context)).subscribe({
-                next: res => this.isEnabledSubject.next(res)
-            });
-        }
-        if (!this.hasNoTitle) {
-            this.labelSubscription?.unsubscribe();
-            this.labelSubscription = getI18nForActionAsync(this.translate, this.action, 'title', this.action.button.label ?? undefined, this.item).subscribe({
-                next: i18n => this.labelSubject.next(i18n)
-            });
-        }
-        this.tooltipSubscription?.unsubscribe();
-        if (this.action.button.tooltip) {
-            this.tooltipSubscription = getI18nForActionAsync(this.translate, this.action, 'tooltip', this.action.button.tooltip, this.item, undefined, undefined).subscribe({
-                next: i18n => this.tooltipSubject.next(i18n)
-            });
-        }
-        this.subactions = this.processSubactions();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.TranslateService }, { token: i1$1.PermissionService }, { token: ActionExecutorService }, { token: ViewContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ActionComponent, isStandalone: true, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", dataListParams: "dataListParams", dataProvider: "dataProvider", hostComponent: "hostComponent", routeInit: ["route", "routeInit"], inputDisabled: ["disabled", "inputDisabled", boolean$Attribute], inputLoading: ["loading", "inputLoading", boolean$Attribute], selectedItems: "selectedItems" }, outputs: { finishEventEmitter: "finish" }, host: { properties: { "class": "this.hostClass", "class.m-0": "this.isHostHidden" } }, providers: [provideActionExecutor()], viewQueries: [{ propertyName: "subactionsMenu", first: true, predicate: ["subactionsMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (($isVisible | async) && ($isPermitted | async)) {\n    @if (actionLink && actionLink.url !== '') {\n        <a\n            pButton\n            pRipple\n            [label]=\"($label | async) ?? ''\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | mngParametrize: itemId : item : actionData)\"\n            [target]=\"actionLink.target\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    } @else if (actionLink) {\n        <a\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | mngParametrize: itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | mngParametrize: itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    } @else if (action.component || action.componentFromDi) {\n        <ng-container\n            [mngComponent]=\"action.component\"\n            [injectionToken]=\"action.componentFromDi\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    } @else if (action.subactions.length > 0 && !action.subactionsAsMenu) {\n        <p-splitButton\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    } @else {\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" appendTo=\"body\" styleClass=\"mng-action-menu\"></p-menu>\n    }\n}\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: ParametrizePipe, name: "mngParametrize" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i9.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps"], outputs: ["onClick", "onDropdownClick"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i10.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1$1.TranslateService }, { token: i3.PermissionService }, { token: ActionExecutorService }, { token: ViewContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ActionComponent, isStandalone: true, selector: "mng-action", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: false, transformFunction: null }, dataListParams: { classPropertyName: "dataListParams", publicName: "dataListParams", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, hostComponent: { classPropertyName: "hostComponent", publicName: "hostComponent", isSignal: true, isRequired: false, transformFunction: null }, routeInit: { classPropertyName: "routeInit", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputLoading: { classPropertyName: "inputLoading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finish: "finish" }, host: { properties: { "class": "hostClass()", "class.m-0": "isHostHidden()" } }, providers: [provideActionExecutor()], viewQueries: [{ propertyName: "subactionsMenu", first: true, predicate: Menu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVisible() && isPermitted()) {\n    @if(actionLink(); as actionLink) {\n        @if(actionLink.url !== '') {\n            <a\n                pButton\n                pRipple\n                [label]=\"label()\"\n                [icon]=\"$any(action().button.icon)\"\n                [iconPos]=\"action().button.iconPosition\"\n                [href]=\"!isEnabled() || inputDisabled() ? null : (actionLink.url | mngParametrize: itemId() : item() : actionData())\"\n                [target]=\"actionLink.target\"\n                [class.disabled]=\"!isEnabled() || inputDisabled()\"\n                [pTooltip]=\"tooltip()\"\n                [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n                [class]=\"buttonClass()\"></a>\n        } @else {\n            <a\n                pButton\n                pRipple\n                [icon]=\"$any(action().button.icon)\"\n                [iconPos]=\"action().button.iconPosition\"\n                [label]=\"label()\"\n                [target]=\"actionLink.target\"\n                [replaceUrl]=\"actionLink.replaceUrl\"\n                [routerLink]=\"!isEnabled() || inputDisabled() ? null : (actionLink.pathSegments | mngParametrize: itemId() : item() : actionData())\"\n                [relativeTo]=\"route()\"\n                [queryParams]=\"actionLink.queryParams | mngParametrize: itemId() : item() : actionData()\"\n                [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n                [class.disabled]=\"!isEnabled() || inputDisabled()\"\n                [pTooltip]=\"tooltip()\"\n                [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n                [class]=\"buttonClass()\"></a>\n        }\n    }\n    @else if (action().component || action().componentFromDi) {\n            <ng-container\n                [mngComponent]=\"action().component\"\n                [injectionToken]=\"action().componentFromDi\"\n                [inputs]=\"{\n                action: action(),\n                item: item(),\n                itemId: itemId(),\n                actionData: actionData(),\n                enabled: isEnabled(),\n                loading: loading()\n            }\"\n                (instanceCreated)=\"onCustomActionCmpInst($event)\">\n            </ng-container>\n        }\n\n     @else if (action().subactions.length > 0 && !action().subactionsAsMenu) {\n        <p-splitButton\n            [icon]=\"action().button.icon ?? undefined\"\n            [iconPos]=\"action().button.iconPosition\"\n            [label]=\"label()\"\n            [pTooltip]=\"tooltip()\"\n            [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n            [disabled]=\"!isEnabled() || inputDisabled()\"\n            (onClick)=\"triggerAction(action())\"\n            [class]=\"buttonClass()\"\n            [model]=\"subactions()\">\n        </p-splitButton>\n    } @else {\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action().button.icon)\"\n            [iconPos]=\"action().button.iconPosition\"\n            [label]=\"label()\"\n            [pTooltip]=\"tooltip()\"\n            [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n            [loading]=\"loading() || inputLoading()\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"!isEnabled() || inputDisabled()\"\n            (click)=\"triggerAction(action(), undefined, $event)\"\n            [class]=\"buttonClass()\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions()\" [popup]=\"true\" appendTo=\"body\" styleClass=\"mng-action-menu\"></p-menu>\n    }\n}\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: ParametrizePipe, name: "mngParametrize" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i9.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps"], outputs: ["onClick", "onDropdownClick"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i10.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, ButtonModule, RippleModule, TooltipModule, ParametrizePipe, ComponentDirective, SplitButtonModule, MenuModule], providers: [provideActionExecutor()], template: "@if (($isVisible | async) && ($isPermitted | async)) {\n    @if (actionLink && actionLink.url !== '') {\n        <a\n            pButton\n            pRipple\n            [label]=\"($label | async) ?? ''\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | mngParametrize: itemId : item : actionData)\"\n            [target]=\"actionLink.target\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    } @else if (actionLink) {\n        <a\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | mngParametrize: itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | mngParametrize: itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    } @else if (action.component || action.componentFromDi) {\n        <ng-container\n            [mngComponent]=\"action.component\"\n            [injectionToken]=\"action.componentFromDi\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    } @else if (action.subactions.length > 0 && !action.subactionsAsMenu) {\n        <p-splitButton\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    } @else {\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" appendTo=\"body\" styleClass=\"mng-action-menu\"></p-menu>\n    }\n}\n", styles: [":host{display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2$1.TranslateService }, { type: i1$1.PermissionService }, { type: ActionExecutorService }, { type: ViewContainer, decorators: [{
+            args: [{ standalone: true, selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, ButtonModule, RippleModule, TooltipModule, ParametrizePipe, ComponentDirective, SplitButtonModule, MenuModule], providers: [provideActionExecutor()], host: { '[class]': 'hostClass()', '[class.m-0]': 'isHostHidden()' }, template: "@if (isVisible() && isPermitted()) {\n    @if(actionLink(); as actionLink) {\n        @if(actionLink.url !== '') {\n            <a\n                pButton\n                pRipple\n                [label]=\"label()\"\n                [icon]=\"$any(action().button.icon)\"\n                [iconPos]=\"action().button.iconPosition\"\n                [href]=\"!isEnabled() || inputDisabled() ? null : (actionLink.url | mngParametrize: itemId() : item() : actionData())\"\n                [target]=\"actionLink.target\"\n                [class.disabled]=\"!isEnabled() || inputDisabled()\"\n                [pTooltip]=\"tooltip()\"\n                [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n                [class]=\"buttonClass()\"></a>\n        } @else {\n            <a\n                pButton\n                pRipple\n                [icon]=\"$any(action().button.icon)\"\n                [iconPos]=\"action().button.iconPosition\"\n                [label]=\"label()\"\n                [target]=\"actionLink.target\"\n                [replaceUrl]=\"actionLink.replaceUrl\"\n                [routerLink]=\"!isEnabled() || inputDisabled() ? null : (actionLink.pathSegments | mngParametrize: itemId() : item() : actionData())\"\n                [relativeTo]=\"route()\"\n                [queryParams]=\"actionLink.queryParams | mngParametrize: itemId() : item() : actionData()\"\n                [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n                [class.disabled]=\"!isEnabled() || inputDisabled()\"\n                [pTooltip]=\"tooltip()\"\n                [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n                [class]=\"buttonClass()\"></a>\n        }\n    }\n    @else if (action().component || action().componentFromDi) {\n            <ng-container\n                [mngComponent]=\"action().component\"\n                [injectionToken]=\"action().componentFromDi\"\n                [inputs]=\"{\n                action: action(),\n                item: item(),\n                itemId: itemId(),\n                actionData: actionData(),\n                enabled: isEnabled(),\n                loading: loading()\n            }\"\n                (instanceCreated)=\"onCustomActionCmpInst($event)\">\n            </ng-container>\n        }\n\n     @else if (action().subactions.length > 0 && !action().subactionsAsMenu) {\n        <p-splitButton\n            [icon]=\"action().button.icon ?? undefined\"\n            [iconPos]=\"action().button.iconPosition\"\n            [label]=\"label()\"\n            [pTooltip]=\"tooltip()\"\n            [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n            [disabled]=\"!isEnabled() || inputDisabled()\"\n            (onClick)=\"triggerAction(action())\"\n            [class]=\"buttonClass()\"\n            [model]=\"subactions()\">\n        </p-splitButton>\n    } @else {\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action().button.icon)\"\n            [iconPos]=\"action().button.iconPosition\"\n            [label]=\"label()\"\n            [pTooltip]=\"tooltip()\"\n            [tooltipPosition]=\"action().button.tooltipPosition ?? undefined\"\n            [loading]=\"loading() || inputLoading()\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"!isEnabled() || inputDisabled()\"\n            (click)=\"triggerAction(action(), undefined, $event)\"\n            [class]=\"buttonClass()\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions()\" [popup]=\"true\" appendTo=\"body\" styleClass=\"mng-action-menu\"></p-menu>\n    }\n}\n", styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: i3.PermissionService }, { type: ActionExecutorService }, { type: ViewContainer, decorators: [{
                     type: Optional
-                }] }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], isHostHidden: [{
-                type: HostBinding,
-                args: ['class.m-0']
-            }], action: [{
-                type: Input,
-                args: [{ required: true }]
-            }], item: [{
-                type: Input
-            }], itemId: [{
-                type: Input
-            }], actionData: [{
-                type: Input
-            }], dataListParams: [{
-                type: Input
-            }], dataProvider: [{
-                type: Input
-            }], hostComponent: [{
-                type: Input
-            }], routeInit: [{
-                type: Input,
-                args: ['route']
-            }], inputDisabled: [{
-                type: Input,
-                args: [{ alias: 'disabled', transform: boolean$Attribute }]
-            }], inputLoading: [{
-                type: Input,
-                args: [{ alias: 'loading', transform: boolean$Attribute }]
-            }], selectedItems: [{
-                type: Input
-            }], finishEventEmitter: [{
-                type: Output,
-                args: ['finish']
-            }], subactionsMenu: [{
-                type: ViewChild,
-                args: ['subactionsMenu']
-            }] } });
+                }] }] });
 
-function createFormlyConfigFromDescriptor(descriptor, formEditorComponent) {
+function createFormlyConfigFromDescriptor(descriptor, formlyConfig, formEditorComponent) {
     const fields = [];
     if (descriptor.isLocalized) {
         descriptor = createFormlyLocalizationsTab(descriptor);
     }
     if (!descriptor.isLocalized && descriptor.tabs.length === 1 && descriptor.tabs[0].default) {
         // dont use tabs
-        fields.push(...createFormlyGroupType(descriptor.tabs[0].fields, formEditorComponent));
+        fields.push(...createFormlyGroupType(descriptor.tabs[0].fields, formlyConfig, formEditorComponent));
     }
     else {
-        fields.push(...createFormlyTabType(descriptor.tabs, formEditorComponent));
+        fields.push(...createFormlyTabType(descriptor.tabs, formlyConfig, formEditorComponent));
     }
     return fields;
 }
@@ -1637,7 +1572,7 @@ function createFormlyLocalizationsTab(descriptor) {
         if (!descriptor.localizationModel) {
             throw new CommonsInternalError('Localization model must be defined.');
         }
-        const localizationsTableViewDescriptor = TableviewDescriptor.fromModel(descriptor.localizationModel);
+        const localizationsTableViewDescriptor = new TableviewDescriptorInst(descriptor.localizationModel);
         if (!descriptor.localizationLocaleProperty) {
             throw new CommonsInternalError('Localization locale property must be defined.');
         }
@@ -1646,7 +1581,7 @@ function createFormlyLocalizationsTab(descriptor) {
         localizationsTableViewDescriptor.detailsEditor.addField(descriptor.localizationLocaleProperty).withDisabled(true);
         localizationsTableViewDescriptor.addEditor
             .addFieldLookupWithProvider(descriptor.localizationLocaleProperty, CommonsService, type())
-            .withLookup((qp, service) => service.appDataLanguages)
+            .withLookup((qp, service) => service.appDataLocales())
             .withDisabled(false)
             .withRequired();
         descriptor.fields.forEach(field => {
@@ -1660,12 +1595,12 @@ function createFormlyLocalizationsTab(descriptor) {
         if (!descriptor.localizationLocalizationProperty) {
             throw new CommonsInternalError('Localization localization property must be defined');
         }
-        descriptorWithLocalizations.addFieldManyEditor(descriptor.localizationLocalizationProperty, localizationsTableViewDescriptor);
+        descriptorWithLocalizations.addFieldManyEditorUnsafe(descriptor.localizationLocalizationProperty, localizationsTableViewDescriptor);
         return descriptorWithLocalizations;
     }
     return descriptor;
 }
-function createFormlyTabType(tabGroups, formEditorComponent) {
+function createFormlyTabType(tabGroups, formlyConfig, formEditorComponent) {
     const tabsField = {
         type: 'tabs',
         fieldGroup: [],
@@ -1685,15 +1620,15 @@ function createFormlyTabType(tabGroups, formEditorComponent) {
         if (tab.title) {
             tabField.props.label = tab.title;
         }
-        tabField.fieldGroup.push(...createFormlyGroupType(tab.fields, formEditorComponent));
+        tabField.fieldGroup.push(...createFormlyGroupType(tab.fields, formlyConfig, formEditorComponent));
         tabsField.fieldGroup.push(tabField);
     }
     return [tabsField];
 }
-function createFormlyGroupType(groups, formEditorComponent) {
+function createFormlyGroupType(groups, formlyConfig, formEditorComponent) {
     if (groups.length === 1 && groups[0].default) {
         // dont use fieldset, just create fields
-        return createFormlyFields(groups[0], formEditorComponent);
+        return createFormlyFields(groups[0], formlyConfig, formEditorComponent);
     }
     else {
         const groupsField = {
@@ -1716,26 +1651,27 @@ function createFormlyGroupType(groups, formEditorComponent) {
             if (group.title) {
                 groupField.props.label = group.title;
             }
-            groupField.fieldGroup.push(...createFormlyFields(group, formEditorComponent));
+            groupField.fieldGroup.push(...createFormlyFields(group, formlyConfig, formEditorComponent));
             groupsField.fieldGroup.push(groupField);
         }
         return [groupsField];
     }
 }
-function createFormlyFields(descriptor, formEditorComponent) {
+function createFormlyFields(descriptor, formlyConfig, formEditorComponent) {
     const fields = [];
     for (const descriptorField of descriptor.fields) {
-        fields.push(createFormlyField(descriptorField, formEditorComponent));
+        fields.push(createFormlyField(descriptorField, formlyConfig, formEditorComponent));
     }
     // wrap in group to be able to use flex grid
     const wrapperGroup = {
         fieldGroupClassName: 'p-fluid formgrid grid',
-        fieldGroup: fields
+        fieldGroup: fields,
+        props: {}
     };
-    addValidationsToFormlyField(wrapperGroup, descriptor.validations);
+    addValidationsToFormlyField(wrapperGroup, descriptor.validations, formlyConfig);
     return [wrapperGroup];
 }
-function createFormlyField(descriptor, formEditorComponent) {
+function createFormlyField(descriptor, formlyConfig, formEditorComponent) {
     const field = {
         key: descriptor.property,
         modelOptions: {
@@ -1878,6 +1814,7 @@ function createFormlyField(descriptor, formEditorComponent) {
     }
     if (descriptor.hiddenExpression) {
         field.expressions['hide'] = descriptor.hiddenExpression;
+        field.expressions['resetOnHide'] = () => descriptor.hiddenResetOnHide ?? true;
     }
     if (descriptor.disabledExpression) {
         field.expressions['props.disabled'] = descriptor.disabledExpression;
@@ -1891,60 +1828,88 @@ function createFormlyField(descriptor, formEditorComponent) {
     if (typeof descriptor.defaultValue !== 'undefined') {
         field.defaultValue = descriptor.defaultValue;
     }
-    addValidationsToFormlyField(field, descriptor.validations);
-    addAsyncValidationsToFormlyField(field, descriptor.asyncValidations);
+    addValidationsToFormlyField(field, descriptor.validations, formlyConfig);
+    addAsyncValidationsToFormlyField(field, descriptor.asyncValidations, formlyConfig);
     return field;
 }
-function addValidationsToFormlyField(config, validations) {
+function addValidationsToFormlyField(config, validations, formlyConfig) {
     if (!config.validators) {
         config.validators = {};
     }
     for (const validation of validations) {
-        if (typeof validation.validator === 'function') {
-            config.validators[validation.name] = {
-                expression: (control, field, options) => {
-                    const validatorRes = validation.validator(control, field, options);
-                    // formly validator only excepts true/false for validation
-                    // map possible angular validator result to true/false
-                    return typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
-                }
-            };
-            if (typeof validation.message === 'function') {
-                config.validators[validation.name].message = validation.message;
-            }
-        }
-        else {
-            if (!Array.isArray(config.validators.validation)) {
-                config.validators.validation = [];
-            }
-            config.validators.validation.push(validation.name);
-        }
+        createFormlyValidation(config.validators, validation, formlyConfig);
     }
 }
-function addAsyncValidationsToFormlyField(config, asyncValidations) {
+function addAsyncValidationsToFormlyField(config, asyncValidations, formlyConfig) {
     if (!config.asyncValidators) {
         config.asyncValidators = {};
     }
     for (const validation of asyncValidations) {
-        if (typeof validation.validator === 'function') {
-            config.asyncValidators[validation.name] = {
-                expression: (control, field, options) => {
-                    const validator = validation.validator;
-                    const validatorObs = validator(control, field, options);
-                    // formly validator only excepts true/false for validation
-                    // map possible angular validator result to true/false
-                    return validatorObs.pipe(map(value => (typeof value === 'boolean' ? value : value === null)));
+        createFormlyValidation(config.asyncValidators, validation, formlyConfig);
+    }
+}
+function createFormlyValidation(config, validation, formlyConfig) {
+    if (typeof validation.validator === 'function') {
+        if (validation.options?.errorPath && validation.message != null) {
+            // if this is used, the validator and message must be registered globally
+            if (!formlyConfig.getValidatorMessage(validation.name)) {
+                formlyConfig.addValidatorMessage(validation.name, validation.message);
+            }
+            if (!formlyConfig.validators[validation.name]) {
+                formlyConfig.setValidator({
+                    name: validation.name,
+                    validation: (control, field) => {
+                        const commonsFieldFormlyConfig = field;
+                        return validation.validator({
+                            fieldFormControl: control,
+                            form: commonsFieldFormlyConfig.form,
+                            fieldFormlyConfig: field,
+                            formComponent: commonsFieldFormlyConfig.props?.formEditorComponent,
+                            fieldComponent: commonsFieldFormlyConfig.props?.fieldComponent
+                        })
+                            ? null
+                            : { [validation.name]: true };
+                    }
+                });
+            }
+            if (!Array.isArray(config.validation)) {
+                config.validation = [];
+            }
+            config.validation.push({
+                name: validation.name,
+                options: { errorPath: validation.options.errorPath }
+            });
+        }
+        else {
+            config[validation.name] = {
+                expression: (control, field) => {
+                    const commonsFieldFormlyConfig = field;
+                    return validation.validator({
+                        fieldFormControl: control,
+                        form: commonsFieldFormlyConfig.form,
+                        fieldFormlyConfig: commonsFieldFormlyConfig,
+                        formComponent: commonsFieldFormlyConfig.props?.formEditorComponent,
+                        fieldComponent: commonsFieldFormlyConfig.props?.fieldComponent
+                    });
                 }
             };
-            if (typeof validation.message === 'function') {
-                config.asyncValidators[validation.name].message = validation.message;
+            if (validation.message != null) {
+                config[validation.name].message = validation.message;
             }
         }
+    }
+    else {
+        if (!Array.isArray(config.validation)) {
+            config.validation = [];
+        }
+        if (validation.options?.errorPath) {
+            config.validation.push({
+                name: validation.name,
+                options: { errorPath: validation.options.errorPath }
+            });
+        }
         else {
-            if (!Array.isArray(config.asyncValidators.validation)) {
-                config.asyncValidators.validation = [];
-            }
-            config.asyncValidators.validation.push(validation.name);
+            config.validation.push(validation.name);
         }
     }
 }
@@ -1960,110 +1925,249 @@ function getFormEditorWarningMessage(translate, title, message) {
     return { severity: 'warn', summary: actionErrorTitle, detail: actionErrorMessage };
 }
 
+class FormEditorService {
+    get parent() {
+        return this._parentForm;
+    }
+    get parentService() {
+        return this._parentForm;
+    }
+    get formComponent() {
+        if (!this._formComponent) {
+            throw new CommonsInternalError(`Form service was not initialized`);
+        }
+        return this._formComponent;
+    }
+    get descriptor() {
+        return this.formComponent.descriptor;
+    }
+    get isFormDisabled() {
+        return this.formComponent.isFormDisabled;
+    }
+    get formMessages() {
+        return this.formComponent.formMessages;
+    }
+    get form() {
+        return this.formComponent.form;
+    }
+    get formUnsafe() {
+        return this.formComponent.formUnsafe;
+    }
+    get formlyOptions() {
+        return this.formComponent.formlyOptions;
+    }
+    get formlyFields() {
+        return this.formComponent.formlyFields;
+    }
+    get formlyInitialItem() {
+        return this.formComponent.formlyInitialItem;
+    }
+    submit() {
+        this.formComponent.submit();
+    }
+    getFormValue() {
+        return this.formComponent.getFormValue();
+    }
+    resetFormModel(item, opts) {
+        this.formComponent.resetFormModel(item, opts);
+    }
+    getField(key) {
+        return this.formComponent.getField(key);
+    }
+    getFieldUnsafe(key) {
+        return this.formComponent.getFieldUnsafe(key);
+    }
+    setFieldValue(key, value) {
+        return this.formComponent.setFieldValue(key, value);
+    }
+    setFieldValueUnsafe(key, value) {
+        return this.formComponent.setFieldValueUnsafe(key, value);
+    }
+    patchFieldValue(key, value) {
+        return this.formComponent.patchFieldValue(key, value);
+    }
+    patchFieldValueUnsafe(key, value) {
+        return this.formComponent.patchFieldValueUnsafe(key, value);
+    }
+    resetFieldValue(key, value) {
+        return this.formComponent.resetFieldValue(key, value);
+    }
+    resetFieldValueUnsafe(key, value) {
+        return this.formComponent.resetFieldValueUnsafe(key, value);
+    }
+    constructor(parentForm) {
+        this._parentForm = parentForm;
+    }
+    init(formComponent) {
+        this._formComponent = formComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormEditorService, deps: [{ token: FormEditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormEditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FormEditorService }] });
+function provideFormComponent() {
+    return {
+        provide: FormEditorService,
+        useFactory: (injector) => {
+            const parent = injector.get(FormEditorService, null, { optional: true, skipSelf: true });
+            return new FormEditorService(parent ?? undefined);
+        },
+        deps: [Injector]
+    };
+}
+
 class FormEditorComponent {
+    get parent() {
+        return this.formService.parent;
+    }
+    get form() {
+        return this._form;
+    }
+    get formUnsafe() {
+        return this._form;
+    }
+    get formlyOptions() {
+        return this._formlyOptions;
+    }
+    get formlyFields() {
+        return this._formlyFields;
+    }
+    /**
+     * Only used for form initialization. Further changes should be done using {resetFormModel}.
+     */
+    get formlyInitialItem() {
+        return this._formlyInitialItem;
+    }
     constructor() {
+        this.formlyConfig = inject(FormlyConfig);
         this.translateService = inject(TranslateService);
         this.commons = inject(CommonsService);
         this.logger = inject(LoggerService).create('FormEditorComponent');
-        this.viewContainer = inject(ViewContainer, { optional: true });
-        this.submitLoading = false;
-        // extra features input
-        this.isFormDisabled = false;
+        this.destroyRef = inject(DestroyRef);
+        this.formService = inject((FormEditorService));
+        this.descriptor = input.required();
+        this.submitLoading = input(false);
+        this.item = input(undefined);
+        this.isFormDisabled = input(false);
         // event outputs
-        this.formSubmitEventEmitter = new EventEmitter();
-        this.form = new FormGroup({});
-        this.formOptions = {
+        this.formSubmit = output();
+        // content and view queries
+        this.submitButtonElementRef = viewChild('submitButton');
+        // formly specifics
+        this._form = new UntypedFormGroup({});
+        this._formlyOptions = {
             formState: {
                 add: false,
                 edit: false,
                 disabled: false
             }
         };
-        this.formModel = {};
-        this.formMessages = [];
-        this.subscriptions = [];
+        this._formlyFields = []; // initialized in ngOnInit, should not be changed after
+        this._formlyInitialItem = {}; // initialized in ngOnInit, should not be changed after
+        this.formMessages = signal([]);
+        this.formService.init(this);
+        effect(() => {
+            const item = this.item();
+            if (item !== this.initialItemInput) {
+                // new item is different from the one the form was initialized with. Must trigger reset of form model.
+                this.resetFormModel(item);
+            }
+        }, 
+        // resetModel uses signal like concept
+        { allowSignalWrites: true });
+        effect(() => {
+            this._formlyOptions.formState.disabled = this.isFormDisabled() || this._formlyOptions.formState.descriptor?.disabled === true || this._formlyOptions.formState.details;
+        });
     }
     ngOnInit() {
-        this.setInitialFormState();
-        this.resetFormModel(this.item);
-        this.submitLoading$ = this.submitLoading instanceof Observable ? this.submitLoading : of(this.submitLoading);
-        if (this.descriptor) {
-            // init fields for formly
-            this.formFields = createFormlyConfigFromDescriptor(this.descriptor, this);
-            this.updateFormState();
-            // let the user know, that adding new value in table view with localizations is only supported in the default language
-            if (this.descriptor.isLocalized &&
-                (this.descriptor.tableviewEditorType === TableviewEditorTypeEnum.Add || this.descriptor.tableviewEditorType === TableviewEditorTypeEnum.Edit)) {
-                this.formMessages.push(getFormEditorInfoMessage(this.translateService, 'mngEditor.localizations.addInDefaultLanguageTitle', 'mngEditor.localizations.addInDefaultLanguageDescription', { defaultLanguage: this.commons.defaultDataLanguage }));
-            }
+        // init form state
+        if (this.descriptor().tableviewEditorType === TableviewEditorTypeEnum.Add) {
+            this._formlyOptions.formState.add = true;
+        }
+        else if (this.descriptor().tableviewEditorType === TableviewEditorTypeEnum.Edit) {
+            this._formlyOptions.formState.edit = true;
+        }
+        else if (this.descriptor().tableviewEditorType === TableviewEditorTypeEnum.Details) {
+            this._formlyOptions.formState.details = true;
+        }
+        this._formlyOptions.formState.descriptor = this.descriptor();
+        // init fields for formly
+        this._formlyFields = createFormlyConfigFromDescriptor(this.descriptor(), this.formlyConfig, this);
+        // int form model (only initial, no further changes to formModel should be allowed!)
+        this.initialItemInput = this.item();
+        this._formlyInitialItem = this.getFormModelFromItem(this.item());
+        // handle localizations edit/add message
+        if (this.descriptor().isLocalized &&
+            (this.descriptor().tableviewEditorType === TableviewEditorTypeEnum.Add || this.descriptor().tableviewEditorType === TableviewEditorTypeEnum.Edit)) {
+            this.formMessages.set([
+                ...this.formMessages(),
+                getFormEditorInfoMessage(this.translateService, 'mngEditor.localizations.addInDefaultLanguageTitle', 'mngEditor.localizations.addInDefaultLanguageDescription', {
+                    defaultLanguage: this.commons.getDefaultLocale()
+                })
+            ]);
         }
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormEventTypeEnum.ComponentLifecycle, FormEditorComponent, this, {
+        this.descriptor().nextEvent(FormEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        this.subscriptions.push(this.form.valueChanges.pipe(debounceTime(250), distinctUntilChanged()).subscribe(v => {
-            this.descriptor?.nextEvent(FormEventTypeEnum.ValueChange, FormEditorComponent, this, {
+        this._form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(250), distinctUntilChanged()).subscribe(v => {
+            this.descriptor().nextEvent(FormEventTypeEnum.ValueChange, this, {
                 value: v,
                 formValue: () => this.getFormValue()
             });
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes['isFormDisabled'] && !changes['isFormDisabled'].firstChange) {
-            this.updateFormState();
-        }
-        if (changes['item'] && !changes['item'].firstChange) {
-            this.resetFormModel(this.item);
-        }
+        });
+        // mark form as pristine, should be done in next event hook to allow formly to initialize first
+        setTimeout(() => {
+            this._form.markAsPristine();
+        });
     }
     ngOnDestroy() {
-        this.subscriptions.forEach(s => s.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormEventTypeEnum.ComponentLifecycle, FormEditorComponent, this, {
+        this.descriptor().nextEvent(FormEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
-        // complete emitting events
-        this.descriptor?.completeEvents();
     }
     submit() {
-        this.submitButtonElementRef?.nativeElement.click();
+        this.submitButtonElementRef()?.nativeElement.click();
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onSubmit(event) {
-        this.formOptions.formState.submittedOn = Date.now();
-        this.formMessages = [];
+        this._formlyOptions.formState.submittedOn = Date.now();
+        this.formMessages.set([]);
         const formSubmitItem = this.getFormValue();
-        if (this.form.valid) {
-            this.formSubmitEventEmitter.next({
+        if (this._form.valid) {
+            this.formSubmit.emit({
                 success: true,
                 formItem: formSubmitItem
             });
-            this.descriptor?.nextEvent(FormEventTypeEnum.Submit, FormEditorComponent, this, {
+            this.descriptor().nextEvent(FormEventTypeEnum.Submit, this, {
                 submitValid: true,
                 submitValue: formSubmitItem
             });
         }
         else {
             // find and mark invalid tabs
-            if (this.formFields[0].type === 'tabs' && this.formFields[0].fieldGroup) {
-                for (const tab of this.formFields[0].fieldGroup) {
-                    const isInvalid = this.isAnyFieldInvalid(tab.fieldGroup);
-                    this.formOptions.formState['tab_' + (tab.id ? tab.id : tab.props.props.label) + '_invalid'] = isInvalid;
+            const formFields = this._formlyFields;
+            if (formFields[0].type === 'tabs' && formFields[0].fieldGroup) {
+                for (const tab of formFields[0].fieldGroup) {
+                    this._formlyOptions.formState['tab_' + (tab.id ? tab.id : tab.props.props.label) + '_invalid'] = this.isAnyFieldInvalid(tab.fieldGroup);
                 }
             }
             const event = { success: false, formItem: formSubmitItem };
             event.success = false;
-            this.formMessages.push(getFormEditorWarningMessage(this.translateService, 'mngEditor.invalidFormToastTitle', 'mngEditor.invalidFormToastMessage'));
-            this.formSubmitEventEmitter.next(event);
-            this.descriptor?.nextEvent(FormEventTypeEnum.Submit, FormEditorComponent, this, {
+            this.formMessages().push(getFormEditorWarningMessage(this.translateService, 'mngEditor.invalidFormToastTitle', 'mngEditor.invalidFormToastMessage'));
+            this.formSubmit.emit(event);
+            this.descriptor().nextEvent(FormEventTypeEnum.Submit, this, {
                 submitValid: false,
                 submitValue: formSubmitItem
             });
         }
     }
     getFormValue() {
-        const formValue = objectDeepCopy(this.form.getRawValue(), { mapGettersToProperties: true });
-        this.descriptor?.fields.forEach(field => {
+        const formValue = objectDeepCopy(this._form.getRawValue(), { mapGettersToProperties: true });
+        this.descriptor().fields.forEach(field => {
             if (field && field.setter) {
                 const splitPath = field.property.split('.');
                 let fieldValue = formValue;
@@ -2080,43 +2184,26 @@ class FormEditorComponent {
         });
         return formValue;
     }
-    resetFormModel(item, markAsPristine = true) {
-        if (typeof item !== 'undefined') {
-            this.originalItemPrototype = Object.getPrototypeOf(item);
-        }
-        const formModel = objectDeepCopy(item, { mapGettersToProperties: true }) ?? {};
-        this.descriptor?.fields.forEach(field => {
-            if (field.getter && item) {
-                const splitPath = field.property.split('.');
-                let currentObject = formModel;
-                for (let i = 0; i < splitPath.length; i++) {
-                    const currentSubPath = splitPath[i];
-                    if (i === splitPath.length - 1) {
-                        currentObject[currentSubPath] = field.getter(item?.[field.property], item);
-                    }
-                    else {
-                        if (typeof currentObject[currentSubPath] !== 'object') {
-                            currentObject[currentSubPath] = {};
-                        }
-                        currentObject = currentObject[currentSubPath];
-                    }
-                }
-            }
-        });
-        if (typeof this.formOptions.resetModel === 'function') {
-            // could not be initiated yet
-            this.formOptions.resetModel(this.formModel);
-        }
-        this.formModel = formModel;
-        if (markAsPristine) {
-            this.form.markAsPristine();
+    resetFormModel(item, opts) {
+        this._formlyOptions.resetModel?.(this.getFormModelFromItem(item));
+        if (opts?.markAsPristine !== false) {
+            // mark form as pristine, should be done in next event hook to allow formly to initialize first
+            setTimeout(() => {
+                this._form.markAsPristine();
+            });
         }
     }
-    getFormField(key) {
-        return this.findFormField(this.form, key.split('.'));
+    getField(key) {
+        return this.getFieldUnsafe(key);
     }
-    setFormFieldValue(key, value) {
-        const control = this.getFormField(key);
+    getFieldUnsafe(key) {
+        return this.findFormField(this._form, key.split('.'));
+    }
+    setFieldValue(key, value) {
+        return this.setFieldValueUnsafe(key, value);
+    }
+    setFieldValueUnsafe(key, value) {
+        const control = this.getFieldUnsafe(key);
         if (control) {
             control.setValue(value);
             return true;
@@ -2126,8 +2213,11 @@ class FormEditorComponent {
             return false;
         }
     }
-    patchFormFieldValue(key, value) {
-        const control = this.getFormField(key);
+    patchFieldValue(key, value) {
+        return this.patchFieldValueUnsafe(key, value);
+    }
+    patchFieldValueUnsafe(key, value) {
+        const control = this.getFieldUnsafe(key);
         if (control) {
             control.patchValue(value);
             return true;
@@ -2137,8 +2227,11 @@ class FormEditorComponent {
             return false;
         }
     }
-    resetFormFieldValue(key, value) {
-        const control = this.getFormField(key);
+    resetFieldValue(key, value) {
+        return this.resetFieldValueUnsafe(key, value);
+    }
+    resetFieldValueUnsafe(key, value) {
+        const control = this.getFieldUnsafe(key);
         if (control) {
             control.reset(value);
             return true;
@@ -2148,6 +2241,29 @@ class FormEditorComponent {
             return false;
         }
     }
+    getFormModelFromItem(item) {
+        const formModel = objectDeepCopy(item, { mapGettersToProperties: true }) ?? {};
+        const descriptor = this.descriptor();
+        descriptor.fields.forEach(field => {
+            if (field.getter && item) {
+                const splitPath = field.property.split('.');
+                let currentObject = formModel;
+                for (let i = 0; i < splitPath.length; i++) {
+                    const currentSubPath = splitPath[i];
+                    if (i === splitPath.length - 1) {
+                        currentObject[currentSubPath] = field.getter(item?.[field.property], item);
+                    }
+                    else {
+                        if (typeof currentObject[currentSubPath] !== 'object') {
+                            currentObject[currentSubPath] = {};
+                        }
+                        currentObject = currentObject[currentSubPath];
+                    }
+                }
+            }
+        });
+        return formModel;
+    }
     findFormField(control, keyPath) {
         if (keyPath.length === 0) {
             return control;
@@ -2185,54 +2301,18 @@ class FormEditorComponent {
         }
         return false;
     }
-    updateFormState() {
-        const isDisabled = this.isFormDisabled || this.descriptor?.disabled === true || this.descriptor?.tableviewEditorType === TableviewEditorTypeEnum.Details;
-        this.formOptions.formState.disabled = isDisabled;
-    }
-    /**
-     * @private Sets form state based on editor descriptor type.
-     * Possible options are: disabled, add or edit.
-     */
-    setInitialFormState() {
-        if (this.descriptor?.tableviewEditorType === TableviewEditorTypeEnum.Add) {
-            this.formOptions.formState.add = true;
-        }
-        else if (this.descriptor?.tableviewEditorType === TableviewEditorTypeEnum.Edit) {
-            this.formOptions.formState.edit = true;
-        }
-        this.updateFormState();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: FormEditorComponent, isStandalone: true, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button\n        #submitButton\n        pButton\n        type=\"submit\"\n        class=\"hidden\"\n        [disabled]=\"form.disabled\"\n        [loading]=\"(submitLoading$ | async) ?? false\"\n        loadingIcon=\"pi pi-spin pi-spinner\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i3.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.4", type: FormEditorComponent, isStandalone: true, selector: "mng-form-editor", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, submitLoading: { classPropertyName: "submitLoading", publicName: "submitLoading", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isFormDisabled: { classPropertyName: "isFormDisabled", publicName: "isFormDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, providers: [provideFormComponent()], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formlyFields\" [options]=\"formlyOptions\" [model]=\"formlyInitialItem\"></formly-form>\n    <button #submitButton pButton type=\"submit\" class=\"hidden\" [disabled]=\"form.disabled\" [loading]=\"submitLoading()\" loadingIcon=\"pi pi-spin pi-spinner\"></button>\n</form>\n<p-messages [value]=\"formMessages()\" [enableService]=\"false\"></p-messages>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i3$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-form-editor', imports: [FormlyModule, ReactiveFormsModule, MessagesModule, AsyncPipe, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button\n        #submitButton\n        pButton\n        type=\"submit\"\n        class=\"hidden\"\n        [disabled]=\"form.disabled\"\n        [loading]=\"(submitLoading$ | async) ?? false\"\n        loadingIcon=\"pi pi-spin pi-spinner\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n" }]
-        }], propDecorators: { descriptor: [{
-                type: Input
-            }], submitLoading: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], isFormDisabled: [{
-                type: Input
-            }], formSubmitEventEmitter: [{
-                type: Output,
-                args: ['formSubmit']
-            }], templates: [{
-                type: ContentChildren,
-                args: [TemplateDirective]
-            }], submitButtonElementRef: [{
-                type: ViewChild,
-                args: ['submitButton']
-            }] } });
+            args: [{ standalone: true, selector: 'mng-form-editor', imports: [FormlyModule, ReactiveFormsModule, MessagesModule, AsyncPipe, ButtonModule], providers: [provideFormComponent()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formlyFields\" [options]=\"formlyOptions\" [model]=\"formlyInitialItem\"></formly-form>\n    <button #submitButton pButton type=\"submit\" class=\"hidden\" [disabled]=\"form.disabled\" [loading]=\"submitLoading()\" loadingIcon=\"pi pi-spin pi-spinner\"></button>\n</form>\n<p-messages [value]=\"formMessages()\" [enableService]=\"false\"></p-messages>\n" }]
+        }], ctorParameters: () => [] });
 
 class ActionEditorInjectorContextComponent {
     constructor() {
         this.ActionActivationTriggerEnum = ActionActivationTriggerEnum;
         this.actionEditorSubmitTypeSubmit = ActionEditorSubmitTypeEnum.Submit;
-        this.destroyRef = inject(DestroyRef);
-        this.route = inject(ActivatedRoute);
         this.translate = inject(TranslateService);
         this.confirmationService = inject(ConfirmationService);
         this.dialogService = inject(DialogService);
@@ -2240,72 +2320,125 @@ class ActionEditorInjectorContextComponent {
         this.commonsService = inject(CommonsService);
         this.actionExecutor = inject(ActionExecutorService);
         this.viewContainer = inject(ViewContainer, { optional: true });
-        this.actionRunEventEmitter = new EventEmitter();
-        this.actionCancelEventEmitter = new EventEmitter();
+        // metadata and editor mode input
+        this.data = input.required();
+        this.actionRun = output();
+        this.actionCancel = output();
+        // content and view queries
+        this.formEditorCmp = viewChild(FormEditorComponent);
+        this.hasTitle = computed(() => this.editorAction().editorTitle !== null);
         this.title = signal(undefined);
         this.isFormDisabled = signal(false);
         // data
         this.item = signal(undefined);
         this.itemId = signal(undefined);
         this.actionData = signal(undefined);
+        this.editorAction = signal({}); // fake initial value
         // actions
-        this.toolbarLeftActions = signal([]);
-        this.toolbarRightActions = signal([]);
-        this.footerLeftActions = signal([]);
-        this.footerRightActions = signal([]);
+        this.actions = computed(() => {
+            const actions = [];
+            for (const action of this.editorAction().editorActions) {
+                if (action instanceof ActionEditorSubmitDescriptorInst) {
+                    if (typeof action.button.icon === 'undefined') {
+                        action.button.withIcon(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'pi pi-check' : 'pi pi-times');
+                    }
+                    if (typeof action.button.label === 'undefined') {
+                        action.button.withLabel(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'general.save' : this.data().isDialog ? 'general.close' : 'general.cancel');
+                    }
+                    // assign run operations
+                    action.withRunNotificationSuccess(undefined, undefined, false);
+                    if (action.submitType === ActionEditorSubmitTypeEnum.Submit) {
+                        action.withRunFunction(() => {
+                            this.triggerSubmit();
+                            return of(null);
+                        });
+                    }
+                    else {
+                        action.withRunFunction(() => {
+                            this.closeWithUnsavedChangesConfirmation();
+                            return of(null);
+                        });
+                    }
+                }
+                actions.push(action);
+            }
+            for (const action of this.viewContainer?.actions().filter(value => value.positionTableviewCategories?.includes(this.editorAction().tableviewCategory)) ?? []) {
+                actions.push(action);
+            }
+            return actions;
+        });
+        this.toolbarLeftActions = computed(() => this.actions().filter(a => a.position === ActionPositionEnum.ToolbarLeft));
+        this.toolbarRightActions = computed(() => this.actions()
+            .filter(a => a.position === ActionPositionEnum.ToolbarRight)
+            .reverse());
+        this.footerLeftActions = computed(() => this.actions().filter(a => a.position === ActionPositionEnum.FooterLeft));
+        this.footerRightActions = computed(() => this.actions()
+            .filter(a => a.position === ActionPositionEnum.FooterRight)
+            .reverse());
+        this.dataProvider = computed(() => this.data().dataProvider ?? this.viewContainer?.dataProvider());
         this.loading = signal(false);
         this.submitLoading = signal(false);
+        // updates for title
         effect(() => {
-            const title = this.title();
-            requestAnimationFrame(() => {
-                if (this.data.dialogConfig) {
-                    this.data.dialogConfig.header = title;
-                }
-                if (this.data.descriptor.activationTrigger === ActionActivationTriggerEnum.OnRoute) {
-                    this.commonsService.setPageTitle(title);
-                }
-            });
+            const hasTitle = this.hasTitle();
+            if (!hasTitle) {
+                this.title.set(undefined);
+            }
+            else {
+                this.titleSubscription?.unsubscribe();
+                this.titleSubscription = getI18nActionEditorTitleAsync(this.translate, this.editorAction(), this.item()).subscribe(t => {
+                    this.title.set(t ?? undefined);
+                });
+            }
+        }, { allowSignalWrites: true });
+        toObservable$1(this.hasTitle)
+            .pipe(combineLatestWith(toObservable$1(this.editorAction), toObservable$1(this.item)), mergeMap$1(([hasTitle, editorAction, item]) => (hasTitle ? getI18nActionEditorTitleAsync(this.translate, editorAction, item) : of(undefined))))
+            .subscribe(title => {
+            this.title.set(title ?? undefined);
+            const dataDialogConfig = this.data().dialogConfig;
+            if (dataDialogConfig) {
+                dataDialogConfig.header = title ?? undefined;
+            }
+            if (this.editorAction().activationTrigger === ActionActivationTriggerEnum.OnRoute) {
+                this.commonsService.setPageTitle(title ?? undefined);
+            }
         });
-    }
-    ngOnInit() {
-        if (this.data.actionInstance) {
-            this.processActionInstance(this.data.actionInstance);
-        }
-        if (!this.data.dataProvider) {
-            this.data.dataProvider = this.viewContainer?.dataProvider;
-        }
-        this.item.set(this.data.item);
-        this.itemId.set(this.data.itemId);
-        this.actionData.set(this.data.actionData);
-        // arrange the sub-actions
-        this.initializeSubActions();
-        // notify executor to for activation to end
-        this.processActionInstance(this.actionExecutor.onActionEditorInit(this.data.descriptor, this.instance, this));
-        // set title
-        this.updateTitle();
         // subscribe to events that could be triggered from outside from any reason
-        this.viewContainer?.editorReset$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+        this.viewContainer?.editorReset$.pipe(takeUntilDestroyed()).subscribe({
             next: e => {
                 if (e.fetch) {
                     this.fetchItem();
                 }
                 else if (e.item) {
-                    this.formEditorCmp?.resetFormModel(e.item);
+                    this.formEditorCmp()?.resetFormModel(e.item);
                 }
                 else if (e.fields) {
                     for (const key in e.fields) {
-                        this.formEditorCmp?.resetFormFieldValue(key, e.fields[key]);
+                        this.formEditorCmp()?.resetFieldValue(key, e.fields[key]);
                     }
                 }
             }
         });
-        this.viewContainer?.editorClose$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+        this.viewContainer?.editorClose$.pipe(takeUntilDestroyed()).subscribe({
             next: () => {
                 this.cancel();
             }
         });
     }
+    ngOnInit() {
+        const data = this.data();
+        this.editorAction.set(data.descriptor);
+        this.item.set(data.item);
+        this.itemId.set(data.itemId);
+        this.actionData.set(data.actionData);
+        if (data.actionInstance) {
+            this.processActionInstance(data.actionInstance);
+        }
+        // notify executor to for activation to end
+        this.processActionInstance(this.actionExecutor.onActionEditorInit(this.editorAction(), this.instance, this));
+    }
     ngOnDestroy() {
+        this.titleSubscription?.unsubscribe();
         this.fetchExecutionSubscription?.unsubscribe();
         this.submitExecutionSubscription?.unsubscribe();
         const instance = this.instance;
@@ -2314,29 +2447,29 @@ class ActionEditorInjectorContextComponent {
     }
     onSubmit(event) {
         if (!this.instance) {
-            throw new CommonsInternalError(`Action is not instantiated in action editor for action ${this.data.descriptor.actionName}.`);
+            throw new CommonsInternalError(`Action is not instantiated in action editor for action ${this.editorAction().actionName}.`);
         }
         if (event.success) {
-            this.instanceSubmitFormItem = event.formItem;
             // prepare parameters
             const actionParameters = {
                 itemId: this.itemId(),
                 item: event.formItem,
                 actionData: this.actionData()
             };
-            if (this.data.descriptor.editorDescriptor.isLocalized) {
-                actionParameters.locale = this.commonsService.appDataLanguageDefault;
+            if (this.editorAction().editorDescriptor.isLocalized) {
+                actionParameters.locale = this.commonsService.getDefaultLocale();
             }
-            const context = this.actionExecutor.prepareContextForEditorSubmit(this.data.descriptor, actionParameters, this.data.dataProvider, this.instance, this.data.previousActionInstance);
+            const context = this.actionExecutor.prepareContextForEditorSubmit(this.editorAction(), actionParameters, this.dataProvider(), this.instance, this.data().previousActionInstance);
             this.submitExecutionSubscription?.unsubscribe();
             this.submitExecutionSubscription = context.execution$.pipe(take$1(1)).subscribe({
                 next: res => {
-                    if (res && typeof res === 'object' && !this.itemId() && this.data.descriptor.model?.idProperty) {
+                    this.lastSubmitItem = event.formItem;
+                    const modelIdProp = this.editorAction().model?.idProperty;
+                    if (res && typeof res === 'object' && !this.itemId() && modelIdProp) {
                         // to cover creation!
-                        this.updateItemId(res[this.data.descriptor.model.idProperty]);
+                        this.updateItemId(res[modelIdProp]);
                     }
-                    this.actionRunEventEmitter.next(res);
-                    this.instanceSubmitResult = res;
+                    this.actionRun.emit(res);
                 }
             });
             this.actionExecutor.run(context);
@@ -2344,10 +2477,10 @@ class ActionEditorInjectorContextComponent {
     }
     cancel() {
         if (!this.instance) {
-            this.logger.warn(`Action editor cannot be canceled for ${this.data.descriptor.actionName}, because no action instance is present`);
+            this.logger.warn(`Action editor cannot be canceled for ${this.editorAction().actionName}, because no action instance is present`);
             return;
         }
-        this.actionCancelEventEmitter.next(undefined);
+        this.actionCancel.emit(undefined);
         this.actionExecutor.finishAction(this.instance);
     }
     updateItemId(itemId) {
@@ -2357,55 +2490,23 @@ class ActionEditorInjectorContextComponent {
         this.item.set(item);
     }
     triggerSubmit() {
-        this.formEditorCmp?.submit();
-    }
-    initializeSubActions() {
-        for (const action of this.data.descriptor.editorActions) {
-            if (action instanceof ActionEditorSubmitDescriptorInst) {
-                if (typeof action.button.icon === 'undefined') {
-                    action.button.withIcon(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'pi pi-check' : 'pi pi-times');
-                }
-                if (typeof action.button.label === 'undefined') {
-                    action.button.withLabel(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'general.save' : this.data.isDialog ? 'general.close' : 'general.cancel');
-                }
-                // assign run operations
-                action.withRunNotificationSuccess(undefined, undefined, false);
-                if (action.submitType === ActionEditorSubmitTypeEnum.Submit) {
-                    action.withRunFunction(() => {
-                        this.triggerSubmit();
-                        return of(null);
-                    });
-                }
-                else {
-                    action.withRunFunction(() => {
-                        this.closeWithUnsavedChangesConfirmation();
-                        return of(null);
-                    });
-                }
-            }
-            this.placeActionsOnPositions(action);
-        }
-        for (const action of this.viewContainer?.actions.filter(value => value.positionTableviewCategories?.includes(this.data.descriptor.tableviewCategory)) ?? []) {
-            this.placeActionsOnPositions(action);
-        }
-        this.toolbarRightActions.update(v => v.reverse());
-        this.footerRightActions.update(v => v.reverse());
+        this.formEditorCmp()?.submit();
     }
     fetchItem() {
         if (!this.instance) {
-            throw new CommonsInternalError(`Action is not instantiated in action editor for action ${this.data.descriptor.actionName}.`);
+            throw new CommonsInternalError(`Action is not instantiated in action editor for action ${this.editorAction().actionName}.`);
         }
         const actionParameters = {
             itemId: this.itemId(),
             item: this.item(),
             actionData: this.actionData()
         };
-        if (this.data.descriptor.editorDescriptor.isLocalized) {
-            if (this.data.descriptor.editorDescriptor.disabled) {
-                actionParameters.locale = this.commonsService.appDataLanguage;
+        if (this.editorAction().editorDescriptor.isLocalized) {
+            if (this.editorAction().editorDescriptor.disabled) {
+                actionParameters.locale = this.commonsService.appDataLocale();
             }
             else {
-                actionParameters.locale = this.commonsService.appDataLanguageDefault;
+                actionParameters.locale = this.commonsService.getDefaultLocale();
             }
         }
         if (this.instance?.previousInstance instanceof ActionInstance && this.instance.previousInstance.context?.parameters.item) {
@@ -2414,39 +2515,13 @@ class ActionEditorInjectorContextComponent {
         if (typeof this.instance?.previousInstance?.result !== 'undefined') {
             actionParameters.submitResult = this.instance?.previousInstance?.result;
         }
-        const context = this.actionExecutor.prepareContextForEditorFetch(this.data.descriptor, actionParameters, this.data.dataProvider, this.instance, this.data.previousActionInstance);
+        const context = this.actionExecutor.prepareContextForEditorFetch(this.editorAction(), actionParameters, this.dataProvider(), this.instance, this.data().previousActionInstance);
         this.fetchExecutionSubscription?.unsubscribe();
         this.fetchExecutionSubscription = context.execution$.pipe(take$1(1)).subscribe(res => {
             this.updateItem(res ?? undefined);
-            this.updateTitle();
         });
         this.actionExecutor.run(context);
     }
-    updateTitle() {
-        if (this.data.descriptor.editorTitle === null) {
-            this.title.set(undefined);
-            return;
-        }
-        getI18nActionEditorTitleAsync(this.translate, this.data.descriptor, this.item()).subscribe(t => {
-            this.title.set(t ?? undefined);
-        });
-    }
-    placeActionsOnPositions(action) {
-        switch (action.position) {
-            case ActionPositionEnum.ToolbarLeft:
-                this.toolbarLeftActions.update(v => [...v, action]);
-                break;
-            case ActionPositionEnum.ToolbarRight:
-                this.toolbarRightActions.update(v => [...v, action]);
-                break;
-            case ActionPositionEnum.FooterLeft:
-                this.footerLeftActions.update(v => [...v, action]);
-                break;
-            case ActionPositionEnum.FooterRight:
-                this.footerRightActions.update(v => [...v, action]);
-                break;
-        }
-    }
     setEditorEnabled(isEnabled = true) {
         this.isFormDisabled.set(!isEnabled);
     }
@@ -2512,6 +2587,8 @@ class ActionEditorInjectorContextComponent {
                         break;
                     case ActionInstanceStateEnum.FinishSuccessReactivateFinal:
                         this.setEditorEnabled(false);
+                        // make copy of item and update title to be on the latest
+                        this.updateItem(objectDeepCopy(this.lastSubmitItem));
                         // should also unsetInstance, but let this for reactivationInstance$ listener to not interfere
                         break;
                 }
@@ -2527,18 +2604,29 @@ class ActionEditorInjectorContextComponent {
         this.instanceReactivationSubscription?.unsubscribe();
     }
     beforeWindowUnload() {
-        if (this.data.isDialog && this.formEditorCmp?.form.pristine === false) {
+        if (this.data().isDialog && this.formEditorCmp()?.form.pristine === false) {
             return confirm(this.translate.instant('mngEditor.unsavedChangesConfirmation.message'));
         }
         return true;
     }
     onEscapePressed() {
-        if (this.data.isDialog &&
-            this.data.descriptor.activationTrigger === ActionActivationTriggerEnum.OnRoute &&
+        if (this.data().isDialog &&
+            this.editorAction().activationTrigger === ActionActivationTriggerEnum.OnRoute &&
             this.instance?.activationDialogRef &&
             parseInt(this.dialogService.dialogComponentRefMap.get(this.instance?.activationDialogRef)?.instance.container?.style.zIndex ?? '') === ZIndexUtils.getCurrent())
             this.closeWithUnsavedChangesConfirmation();
     }
+    closeWithUnsavedChangesConfirmation(callFromGuard = false) {
+        if (this.formEditorCmp()?.form.pristine === false && this.editorAction().unsavedChangesConfirmation) {
+            return this.showUnsavedChangesConfirmationDialog(callFromGuard);
+        }
+        else {
+            if (!callFromGuard) {
+                this.cancel();
+            }
+        }
+        return of(true);
+    }
     showUnsavedChangesConfirmationDialog(callFromGuard) {
         const subject = new Subject();
         this.confirmationService.confirm({
@@ -2561,39 +2649,13 @@ class ActionEditorInjectorContextComponent {
         });
         return subject.asObservable();
     }
-    closeWithUnsavedChangesConfirmation(callFromGuard = false) {
-        if (this.formEditorCmp?.form.pristine === false && this.data.descriptor.unsavedChangesConfirmation) {
-            return this.showUnsavedChangesConfirmationDialog(callFromGuard);
-        }
-        else {
-            if (!callFromGuard) {
-                this.cancel();
-            }
-        }
-        return of(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionEditorInjectorContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ActionEditorInjectorContextComponent, isStandalone: true, selector: "mng-action-editor-injector-context", inputs: { data: "data" }, outputs: { actionRunEventEmitter: "actionSubmit", actionCancelEventEmitter: "actionCancel" }, host: { listeners: { "window:beforeunload": "beforeWindowUnload()", "window:keydown.Escape": "onEscapePressed()" } }, providers: [provideActionExecutor()], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "formEditorCmp", first: true, predicate: FormEditorComponent, descendants: true }], ngImport: i0, template: "@if (!data.isDialog && title()) {\n    <h5>{{ title() }}</h5>\n}\n@if (data.isDialog && data.descriptor.activationTrigger === ActionActivationTriggerEnum.OnRoute) {\n    <span class=\"p-dialog-header dialog-close-button-wrapper\">\n        <button\n            class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n            type=\"button\"\n            (click)=\"closeWithUnsavedChangesConfirmation()\"\n            (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n            <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n        </button>\n    </span>\n}\n<div class=\"h-full flex flex-column\">\n    @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n        <div class=\"flex-grow-1 mng-action-editor-toolbar-container\">\n            <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        </div>\n    }\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        @if (loading()) {\n            <div class=\"text-center\">\n                <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n            </div>\n        }\n        @if (data.descriptor.editorDescriptor && !loading()) {\n            <mng-form-editor [descriptor]=\"data.descriptor.editorDescriptor\" [item]=\"item()\" [isFormDisabled]=\"isFormDisabled()\" (formSubmit)=\"onSubmit($event)\"> </mng-form-editor>\n        }\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            @for (action of footerLeftActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n        <div>\n            @for (action of footerRightActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"], dependencies: [{ kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i1$3.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: FormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isFormDisabled"], outputs: ["formSubmit"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2$3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionEditorInjectorContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ActionEditorInjectorContextComponent, isStandalone: true, selector: "mng-action-editor-injector-context", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionRun: "actionRun", actionCancel: "actionCancel" }, host: { listeners: { "window:beforeunload": "beforeWindowUnload()", "window:keydown.Escape": "onEscapePressed()" } }, providers: [provideActionExecutor()], viewQueries: [{ propertyName: "formEditorCmp", first: true, predicate: FormEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!data().isDialog && title()) {\n    <h5>{{ title() }}</h5>\n}\n@if (data().isDialog && editorAction().activationTrigger === ActionActivationTriggerEnum.OnRoute) {\n    <span class=\"p-dialog-header dialog-close-button-wrapper\">\n        <button\n            class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n            type=\"button\"\n            (click)=\"closeWithUnsavedChangesConfirmation()\"\n            (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n            <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n        </button>\n    </span>\n}\n<div class=\"h-full flex flex-column\">\n    @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n        <div class=\"flex-grow-1 mng-action-editor-toolbar-container\">\n            <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        </div>\n    }\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        @if (loading()) {\n            <div class=\"text-center\">\n                <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n            </div>\n        }\n        @if (editorAction().editorDescriptor && !loading()) {\n            <mng-form-editor [descriptor]=\"editorAction().editorDescriptor\" [item]=\"item()\" [isFormDisabled]=\"isFormDisabled()\" (formSubmit)=\"onSubmit($event)\"> </mng-form-editor>\n        }\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            @for (action of footerLeftActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n        <div>\n            @for (action of footerRightActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"], dependencies: [{ kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i1$3.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: FormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isFormDisabled"], outputs: ["formSubmit"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionEditorInjectorContextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionEditorInjectorContextComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-action-editor-injector-context', imports: [ActionComponent, ProgressSpinnerModule, FormEditorComponent, ComponentDirective, ToolbarModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideActionExecutor()], template: "@if (!data.isDialog && title()) {\n    <h5>{{ title() }}</h5>\n}\n@if (data.isDialog && data.descriptor.activationTrigger === ActionActivationTriggerEnum.OnRoute) {\n    <span class=\"p-dialog-header dialog-close-button-wrapper\">\n        <button\n            class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n            type=\"button\"\n            (click)=\"closeWithUnsavedChangesConfirmation()\"\n            (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n            <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n        </button>\n    </span>\n}\n<div class=\"h-full flex flex-column\">\n    @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n        <div class=\"flex-grow-1 mng-action-editor-toolbar-container\">\n            <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        </div>\n    }\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        @if (loading()) {\n            <div class=\"text-center\">\n                <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n            </div>\n        }\n        @if (data.descriptor.editorDescriptor && !loading()) {\n            <mng-form-editor [descriptor]=\"data.descriptor.editorDescriptor\" [item]=\"item()\" [isFormDisabled]=\"isFormDisabled()\" (formSubmit)=\"onSubmit($event)\"> </mng-form-editor>\n        }\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            @for (action of footerLeftActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n        <div>\n            @for (action of footerRightActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input,
-                args: [{ required: true }]
-            }], actionRunEventEmitter: [{
-                type: Output,
-                args: ['actionSubmit']
-            }], actionCancelEventEmitter: [{
-                type: Output,
-                args: ['actionCancel']
-            }], submitButtonElementRef: [{
-                type: ViewChild,
-                args: ['submitButton']
-            }], formEditorCmp: [{
-                type: ViewChild,
-                args: [FormEditorComponent]
-            }], beforeWindowUnload: [{
+            args: [{ standalone: true, selector: 'mng-action-editor-injector-context', imports: [ActionComponent, ProgressSpinnerModule, FormEditorComponent, ComponentDirective, ToolbarModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideActionExecutor()], template: "@if (!data().isDialog && title()) {\n    <h5>{{ title() }}</h5>\n}\n@if (data().isDialog && editorAction().activationTrigger === ActionActivationTriggerEnum.OnRoute) {\n    <span class=\"p-dialog-header dialog-close-button-wrapper\">\n        <button\n            class=\"p-dialog-header-icon p-dialog-header-maximize p-link\"\n            type=\"button\"\n            (click)=\"closeWithUnsavedChangesConfirmation()\"\n            (keydown.enter)=\"closeWithUnsavedChangesConfirmation()\">\n            <span class=\"p-dialog-header-close-icon pi pi-times\"></span>\n        </button>\n    </span>\n}\n<div class=\"h-full flex flex-column\">\n    @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n        <div class=\"flex-grow-1 mng-action-editor-toolbar-container\">\n            <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions(); track action) {\n                        <mng-action\n                            [action]=\"action\"\n                            [disabled]=\"submitLoading()\"\n                            [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                            [hostComponent]=\"this\"\n                            [item]=\"item()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        </div>\n    }\n\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        @if (loading()) {\n            <div class=\"text-center\">\n                <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n            </div>\n        }\n        @if (editorAction().editorDescriptor && !loading()) {\n            <mng-form-editor [descriptor]=\"editorAction().editorDescriptor\" [item]=\"item()\" [isFormDisabled]=\"isFormDisabled()\" (formSubmit)=\"onSubmit($event)\"> </mng-form-editor>\n        }\n    </div>\n\n    <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n        <div>\n            @for (action of footerLeftActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n        <div>\n            @for (action of footerRightActions(); track action) {\n                <mng-action\n                    [action]=\"action\"\n                    [disabled]=\"submitLoading()\"\n                    [loading]=\"$any(action).submitType === actionEditorSubmitTypeSubmit ? submitLoading() : false\"\n                    [hostComponent]=\"this\"\n                    [item]=\"item()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { beforeWindowUnload: [{
                 type: HostListener,
                 args: ['window:beforeunload']
             }], onEscapePressed: [{
@@ -2602,59 +2664,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             }] } });
 
 class ActionEditorComponent {
-    constructor() {
-        this.injContextCmpType = ActionEditorInjectorContextComponent;
-        this.injector = inject(Injector);
-        this.destroyRef = inject(DestroyRef);
-        this.dialogConfig = inject(DynamicDialogConfig, { optional: true });
-        this.actionRunEventEmitter = new EventEmitter();
-        this.actionCancelEventEmitter = new EventEmitter();
-        this.isDialog = false;
-    }
     get actionEditor() {
         return this.actionEditorWInjContextCmp;
     }
     get formEditorCmp() {
         return this.actionEditor?.formEditorCmp;
     }
-    ngOnInit() {
-        let dialogData = undefined;
-        if (this.dialogConfig?.data) {
-            dialogData = this.dialogConfig.data;
-            this.isDialog = true;
-            // set injector from provided one
-            this.injector = dialogData.injector;
-        }
-        this.actionEditorWInjContextInputData = {
-            isDialog: this.isDialog,
-            dialogConfig: this.dialogConfig ?? undefined,
-            descriptor: dialogData?.action.descriptor ?? this.action,
-            actionInstance: dialogData?.action.instance,
-            previousActionInstance: dialogData?.action.previousInstance,
-            itemId: dialogData?.action.instance.activationParameters?.itemId ?? this.itemIdInput,
-            item: dialogData?.action.instance.activationParameters?.item ?? this.itemInput,
-            actionData: dialogData?.action.instance.activationParameters?.actionData ?? this.actionData,
-            dataProvider: this.dataProvider
-        };
-    }
-    ngOnChanges(changes) {
-        if (changes['itemIdInput'] && !changes['itemIdInput'].firstChange) {
-            this.actionEditorWInjContextCmp?.updateItemId(this.itemIdInput);
-        }
-        if (changes['itemInput'] && !changes['itemInput'].firstChange) {
-            this.actionEditorWInjContextCmp?.updateItem(this.itemInput);
-        }
+    constructor() {
+        this.injContextCmpType = ActionEditorInjectorContextComponent;
+        this.dialogConfig = inject(DynamicDialogConfig, { optional: true });
+        this.action = input.required();
+        this.dialogData = this.dialogConfig?.data;
+        this.isDialog = !!this.dialogData;
+        this.parentInjector = this.dialogData?.injector;
+        // data source inputs
+        this.itemId = input();
+        this.item = input();
+        this.actionData = input();
+        this.dataProvider = input();
+        this.actionRun = output();
+        this.actionCancel = output();
+        this.actionEditorWInjContextInputData = computed(() => {
+            return {
+                isDialog: this.isDialog,
+                dialogConfig: this.dialogConfig ?? undefined,
+                descriptor: this.dialogData?.action.descriptor ?? this.action(),
+                actionInstance: this.dialogData?.action.instance,
+                previousActionInstance: this.dialogData?.action.previousInstance,
+                itemId: this.dialogData?.action.instance.activationParameters?.itemId ?? this.itemId(),
+                item: this.dialogData?.action.instance.activationParameters?.item ?? this.item(),
+                actionData: this.dialogData?.action.instance.activationParameters?.actionData ?? this.actionData,
+                dataProvider: this.dataProvider()
+            };
+        });
+        this.itemIdFirstUpdate = true;
+        this.itemFirstUpdate = true;
+        effect(() => {
+            const itemId = this.itemId();
+            if (!this.itemIdFirstUpdate) {
+                this.actionEditorWInjContextCmp?.updateItemId(itemId);
+            }
+            else {
+                this.itemIdFirstUpdate = false;
+            }
+        });
+        effect(() => {
+            const item = this.item();
+            if (!this.itemFirstUpdate) {
+                this.actionEditorWInjContextCmp?.updateItem(item);
+            }
+            else {
+                this.itemFirstUpdate = false;
+            }
+        });
     }
     onActionEditorWInjContextCmp(cmp) {
         if (this.actionEditorWInjContextCmp) {
             throw new CommonsInternalError('Action editor injection context component is already initialized');
         }
         this.actionEditorWInjContextCmp = cmp;
-        this.actionEditorWInjContextCmp.actionCancelEventEmitter.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(action => {
-            this.actionCancelEventEmitter.emit(action);
+        this.actionEditorWInjContextCmp.actionCancel.subscribe(action => {
+            this.actionCancel.emit(action);
         });
-        this.actionEditorWInjContextCmp.actionRunEventEmitter.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(action => {
-            this.actionRunEventEmitter.emit(action);
+        this.actionEditorWInjContextCmp.actionRun.subscribe(action => {
+            this.actionRun.emit(action);
         });
     }
     cancel() {
@@ -2663,108 +2736,70 @@ class ActionEditorComponent {
     triggerSubmit() {
         this.actionEditorWInjContextCmp?.triggerSubmit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: ActionEditorComponent, isStandalone: true, selector: "mng-action-editor", inputs: { action: "action", itemIdInput: ["itemId", "itemIdInput"], itemInput: ["item", "itemInput"], actionData: "actionData", dataProvider: "dataProvider" }, outputs: { actionRunEventEmitter: "actionSubmit", actionCancelEventEmitter: "actionCancel" }, usesOnChanges: true, hostDirectives: [{ directive: i1$1.DialogKeydownHandlerDirective }], ngImport: i0, template: "<div\n    [mngComponent]=\"injContextCmpType\"\n    [inputs]=\"{\n        data: actionEditorWInjContextInputData\n    }\"\n    [nodeInjector]=\"injector\"\n    (instanceCreated)=\"onActionEditorWInjContextCmp($event)\"></div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.4", type: ActionEditorComponent, isStandalone: true, selector: "mng-action-editor", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionRun: "actionRun", actionCancel: "actionCancel" }, hostDirectives: [{ directive: i3.DialogKeydownHandlerDirective }], ngImport: i0, template: "<div\n    [mngComponent]=\"injContextCmpType\"\n    [inputs]=\"{\n        data: actionEditorWInjContextInputData()\n    }\"\n    [parentInjector]=\"parentInjector\"\n    (instanceCreated)=\"onActionEditorWInjContextCmp($event)\"></div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-action-editor', imports: [ComponentDirective], hostDirectives: [DialogKeydownHandlerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [mngComponent]=\"injContextCmpType\"\n    [inputs]=\"{\n        data: actionEditorWInjContextInputData\n    }\"\n    [nodeInjector]=\"injector\"\n    (instanceCreated)=\"onActionEditorWInjContextCmp($event)\"></div>\n" }]
-        }], propDecorators: { action: [{
-                type: Input,
-                args: [{ required: true }]
-            }], itemIdInput: [{
-                type: Input,
-                args: ['itemId']
-            }], itemInput: [{
-                type: Input,
-                args: ['item']
-            }], actionData: [{
-                type: Input
-            }], dataProvider: [{
-                type: Input
-            }], actionRunEventEmitter: [{
-                type: Output,
-                args: ['actionSubmit']
-            }], actionCancelEventEmitter: [{
-                type: Output,
-                args: ['actionCancel']
-            }] } });
+            args: [{ standalone: true, selector: 'mng-action-editor', imports: [ComponentDirective], hostDirectives: [DialogKeydownHandlerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [mngComponent]=\"injContextCmpType\"\n    [inputs]=\"{\n        data: actionEditorWInjContextInputData()\n    }\"\n    [parentInjector]=\"parentInjector\"\n    (instanceCreated)=\"onActionEditorWInjContextCmp($event)\"></div>\n" }]
+        }], ctorParameters: () => [] });
 
 class DataLanguageDropdownComponent {
-    constructor(commons) {
-        this.commons = commons;
+    constructor() {
         this.viewContainer = inject(ViewContainer, { optional: true });
-        this.triggerActionEventEmitter = new EventEmitter();
-        this.selectionItemsDataProvider = LookupDataProvider.create().withLookup(() => of(commons.appDataLanguages));
-    }
-    updateDataLanguage(dataLang) {
-        this.commons.appDataLanguage = dataLang;
+        this.commons = inject(CommonsService);
+        this.action = input.required();
+        this.actionData = input.required();
+        this.item = input.required();
+        this.itemId = input.required();
+        this.enabled = input.required();
+        this.loading = input.required();
+        this.trigger = output();
+        // dropdown properties
+        this.selectionItemsDataProvider = computed(() => lookupDataProvider().withLookup(() => of(this.commons.appDataLocales())));
+    }
+    updateDataLocale(dataLang) {
+        this.commons.setAppDataLocale(dataLang);
         this.viewContainer?.reloadTable({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DataLanguageDropdownComponent, deps: [{ token: i1$1.CommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: DataLanguageDropdownComponent, isStandalone: true, selector: "mng-data-language-dropdown", inputs: { action: "action", actionData: "actionData", item: "item", itemId: "itemId", enabled: "enabled", loading: "loading" }, outputs: { triggerActionEventEmitter: "triggerActionEventEmitter" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true }], ngImport: i0, template: "<mng-dropdown [dataProvider]=\"selectionItemsDataProvider\" [ngModel]=\"commons.appDataLanguage\" [showClear]=\"false\" (valueChange)=\"updateDataLanguage($event)\"></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"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DataLanguageDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.4", type: DataLanguageDropdownComponent, isStandalone: true, selector: "mng-data-language-dropdown", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { trigger: "trigger" }, ngImport: i0, template: "<mng-dropdown [dataProvider]=\"selectionItemsDataProvider()\" [ngModel]=\"commons.appDataLocale()\" [showClear]=\"false\" (valueChange)=\"updateDataLocale($event)\"></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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DataLanguageDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DataLanguageDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-data-language-dropdown', imports: [DropdownComponent, FormsModule], template: "<mng-dropdown [dataProvider]=\"selectionItemsDataProvider\" [ngModel]=\"commons.appDataLanguage\" [showClear]=\"false\" (valueChange)=\"updateDataLanguage($event)\"></mng-dropdown>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.CommonsService }], propDecorators: { action: [{
-                type: Input,
-                args: [{ required: true }]
-            }], actionData: [{
-                type: Input,
-                args: [{ required: true }]
-            }], item: [{
-                type: Input,
-                args: [{ required: true }]
-            }], itemId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], enabled: [{
-                type: Input,
-                args: [{ required: true }]
-            }], loading: [{
-                type: Input,
-                args: [{ required: true }]
-            }], triggerActionEventEmitter: [{
-                type: Output
-            }], dropdown: [{
-                type: ViewChild,
-                args: [DropdownComponent]
-            }] } });
+            args: [{ standalone: true, selector: 'mng-data-language-dropdown', imports: [DropdownComponent, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown [dataProvider]=\"selectionItemsDataProvider()\" [ngModel]=\"commons.appDataLocale()\" [showClear]=\"false\" (valueChange)=\"updateDataLocale($event)\"></mng-dropdown>\n" }]
+        }] });
 
 class ActionRouteComponent {
-    constructor(router, route, actionExecutor, viewContainer) {
-        this.router = router;
-        this.route = route;
-        this.actionExecutor = actionExecutor;
-        this.viewContainer = viewContainer;
-        this.cmpId = Math.random().toString(36).substring(2);
-        this.actions = [];
-        this.subscriptions = [];
+    constructor() {
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.actionExecutor = inject(ActionExecutorService);
+        this.viewContainer = inject((ViewContainer), { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.actions = this.viewContainer?.actions().filter(a => a.activationTrigger === ActionActivationTriggerEnum.OnRoute) ?? [];
         this.isRouterNavigationInProgress = false;
     }
     ngOnInit() {
-        this.actions = this.viewContainer?.actions.filter(a => a.activationTrigger === ActionActivationTriggerEnum.OnRoute) ?? [];
-        this.subscriptions.push(this.route.params.subscribe(p => {
+        this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(p => {
             const action = this.findActionForRoute(p) ?? undefined;
             if (action) {
                 this.activateAction(action, p, this.route.snapshot.queryParams);
             }
-        }));
-        this.subscriptions.push(this.router.events.subscribe(e => {
+        });
+        this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(e => {
             if (e instanceof NavigationStart) {
                 this.isRouterNavigationInProgress = true;
             }
             else if (e instanceof NavigationEnd || e instanceof NavigationCancel || e instanceof NavigationError || e instanceof NavigationSkipped) {
                 this.isRouterNavigationInProgress = false;
             }
-        }));
+        });
     }
     ngOnDestroy() {
         const instance = this.instance;
         this.unsetInstance();
         this.actionExecutor.onActionRouteDestroy(instance);
-        this.subscriptions.forEach(s => s.unsubscribe());
     }
     activateAction(action, p, qp) {
         const itemId = p['itemId'];
@@ -2840,6 +2875,7 @@ class ActionRouteComponent {
                         this.viewContainer?.reloadTable(); // reload only if no error in action and
                         this.untriggerAction();
                         break;
+                    case ActionInstanceStateEnum.FinishErrorFinal:
                     case ActionInstanceStateEnum.FinishDismissedFinal:
                         this.untriggerAction();
                         break;
@@ -2861,15 +2897,18 @@ class ActionRouteComponent {
         this.instanceStateSubscription?.unsubscribe();
         this.instanceReactivationSubscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionRouteComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: ActionExecutorService }, { token: ViewContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: ActionRouteComponent, isStandalone: true, selector: "mng-action-route", providers: [provideActionExecutor()], ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ActionRouteComponent, isStandalone: true, selector: "mng-action-route", providers: [provideActionExecutor()], ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionRouteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionRouteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-action-route', changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideActionExecutor()], template: "" }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: ActionExecutorService }, { type: ViewContainer, decorators: [{
-                    type: Optional
-                }] }] });
+        }] });
+
+var actionRoute_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: ActionRouteComponent
+});
 
 function calculateTableColumnActionWidth(table, actions) {
     const buttonsWidth = actions.reduce((acc, action) => acc + getActionButtonRoundedWidth(action) + 2 * Styles.ACTION_BUTTON_MARGIN_X, 0);
@@ -2977,10 +3016,10 @@ class ActionTableComponent {
             this.reload();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ActionTableComponent, isStandalone: true, selector: "mng-action-table", inputs: { descriptor: "descriptor", items: "items", result: ["result", "result", (value) => (isObservable(value) ? value : of(value))], loading: ["loading", "loading", boolean$Attribute], dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", globalFilterFields: "globalFilterFields", actions: "actions", captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, providers: [provideActionExecutor()], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true }, { propertyName: "components", predicate: ComponentDirective, descendants: true }], ngImport: i0, template: "<mng-table\n    [descriptor]=\"descriptor\"\n    [items]=\"items\"\n    [result]=\"result\"\n    [loading]=\"loading\"\n    [dataProvider]=\"dataProvider\"\n    [useQueryParams]=\"useQueryParams\"\n    [selectionMode]=\"selectionMode\"\n    [selectionEnabled]=\"selectionEnabled\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [captionComponent]=\"captionComponent\"\n    [columnCustomLastComponent]=\"columnActionComponent\"\n    [columnLastMinWidth]=\"columnActionMinWidth\"\n    (tableLoad)=\"loadEventEmitter.next($event)\"\n    (cellClick)=\"onCellClick($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (captionComponentInstance)=\"captionCmpInstEventEmitter.next($event)\"\n    (columnCustomLastComponentInstance)=\"columnActionCmpInstEventEmitter.next($event)\">\n    @if (!columnActionComponent && rowInlineActions().length > 0) {\n        <ng-template mngTemplate=\"columnCustomLast\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n            @for (action of rowInlineActions(); track action.actionNameLong) {\n                <mng-action\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [hostComponent]=\"this\"\n                    [itemId]=\"descriptor.model.idProperty ? item[descriptor.model.idProperty!] : null\"\n                    [actionData]=\"{itemIndex: idx}\"\n                    (finish)=\"onActionFinish($event)\">\n                </mng-action>\n            }\n        </ng-template>\n    }\n    @if (captionTemplate() && !captionComponent) {\n        <ng-template mngTemplate=\"caption\">\n            <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (rowExpandTemplate()) {\n        <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n        </ng-template>\n    }\n    @if (footerTemplate()) {\n        <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n        </ng-template>\n    }\n</mng-table>\n", dependencies: [{ kind: "component", type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "columnLastMinWidth", "captionComponent", "columnCustomLastComponent", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnCustomLastComponentInstance"] }, { kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ActionTableComponent, isStandalone: true, selector: "mng-action-table", inputs: { descriptor: "descriptor", items: "items", result: ["result", "result", (value) => (isObservable(value) ? value : of(value))], loading: ["loading", "loading", boolean$Attribute], dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", globalFilterFields: "globalFilterFields", actions: "actions", captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, providers: [provideActionExecutor()], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true }, { propertyName: "components", predicate: ComponentDirective, descendants: true }], ngImport: i0, template: "<mng-table\n    [descriptor]=\"descriptor\"\n    [items]=\"items\"\n    [result]=\"result\"\n    [loading]=\"loading\"\n    [dataProvider]=\"dataProvider\"\n    [useQueryParams]=\"useQueryParams\"\n    [selectionMode]=\"selectionMode\"\n    [selectionEnabled]=\"selectionEnabled\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [captionComponent]=\"captionComponent\"\n    [columnCustomLastComponent]=\"columnActionComponent\"\n    [columnLastMinWidth]=\"columnActionMinWidth\"\n    (tableLoad)=\"loadEventEmitter.next($event)\"\n    (cellClick)=\"onCellClick($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (captionComponentInstance)=\"captionCmpInstEventEmitter.next($event)\"\n    (columnCustomLastComponentInstance)=\"columnActionCmpInstEventEmitter.next($event)\">\n    @if (!columnActionComponent && rowInlineActions().length > 0) {\n        <ng-template mngTemplate=\"columnCustomLast\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n            @for (action of rowInlineActions(); track action.actionNameLong) {\n                <mng-action\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [hostComponent]=\"this\"\n                    [itemId]=\"descriptor.model.idProperty ? item[descriptor.model.idProperty!] : null\"\n                    [actionData]=\"{itemIndex: idx}\"\n                    (finish)=\"onActionFinish($event)\">\n                </mng-action>\n            }\n        </ng-template>\n    }\n    @if (captionTemplate() && !captionComponent) {\n        <ng-template mngTemplate=\"caption\">\n            <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (rowExpandTemplate()) {\n        <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n        </ng-template>\n    }\n    @if (footerTemplate()) {\n        <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n        </ng-template>\n    }\n</mng-table>\n", dependencies: [{ kind: "component", type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "columnLastMinWidth", "captionComponent", "columnCustomLastComponent", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnCustomLastComponentInstance"] }, { kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ActionTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ActionTableComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-action-table', imports: [TableComponent, ActionComponent, TemplateDirective, NgTemplateOutlet], providers: [provideActionExecutor()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table\n    [descriptor]=\"descriptor\"\n    [items]=\"items\"\n    [result]=\"result\"\n    [loading]=\"loading\"\n    [dataProvider]=\"dataProvider\"\n    [useQueryParams]=\"useQueryParams\"\n    [selectionMode]=\"selectionMode\"\n    [selectionEnabled]=\"selectionEnabled\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [captionComponent]=\"captionComponent\"\n    [columnCustomLastComponent]=\"columnActionComponent\"\n    [columnLastMinWidth]=\"columnActionMinWidth\"\n    (tableLoad)=\"loadEventEmitter.next($event)\"\n    (cellClick)=\"onCellClick($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (captionComponentInstance)=\"captionCmpInstEventEmitter.next($event)\"\n    (columnCustomLastComponentInstance)=\"columnActionCmpInstEventEmitter.next($event)\">\n    @if (!columnActionComponent && rowInlineActions().length > 0) {\n        <ng-template mngTemplate=\"columnCustomLast\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n            @for (action of rowInlineActions(); track action.actionNameLong) {\n                <mng-action\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [hostComponent]=\"this\"\n                    [itemId]=\"descriptor.model.idProperty ? item[descriptor.model.idProperty!] : null\"\n                    [actionData]=\"{itemIndex: idx}\"\n                    (finish)=\"onActionFinish($event)\">\n                </mng-action>\n            }\n        </ng-template>\n    }\n    @if (captionTemplate() && !captionComponent) {\n        <ng-template mngTemplate=\"caption\">\n            <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (rowExpandTemplate()) {\n        <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n        </ng-template>\n    }\n    @if (footerTemplate()) {\n        <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n        </ng-template>\n    }\n</mng-table>\n" }]
         }], ctorParameters: () => [], propDecorators: { descriptor: [{
@@ -3067,10 +3106,10 @@ class DefaultDataProviderExecutor extends DataProviderExecutor {
     runDelete(ctx, fallback) {
         return fallback ? runFnFromDataProviderOrFallback(ctx, runDeleteFromDataProvider, fallback) : runDeleteFromDataProvider(ctx);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DefaultDataProviderExecutor, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DefaultDataProviderExecutor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DefaultDataProviderExecutor, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DefaultDataProviderExecutor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DefaultDataProviderExecutor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DefaultDataProviderExecutor, decorators: [{
             type: Injectable
         }] });
 
@@ -3084,6 +3123,9 @@ class FormlyFieldActionComponent extends FieldType {
         this.props.fieldComponent = this;
         this.buttonClass = this.descriptor.button.styleClass.build();
     }
+    ngOnDestroy() {
+        this.resultSubscription?.unsubscribe();
+    }
     onClick() {
         this.actionMessage = undefined;
         const result = this.descriptor.runFunction?.({
@@ -3100,7 +3142,8 @@ class FormlyFieldActionComponent extends FieldType {
         });
         if (result) {
             if (isObservable(result)) {
-                result.subscribe(res => this.processResult(res));
+                this.resultSubscription?.unsubscribe();
+                this.resultSubscription = result.subscribe(res => this.processResult(res));
             }
             else {
                 this.processResult(result);
@@ -3112,10 +3155,10 @@ class FormlyFieldActionComponent extends FieldType {
             this.actionMessage = res.message;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldActionComponent, isStandalone: true, selector: "mng-formly-field-action", usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\n    <button\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"$any(descriptor.button.icon)\"\n        [label]=\"$any(descriptor.button.label === null ? null : descriptor.button.label ?? props!.label) | translate\"\n        [pTooltip]=\"$any(descriptor.button.tooltip) | translate\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"onClick()\"\n        [class]=\"buttonClass + (actionMessage ? ' mr-2' : '')\"></button>\n    @if (actionMessage) {\n        <p-message [text]=\"actionMessage.content\" [severity]=\"actionMessage.severity ?? 'success'\"></p-message>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldActionComponent, isStandalone: true, selector: "mng-formly-field-action", usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\n    <button\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"$any(descriptor.button.icon)\"\n        [label]=\"$any(descriptor.button.label === null ? null : descriptor.button.label ?? props!.label) | translate\"\n        [pTooltip]=\"$any(descriptor.button.tooltip) | translate\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"onClick()\"\n        [class]=\"buttonClass + (actionMessage ? ' mr-2' : '')\"></button>\n    @if (actionMessage) {\n        <p-message [text]=\"actionMessage.content\" [severity]=\"actionMessage.severity ?? 'success'\"></p-message>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldActionComponent, decorators: [{
             type: Component,
             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" }]
         }] });
@@ -3123,6 +3166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
 class FormlyFieldAutocompleteComponent extends FieldType {
     constructor() {
         super(...arguments);
+        this.destroyRef = inject(DestroyRef);
         this.subscriptions = [];
     }
     ngOnInit() {
@@ -3130,36 +3174,31 @@ class FormlyFieldAutocompleteComponent extends FieldType {
         this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
         // emit lifecycle event
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldAutocompleteComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        const subscription = this.aFormControl.valueChanges.pipe(startWith(this.aFormControl.value), distinctUntilChanged()).subscribe(v => {
-            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, FormlyFieldAutocompleteComponent, this, {
+        this.aFormControl.valueChanges.pipe(startWith(this.aFormControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
-            if (this.props['onValueChange']) {
-                this.props['onValueChange'](this.field, v);
-            }
+            this.props.onValueChange?.(this.field, v);
         });
-        this.subscriptions.push(subscription);
     }
     ngAfterViewInit() {
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldAutocompleteComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_VIEW_INIT
         });
     }
     ngOnDestroy() {
-        // warning: formly calls on destroy before on init
-        this.subscriptions.forEach(value => value.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldAutocompleteComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", 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"], outputs: ["valueChange"] }, { 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$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldAutocompleteComponent, decorators: [{
+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" }]
         }] });
@@ -3185,10 +3224,10 @@ class FormlyFieldCustomComponent extends FieldType {
             ...this.descriptor.customComponentInputs
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: FormlyFieldCustomComponent, isStandalone: true, selector: "mng-formly-field-custom", usesInheritance: true, ngImport: i0, template: ` <ng-container [mngComponent]="descriptor.customComponentType!" [inputs]="inputs"></ng-container> `, isInline: true, dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldCustomComponent, isStandalone: true, selector: "mng-formly-field-custom", usesInheritance: true, ngImport: i0, template: ` <ng-container [mngComponent]="descriptor.customComponentType!" [inputs]="inputs"></ng-container> `, isInline: true, dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldCustomComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldCustomComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3202,38 +3241,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
 class FormlyFieldDropdownComponent extends FieldType {
     constructor() {
         super(...arguments);
-        this.subscriptions = [];
+        this.destroyRef = inject(DestroyRef);
     }
     ngOnInit() {
         this.dFormControl = this.formControl;
         this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
         // emit lifecycle event
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldDropdownComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        const subscription = this.dFormControl.valueChanges.pipe(startWith(this.dFormControl.value), distinctUntilChanged()).subscribe(v => {
-            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, FormlyFieldDropdownComponent, this, {
+        this.dFormControl.valueChanges.pipe(startWith(this.dFormControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
-            if (this.props['onValueChange']) {
-                this.props['onValueChange'](this.field, v);
-            }
+            this.props.onValueChange?.(this.field, v);
         });
-        this.subscriptions.push(subscription);
     }
     ngOnDestroy() {
-        // warning: formly calls on destroy before on init
-        this.subscriptions.forEach(s => s.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldDropdownComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", 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"], outputs: ["valueChange"] }, { 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$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldDropdownComponent, decorators: [{
+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" }]
         }] });
@@ -3248,67 +3282,57 @@ class FormlyFieldFieldsetComponent extends FieldType {
         this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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$2.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldFieldsetComponent, decorators: [{
             type: Component,
             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 {
-    constructor(applicationLocale, formBuilder, translateService) {
-        super();
-        this.applicationLocale = applicationLocale;
-        this.formBuilder = formBuilder;
-        this.translateService = translateService;
+    constructor() {
+        super(...arguments);
         this.NUMBER_MIN_SAFE = Number.MIN_SAFE_INTEGER;
         this.NUMBER_MAX_SAFE = Number.MAX_SAFE_INTEGER;
         this.DESC_INPUT_TYPE_IMAGE_FILE = FieldInputTypeEnum.ImageFile;
+        this.applicationLocale = inject(LOCALE_ID);
+        this.destroyRef = inject(DestroyRef);
+        this.formBuilder = inject(FormBuilder);
+        this.translateService = inject(TranslateService);
         this.numberFieldMode = 'decimal';
         this.files = [];
-        this.subscriptions = [];
+        this.imageFormArray = this.formBuilder.array([]);
     }
     ngOnInit() {
         this.iFormControl = this.formControl;
         this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
         this.formEditorComponent = this.props.formEditorComponent;
-        this.imageFormArray = this.formBuilder.array([]);
         if (this.descriptor.fieldType === FieldInputTypeEnum.Currency) {
             this.numberFieldMode = 'currency';
             if (this.descriptor.currencyFromProperty) {
-                const currencyFromPropSubscription = this.iFormControl
+                this.iFormControl
                     .get(this.descriptor.currencyFromProperty)
-                    .valueChanges.pipe(startWith(this.model[this.descriptor.currencyFromProperty]), distinctUntilChanged())
+                    .valueChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(this.model[this.descriptor.currencyFromProperty]), distinctUntilChanged())
                     .subscribe(c => {
                     this.currency = c;
                 });
-                this.subscriptions.push(currencyFromPropSubscription);
             }
             else {
                 this.currency = this.descriptor.currency ?? 'EUR';
             }
         }
         // emit lifecycle event
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldInputComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        // init values
-        if (this.props.type === 'datepicker' && typeof this.iFormControl.value === 'string') {
-            const dateObject = new Date(this.iFormControl.value);
-            this.iFormControl.setValue(dateObject);
-            this.iFormControl.markAsPristine();
-        }
-        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged()).subscribe(v => {
-            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, FormlyFieldInputComponent, this, {
+        this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(this.formControl.value), distinctUntilChanged()).subscribe(v => {
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
-            if (this.props['onValueChange']) {
-                this.props['onValueChange'](this.field, v);
-            }
+            this.props.onValueChange?.(this.field, v);
         });
-        this.subscriptions.push(subscription);
         if (this.props.type === 'imageUrl') {
             const startValue = this.iFormControl.value;
             if (this.descriptor.fileMultiple) {
@@ -3330,19 +3354,17 @@ class FormlyFieldInputComponent extends FieldType {
                     this.addImageUrl();
                 }
             }
-            const subscription = this.imageFormArray.valueChanges.pipe(distinctUntilChanged()).subscribe(v => {
+            this.imageFormArray.valueChanges.pipe(takeUntilDestroyed(this.destroyRef), distinctUntilChanged()).subscribe(v => {
                 const fcv = v.filter((i) => !!i && typeof i === 'string' && i.length > 0);
                 this.iFormControl.setValue(fcv.length > 0 ? (this.descriptor.fileMultiple ? fcv : fcv[0]) : undefined);
                 this.iFormControl.updateValueAndValidity();
             });
-            this.subscriptions.push(subscription);
         }
     }
     ngOnDestroy() {
         // warning: formly calls on destroy before on init
-        this.subscriptions.forEach(s => s.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldInputComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
     }
@@ -3378,7 +3400,7 @@ class FormlyFieldInputComponent extends FieldType {
     onImageUrlLoadError() {
         if (this.formEditorComponent) {
             const message = getFormEditorWarningMessage(this.translateService, 'general.error', 'mngEditor.imageLoadError');
-            this.formEditorComponent.formMessages = [...this.formEditorComponent.formMessages, message];
+            this.formEditorComponent.formMessages.set([...this.formEditorComponent.formMessages(), message]);
         }
     }
     updateFileFormControl() {
@@ -3413,10 +3435,10 @@ class FormlyFieldInputComponent extends FieldType {
                 return 'pi-file';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldInputComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.FormBuilder }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldInputComponent, isStandalone: true, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, 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]=\"$any(key)\" class=\"field-radiobutton\">\n                <p-radioButton\n                    [name]=\"$any(key)\"\n                    [value]=\"option.value\"\n                    [formControl]=\"iFormControl\"\n                    [formlyAttributes]=\"field\"\n                    [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n            </div>\n        }\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 ('datepicker') {\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n            [minDate]=\"$any(descriptor.datePickerMin)\"\n            [maxDate]=\"$any(descriptor.datePickerMax)\"\n            [showTime]=\"descriptor.datePickerShowTime ?? false\"\n            [showSeconds]=\"descriptor.datePickerShowSeconds ?? false\"\n            [showIcon]=\"true\"\n            [inputStyleClass]=\"descriptor.inputClassName\"\n            [firstDayOfWeek]=\"1\">\n        </p-calendar>\n    }\n    @case ('mask') {\n        <p-inputMask\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            [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", dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i6.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i8$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i10$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i11.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i12.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i13.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldInputComponent, isStandalone: true, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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"] }, { kind: "component", type: i2$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i6.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i7$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i8$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i9$1.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i11.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i12.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i13.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-formly-field-input', imports: [
                         InputNumberModule,
@@ -3425,7 +3447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                         TranslateModule,
                         InputSwitchModule,
                         RadioButtonModule,
-                        CalendarModule,
                         InputMaskModule,
                         FileUploadModule,
                         ImageModule,
@@ -3434,11 +3455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                         RippleModule,
                         TimesIcon,
                         InputTrimDirective
-                    ], 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]=\"$any(key)\" class=\"field-radiobutton\">\n                <p-radioButton\n                    [name]=\"$any(key)\"\n                    [value]=\"option.value\"\n                    [formControl]=\"iFormControl\"\n                    [formlyAttributes]=\"field\"\n                    [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n            </div>\n        }\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 ('datepicker') {\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n            [minDate]=\"$any(descriptor.datePickerMin)\"\n            [maxDate]=\"$any(descriptor.datePickerMax)\"\n            [showTime]=\"descriptor.datePickerShowTime ?? false\"\n            [showSeconds]=\"descriptor.datePickerShowSeconds ?? false\"\n            [showIcon]=\"true\"\n            [inputStyleClass]=\"descriptor.inputClassName\"\n            [firstDayOfWeek]=\"1\">\n        </p-calendar>\n    }\n    @case ('mask') {\n        <p-inputMask\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            [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" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i1$2.FormBuilder }, { type: i2$1.TranslateService }] });
+                    ], 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 {
     constructor() {
@@ -3450,10 +3468,10 @@ class FormlyFieldLabelComponent extends FieldType {
         this.props.fieldComponent = this;
         this.formControl?.patchValue(this.descriptor.label);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: FormlyFieldLabelComponent, isStandalone: true, selector: "mng-formly-field-label", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldLabelComponent, isStandalone: true, selector: "mng-formly-field-label", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldLabelComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-formly-field-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
         }], propDecorators: { className: [{
@@ -3465,6 +3483,7 @@ class FormlyFieldLookupDialogComponent extends FieldType {
     constructor(injector) {
         super();
         this.injector = injector;
+        this.destroyRef = inject(DestroyRef);
         this.logger = inject(LoggerService).create('FormlyFieldLookupDialogComponent');
         this.fieldLabelFormControl = new FormControl();
         this.addItemsSubject = new ReplaySubject(1);
@@ -3477,13 +3496,12 @@ class FormlyFieldLookupDialogComponent extends FieldType {
         this.dialogSelectedItem = null;
         this.dialogMessages = [];
         this.dialogIsLoading$ = this.dialogIsLoadingSubject.asObservable();
-        this.subscriptions = [];
     }
     ngOnInit() {
         this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
         // emit lifecycle event
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
         this.config = this.descriptor.config;
@@ -3493,7 +3511,7 @@ class FormlyFieldLookupDialogComponent extends FieldType {
         }
         // init values
         this.setFieldLabelValue(this.formControl.value);
-        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged((prev, curr) => {
+        this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged((prev, curr) => {
             const compareProp = this.descriptor.dialogTableDescriptor.trackProperty ?? this.descriptor.dialogTableDescriptor.model.idProperty;
             if (compareProp && typeof prev === 'object' && typeof curr === 'object') {
                 return prev[compareProp] === curr[compareProp];
@@ -3501,28 +3519,23 @@ class FormlyFieldLookupDialogComponent extends FieldType {
             else {
                 return prev === curr;
             }
-        })).subscribe(v => {
+        }), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
             this.setFieldLabelValue(v);
-            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, FormlyFieldLookupDialogComponent, this, {
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
-            if (this.props['onValueChange']) {
-                this.props['onValueChange'](this.field, v);
-            }
+            this.props.onValueChange?.(this.field, v);
         });
-        this.subscriptions.push(subscription);
     }
     ngAfterViewInit() {
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_VIEW_INIT
         });
     }
     ngOnDestroy() {
-        // warning: formly calls on destroy before on init
         this.lookupDataProviderSubscription?.unsubscribe();
-        this.subscriptions.forEach(s => s.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
     }
@@ -3547,14 +3560,14 @@ class FormlyFieldLookupDialogComponent extends FieldType {
                     this.addItemsSubject.next(dataList);
                     this.dialogAreItemsLoaded = true;
                     this.dialogIsLoadingSubject.next(false);
-                    this.descriptor.nextEvent(FormFieldEventTypeEnum.DataProvider, FormlyFieldLookupDialogComponent, this, {
+                    this.descriptor.nextEvent(FormFieldEventTypeEnum.DataProvider, this, {
                         eventSubtype: 'LookupNext',
                         queryResult: dataList
                     });
                 },
                 error: err => {
                     this.dialogIsLoadingSubject.next(false);
-                    this.descriptor.nextEvent(FormFieldEventTypeEnum.DataProvider, FormlyFieldLookupDialogComponent, this, {
+                    this.descriptor.nextEvent(FormFieldEventTypeEnum.DataProvider, this, {
                         eventSubtype: 'LookupError',
                         queryResult: err
                     });
@@ -3568,7 +3581,7 @@ class FormlyFieldLookupDialogComponent extends FieldType {
         this.dialogSelectedItem = null;
         this.isDialogVisible = true;
         this.formControl.markAsTouched();
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, this, {
             eventSubtype: FormFieldEventDialogSubtype.VISIBILITY,
             dialogVisible: true
         });
@@ -3577,13 +3590,13 @@ class FormlyFieldLookupDialogComponent extends FieldType {
         this.dialogSelectedItem = item;
     }
     onCaptionCmpInst(instance) {
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, this, {
             eventSubtype: FormFieldEventDialogSubtype.TABLE_CAPTION_COMPONENT_INSTANCE,
             captionComponentInstance: instance
         });
     }
     onColumnActionCmpInst(instance) {
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, this, {
             eventSubtype: FormFieldEventDialogSubtype.TABLE_COLUMN_ACTIONS_COMPONENT_INSTANCE,
             captionComponentInstance: instance
         });
@@ -3598,7 +3611,7 @@ class FormlyFieldLookupDialogComponent extends FieldType {
     }
     hideDialog() {
         this.isDialogVisible = false;
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, FormlyFieldLookupDialogComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, this, {
             eventSubtype: FormFieldEventDialogSubtype.VISIBILITY,
             dialogVisible: false
         });
@@ -3627,10 +3640,10 @@ class FormlyFieldLookupDialogComponent extends FieldType {
             this.fieldLabelFormControl.setValue(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldLookupDialogComponent, isStandalone: true, selector: "mng-formly-field-lookup-dialog", providers: [provideViewContainer(false)], viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    @if (!props.required && formControl.value && !formControl.disabled) {\n        <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\"></i>\n    }\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate: {item: ''}\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: props.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\" mngDialogKeydownHandler>\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [result]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config.table?.captionComponent\"\n            [columnCustomLastComponent]=\"config.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnCustomLastComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i7$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "columnLastMinWidth", "captionComponent", "columnCustomLastComponent", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnCustomLastComponentInstance"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i3.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]" }, { kind: "directive", type: DialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldLookupDialogComponent, isStandalone: true, selector: "mng-formly-field-lookup-dialog", providers: [provideViewContainer(false)], viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    @if (!props.required && formControl.value && !formControl.disabled) {\n        <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\"></i>\n    }\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate: {item: ''}\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: props.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-dialog mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\" mngDialogKeydownHandler>\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [result]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config.table?.captionComponent\"\n            [columnCustomLastComponent]=\"config.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnCustomLastComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            loadingIcon=\"pi pi-spin pi-spinner\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i7$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "columnLastMinWidth", "captionComponent", "columnCustomLastComponent", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnCustomLastComponentInstance"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i3$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i13.InputText, selector: "[pInputText]" }, { kind: "directive", type: DialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldLookupDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldLookupDialogComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-formly-field-lookup-dialog', imports: [
                         TranslateModule,
@@ -3651,14 +3664,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             }] } });
 
 class FormlyFieldTableDialogFormComponent extends FieldType {
-    constructor(injector) {
-        super();
-        this.injector = injector;
+    constructor() {
+        super(...arguments);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         this.itemsSubject = new ReplaySubject(1);
         this.items$ = this.itemsSubject.asObservable();
         this.actions = [];
         this.toolbarRightActions = [];
-        this.subscriptions = [];
         this.isDisabledSubject = new BehaviorSubject(false);
         this.isEnabled$ = this.isDisabledSubject.asObservable().pipe(distinctUntilChanged(), map(e => !e));
     }
@@ -3680,7 +3693,7 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
                 this.formControl.markAsTouched();
                 return of(ctx.parameters.item || {});
             });
-            viewAction.withEditorActions([ActionEditorSubmitDescriptor.forSecondary(viewAction, ActionEditorSubmitTypeEnum.Cancel)]);
+            viewAction.withEditorActions([actionEditorCancel(viewAction)]);
             viewAction.button.withLabel(null);
             this.actions.push(viewAction);
         }
@@ -3747,7 +3760,8 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
             this.actions.push(editAction);
         }
         if (hasDeleteAction) {
-            const deleteAction = ActionDescriptor.fromModel(this.descriptor.tableviewDescriptor.model, 'delete', {
+            const deleteAction = new ActionDescriptorInst('delete', {
+                model: this.descriptor.tableviewDescriptor.model,
                 parentType: this.descriptor.editor.model.type,
                 parentProperty: this.descriptor.property
             })
@@ -3800,22 +3814,19 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
             this.formControl.patchValue([]);
         }
         // emit lifecycle event
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldTableDialogFormComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        let subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value)).subscribe(v => {
-            this.itemsSubject.next(v);
+        this.formControl.valueChanges.pipe(startWith(this.formControl.value), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
+            this.itemsSubject.next(v ?? []);
             // emit lifecycle event
-            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, FormlyFieldTableDialogFormComponent, this, {
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v
             });
-            if (this.props['onValueChange']) {
-                this.props['onValueChange'](this.field, v);
-            }
+            this.props.onValueChange?.(this.field, v);
         });
-        this.subscriptions.push(subscription);
         this.isDisabledSubject.next(this.formControl.disabled);
-        subscription = this.formControl.statusChanges.pipe().subscribe(status => {
+        this.formControl.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(status => {
             if (status === 'DISABLED' && !this.isDisabledSubject.value) {
                 this.isDisabledSubject.next(true);
             }
@@ -3823,47 +3834,44 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
                 this.isDisabledSubject.next(false);
             }
         });
-        this.subscriptions.push(subscription);
     }
     ngAfterViewInit() {
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldTableDialogFormComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_VIEW_INIT
         });
     }
     ngOnDestroy() {
-        // warning: formly calls on destroy before on init
-        this.subscriptions.forEach(s => s.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldTableDialogFormComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
     }
     hideActionsForRowWithDefaultLocalization(ctx) {
         if (this.descriptor.tableDescriptor.isLocalized) {
-            if (ctx.parameters.item[this.descriptor.tableDescriptor.localizationLocaleProperty] === this.injector.get(CommonsService).defaultDataLanguage) {
+            if (ctx.parameters.item[this.descriptor.tableDescriptor.localizationLocaleProperty] === this.injector.get(CommonsService).getDefaultLocale()) {
                 return true;
             }
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldTableDialogFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldTableDialogFormComponent, isStandalone: true, selector: "mng-formly-table-dialog-form-field", providers: [provideViewContainer(false)], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: ActionTableComponent, selector: "mng-action-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "globalFilterFields", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldTableDialogFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldTableDialogFormComponent, isStandalone: true, selector: "mng-formly-table-dialog-form-field", providers: [provideViewContainer(false)], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: ActionTableComponent, selector: "mng-action-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "globalFilterFields", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldTableDialogFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldTableDialogFormComponent, decorators: [{
             type: Component,
             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"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }] });
 
 class FormlyFieldTableDialogMultiselectComponent extends FieldType {
-    constructor(injector) {
-        super();
-        this.injector = injector;
+    constructor() {
+        super(...arguments);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         this.logger = inject(LoggerService).create('FormlyFieldTableDialogMultiselectComponent');
         this.itemsSubject = new ReplaySubject(1);
         this.itemsAsync = this.itemsSubject.asObservable();
         this.addItemsSubject = new ReplaySubject(1);
         this.addItemsAsync = this.addItemsSubject.asObservable();
-        this.dialogUseDataProvider = false;
         this.dialogDataProviderService = null;
         this.dialogIsLoadingSubject = new ReplaySubject(1);
         this.isDialogVisible = false;
@@ -3873,14 +3881,12 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
         this.hasAddAction = false;
         this.hasDeleteAction = false;
         this.searchDebounceSubject = new Subject();
-        this.subscriptions = [];
     }
     ngOnInit() {
         this.descriptor = this.props.descriptor;
         this.props.fieldComponent = this;
         this.dialogIsLoadingSubject.next(false);
-        if (this.descriptor.lookupTableDataProvider?.serviceType) {
-            this.dialogUseDataProvider = true;
+        if (this.descriptor.lookupTableDataProvider.serviceType) {
             this.dialogDataProviderService = this.injector.get(this.descriptor.lookupTableDataProvider.serviceType);
         }
         this.hasAddAction = this.descriptor.actions.some(a => a === FieldManyToManyEditorActionEnum.Add);
@@ -3890,43 +3896,38 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
             this.formControl.patchValue([]);
         }
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldTableDialogMultiselectComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_INIT
         });
-        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged()).subscribe(v => {
+        this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(v => {
             this.itemsSubject.next(v ?? []);
             // emit lifecycle event
-            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, FormlyFieldTableDialogMultiselectComponent, this, {
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
                 value: v ?? []
             });
-            if (this.props['onValueChange']) {
-                this.props['onValueChange'](this.field, v ?? []);
-            }
+            this.props.onValueChange?.(this.field, v);
         });
-        this.subscriptions.push(this.searchDebounceSubject.pipe(debounceTime(200), distinctUntilChanged()).subscribe(query => {
+        this.searchDebounceSubject.pipe(debounceTime(200), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(query => {
             this.addTableComponent?.primeTable.filterGlobal(query, 'contains');
-        }));
-        this.subscriptions.push(subscription);
+        });
     }
     ngAfterViewInit() {
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldTableDialogMultiselectComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_VIEW_INIT
         });
     }
     ngOnDestroy() {
-        // warning: formly calls on destroy before on init
         this.lookupDataProviderSubscription?.unsubscribe();
-        this.subscriptions.forEach(s => s.unsubscribe());
         // emit lifecycle event
-        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, FormlyFieldTableDialogMultiselectComponent, this, {
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
             eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
         });
     }
     openAddDialog() {
         this.dialogSelectedAddItems = [];
         this.isDialogVisible = true;
-        if (!this.dialogAreItemsLoaded && this.dialogUseDataProvider) {
+        if (!this.dialogAreItemsLoaded) {
             // wrapped in request animation frame due to primeng bug: https://github.com/primefaces/primeng/issues/12980
             requestAnimationFrame(() => {
                 this.dialogIsLoadingSubject.next(true);
@@ -3941,7 +3942,7 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
                         }
                     });
                 }
-                if (this.descriptor.hasLookupExcludeValues) {
+                if (this.descriptor.hasLookupExcludeValues && this.descriptor.lookupTableDataProvider.isLazy) {
                     const filterValues = this.formControl.value.map((i) => getObjectPropertyByPath(i, this.descriptor.excludeValueProperty));
                     params.filters = {
                         [this.descriptor.excludeFilterProperty]: {
@@ -3952,6 +3953,11 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
                 }
                 this.lookupDataProviderSubscription = toObservable(this.descriptor.lookupTableDataProvider?.getAll(params, this.dialogDataProviderService)).subscribe({
                     next: res => {
+                        if (this.descriptor.hasLookupExcludeValues && !this.descriptor.lookupTableDataProvider.isLazy && res && Array.isArray(res.data) && res.data.length > 0) {
+                            const filterValues = this.formControl.value.map((i) => getObjectPropertyByPath(i, this.descriptor.excludeValueProperty));
+                            res.data = res.data.filter(i => filterValues.indexOf(i[this.descriptor.excludeFilterProperty]) < 0);
+                            res.totalCount = res.data.length;
+                        }
                         this.addItemsSubject.next(res);
                         this.dialogAreItemsLoaded = true;
                         this.dialogIsLoadingSubject.next(false);
@@ -3967,7 +3973,7 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
             });
         }
         this.formControl.markAsTouched();
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, FormlyFieldTableDialogMultiselectComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, this, {
             eventSubtype: FormFieldEventDialogSubtype.VISIBILITY,
             dialogVisible: true
         });
@@ -3977,7 +3983,7 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
     }
     hideDialog() {
         this.isDialogVisible = false;
-        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, FormlyFieldTableDialogMultiselectComponent, this, {
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.DialogLifecycle, this, {
             eventSubtype: FormFieldEventDialogSubtype.VISIBILITY,
             dialogVisible: false
         });
@@ -4018,22 +4024,22 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
         const query = event.target.value;
         this.searchDebounceSubject.next(query);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldTableDialogMultiselectComponent, isStandalone: true, selector: "mng-formly-table-multiselect-add-field", providers: [provideViewContainer(false)], viewQueries: [{ propertyName: "addTableComponent", first: true, predicate: ["addTableComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            @if (hasAddAction && !options.formState?.disabled) {\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    icon=\"pi pi-plus\"\n                    class=\"p-button-rounded mng-button-xs\"\n                    (click)=\"openAddDialog()\"\n                    [disabled]=\"formControl!.disabled\"></button>\n            }\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        @if (hasDeleteAction && !options.formState?.disabled) {\n            <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                class=\"p-button-rounded p-button-danger mng-button-xs\"\n                (click)=\"removeItem(item)\"\n                [disabled]=\"formControl!.disabled\"></button>\n        }\n    </ng-template>\n</mng-table>\n\n@if (hasAddAction) {\n    <p-dialog\n        [(visible)]=\"isDialogVisible\"\n        [draggable]=\"false\"\n        [header]=\"'general.addItem' | translate: {item: props.label! | translate}\"\n        [modal]=\"true\"\n        appendTo=\"body\"\n        styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n        <ng-template pTemplate=\"content\" class=\"table-container\" mngDialogKeydownHandler>\n            <div class=\"h-full flex flex-column\">\n                <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                    <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                        <mng-table\n                            #addTableComponent\n                            [descriptor]=\"descriptor.lookupTableDescriptor\"\n                            [globalFilterFields]=\"descriptor.searchFields\"\n                            [result]=\"addItemsAsync\"\n                            [selectionEnabled]=\"true\"\n                            [loading]=\"dialogIsLoading$\"\n                            (selectionChange)=\"onSelectionChange($event)\">\n                            @if (descriptor.searchEnabled) {\n                                <ng-template mngTemplate=\"caption\">\n                                    <div class=\"flex\">\n                                        <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                            <i class=\"pi pi-search\"></i>\n                                            <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                        </span>\n                                    </div>\n                                </ng-template>\n                            }\n                        </mng-table>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                    <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                    <button\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        [label]=\"'general.add' | translate\"\n                        icon=\"pi pi-check\"\n                        class=\"p-button-primary\"\n                        (click)=\"addItems()\"\n                        [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                        loadingIcon=\"pi pi-spin pi-spinner\"\n                        [disabled]=\"form.disabled\"></button>\n                </div>\n            </div>\n        </ng-template>\n    </p-dialog>\n}\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "columnLastMinWidth", "captionComponent", "columnCustomLastComponent", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnCustomLastComponentInstance"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i7$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldTableDialogMultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldTableDialogMultiselectComponent, isStandalone: true, selector: "mng-formly-table-multiselect-add-field", providers: [provideViewContainer(false)], viewQueries: [{ propertyName: "addTableComponent", first: true, predicate: ["addTableComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            @if (hasAddAction && !options.formState?.disabled) {\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    icon=\"pi pi-plus\"\n                    class=\"p-button-rounded mng-button-xs\"\n                    (click)=\"openAddDialog()\"\n                    [disabled]=\"formControl!.disabled\"></button>\n            }\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnCustomLast\" let-item=\"rowItem\">\n        @if (hasDeleteAction && !options.formState?.disabled) {\n            <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                class=\"p-button-rounded p-button-danger mng-button-xs\"\n                (click)=\"removeItem(item)\"\n                [disabled]=\"formControl!.disabled\"></button>\n        }\n    </ng-template>\n</mng-table>\n\n@if (hasAddAction) {\n    <p-dialog\n        [(visible)]=\"isDialogVisible\"\n        [draggable]=\"false\"\n        [header]=\"'general.addItem' | translate: {item: props.label! | translate}\"\n        [modal]=\"true\"\n        appendTo=\"body\"\n        styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n        <ng-template pTemplate=\"content\" class=\"table-container\" mngDialogKeydownHandler>\n            <div class=\"h-full flex flex-column\">\n                <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                    <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                        <mng-table\n                            #addTableComponent\n                            [descriptor]=\"descriptor.lookupTableDescriptor\"\n                            [globalFilterFields]=\"descriptor.searchFields\"\n                            [result]=\"addItemsAsync\"\n                            [selectionEnabled]=\"true\"\n                            [loading]=\"dialogIsLoading$\"\n                            (selectionChange)=\"onSelectionChange($event)\">\n                            @if (descriptor.searchEnabled) {\n                                <ng-template mngTemplate=\"caption\">\n                                    <div class=\"flex\">\n                                        <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                            <i class=\"pi pi-search\"></i>\n                                            <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                        </span>\n                                    </div>\n                                </ng-template>\n                            }\n                        </mng-table>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                    <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                    <button\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        [label]=\"'general.add' | translate\"\n                        icon=\"pi pi-check\"\n                        class=\"p-button-primary\"\n                        (click)=\"addItems()\"\n                        [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                        loadingIcon=\"pi pi-spin pi-spinner\"\n                        [disabled]=\"form.disabled\"></button>\n                </div>\n            </div>\n        </ng-template>\n    </p-dialog>\n}\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "columnLastMinWidth", "captionComponent", "columnCustomLastComponent", "globalFilterFields"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnCustomLastComponentInstance"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i7$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i13.InputText, selector: "[pInputText]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldTableDialogMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldTableDialogMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-formly-table-multiselect-add-field', imports: [TranslateModule, AsyncPipe, TableComponent, DialogModule, ButtonModule, RippleModule, TemplateDirective, InputTextModule, NgStyle, DialogKeydownHandlerDirective], providers: [provideViewContainer(false)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            @if (hasAddAction && !options.formState?.disabled) {\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    icon=\"pi pi-plus\"\n                    class=\"p-button-rounded mng-button-xs\"\n                    (click)=\"openAddDialog()\"\n                    [disabled]=\"formControl!.disabled\"></button>\n            }\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        @if (hasDeleteAction && !options.formState?.disabled) {\n            <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                class=\"p-button-rounded p-button-danger mng-button-xs\"\n                (click)=\"removeItem(item)\"\n                [disabled]=\"formControl!.disabled\"></button>\n        }\n    </ng-template>\n</mng-table>\n\n@if (hasAddAction) {\n    <p-dialog\n        [(visible)]=\"isDialogVisible\"\n        [draggable]=\"false\"\n        [header]=\"'general.addItem' | translate: {item: props.label! | translate}\"\n        [modal]=\"true\"\n        appendTo=\"body\"\n        styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n        <ng-template pTemplate=\"content\" class=\"table-container\" mngDialogKeydownHandler>\n            <div class=\"h-full flex flex-column\">\n                <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                    <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                        <mng-table\n                            #addTableComponent\n                            [descriptor]=\"descriptor.lookupTableDescriptor\"\n                            [globalFilterFields]=\"descriptor.searchFields\"\n                            [result]=\"addItemsAsync\"\n                            [selectionEnabled]=\"true\"\n                            [loading]=\"dialogIsLoading$\"\n                            (selectionChange)=\"onSelectionChange($event)\">\n                            @if (descriptor.searchEnabled) {\n                                <ng-template mngTemplate=\"caption\">\n                                    <div class=\"flex\">\n                                        <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                            <i class=\"pi pi-search\"></i>\n                                            <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                        </span>\n                                    </div>\n                                </ng-template>\n                            }\n                        </mng-table>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                    <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                    <button\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        [label]=\"'general.add' | translate\"\n                        icon=\"pi pi-check\"\n                        class=\"p-button-primary\"\n                        (click)=\"addItems()\"\n                        [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                        loadingIcon=\"pi pi-spin pi-spinner\"\n                        [disabled]=\"form.disabled\"></button>\n                </div>\n            </div>\n        </ng-template>\n    </p-dialog>\n}\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { addTableComponent: [{
+            args: [{ standalone: true, selector: 'mng-formly-table-multiselect-add-field', imports: [TranslateModule, AsyncPipe, TableComponent, DialogModule, ButtonModule, RippleModule, TemplateDirective, InputTextModule, NgStyle, DialogKeydownHandlerDirective], providers: [provideViewContainer(false)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\"\n                >{{ props.label! | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            @if (hasAddAction && !options.formState?.disabled) {\n                <button\n                    pButton\n                    pRipple\n                    type=\"button\"\n                    icon=\"pi pi-plus\"\n                    class=\"p-button-rounded mng-button-xs\"\n                    (click)=\"openAddDialog()\"\n                    [disabled]=\"formControl!.disabled\"></button>\n            }\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnCustomLast\" let-item=\"rowItem\">\n        @if (hasDeleteAction && !options.formState?.disabled) {\n            <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                class=\"p-button-rounded p-button-danger mng-button-xs\"\n                (click)=\"removeItem(item)\"\n                [disabled]=\"formControl!.disabled\"></button>\n        }\n    </ng-template>\n</mng-table>\n\n@if (hasAddAction) {\n    <p-dialog\n        [(visible)]=\"isDialogVisible\"\n        [draggable]=\"false\"\n        [header]=\"'general.addItem' | translate: {item: props.label! | translate}\"\n        [modal]=\"true\"\n        appendTo=\"body\"\n        styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n        <ng-template pTemplate=\"content\" class=\"table-container\" mngDialogKeydownHandler>\n            <div class=\"h-full flex flex-column\">\n                <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n                    <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n                        <mng-table\n                            #addTableComponent\n                            [descriptor]=\"descriptor.lookupTableDescriptor\"\n                            [globalFilterFields]=\"descriptor.searchFields\"\n                            [result]=\"addItemsAsync\"\n                            [selectionEnabled]=\"true\"\n                            [loading]=\"dialogIsLoading$\"\n                            (selectionChange)=\"onSelectionChange($event)\">\n                            @if (descriptor.searchEnabled) {\n                                <ng-template mngTemplate=\"caption\">\n                                    <div class=\"flex\">\n                                        <span class=\"p-input-icon-left ml-auto\" [ngStyle]=\"{width: 'unset'}\">\n                                            <i class=\"pi pi-search\"></i>\n                                            <input pInputText type=\"text\" (input)=\"onSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                                        </span>\n                                    </div>\n                                </ng-template>\n                            }\n                        </mng-table>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n                    <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n                    <button\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        [label]=\"'general.add' | translate\"\n                        icon=\"pi pi-check\"\n                        class=\"p-button-primary\"\n                        (click)=\"addItems()\"\n                        [loading]=\"(dialogIsLoading$ | async) ?? false\"\n                        loadingIcon=\"pi pi-spin pi-spinner\"\n                        [disabled]=\"form.disabled\"></button>\n                </div>\n            </div>\n        </ng-template>\n    </p-dialog>\n}\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"] }]
+        }], propDecorators: { addTableComponent: [{
                 type: ViewChild,
                 args: ['addTableComponent']
             }] } });
 
 class FormlyFieldTabsComponent extends FieldType {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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$5.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i1$5.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyField, selector: "formly-field", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldTabsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-formly-field-tabs', imports: [TabViewModule, TranslateModule, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }] });
@@ -4057,10 +4063,10 @@ class FormlyFieldNoLabelWrapperComponent extends FieldWrapper {
         }
         return field;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldNoLabelWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldNoLabelWrapperComponent, isStandalone: true, selector: "mng-formly-field-no-label-wrapper", usesInheritance: true, ngImport: i0, template: "<div [class]=\"props['descriptor']?.['fieldClassName'] ?? 'field table'\">\n    <ng-container #fieldComponent></ng-container>\n    @if (props['descriptor']?.['helpText']) {\n        <small class=\"block\">{{ props['descriptor']?.['helpText'] | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block p-error\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldNoLabelWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldNoLabelWrapperComponent, isStandalone: true, selector: "mng-formly-field-no-label-wrapper", usesInheritance: true, ngImport: i0, template: "<div [class]=\"props['descriptor']?.['fieldClassName'] ?? 'field table'\">\n    <ng-container #fieldComponent></ng-container>\n    @if (props['descriptor']?.['helpText']) {\n        <small class=\"block\">{{ props['descriptor']?.['helpText'] | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block p-error\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldNoLabelWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldNoLabelWrapperComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-formly-field-no-label-wrapper', imports: [FormlyModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"props['descriptor']?.['fieldClassName'] ?? 'field table'\">\n    <ng-container #fieldComponent></ng-container>\n    @if (props['descriptor']?.['helpText']) {\n        <small class=\"block\">{{ props['descriptor']?.['helpText'] | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block p-error\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n" }]
         }] });
@@ -4081,14 +4087,104 @@ class FormlyFieldWrapperComponent extends FieldWrapper {
             this.props?.['descriptor']?.withHelpText('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormlyFieldWrapperComponent, isStandalone: true, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: FormlyFieldWrapperComponent, isStandalone: true, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormlyFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldWrapperComponent, decorators: [{
             type: Component,
             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 {
+    constructor() {
+        super(...arguments);
+        this.dpFormControl = new FormControl();
+        this.styleClass = signal('');
+        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.dateTimeInUtc = this.moduleConfig?.serialization?.dateTimeInUtc ?? false;
+        this.dateTimeWithTimezone = this.moduleConfig?.serialization?.dateTimeWithTimezone ?? true;
+        this.dateTimeWithMillis = this.moduleConfig?.serialization?.dateTimeWithMillis ?? true;
+    }
+    ngOnInit() {
+        this.descriptor = this.props.descriptor;
+        this.props.fieldComponent = this;
+        // emit lifecycle event
+        this.descriptor.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
+            eventSubtype: FormFieldEventComponentSubtype.ON_INIT
+        });
+        // init status changes
+        this.formControl.statusChanges.pipe(takeUntilDestroyed(this.destroyRef), startWith(this.formControl.status)).subscribe(status => {
+            if (status === 'INVALID') {
+                this.styleClass.set('ng-invalid');
+            }
+            else {
+                this.styleClass.set('ng-valid');
+            }
+            if (status === 'DISABLED' && this.dpFormControl.enabled) {
+                this.dpFormControl.disable({ emitEvent: false });
+            }
+            else if (status !== 'DISABLED' && this.dpFormControl.disabled) {
+                this.dpFormControl.enable({ emitEvent: false });
+            }
+        });
+        // init values from form to datepicker
+        if (typeof this.formControl?.value === 'string' || typeof this.formControl?.value === 'number') {
+            this.dpFormControl.setValue(new Date(this.formControl.value));
+            this.dpFormControl.markAsPristine(); // mark as pristine only on component initialization
+        }
+        this.formControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(formValue => !this.areDateValuesEqual(formValue, this.dpFormControl.value)))
+            .subscribe(v => {
+            this.dpFormControl.setValue(new Date(v), { emitEvent: false }); // do not emit event, because it can trigger infinite loop
+        });
+        // listen for changes from datepicker to form
+        this.dpFormControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(value => !this.areDateValuesEqual(value, this.formControl.value)))
+            .subscribe(v => {
+            v = this.convertDateValue(v);
+            this.formControl.setValue(v);
+            this.descriptor.nextEvent(FormFieldEventTypeEnum.ValueChange, this, {
+                value: v
+            });
+            this.props.onValueChange?.(this.field, v);
+        });
+    }
+    onBlur() {
+        this.formControl.markAsTouched();
+    }
+    convertDateValue(value) {
+        const convertDateType = this.descriptor.datePickerValueNoTime || !this.descriptor.datePickerShowTime ? 'date' : 'date-time';
+        const convertDateTimeOpts = {
+            utc: this.descriptor.datePickerValueUtc ?? this.dateTimeInUtc,
+            noMillis: !this.dateTimeWithMillis,
+            noTimezone: this.descriptor.datePickerValueNoTimezone ?? !this.dateTimeWithTimezone
+        };
+        if (!this.descriptor.datePickerValueAsDateObj) {
+            return dateToIsoString(value, convertDateType, convertDateTimeOpts);
+        }
+        return value;
+    }
+    areDateValuesEqual(val1, val2) {
+        const date1 = this.convertDateValue(val1);
+        const date2 = this.convertDateValue(val2);
+        return (date1 instanceof Date && date2 instanceof Date && date1.toISOString() === date2.toISOString()) || date1 === date2;
+    }
+    ngOnDestroy() {
+        // warning: formly calls on destroy before on init
+        // emit lifecycle event
+        this.descriptor?.nextEvent(FormFieldEventTypeEnum.ComponentLifecycle, this, {
+            eventSubtype: FormFieldEventComponentSubtype.ON_DESTROY
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FormlyFieldDatepickerComponent, isStandalone: true, selector: "mng-formly-field-datepicker", usesInheritance: true, ngImport: i0, template: "<p-calendar\n    appendTo=\"body\"\n    [class]=\"styleClass()\"\n    [formControl]=\"dpFormControl\"\n    [formlyAttributes]=\"field\"\n    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n    [minDate]=\"$any(descriptor.datePickerMin)\"\n    [maxDate]=\"$any(descriptor.datePickerMax)\"\n    [showTime]=\"descriptor.datePickerShowTime ?? false\"\n    [showSeconds]=\"descriptor.datePickerShowSeconds ?? false\"\n    [showIcon]=\"true\"\n    [inputStyleClass]=\"descriptor.inputClassName\"\n    [firstDayOfWeek]=\"1\"\n    (onBlur)=\"onBlur()\">\n</p-calendar>\n", dependencies: [{ 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"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i3$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FormlyFieldDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-formly-field-datepicker', imports: [ReactiveFormsModule, FormlyModule, CalendarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-calendar\n    appendTo=\"body\"\n    [class]=\"styleClass()\"\n    [formControl]=\"dpFormControl\"\n    [formlyAttributes]=\"field\"\n    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n    [minDate]=\"$any(descriptor.datePickerMin)\"\n    [maxDate]=\"$any(descriptor.datePickerMax)\"\n    [showTime]=\"descriptor.datePickerShowTime ?? false\"\n    [showSeconds]=\"descriptor.datePickerShowSeconds ?? false\"\n    [showIcon]=\"true\"\n    [inputStyleClass]=\"descriptor.inputClassName\"\n    [firstDayOfWeek]=\"1\"\n    (onBlur)=\"onBlur()\">\n</p-calendar>\n" }]
+        }] });
+
 const formlyWrappersConfig = [
     { name: 'field', component: FormlyFieldWrapperComponent },
     { name: 'field-no-label', component: FormlyFieldNoLabelWrapperComponent }
@@ -4161,12 +4257,13 @@ const formlyTypesConfig = [
     },
     {
         name: 'datepicker',
-        extends: 'input',
+        component: FormlyFieldDatepickerComponent,
         defaultOptions: {
             props: {
                 type: 'datepicker'
             }
-        }
+        },
+        wrappers: ['field']
     },
     {
         name: 'mask',
@@ -4369,77 +4466,60 @@ function commonsFormlyConfigProvider(translate, datePipe, config = {}) {
 class TableviewComponent {
     constructor() {
         this.viewContainer = inject(ViewContainer, { optional: true });
-        this.actions = [];
-        this.tableActions = [];
-        this.toolbarLeftActions = [];
-        this.toolbarRightActions = [];
-        this.hasItemSelectionAction = false;
-        this.selectedItems = [];
+        this.descriptor = input.required();
+        this.dataProvider = input();
+        this.actions = input([]);
+        this.toolbarLeftActions = computed(() => this.filterActionsByPositions(this.actions(), [ActionPositionEnum.ToolbarLeft]));
+        this.toolbarRightActions = computed(() => this.filterActionsByPositions(this.actions(), [ActionPositionEnum.ToolbarRight]).reverse());
+        this.tableActions = computed(() => this.filterActionsByPositions(this.actions(), [ActionPositionEnum.TableHeader, ActionPositionEnum.RowInline, ActionPositionEnum.RowClick]));
+        this.tableParams = signal(undefined);
+        this.hasItemSelectionAction = computed(() => [...this.toolbarLeftActions(), ...this.toolbarRightActions()].some(e => e.hasItemsSelection));
+        this.selectedItems = signal([]);
         this.templates = contentChildren(TemplateDirective);
         this.footerTemplate = computed(() => findTemplateByName([...this.templates()], 'footer'));
         this.rowExpandTemplate = computed(() => findTemplateByName([...this.templates()], 'rowExpandContent'));
     }
     ngOnInit() {
         if (this.viewContainer) {
-            this.viewContainer.actions = this.actions;
-        }
-        if (this.viewContainer && this.dataProvider) {
-            this.viewContainer.dataProvider = this.dataProvider;
+            this.viewContainer.actions.set(this.actions());
         }
-        for (const action of this.actions.filter(value => value.positionTableviewCategories?.includes(TableviewActionDefaultCategories.READ) ?? true)) {
-            switch (action.position) {
-                case ActionPositionEnum.ToolbarLeft:
-                    this.toolbarLeftActions.push(action);
-                    break;
-                case ActionPositionEnum.ToolbarRight:
-                    this.toolbarRightActions.push(action);
-                    break;
-                case ActionPositionEnum.TableHeader:
-                case ActionPositionEnum.RowInline:
-                case ActionPositionEnum.RowClick:
-                    this.tableActions.push(action);
-                    break;
-            }
+        const dataProvider = this.dataProvider();
+        if (this.viewContainer && dataProvider) {
+            this.viewContainer.dataProvider.set(dataProvider);
         }
-        this.toolbarRightActions = this.toolbarRightActions.reverse();
-        this.hasItemSelectionAction = [...this.toolbarLeftActions, ...this.toolbarRightActions].some(e => e.hasItemsSelection);
     }
     onTableLoad(event) {
-        this.tableParams = event.params;
+        this.tableParams.set(event.params);
     }
     selectionChange(selectedItems) {
-        this.selectedItems = selectedItems;
+        this.selectedItems.set(selectedItems);
+    }
+    filterActionsByPositions(actions, actionPositions) {
+        return actions.filter(action => (action.positionTableviewCategories?.includes(TableviewActionDefaultCategories.READ) ?? true) && actionPositions.includes(action.position));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: TableviewComponent, isStandalone: true, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [provideViewContainer()], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <div class=\"card\">\n        @if (toolbarLeftActions.length > 0 || toolbarRightActions.length > 0) {\n            <p-toolbar styleClass=\"mb-4\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions; track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions; track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        }\n\n        <mng-action-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n            @if (rowExpandTemplate()) {\n                <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n                    <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                </ng-template>\n            }\n\n            @if (footerTemplate()) {\n                <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n                </ng-template>\n            }\n        </mng-action-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2$3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: ActionTableComponent, selector: "mng-action-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "globalFilterFields", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TableviewComponent, isStandalone: true, selector: "mng-tableview", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideViewContainer()], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <div class=\"card\">\n        @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n            <p-toolbar styleClass=\"mb-4\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions(); track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams()\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions(); track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams()\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        }\n\n        <mng-action-table\n            [descriptor]=\"descriptor().table\"\n            [dataProvider]=\"dataProvider()\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions()\"\n            [selectionEnabled]=\"hasItemSelectionAction()\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor().tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n            @if (rowExpandTemplate()) {\n                <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n                    <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                </ng-template>\n            }\n\n            @if (footerTemplate()) {\n                <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n                </ng-template>\n            }\n        </mng-action-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: ActionTableComponent, selector: "mng-action-table", inputs: ["descriptor", "items", "result", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "globalFilterFields", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableviewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-tableview', imports: [ToolbarModule, SharedModule, TranslateModule, NgTemplateOutlet, ActionComponent, ActionTableComponent, TemplateDirective, RouterOutlet], providers: [provideViewContainer()], template: "<div class=\"mng-tableview\">\n    <div class=\"card\">\n        @if (toolbarLeftActions.length > 0 || toolbarRightActions.length > 0) {\n            <p-toolbar styleClass=\"mb-4\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions; track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions; track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        }\n\n        <mng-action-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n            @if (rowExpandTemplate()) {\n                <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n                    <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                </ng-template>\n            }\n\n            @if (footerTemplate()) {\n                <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n                </ng-template>\n            }\n        </mng-action-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
-        }], propDecorators: { descriptor: [{
-                type: Input,
-                args: [{ required: true }]
-            }], dataProvider: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }] } });
+            args: [{ standalone: true, selector: 'mng-tableview', imports: [ToolbarModule, SharedModule, TranslateModule, NgTemplateOutlet, ActionComponent, ActionTableComponent, TemplateDirective, RouterOutlet], providers: [provideViewContainer()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mng-tableview\">\n    <div class=\"card\">\n        @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n            <p-toolbar styleClass=\"mb-4\">\n                <ng-template pTemplate=\"left\">\n                    @for (action of toolbarLeftActions(); track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams()\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template pTemplate=\"right\">\n                    @for (action of toolbarRightActions(); track action) {\n                        <mng-action [action]=\"action\" [dataListParams]=\"tableParams()\" [hostComponent]=\"this\" [selectedItems]=\"selectedItems()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        }\n\n        <mng-action-table\n            [descriptor]=\"descriptor().table\"\n            [dataProvider]=\"dataProvider()\"\n            [useQueryParams]=\"true\"\n            [actions]=\"tableActions()\"\n            [selectionEnabled]=\"hasItemSelectionAction()\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor().tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n            @if (rowExpandTemplate()) {\n                <ng-template mngTemplate=\"rowExpandContent\" let-item=\"rowItem\">\n                    <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                </ng-template>\n            }\n\n            @if (footerTemplate()) {\n                <ng-template mngTemplate=\"footer\" let-data=\"data\" let-totalCount=\"totalCount\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data, totalCount}\"></ng-container>\n                </ng-template>\n            }\n        </mng-action-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
+        }] });
 
 class TableviewRouteComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableviewRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: TableviewRouteComponent, isStandalone: true, selector: "mng-tableview-route", inputs: { tableview: "tableview" }, ngImport: i0, template: "<mng-tableview [descriptor]=\"tableview.descriptor\" [dataProvider]=\"tableview.dataProvider\" [actions]=\"tableview.actions\"> </mng-tableview>\n", dependencies: [{ kind: "component", type: TableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] }); }
+    constructor() {
+        this.tableview = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableviewRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.4", type: TableviewRouteComponent, isStandalone: true, selector: "mng-tableview-route", inputs: { tableview: { classPropertyName: "tableview", publicName: "tableview", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mng-tableview [descriptor]=\"tableview().descriptor\" [dataProvider]=\"tableview().dataProvider\" [actions]=\"tableview().actions\"> </mng-tableview>\n", dependencies: [{ kind: "component", type: TableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableviewRouteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableviewRouteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-tableview-route', imports: [TableviewComponent], template: "<mng-tableview [descriptor]=\"tableview.descriptor\" [dataProvider]=\"tableview.dataProvider\" [actions]=\"tableview.actions\"> </mng-tableview>\n" }]
-        }], propDecorators: { tableview: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+            args: [{ standalone: true, selector: 'mng-tableview-route', imports: [TableviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-tableview [descriptor]=\"tableview().descriptor\" [dataProvider]=\"tableview().dataProvider\" [actions]=\"tableview().actions\"> </mng-tableview>\n" }]
+        }] });
 
-class TableviewRouteBuilderInternal extends RouteBuilder {
-    constructor(path, options) {
-        super({ path: path, component: options.component ?? TableviewRouteBuilder });
+class TableviewRouteBuilder extends RouteBuilder {
+    constructor(path, component, loadComponent) {
+        super({ path: path, component, loadComponent });
         this.path = path;
         this.isFromComponent = true;
         this.routeData = { breadcrumb: null };
@@ -4450,28 +4530,6 @@ class TableviewRouteBuilderInternal extends RouteBuilder {
         this.hasAdd = true;
         this.addPath = 'add';
         this.hasDelete = true;
-        if (!options.component) {
-            this.isFromComponent = false;
-            this.descriptor = options.descriptor;
-            this.dataProvider = options.dataProvider;
-            this.actions = options.actions;
-            this.hasDetails = false;
-            this.hasAdd = false;
-            this.hasEdit = false;
-            if (this.actions) {
-                for (const action of this.actions) {
-                    if (action instanceof ActionEditorDetailsDescriptorInst) {
-                        this.hasDetails = true;
-                    }
-                    else if (action instanceof ActionEditorAddDescriptorInst) {
-                        this.hasAdd = true;
-                    }
-                    else if (action instanceof ActionEditorEditDescriptorInst) {
-                        this.hasEdit = true;
-                    }
-                }
-            }
-        }
     }
     withReadOnly(permissions) {
         if (permissions) {
@@ -4577,12 +4635,11 @@ class TableviewRouteBuilderInternal extends RouteBuilder {
         // copy route data for children, reset breadcrumbs menu items and permission
         const childrenRouteData = {
             ...this.routeData,
-            breadcrumb: null,
-            menuItems: undefined,
-            permissions: undefined
+            breadcrumb: null
         };
+        const loadActionRoute = () => Promise.resolve().then(function () { return actionRoute_component; });
         // list route
-        const rootChildRouteBuilder = RouteBuilder.create('', ActionRouteComponent);
+        const rootChildRouteBuilder = createLazyRoute('', loadActionRoute);
         rootChildRouteBuilder.withData({ ...childrenRouteData });
         if (this.tableviewPermissions?.[TableviewActionDefaultCategories.READ]) {
             rootChildRouteBuilder.withPermissions(this.tableviewPermissions[TableviewActionDefaultCategories.READ]);
@@ -4590,7 +4647,7 @@ class TableviewRouteBuilderInternal extends RouteBuilder {
         this.addChildBuilder(rootChildRouteBuilder);
         // add route
         if (this.hasAdd) {
-            const routeBuilder = RouteBuilder.create(this.addPath, ActionRouteComponent);
+            const routeBuilder = createLazyRoute(this.addPath, loadActionRoute);
             routeBuilder.withData({ ...childrenRouteData });
             if (this.tableviewPermissions?.[TableviewActionDefaultCategories.ADD]) {
                 routeBuilder.withPermissions(this.tableviewPermissions[TableviewActionDefaultCategories.ADD]);
@@ -4599,7 +4656,7 @@ class TableviewRouteBuilderInternal extends RouteBuilder {
             routeBuilder.withCanDeactivate(unsavedChangesGuard);
         }
         if (this.hasDetails) {
-            const routeBuilder = RouteBuilder.create(this.detailsPath, ActionRouteComponent);
+            const routeBuilder = createLazyRoute(this.detailsPath, loadActionRoute);
             routeBuilder.withData({ ...childrenRouteData });
             if (this.tableviewPermissions?.[TableviewActionDefaultCategories.DETAILS]) {
                 routeBuilder.withPermissions(this.tableviewPermissions[TableviewActionDefaultCategories.DETAILS]);
@@ -4607,7 +4664,7 @@ class TableviewRouteBuilderInternal extends RouteBuilder {
             this.addChildBuilder(routeBuilder);
         }
         if (this.hasEdit) {
-            const routeBuilder = RouteBuilder.create(this.editPath, ActionRouteComponent);
+            const routeBuilder = createLazyRoute(this.editPath, loadActionRoute);
             routeBuilder.withData({ ...childrenRouteData });
             if (this.tableviewPermissions?.[TableviewActionDefaultCategories.EDIT]) {
                 routeBuilder.withPermissions(this.tableviewPermissions[TableviewActionDefaultCategories.EDIT]);
@@ -4625,13 +4682,11 @@ class TableviewRouteBuilderInternal extends RouteBuilder {
         return menuItemPermission;
     }
 }
-class TableviewRouteBuilder {
-    static fromComponent(path, component) {
-        return new TableviewRouteBuilderInternal(path, { component });
-    }
-    static from(path, descriptor, dataProvider, actions) {
-        return new TableviewRouteBuilderInternal(path, { descriptor, dataProvider, actions });
-    }
+function createTableviewRoute(path, component) {
+    return new TableviewRouteBuilder(path, component);
+}
+function createTableviewLazyRoute(path, loadComponent) {
+    return new TableviewRouteBuilder(path, undefined, loadComponent);
 }
 
 /**
@@ -4687,5 +4742,5 @@ function withTableview(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_EDITOR_COMPONENT_IT, ActionComponent, ActionContext, ActionEditorComponent, ActionErrorMapperService, ActionExecutorService, ActionInstance, ActionInstanceStateEnum, ActionRouteComponent, ActionTableComponent, COMMONS_TABLEVIEW_FEATURE_CONFIG_IT, ComponentActionExecutorService, DataLanguageDropdownComponent, DefaultActionErrorMapperService, DefaultDataProviderExecutor, FormEditorComponent, FormlyFieldActionComponent, FormlyFieldAutocompleteComponent, FormlyFieldCustomComponent, FormlyFieldDropdownComponent, FormlyFieldFieldsetComponent, FormlyFieldInputComponent, FormlyFieldLabelComponent, FormlyFieldLookupDialogComponent, FormlyFieldNoLabelWrapperComponent, FormlyFieldTableDialogFormComponent, FormlyFieldTableDialogMultiselectComponent, FormlyFieldTabsComponent, FormlyFieldWrapperComponent, NavigationService, RootActionExecutorService, TableviewComponent, TableviewRouteBuilder, TableviewRouteBuilderInternal, TableviewRouteComponent, ViewContainer, actionNotificationError, actionNotificationSuccess, addAsyncValidationsToFormlyField, addValidationsToFormlyField, calculateTableColumnActionWidth, commonsFormlyConfigProvider, createFormlyConfigFromDescriptor, createFormlyField, createFormlyFields, createFormlyGroupType, createFormlyLocalizationsTab, createFormlyTabType, formlyTypesConfig, formlyWrappersConfig, getActionButtonRoundedWidth, getEmailValidationMessage, getFormEditorInfoMessage, getFormEditorWarningMessage, getFormlyValidationMessages, getI18nActionEditorTitleAsync, getI18nActionParams, getI18nActionParamsAsync, getI18nActionTitleAsync, getI18nForAction, getI18nForActionAsync, getMaxDateValidationMessage, getMaxLengthValidationMessage, getMaxValidationMessage, getMinDateValidationMessage, getMinLengthValidationMessage, getMinValidationMessage, getRequiredValidationMessage, getTableCellPaddingX, getTextPatternValidationMessage, populateI18nActionParams, provideActionExecutor, provideViewContainer, unsavedChangesGuard, withTableview };
+export { ACTION_EDITOR_COMPONENT_IT, ActionComponent, ActionContext, ActionEditorComponent, ActionErrorMapperService, ActionExecutorService, ActionInstance, ActionInstanceStateEnum, ActionTableComponent, COMMONS_TABLEVIEW_FEATURE_CONFIG_IT, ComponentActionExecutorService, DataLanguageDropdownComponent, DefaultActionErrorMapperService, DefaultDataProviderExecutor, FormEditorComponent, FormEditorService, FormlyFieldActionComponent, FormlyFieldAutocompleteComponent, FormlyFieldCustomComponent, FormlyFieldDropdownComponent, FormlyFieldFieldsetComponent, FormlyFieldInputComponent, FormlyFieldLabelComponent, FormlyFieldLookupDialogComponent, FormlyFieldNoLabelWrapperComponent, FormlyFieldTableDialogFormComponent, FormlyFieldTableDialogMultiselectComponent, FormlyFieldTabsComponent, FormlyFieldWrapperComponent, NavigationService, RootActionExecutorService, TableviewComponent, TableviewRouteBuilder, TableviewRouteComponent, ViewContainer, actionNotificationError, actionNotificationSuccess, addAsyncValidationsToFormlyField, addValidationsToFormlyField, calculateTableColumnActionWidth, commonsFormlyConfigProvider, createFormlyConfigFromDescriptor, createFormlyField, createFormlyFields, createFormlyGroupType, createFormlyLocalizationsTab, createFormlyTabType, createFormlyValidation, createTableviewLazyRoute, createTableviewRoute, formlyTypesConfig, formlyWrappersConfig, getActionButtonRoundedWidth, getEmailValidationMessage, getFormEditorInfoMessage, getFormEditorWarningMessage, getFormlyValidationMessages, getI18nActionEditorTitleAsync, getI18nActionParams, getI18nActionParamsAsync, getI18nActionTitleAsync, getI18nForAction, getI18nForActionAsync, getMaxDateValidationMessage, getMaxLengthValidationMessage, getMaxValidationMessage, getMinDateValidationMessage, getMinLengthValidationMessage, getMinValidationMessage, getRequiredValidationMessage, getTableCellPaddingX, getTextPatternValidationMessage, populateI18nActionParams, provideActionExecutor, provideFormComponent, provideViewContainer, unsavedChangesGuard, withTableview };
 //# sourceMappingURL=mediusinc-mng-commons-tableview.mjs.map