@mediusinc/mng-commons 6.1.0-rc.0 → 6.1.0-rc.1

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

@@ -2753,7 +2753,7 @@ class ActionEditorInjectorContextComponent {
         this.actionRun = output();
         this.actionCancel = output();
         // content and view queries
-        this.formEditorCmp = viewChild(FormEditorComponent);
+        this.formEditorCmp = viewChild((FormEditorComponent));
         this.hasTitle = computed(() => this.editorAction().editorTitle !== null);
         this.title = signal(undefined);
         this.isFormDisabled = signal(false);
@@ -2895,11 +2895,8 @@ class ActionEditorInjectorContextComponent {
         }
         if (event.success) {
             // prepare parameters
-            const actionParameters = {
-                itemId: this.itemId(),
-                item: event.formItem,
-                actionData: this.actionData()
-            };
+            const actionParameters = this.getActionParams();
+            actionParameters.item = event.formItem;
             if (this.editorAction().editorDescriptor.isLocalized) {
                 actionParameters.locale = this.commonsService.getDefaultLocale();
             }
@@ -2946,11 +2943,7 @@ class ActionEditorInjectorContextComponent {
         if (!this.instance) {
             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()
-        };
+        const actionParameters = this.getActionParams();
         if (this.editorAction().editorDescriptor.isLocalized) {
             if (this.editorAction().editorDescriptor.disabled) {
                 actionParameters.locale = this.commonsService.appDataLocale();
@@ -3123,8 +3116,16 @@ class ActionEditorInjectorContextComponent {
             this.formEditorCmp()?.resetFormModel();
         }
     }
+    getActionParams() {
+        return {
+            itemId: this.itemId(),
+            item: this.item(),
+            actionData: this.actionData(),
+            sourceComponent: this
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ActionEditorInjectorContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 mng-action-editor-dialog-close-button-wrapper\">\n        <button\n            class=\"p-dialog-header-icon p-dialog-header-maximize\"\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-col\">\n    @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n        <div class=\"grow mng-action-editor-toolbar-container\">\n            <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n                <ng-template #start>\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]=\"formValue()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template #end>\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]=\"formValue()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        </div>\n    }\n\n    <div class=\"grow 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\n                [descriptor]=\"editorAction().editorDescriptor\"\n                [editorId]=\"editorAction().actionNameLong\"\n                [item]=\"item()\"\n                [itemId]=\"itemId()\"\n                [isFormDisabled]=\"isFormDisabled()\"\n                showAutoSaveStatus=\"false\"\n                (valueChange)=\"onValueChange($event)\"\n                (formSubmit)=\"onSubmit($event)\"\n                (autoSaveStatus)=\"onAutoSave($event)\" />\n        }\n    </div>\n\n    <div class=\"flex flex-row justify-between items-center 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]=\"formValue()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n            @if (editorAction().editorDescriptor.autoSave) {\n                <mng-editor-auto-save-status [status]=\"autoSaveStatus()\"></mng-editor-auto-save-status>\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]=\"formValue()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".p-dialog.mng-dialog.mng-action-editor-dialog .p-dialog-header.mng-action-editor-dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}mng-action-editor-injector-context.p-toolbar.mng-action-editor-toolbar{border:none}\n"], dependencies: [{ kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: FormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isFormDisabled", "editorId", "itemId", "showAutoSaveStatus"], outputs: ["itemChange", "formSubmit", "valueChange", "autoSaveStatus"] }, { kind: "component", type: EditorAutoSaveStatusComponent, selector: "mng-editor-auto-save-status", inputs: ["status"] }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 mng-action-editor-dialog-close-button-wrapper\">\n        <button\n            class=\"p-dialog-header-icon p-dialog-header-maximize\"\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-col\">\n    @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n        <div class=\"grow mng-action-editor-toolbar-container\">\n            <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n                <ng-template #start>\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]=\"formValue()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n                <ng-template #end>\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]=\"formValue()\"\n                            [itemId]=\"itemId()\"></mng-action>\n                    }\n                </ng-template>\n            </p-toolbar>\n        </div>\n    }\n\n    <div class=\"grow 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\n                [descriptor]=\"editorAction().editorDescriptor\"\n                [editorId]=\"editorAction().actionNameLong\"\n                [item]=\"item()\"\n                [itemId]=\"itemId()\"\n                [isFormDisabled]=\"isFormDisabled()\"\n                showAutoSaveStatus=\"false\"\n                (valueChange)=\"onValueChange($event)\"\n                (formSubmit)=\"onSubmit($event)\"\n                (autoSaveStatus)=\"onAutoSave($event)\" />\n        }\n    </div>\n\n    <div class=\"flex flex-row justify-between items-center 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]=\"formValue()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n            @if (editorAction().editorDescriptor.autoSave) {\n                <mng-editor-auto-save-status [status]=\"autoSaveStatus()\"></mng-editor-auto-save-status>\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]=\"formValue()\"\n                    [itemId]=\"itemId()\"></mng-action>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".p-dialog.mng-dialog.mng-action-editor-dialog .p-dialog-header.mng-action-editor-dialog-close-button-wrapper{position:absolute;top:1.286rem;right:1.714rem;background:transparent;padding:0}mng-action-editor-injector-context.p-toolbar.mng-action-editor-toolbar{border:none}\n"], dependencies: [{ kind: "component", type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataListParams", "dataProvider", "hostComponent", "route", "disabled", "loading", "selectedItems"], outputs: ["finish"] }, { kind: "component", type: FormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isFormDisabled", "editorId", "itemId", "showAutoSaveStatus"], outputs: ["itemChange", "formSubmit", "valueChange", "autoSaveStatus"] }, { kind: "component", type: EditorAutoSaveStatusComponent, selector: "mng-editor-auto-save-status", inputs: ["status"] }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ActionEditorInjectorContextComponent, decorators: [{
             type: Component,
@@ -3523,6 +3524,79 @@ function provideViewContainer(provideParentIfPresent = true) {
     };
 }
 
+class TableviewComponent {
+    constructor() {
+        this.viewContainer = inject(ViewContainer, { optional: true });
+        this.actionTable = viewChild.required((ActionTableComponent));
+        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.set(this.actions());
+        }
+        const dataProvider = this.dataProvider();
+        if (this.viewContainer && dataProvider) {
+            this.viewContainer.dataProvider.set(dataProvider);
+        }
+    }
+    onTableLoad(event) {
+        // TODO: table item in event
+        this.tableParams.set(event.params);
+    }
+    selectionChange(selectedItems) {
+        // TODO: table item in selected item
+        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: "19.2.10", ngImport: i0, type: TableviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }], viewQueries: [{ propertyName: "actionTable", first: true, predicate: (ActionTableComponent), descendants: true, 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-6\">\n                <ng-template #start>\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 #end>\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            @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", styles: [".mng-tableview .p-paginator .p-paginator-current{margin-left:auto}.mng-tableview .p-progressbar{height:.5rem;background-color:#d8dadc}.mng-tableview .p-progressbar .p-progressbar-value{background-color:#607d8b}.mng-tableview .p-datatable .p-datatable-scrollable-table>.p-datatable-thead{z-index:2}.mng-tableview .p-datatable .p-datatable-loading-overlay{z-index:3}.mng-tableview .p-datatable .p-datatable-header{text-align:left;font-size:1.5rem}.mng-tableview .p-datatable .p-datatable-thead>tr>th{text-align:left}\n"], dependencies: [{ 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", "tableClassName", "selectionMode", "selectionEnabled", "globalFilterFields", "rowReorderEnabled", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance", "rowReorder"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["mngTemplate"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-tableview', imports: [NgTemplateOutlet, ActionComponent, ActionTableComponent, TemplateDirective, RouterOutlet, Toolbar], providers: [provideViewContainer()], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mng-tableview\">\n    <div class=\"card\">\n        @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n            <p-toolbar styleClass=\"mb-6\">\n                <ng-template #start>\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 #end>\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            @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", styles: [".mng-tableview .p-paginator .p-paginator-current{margin-left:auto}.mng-tableview .p-progressbar{height:.5rem;background-color:#d8dadc}.mng-tableview .p-progressbar .p-progressbar-value{background-color:#607d8b}.mng-tableview .p-datatable .p-datatable-scrollable-table>.p-datatable-thead{z-index:2}.mng-tableview .p-datatable .p-datatable-loading-overlay{z-index:3}.mng-tableview .p-datatable .p-datatable-header{text-align:left;font-size:1.5rem}.mng-tableview .p-datatable .p-datatable-thead>tr>th{text-align:left}\n"] }]
+        }] });
+
+function getActionParentFormEditor(ctx, editorType) {
+    return ctx.injector.get(FormEditorService, null, { optional: true });
+}
+/**
+ * Retrieves the form editor service associated with a given action editor context. Only applicable for action editor.
+ *
+ * @param {IActionEditorContext<Item, ParentItem, any, any>} ctx - The action editor context containing parameters and state.
+ *
+ * @return {FormEditorService<Item, ParentItem> | null} The form editor service if available, or null if not found.
+ */
+function getActionFormEditor(ctx) {
+    if (ctx.parameters.sourceComponent instanceof ActionEditorInjectorContextComponent) {
+        return ctx.parameters.sourceComponent.formEditorCmp()?.formService ?? null;
+    }
+    return null;
+}
+/**
+ * Retrieves the parent table associated with the given action context and table descriptor. Applies when actions are placed on table or table within tableview.
+ *
+ * @param {IActionContext<any, any, any, any>} ctx - The action context from which the table is resolved.
+ * @param {TableDescriptorInst<Item, Sorts, Filters> | ModelDescriptor<Item> | TypeDescriptor<Item>} tableType - The descriptor of the table that needs to be retrieved.
+ *
+ * @return {TableComponent<Item, Sorts, Filters> | null} The parent table associated with the action context and descriptor, or null if not found.
+ */
+function getActionParentTable(ctx, tableType) {
+    return (ctx.injector.get(ActionTableComponent, null, { optional: true }) ?? ctx.injector.get(TableviewComponent, null, { optional: true })?.actionTable())?.table() ?? null;
+}
+
 class DefaultDataProviderExecutor extends DataProviderExecutor {
     runGetAll(ctx, fallback) {
         return fallback ? runFnFromDataProviderOrFallback(ctx, runGetAllFromDataProvider, fallback) : runGetAllFromDataProvider(ctx);
@@ -3993,7 +4067,7 @@ class FormlyFieldInputComponent extends ACommonsFormlyFieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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            [styleClass]=\"controlClassName()\"\n            [inputStyleClass]=\"controlInputClassName()\"\n            [locale]=\"descriptor.locale ?? applicationLocale\"\n            [mode]=\"numberFieldMode\"\n            [prefix]=\"descriptor.numberPrefix\"\n            [suffix]=\"descriptor.numberSuffix\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"descriptor.currencyDisplay\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\n        </p-inputNumber>\n    }\n    @case ('switch') {\n        <div class=\"flex flex-col\">\n            <label [for]=\"key\" [class]=\"labelClassName()\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            <p-toggle-switch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-toggle-switch>\n            @if (showError) {\n                <small class=\"mng-validation-messages\">\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=\"mb-2\">\n                <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'ml-2 ' + (descriptor.radioLabelClassName ?? '')\">{{ option.title | translate }}</label>\n            </div>\n        }\n    }\n    @case ('textarea') {\n        <textarea\n            [id]=\"$any(key)\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [rows]=\"descriptor.rows ?? 3\"\n            pTextarea\n            [class]=\"controlWithInputClassName()\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\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 ?? '' | translate\"\n            [slotChar]=\"$any(descriptor.slotChar)\"\n            [styleClass]=\"controlWithInputClassName()\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\" />\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            chooseStyleClass=\"p-button-sm p-button-outlined\"\n            cancelStyleClass=\"p-button-sm p-button-outlined\"\n            [styleClass]=\"controlClassName()\"\n            mode=\"advanced\"\n            (onSelect)=\"onFileSelect($event)\"\n            (onRemove)=\"onFileRemove($event)\"\n            (onClear)=\"onFileClear($event)\">\n            <ng-template #file let-file let-idx=\"index\">\n                <div class=\"p-fileupload-file\">\n                    <div>\n                        @if (fileUploadInput.isImage(file)) {\n                            @if (descriptor.imagePreview) {\n                                @if (descriptor.imagePreviewComponent) {\n                                    <ng-container\n                                        [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                        [inputs]=\"{\n                                            imageUrl: file.objectURL\n                                        }\">\n                                    </ng-container>\n                                } @else if (!isFileImageSvg(file) || descriptor.imagePreviewAllowSvg) {\n                                    <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                                } @else {\n                                    <span class=\"flex items-center justify-center\">\n                                        <i class=\"pi pi-image text-2xl\"></i>\n                                    </span>\n                                }\n                            } @else {\n                                <span class=\"flex items-center justify-center\">\n                                    <i class=\"pi pi-image text-2xl\"></i>\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"flex items-center justify-center\">\n                                <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                            </span>\n                        }\n                    </div>\n                    <div class=\"p-fileupload-file-info\">\n                        <div class=\"p-fileupload-file-name\">{{ file.name }}</div>\n                        <span class=\"p-fileupload-file-size\">{{ fileUploadInput.formatSize(file.size) }}</span>\n                    </div>\n                    <div class=\"p-fileupload-file-actions\">\n                        <p-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            size=\"small\"\n                            outlined=\"true\"\n                            rounded=\"true\"\n                            (click)=\"fileUploadInput.remove($event, idx)\"\n                            [disabled]=\"fileUploadInput.uploading\" />\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template #empty>\n                <div class=\"text-gray-300 mng-fileupload-dragdrop-zone\">\n                    <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n                </div>\n            </ng-template>\n        </p-fileUpload>\n    }\n    @case ('imageUrl') {\n        <div>\n            @if (descriptor.imagePreview) {\n                <div class=\"flex flex-wrap justify-start\">\n                    @for (image of imageFormArray.controls; track image; let idx = $index) {\n                        @if (imageFormArray.at(idx).valid && imageFormArray.at(idx).value) {\n                            @if (descriptor.imagePreviewComponent) {\n                                <ng-container\n                                    [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                    [inputs]=\"{\n                                        imageUrl: imageFormArray.at(idx).value\n                                    }\">\n                                </ng-container>\n                            } @else if (!isUrlSvgImage(imageFormArray.at(idx).value) || descriptor.imagePreviewAllowSvg) {\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 mng-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                    }\n                </div>\n            }\n            @if (!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled) {\n                @for (imageCtrlName of imageFormArray.controls; track imageCtrlName; let idx = $index) {\n                    <p-inputgroup [styleClass]=\"controlClassName() + ' mb-1'\">\n                        <input\n                            pInputText\n                            [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                            [id]=\"$any(key)\"\n                            type=\"text\"\n                            [class]=\"controlInputClassName()\"\n                            [formControl]=\"$any(imageFormArray.at(idx))\"\n                            [formlyAttributes]=\"field\" />\n                        @if (descriptor.fileMultiple && !iFormControl.disabled && imageFormArray.controls.length > 1) {\n                            <p-inputgroup-addon>\n                                <p-button type=\"button\" icon=\"pi pi-minus\" severity=\"secondary\" (click)=\"removeImageUrlAt(idx)\"></p-button>\n                            </p-inputgroup-addon>\n                        }\n                    </p-inputgroup>\n                }\n                @if (descriptor.fileMultiple && !iFormControl.disabled) {\n                    <p-button\n                        type=\"button\"\n                        icon=\"pi pi-plus\"\n                        size=\"small\"\n                        severity=\"primary\"\n                        outlined=\"true\"\n                        styleClass=\"mt-2\"\n                        [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                        (click)=\"addImageUrl()\"></p-button>\n                }\n            }\n        </div>\n    }\n    @default {\n        <input\n            pInputText\n            [class]=\"controlWithInputClassName()\"\n            [id]=\"$any(key)\"\n            [type]=\"props.type || 'text'\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\" />\n    }\n}\n", styles: ["mng-formly-field-input .mng-image.p-image-preview{height:150px}mng-formly-field-input .mng-image.p-image-preview img{max-height:100%}mng-formly-field-input .mng-image.p-image-preview.mng-no-image{width:150px}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator{background-color:var(--p-surface-200);height:100%;opacity:1;cursor:default;display:flex;align-items:center;justify-content:center}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator .p-image-preview-icon{color:var(--p-primary-800);font-size:1.5rem}mng-formly-field-input .p-fileupload .p-fileupload-content{gap:var(--mng-fileupload-content-gap, 0);padding:var(--p-panel-header-padding)}mng-formly-field-input .p-fileupload .p-fileupload-content .p-progressbar{display:none}mng-formly-field-input .p-fileupload .p-fileupload-content .mng-fileupload-dragdrop-zone{height:5rem;display:flex;border:dashed;border-radius:8px;align-items:center;justify-content:center}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file>div:first-child{flex-grow:0;flex-shrink:0;width:50px;padding:0}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file img{max-width:100%}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar span.p-fileupload-choose{width:auto}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar p-button button{width:auto}\n"], dependencies: [{ kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { 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: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "component", type: FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "pipe", type: FormlyFieldLabelPipe, name: "mngFormlyFieldLabel" }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: 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: "directive", type: InputEmptyValueDirective, selector: "[mngInputEmptyValue]", inputs: ["mngInputEmptyValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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            [styleClass]=\"controlClassName()\"\n            [inputStyleClass]=\"controlInputClassName()\"\n            [locale]=\"descriptor.locale ?? applicationLocale\"\n            [mode]=\"numberFieldMode\"\n            [prefix]=\"descriptor.numberPrefix\"\n            [suffix]=\"descriptor.numberSuffix\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"descriptor.currencyDisplay\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\n        </p-inputNumber>\n    }\n    @case ('switch') {\n        <div class=\"flex flex-col\">\n            <label [for]=\"key\" [class]=\"labelClassName()\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            <p-toggle-switch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-toggle-switch>\n            @if (showError) {\n                <small class=\"mng-field-validation-messages\">\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=\"mb-2\">\n                <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'ml-2 ' + (descriptor.radioLabelClassName ?? '')\">{{ option.title | translate }}</label>\n            </div>\n        }\n    }\n    @case ('textarea') {\n        <textarea\n            [id]=\"$any(key)\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [rows]=\"descriptor.rows ?? 3\"\n            pTextarea\n            [class]=\"controlWithInputClassName()\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\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 ?? '' | translate\"\n            [slotChar]=\"$any(descriptor.slotChar)\"\n            [styleClass]=\"controlWithInputClassName()\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\" />\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            chooseStyleClass=\"p-button-sm p-button-outlined\"\n            cancelStyleClass=\"p-button-sm p-button-outlined\"\n            [styleClass]=\"controlClassName()\"\n            mode=\"advanced\"\n            (onSelect)=\"onFileSelect($event)\"\n            (onRemove)=\"onFileRemove($event)\"\n            (onClear)=\"onFileClear($event)\">\n            <ng-template #file let-file let-idx=\"index\">\n                <div class=\"p-fileupload-file\">\n                    <div>\n                        @if (fileUploadInput.isImage(file)) {\n                            @if (descriptor.imagePreview) {\n                                @if (descriptor.imagePreviewComponent) {\n                                    <ng-container\n                                        [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                        [inputs]=\"{\n                                            imageUrl: file.objectURL\n                                        }\">\n                                    </ng-container>\n                                } @else if (!isFileImageSvg(file) || descriptor.imagePreviewAllowSvg) {\n                                    <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                                } @else {\n                                    <span class=\"flex items-center justify-center\">\n                                        <i class=\"pi pi-image text-2xl\"></i>\n                                    </span>\n                                }\n                            } @else {\n                                <span class=\"flex items-center justify-center\">\n                                    <i class=\"pi pi-image text-2xl\"></i>\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"flex items-center justify-center\">\n                                <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                            </span>\n                        }\n                    </div>\n                    <div class=\"p-fileupload-file-info\">\n                        <div class=\"p-fileupload-file-name\">{{ file.name }}</div>\n                        <span class=\"p-fileupload-file-size\">{{ fileUploadInput.formatSize(file.size) }}</span>\n                    </div>\n                    <div class=\"p-fileupload-file-actions\">\n                        <p-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            size=\"small\"\n                            outlined=\"true\"\n                            rounded=\"true\"\n                            (click)=\"fileUploadInput.remove($event, idx)\"\n                            [disabled]=\"fileUploadInput.uploading\" />\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template #empty>\n                <div class=\"text-gray-300 mng-fileupload-dragdrop-zone\">\n                    <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n                </div>\n            </ng-template>\n        </p-fileUpload>\n    }\n    @case ('imageUrl') {\n        <div>\n            @if (descriptor.imagePreview) {\n                <div class=\"flex flex-wrap justify-start\">\n                    @for (image of imageFormArray.controls; track image; let idx = $index) {\n                        @if (imageFormArray.at(idx).valid && imageFormArray.at(idx).value) {\n                            @if (descriptor.imagePreviewComponent) {\n                                <ng-container\n                                    [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                    [inputs]=\"{\n                                        imageUrl: imageFormArray.at(idx).value\n                                    }\">\n                                </ng-container>\n                            } @else if (!isUrlSvgImage(imageFormArray.at(idx).value) || descriptor.imagePreviewAllowSvg) {\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 mng-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                    }\n                </div>\n            }\n            @if (!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled) {\n                @for (imageCtrlName of imageFormArray.controls; track imageCtrlName; let idx = $index) {\n                    <p-inputgroup [styleClass]=\"controlClassName() + ' mb-1'\">\n                        <input\n                            pInputText\n                            [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                            [id]=\"$any(key)\"\n                            type=\"text\"\n                            [class]=\"controlInputClassName()\"\n                            [formControl]=\"$any(imageFormArray.at(idx))\"\n                            [formlyAttributes]=\"field\" />\n                        @if (descriptor.fileMultiple && !iFormControl.disabled && imageFormArray.controls.length > 1) {\n                            <p-inputgroup-addon>\n                                <p-button type=\"button\" icon=\"pi pi-minus\" severity=\"secondary\" (click)=\"removeImageUrlAt(idx)\"></p-button>\n                            </p-inputgroup-addon>\n                        }\n                    </p-inputgroup>\n                }\n                @if (descriptor.fileMultiple && !iFormControl.disabled) {\n                    <p-button\n                        type=\"button\"\n                        icon=\"pi pi-plus\"\n                        size=\"small\"\n                        severity=\"primary\"\n                        outlined=\"true\"\n                        styleClass=\"mt-2\"\n                        [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                        (click)=\"addImageUrl()\"></p-button>\n                }\n            }\n        </div>\n    }\n    @default {\n        <input\n            pInputText\n            [class]=\"controlWithInputClassName()\"\n            [id]=\"$any(key)\"\n            [type]=\"props.type || 'text'\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\" />\n    }\n}\n", styles: ["mng-formly-field-input .mng-image.p-image-preview{height:150px}mng-formly-field-input .mng-image.p-image-preview img{max-height:100%}mng-formly-field-input .mng-image.p-image-preview.mng-no-image{width:150px}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator{background-color:var(--p-surface-200);height:100%;opacity:1;cursor:default;display:flex;align-items:center;justify-content:center}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator .p-image-preview-icon{color:var(--p-primary-800);font-size:1.5rem}mng-formly-field-input .p-fileupload .p-fileupload-content{gap:var(--mng-fileupload-content-gap, 0);padding:var(--p-panel-header-padding)}mng-formly-field-input .p-fileupload .p-fileupload-content .p-progressbar{display:none}mng-formly-field-input .p-fileupload .p-fileupload-content .mng-fileupload-dragdrop-zone{height:5rem;display:flex;border:dashed;border-radius:8px;align-items:center;justify-content:center}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file>div:first-child{flex-grow:0;flex-shrink:0;width:50px;padding:0}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file img{max-width:100%}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar span.p-fileupload-choose{width:auto}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar p-button button{width:auto}\n"], dependencies: [{ kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { 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: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "component", type: FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "pipe", type: FormlyFieldLabelPipe, name: "mngFormlyFieldLabel" }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: 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: "directive", type: InputEmptyValueDirective, selector: "[mngInputEmptyValue]", inputs: ["mngInputEmptyValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FormlyFieldInputComponent, decorators: [{
             type: Component,
@@ -4016,7 +4090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ToggleSwitch,
                         Image,
                         InputEmptyValueDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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            [styleClass]=\"controlClassName()\"\n            [inputStyleClass]=\"controlInputClassName()\"\n            [locale]=\"descriptor.locale ?? applicationLocale\"\n            [mode]=\"numberFieldMode\"\n            [prefix]=\"descriptor.numberPrefix\"\n            [suffix]=\"descriptor.numberSuffix\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"descriptor.currencyDisplay\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\n        </p-inputNumber>\n    }\n    @case ('switch') {\n        <div class=\"flex flex-col\">\n            <label [for]=\"key\" [class]=\"labelClassName()\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            <p-toggle-switch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-toggle-switch>\n            @if (showError) {\n                <small class=\"mng-validation-messages\">\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=\"mb-2\">\n                <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'ml-2 ' + (descriptor.radioLabelClassName ?? '')\">{{ option.title | translate }}</label>\n            </div>\n        }\n    }\n    @case ('textarea') {\n        <textarea\n            [id]=\"$any(key)\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [rows]=\"descriptor.rows ?? 3\"\n            pTextarea\n            [class]=\"controlWithInputClassName()\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\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 ?? '' | translate\"\n            [slotChar]=\"$any(descriptor.slotChar)\"\n            [styleClass]=\"controlWithInputClassName()\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\" />\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            chooseStyleClass=\"p-button-sm p-button-outlined\"\n            cancelStyleClass=\"p-button-sm p-button-outlined\"\n            [styleClass]=\"controlClassName()\"\n            mode=\"advanced\"\n            (onSelect)=\"onFileSelect($event)\"\n            (onRemove)=\"onFileRemove($event)\"\n            (onClear)=\"onFileClear($event)\">\n            <ng-template #file let-file let-idx=\"index\">\n                <div class=\"p-fileupload-file\">\n                    <div>\n                        @if (fileUploadInput.isImage(file)) {\n                            @if (descriptor.imagePreview) {\n                                @if (descriptor.imagePreviewComponent) {\n                                    <ng-container\n                                        [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                        [inputs]=\"{\n                                            imageUrl: file.objectURL\n                                        }\">\n                                    </ng-container>\n                                } @else if (!isFileImageSvg(file) || descriptor.imagePreviewAllowSvg) {\n                                    <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                                } @else {\n                                    <span class=\"flex items-center justify-center\">\n                                        <i class=\"pi pi-image text-2xl\"></i>\n                                    </span>\n                                }\n                            } @else {\n                                <span class=\"flex items-center justify-center\">\n                                    <i class=\"pi pi-image text-2xl\"></i>\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"flex items-center justify-center\">\n                                <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                            </span>\n                        }\n                    </div>\n                    <div class=\"p-fileupload-file-info\">\n                        <div class=\"p-fileupload-file-name\">{{ file.name }}</div>\n                        <span class=\"p-fileupload-file-size\">{{ fileUploadInput.formatSize(file.size) }}</span>\n                    </div>\n                    <div class=\"p-fileupload-file-actions\">\n                        <p-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            size=\"small\"\n                            outlined=\"true\"\n                            rounded=\"true\"\n                            (click)=\"fileUploadInput.remove($event, idx)\"\n                            [disabled]=\"fileUploadInput.uploading\" />\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template #empty>\n                <div class=\"text-gray-300 mng-fileupload-dragdrop-zone\">\n                    <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n                </div>\n            </ng-template>\n        </p-fileUpload>\n    }\n    @case ('imageUrl') {\n        <div>\n            @if (descriptor.imagePreview) {\n                <div class=\"flex flex-wrap justify-start\">\n                    @for (image of imageFormArray.controls; track image; let idx = $index) {\n                        @if (imageFormArray.at(idx).valid && imageFormArray.at(idx).value) {\n                            @if (descriptor.imagePreviewComponent) {\n                                <ng-container\n                                    [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                    [inputs]=\"{\n                                        imageUrl: imageFormArray.at(idx).value\n                                    }\">\n                                </ng-container>\n                            } @else if (!isUrlSvgImage(imageFormArray.at(idx).value) || descriptor.imagePreviewAllowSvg) {\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 mng-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                    }\n                </div>\n            }\n            @if (!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled) {\n                @for (imageCtrlName of imageFormArray.controls; track imageCtrlName; let idx = $index) {\n                    <p-inputgroup [styleClass]=\"controlClassName() + ' mb-1'\">\n                        <input\n                            pInputText\n                            [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                            [id]=\"$any(key)\"\n                            type=\"text\"\n                            [class]=\"controlInputClassName()\"\n                            [formControl]=\"$any(imageFormArray.at(idx))\"\n                            [formlyAttributes]=\"field\" />\n                        @if (descriptor.fileMultiple && !iFormControl.disabled && imageFormArray.controls.length > 1) {\n                            <p-inputgroup-addon>\n                                <p-button type=\"button\" icon=\"pi pi-minus\" severity=\"secondary\" (click)=\"removeImageUrlAt(idx)\"></p-button>\n                            </p-inputgroup-addon>\n                        }\n                    </p-inputgroup>\n                }\n                @if (descriptor.fileMultiple && !iFormControl.disabled) {\n                    <p-button\n                        type=\"button\"\n                        icon=\"pi pi-plus\"\n                        size=\"small\"\n                        severity=\"primary\"\n                        outlined=\"true\"\n                        styleClass=\"mt-2\"\n                        [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                        (click)=\"addImageUrl()\"></p-button>\n                }\n            }\n        </div>\n    }\n    @default {\n        <input\n            pInputText\n            [class]=\"controlWithInputClassName()\"\n            [id]=\"$any(key)\"\n            [type]=\"props.type || 'text'\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\" />\n    }\n}\n", styles: ["mng-formly-field-input .mng-image.p-image-preview{height:150px}mng-formly-field-input .mng-image.p-image-preview img{max-height:100%}mng-formly-field-input .mng-image.p-image-preview.mng-no-image{width:150px}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator{background-color:var(--p-surface-200);height:100%;opacity:1;cursor:default;display:flex;align-items:center;justify-content:center}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator .p-image-preview-icon{color:var(--p-primary-800);font-size:1.5rem}mng-formly-field-input .p-fileupload .p-fileupload-content{gap:var(--mng-fileupload-content-gap, 0);padding:var(--p-panel-header-padding)}mng-formly-field-input .p-fileupload .p-fileupload-content .p-progressbar{display:none}mng-formly-field-input .p-fileupload .p-fileupload-content .mng-fileupload-dragdrop-zone{height:5rem;display:flex;border:dashed;border-radius:8px;align-items:center;justify-content:center}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file>div:first-child{flex-grow:0;flex-shrink:0;width:50px;padding:0}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file img{max-width:100%}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar span.p-fileupload-choose{width:auto}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar p-button button{width:auto}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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            [styleClass]=\"controlClassName()\"\n            [inputStyleClass]=\"controlInputClassName()\"\n            [locale]=\"descriptor.locale ?? applicationLocale\"\n            [mode]=\"numberFieldMode\"\n            [prefix]=\"descriptor.numberPrefix\"\n            [suffix]=\"descriptor.numberSuffix\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"descriptor.currencyDisplay\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\n        </p-inputNumber>\n    }\n    @case ('switch') {\n        <div class=\"flex flex-col\">\n            <label [for]=\"key\" [class]=\"labelClassName()\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n            </label>\n            <p-toggle-switch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-toggle-switch>\n            @if (showError) {\n                <small class=\"mng-field-validation-messages\">\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=\"mb-2\">\n                <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"controlClassName()\"></p-radioButton>\n                <label [for]=\"option.value\" [class]=\"'ml-2 ' + (descriptor.radioLabelClassName ?? '')\">{{ option.title | translate }}</label>\n            </div>\n        }\n    }\n    @case ('textarea') {\n        <textarea\n            [id]=\"$any(key)\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [rows]=\"descriptor.rows ?? 3\"\n            pTextarea\n            [class]=\"controlWithInputClassName()\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\">\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 ?? '' | translate\"\n            [slotChar]=\"$any(descriptor.slotChar)\"\n            [styleClass]=\"controlWithInputClassName()\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\" />\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            chooseStyleClass=\"p-button-sm p-button-outlined\"\n            cancelStyleClass=\"p-button-sm p-button-outlined\"\n            [styleClass]=\"controlClassName()\"\n            mode=\"advanced\"\n            (onSelect)=\"onFileSelect($event)\"\n            (onRemove)=\"onFileRemove($event)\"\n            (onClear)=\"onFileClear($event)\">\n            <ng-template #file let-file let-idx=\"index\">\n                <div class=\"p-fileupload-file\">\n                    <div>\n                        @if (fileUploadInput.isImage(file)) {\n                            @if (descriptor.imagePreview) {\n                                @if (descriptor.imagePreviewComponent) {\n                                    <ng-container\n                                        [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                        [inputs]=\"{\n                                            imageUrl: file.objectURL\n                                        }\">\n                                    </ng-container>\n                                } @else if (!isFileImageSvg(file) || descriptor.imagePreviewAllowSvg) {\n                                    <img [src]=\"file.objectURL\" [width]=\"fileUploadInput.previewWidth\" (error)=\"fileUploadInput.imageError($event)\" />\n                                } @else {\n                                    <span class=\"flex items-center justify-center\">\n                                        <i class=\"pi pi-image text-2xl\"></i>\n                                    </span>\n                                }\n                            } @else {\n                                <span class=\"flex items-center justify-center\">\n                                    <i class=\"pi pi-image text-2xl\"></i>\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"flex items-center justify-center\">\n                                <i [class]=\"'pi ' + getFileDocumentTypeIcon(file) + ' text-2xl'\"></i>\n                            </span>\n                        }\n                    </div>\n                    <div class=\"p-fileupload-file-info\">\n                        <div class=\"p-fileupload-file-name\">{{ file.name }}</div>\n                        <span class=\"p-fileupload-file-size\">{{ fileUploadInput.formatSize(file.size) }}</span>\n                    </div>\n                    <div class=\"p-fileupload-file-actions\">\n                        <p-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            size=\"small\"\n                            outlined=\"true\"\n                            rounded=\"true\"\n                            (click)=\"fileUploadInput.remove($event, idx)\"\n                            [disabled]=\"fileUploadInput.uploading\" />\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template #empty>\n                <div class=\"text-gray-300 mng-fileupload-dragdrop-zone\">\n                    <span><i class=\"pi pi-file-import mr-2\"></i>{{ 'fileUpload.dragAndDrop' | translate }}</span>\n                </div>\n            </ng-template>\n        </p-fileUpload>\n    }\n    @case ('imageUrl') {\n        <div>\n            @if (descriptor.imagePreview) {\n                <div class=\"flex flex-wrap justify-start\">\n                    @for (image of imageFormArray.controls; track image; let idx = $index) {\n                        @if (imageFormArray.at(idx).valid && imageFormArray.at(idx).value) {\n                            @if (descriptor.imagePreviewComponent) {\n                                <ng-container\n                                    [mngComponent]=\"descriptor.imagePreviewComponent\"\n                                    [inputs]=\"{\n                                        imageUrl: imageFormArray.at(idx).value\n                                    }\">\n                                </ng-container>\n                            } @else if (!isUrlSvgImage(imageFormArray.at(idx).value) || descriptor.imagePreviewAllowSvg) {\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 mng-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                    }\n                </div>\n            }\n            @if (!descriptor.imagePreview || descriptor.imageUrlInputVisibleOnDisabled || !iFormControl.disabled) {\n                @for (imageCtrlName of imageFormArray.controls; track imageCtrlName; let idx = $index) {\n                    <p-inputgroup [styleClass]=\"controlClassName() + ' mb-1'\">\n                        <input\n                            pInputText\n                            [placeholder]=\"'mngEditor.imageUrlPlaceholder' | translate\"\n                            [id]=\"$any(key)\"\n                            type=\"text\"\n                            [class]=\"controlInputClassName()\"\n                            [formControl]=\"$any(imageFormArray.at(idx))\"\n                            [formlyAttributes]=\"field\" />\n                        @if (descriptor.fileMultiple && !iFormControl.disabled && imageFormArray.controls.length > 1) {\n                            <p-inputgroup-addon>\n                                <p-button type=\"button\" icon=\"pi pi-minus\" severity=\"secondary\" (click)=\"removeImageUrlAt(idx)\"></p-button>\n                            </p-inputgroup-addon>\n                        }\n                    </p-inputgroup>\n                }\n                @if (descriptor.fileMultiple && !iFormControl.disabled) {\n                    <p-button\n                        type=\"button\"\n                        icon=\"pi pi-plus\"\n                        size=\"small\"\n                        severity=\"primary\"\n                        outlined=\"true\"\n                        styleClass=\"mt-2\"\n                        [label]=\"'mngEditor.imageUrlAdd' | translate\"\n                        (click)=\"addImageUrl()\"></p-button>\n                }\n            }\n        </div>\n    }\n    @default {\n        <input\n            pInputText\n            [class]=\"controlWithInputClassName()\"\n            [id]=\"$any(key)\"\n            [type]=\"props.type || 'text'\"\n            [formControl]=\"iFormControl\"\n            [formlyAttributes]=\"field\"\n            [mngInputTrim]=\"descriptor.textTrim ?? 'both'\"\n            [mngInputEmptyValue]=\"descriptor.emptyValue ?? 'undefined'\"\n            [placeholder]=\"descriptor.placeholder ?? '' | translate\" />\n    }\n}\n", styles: ["mng-formly-field-input .mng-image.p-image-preview{height:150px}mng-formly-field-input .mng-image.p-image-preview img{max-height:100%}mng-formly-field-input .mng-image.p-image-preview.mng-no-image{width:150px}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator{background-color:var(--p-surface-200);height:100%;opacity:1;cursor:default;display:flex;align-items:center;justify-content:center}mng-formly-field-input .mng-image.p-image-preview.mng-no-image .p-image-preview-indicator .p-image-preview-icon{color:var(--p-primary-800);font-size:1.5rem}mng-formly-field-input .p-fileupload .p-fileupload-content{gap:var(--mng-fileupload-content-gap, 0);padding:var(--p-panel-header-padding)}mng-formly-field-input .p-fileupload .p-fileupload-content .p-progressbar{display:none}mng-formly-field-input .p-fileupload .p-fileupload-content .mng-fileupload-dragdrop-zone{height:5rem;display:flex;border:dashed;border-radius:8px;align-items:center;justify-content:center}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file>div:first-child{flex-grow:0;flex-shrink:0;width:50px;padding:0}mng-formly-field-input .p-fileupload .p-fileupload-content .p-fileupload-file-list .p-fileupload-file img{max-width:100%}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar span.p-fileupload-choose{width:auto}mng-formly-field-input .p-fileupload .p-fileupload-buttonbar p-button button{width:auto}\n"] }]
         }] });
 
 class FormlyFieldLabelComponent extends ACommonsFormlyFieldType {
@@ -4426,11 +4500,11 @@ class FormlyFieldTableDialogFormComponent extends ACommonsFormlyFieldType {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FormlyFieldTableDialogFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FormlyFieldTableDialogFormComponent, isStandalone: true, selector: "mng-formly-table-dialog-form-field", providers: [provideViewContainer(false)], usesInheritance: true, ngImport: i0, template: "<mng-action-table\n    [descriptor]=\"descriptor.tableDescriptor\"\n    [items]=\"items()\"\n    [actions]=\"actions\"\n    [rowReorderEnabled]=\"!disableRowReorder()\"\n    (rowReorder)=\"onRowReorder($event)\"\n    tableClassName=\"mng-table-header-compact pb-2\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex justify-end items-center\">\n            <label class=\"grow\" [for]=\"key\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n                @if (descriptor.labelInfoTooltip !== undefined) {\n                    <span [ngClass]=\"{'ml-1': props.required && props['hideRequiredMarker'] !== true}\">\n                        <i [class]=\"descriptor.labelInfoTooltipIcon ?? labelInfoTooltipDefaultIcon\" [pTooltip]=\"descriptor.labelInfoTooltip | translate\"></i>\n                    </span>\n                }\n            </label>\n            <div>\n                @for (action of toolbarRightActions; track action) {\n                    <mng-action [action]=\"action\"></mng-action>\n                }\n            </div>\n        </div>\n    </ng-template>\n</mng-action-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], dependencies: [{ kind: "pipe", type: 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", "tableClassName", "selectionMode", "selectionEnabled", "globalFilterFields", "rowReorderEnabled", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance", "rowReorder"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["mngTemplate"] }, { kind: "pipe", type: FormlyFieldLabelPipe, name: "mngFormlyFieldLabel" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FormlyFieldTableDialogFormComponent, isStandalone: true, selector: "mng-formly-table-dialog-form-field", providers: [provideViewContainer(false)], usesInheritance: true, ngImport: i0, template: "<mng-action-table\n    [descriptor]=\"descriptor.tableDescriptor\"\n    [items]=\"items()\"\n    [actions]=\"actions\"\n    [rowReorderEnabled]=\"!disableRowReorder()\"\n    (rowReorder)=\"onRowReorder($event)\"\n    tableClassName=\"mng-table-header-compact pb-2\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex justify-end items-center\">\n            <label class=\"grow\" [for]=\"key\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n                @if (descriptor.labelInfoTooltip !== undefined) {\n                    <span [ngClass]=\"{'ml-1': props.required && props['hideRequiredMarker'] !== true}\">\n                        <i [class]=\"descriptor.labelInfoTooltipIcon ?? labelInfoTooltipDefaultIcon\" [pTooltip]=\"descriptor.labelInfoTooltip | translate\"></i>\n                    </span>\n                }\n            </label>\n            <div>\n                @for (action of toolbarRightActions; track action) {\n                    <mng-action [action]=\"action\" [hostComponent]=\"this\"></mng-action>\n                }\n            </div>\n        </div>\n    </ng-template>\n</mng-action-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], dependencies: [{ kind: "pipe", type: 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", "tableClassName", "selectionMode", "selectionEnabled", "globalFilterFields", "rowReorderEnabled", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance", "rowReorder"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["mngTemplate"] }, { kind: "pipe", type: FormlyFieldLabelPipe, name: "mngFormlyFieldLabel" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FormlyFieldTableDialogFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-table-dialog-form-field', imports: [TranslatePipe, ActionComponent, ActionTableComponent, TemplateDirective, FormlyFieldLabelPipe, NgClass, Tooltip], providers: [provideViewContainer(false)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-action-table\n    [descriptor]=\"descriptor.tableDescriptor\"\n    [items]=\"items()\"\n    [actions]=\"actions\"\n    [rowReorderEnabled]=\"!disableRowReorder()\"\n    (rowReorder)=\"onRowReorder($event)\"\n    tableClassName=\"mng-table-header-compact pb-2\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex justify-end items-center\">\n            <label class=\"grow\" [for]=\"key\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n                @if (descriptor.labelInfoTooltip !== undefined) {\n                    <span [ngClass]=\"{'ml-1': props.required && props['hideRequiredMarker'] !== true}\">\n                        <i [class]=\"descriptor.labelInfoTooltipIcon ?? labelInfoTooltipDefaultIcon\" [pTooltip]=\"descriptor.labelInfoTooltip | translate\"></i>\n                    </span>\n                }\n            </label>\n            <div>\n                @for (action of toolbarRightActions; track action) {\n                    <mng-action [action]=\"action\"></mng-action>\n                }\n            </div>\n        </div>\n    </ng-template>\n</mng-action-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
+            args: [{ selector: 'mng-formly-table-dialog-form-field', imports: [TranslatePipe, ActionComponent, ActionTableComponent, TemplateDirective, FormlyFieldLabelPipe, NgClass, Tooltip], providers: [provideViewContainer(false)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-action-table\n    [descriptor]=\"descriptor.tableDescriptor\"\n    [items]=\"items()\"\n    [actions]=\"actions\"\n    [rowReorderEnabled]=\"!disableRowReorder()\"\n    (rowReorder)=\"onRowReorder($event)\"\n    tableClassName=\"mng-table-header-compact pb-2\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex justify-end items-center\">\n            <label class=\"grow\" [for]=\"key\"\n                >{{ descriptor | mngFormlyFieldLabel: editorDescriptor | translate }}\n                @if (props.required && props['hideRequiredMarker'] !== true) {\n                    <span>*</span>\n                }\n                @if (descriptor.labelInfoTooltip !== undefined) {\n                    <span [ngClass]=\"{'ml-1': props.required && props['hideRequiredMarker'] !== true}\">\n                        <i [class]=\"descriptor.labelInfoTooltipIcon ?? labelInfoTooltipDefaultIcon\" [pTooltip]=\"descriptor.labelInfoTooltip | translate\"></i>\n                    </span>\n                }\n            </label>\n            <div>\n                @for (action of toolbarRightActions; track action) {\n                    <mng-action [action]=\"action\" [hostComponent]=\"this\"></mng-action>\n                }\n            </div>\n        </div>\n    </ng-template>\n</mng-action-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
         }] });
 
 class FormlyFieldTableDialogMultiselectComponent extends ACommonsFormlyFieldType {
@@ -4661,11 +4735,11 @@ class FormlyFieldNoLabelWrapperComponent extends FieldWrapper {
         return field;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FormlyFieldNoLabelWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FormlyFieldNoLabelWrapperComponent, isStandalone: true, selector: "mng-formly-field-no-label-wrapper", usesInheritance: true, ngImport: i0, template: "<div [class]=\"wrapperClassName()\">\n    <ng-container #fieldComponent></ng-container>\n    @if (helpText(); as ht) {\n        <small class=\"block\">{{ ht | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block mng-validation-messages\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FormlyFieldNoLabelWrapperComponent, isStandalone: true, selector: "mng-formly-field-no-label-wrapper", usesInheritance: true, ngImport: i0, template: "<div [class]=\"wrapperClassName()\">\n    <ng-container #fieldComponent></ng-container>\n    @if (helpText(); as ht) {\n        <small class=\"block\">{{ ht | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block mng-field-validation-messages\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FormlyFieldNoLabelWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-no-label-wrapper', imports: [FormlyModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClassName()\">\n    <ng-container #fieldComponent></ng-container>\n    @if (helpText(); as ht) {\n        <small class=\"block\">{{ ht | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block mng-validation-messages\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n" }]
+            args: [{ selector: 'mng-formly-field-no-label-wrapper', imports: [FormlyModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClassName()\">\n    <ng-container #fieldComponent></ng-container>\n    @if (helpText(); as ht) {\n        <small class=\"block\">{{ ht | translate }}</small>\n    }\n    @if (showError && shouldShowError()) {\n        <small class=\"block mng-field-validation-messages\">\n            <formly-validation-message [field]=\"sanitizeErrorsForGroups(field)\"></formly-validation-message>\n        </small>\n    }\n</div>\n" }]
         }] });
 
 class FormlyFieldWrapperComponent extends FieldWrapper {
@@ -5159,50 +5233,6 @@ function commonsFormlyConfigProvider(translate, datePipe, config = {}) {
     };
 }
 
-class TableviewComponent {
-    constructor() {
-        this.viewContainer = inject(ViewContainer, { optional: true });
-        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.set(this.actions());
-        }
-        const dataProvider = this.dataProvider();
-        if (this.viewContainer && dataProvider) {
-            this.viewContainer.dataProvider.set(dataProvider);
-        }
-    }
-    onTableLoad(event) {
-        // TODO: table item in event
-        this.tableParams.set(event.params);
-    }
-    selectionChange(selectedItems) {
-        // TODO: table item in selected item
-        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: "19.2.10", ngImport: i0, type: TableviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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-6\">\n                <ng-template #start>\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 #end>\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            @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", styles: [".mng-tableview .p-paginator .p-paginator-current{margin-left:auto}.mng-tableview .p-progressbar{height:.5rem;background-color:#d8dadc}.mng-tableview .p-progressbar .p-progressbar-value{background-color:#607d8b}.mng-tableview .p-datatable .p-datatable-scrollable-table>.p-datatable-thead{z-index:2}.mng-tableview .p-datatable .p-datatable-loading-overlay{z-index:3}.mng-tableview .p-datatable .p-datatable-header{text-align:left;font-size:1.5rem}.mng-tableview .p-datatable .p-datatable-thead>tr>th{text-align:left}\n"], dependencies: [{ 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", "tableClassName", "selectionMode", "selectionEnabled", "globalFilterFields", "rowReorderEnabled", "actions", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "selectionChange", "captionComponentInstance", "columnActionComponentInstance", "rowReorder"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["mngTemplate"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mng-tableview', imports: [NgTemplateOutlet, ActionComponent, ActionTableComponent, TemplateDirective, RouterOutlet, Toolbar], providers: [provideViewContainer()], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mng-tableview\">\n    <div class=\"card\">\n        @if (toolbarLeftActions().length > 0 || toolbarRightActions().length > 0) {\n            <p-toolbar styleClass=\"mb-6\">\n                <ng-template #start>\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 #end>\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            @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", styles: [".mng-tableview .p-paginator .p-paginator-current{margin-left:auto}.mng-tableview .p-progressbar{height:.5rem;background-color:#d8dadc}.mng-tableview .p-progressbar .p-progressbar-value{background-color:#607d8b}.mng-tableview .p-datatable .p-datatable-scrollable-table>.p-datatable-thead{z-index:2}.mng-tableview .p-datatable .p-datatable-loading-overlay{z-index:3}.mng-tableview .p-datatable .p-datatable-header{text-align:left;font-size:1.5rem}.mng-tableview .p-datatable .p-datatable-thead>tr>th{text-align:left}\n"] }]
-        }] });
-
 class TableviewRouteComponent {
     constructor() {
         this.tableview = input.required();
@@ -5482,5 +5512,5 @@ function provideTableviewChild(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_EDITOR_COMPONENT_IT, ActionComponent, ActionContext, ActionDataProviderSource, ActionEditorComponent, ActionErrorMapperService, ActionExecutorService, ActionInstance, ActionTableComponent, COMMONS_TABLEVIEW_FEATURE_CONFIG_IT, ComponentActionExecutorService, DataLanguageDropdownComponent, DefaultActionErrorMapperService, DefaultDataProviderExecutor, EditorAutoSaveStatusComponent, 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, emailValidationName, emailValidator, fieldLookupWithOptionsValueProperty, fieldProjectFieldToProperty, formlyTypesConfig, formlyWrappersConfig, getActionButtonRoundedWidth, getEditorFieldLabel, getEmailValidationMessage, getFormEditorInfoMessage, getFormEditorWarningMessage, getFormlyValidationMessages, getI18nActionEditorTitleAsync, getI18nActionParams, getI18nActionParamsAsync, getI18nActionTitleAsync, getI18nForAction, getI18nForActionAsync, getMaxDateValidationMessage, getMaxLengthValidationMessage, getMaxValidationMessage, getMinDateValidationMessage, getMinLengthValidationMessage, getMinValidationMessage, getRequiredValidationMessage, getTableCellPaddingX, getTextPatternValidationMessage, maxDateValidationName, maxDateValidator, minDateValidationName, minDateValidator, populateI18nActionParams, provideActionExecutor, provideFormComponent, provideTableviewChild, provideViewContainer, unsavedChangesGuard, withTableview };
+export { ACTION_EDITOR_COMPONENT_IT, ActionComponent, ActionContext, ActionDataProviderSource, ActionEditorComponent, ActionErrorMapperService, ActionExecutorService, ActionInstance, ActionTableComponent, COMMONS_TABLEVIEW_FEATURE_CONFIG_IT, ComponentActionExecutorService, DataLanguageDropdownComponent, DefaultActionErrorMapperService, DefaultDataProviderExecutor, EditorAutoSaveStatusComponent, 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, emailValidationName, emailValidator, fieldLookupWithOptionsValueProperty, fieldProjectFieldToProperty, formlyTypesConfig, formlyWrappersConfig, getActionButtonRoundedWidth, getActionFormEditor, getActionParentFormEditor, getActionParentTable, getEditorFieldLabel, getEmailValidationMessage, getFormEditorInfoMessage, getFormEditorWarningMessage, getFormlyValidationMessages, getI18nActionEditorTitleAsync, getI18nActionParams, getI18nActionParamsAsync, getI18nActionTitleAsync, getI18nForAction, getI18nForActionAsync, getMaxDateValidationMessage, getMaxLengthValidationMessage, getMaxValidationMessage, getMinDateValidationMessage, getMinLengthValidationMessage, getMinValidationMessage, getRequiredValidationMessage, getTableCellPaddingX, getTextPatternValidationMessage, maxDateValidationName, maxDateValidator, minDateValidationName, minDateValidator, populateI18nActionParams, provideActionExecutor, provideFormComponent, provideTableviewChild, provideViewContainer, unsavedChangesGuard, withTableview };
 //# sourceMappingURL=mediusinc-mng-commons-tableview.mjs.map