@acorex/platform 20.3.0-next.20 → 20.3.0-next.21

package/fesm2022/acorex-platform-layout-builder.mjs

@@ -3,12 +3,12 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, Injectable, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
 import { AXPopupService } from '@acorex/components/popup';
-import * as i1 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
 import * as i2 from '@acorex/components/form';
 import { AXFormComponent, AXFormModule } from '@acorex/components/form';
-import { isEqual, get, cloneDeep } from 'lodash-es';
 import { AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import * as i1 from '@acorex/platform/layout/widget-core';
+import { AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import { isEqual, get, cloneDeep } from 'lodash-es';
 import { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
 import * as i2$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -86,10 +86,10 @@ class AXPLayoutBuilderService {
     create() {
         return new LayoutBuilder(this.popupService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -351,7 +351,28 @@ class BaseContainerMixin extends BaseContainerBuilder {
  */
 class LayoutContainerMixin extends BaseContainerMixin {
     layout(value) {
-        // Layout handling can be added here if needed
+        // Map layout intent to grid item sizing so containers like `form-field`
+        // can span multiple columns inside grid/fieldset layouts.
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        if (typeof value === 'number') {
+            // Direct numeric shorthand → colSpan
+            this.containerState.options.colSpan = value;
+        }
+        else if (value) {
+            // Try to extract a reasonable colSpan from breakpoint positions
+            const positions = value.positions;
+            if (positions) {
+                const colSpan = positions?.lg?.colSpan ??
+                    positions?.xl?.colSpan ??
+                    positions?.xxl?.colSpan ??
+                    positions?.md?.colSpan ??
+                    positions?.sm?.colSpan;
+                if (colSpan != null) {
+                    this.containerState.options.colSpan = colSpan;
+                }
+            }
+        }
         return this;
     }
 }
@@ -1264,11 +1285,11 @@ class AXPLayoutConversionService {
                 grid: {
                     default: {
                         columns: 1,
-                        gap: '1rem'
-                    }
-                }
+                        gap: '1rem',
+                    },
+                },
             },
-            children: formDefinition.groups.map(group => this.createGroupAsFieldsetWidget(group))
+            children: formDefinition.groups.map((group) => this.createGroupAsFieldsetWidget(group)),
         };
         // Cache the result
         this.widgetTreeCache.set(cacheKey, widgetTree);
@@ -1289,7 +1310,7 @@ class AXPLayoutConversionService {
         // Parse widget tree
         const groups = [];
         if (widgetTree.children) {
-            widgetTree.children.forEach(child => {
+            widgetTree.children.forEach((child) => {
                 if (child.type === 'fieldset-layout') {
                     const group = this.extractGroupFromFieldset(child);
                     groups.push(group);
@@ -1312,11 +1333,9 @@ class AXPLayoutConversionService {
             return true; // Empty form is valid
         }
         // Check that all children are fieldset-layout widgets
-        return widgetTree.children.every(child => child.type === 'fieldset-layout' &&
+        return widgetTree.children.every((child) => child.type === 'fieldset-layout' &&
             child.children &&
-            child.children.every(formField => formField.type === 'form-field' &&
-                formField.children &&
-                formField.children.length > 0));
+            child.children.every((formField) => formField.type === 'form-field' && formField.children && formField.children.length > 0));
     }
     /**
      * Clear all caches
@@ -1331,7 +1350,7 @@ class AXPLayoutConversionService {
     getCacheStats() {
         return {
             widgetTreeCacheSize: this.widgetTreeCache.size,
-            formDefinitionCacheSize: this.formDefinitionCache.size
+            formDefinitionCacheSize: this.formDefinitionCache.size,
         };
     }
     //#endregion
@@ -1348,16 +1367,16 @@ class AXPLayoutConversionService {
             options: {
                 title: group.title,
                 description: group.description,
-                cols: columnsCount
+                cols: columnsCount,
             },
-            children: this.createFieldWidgets(group.parameters, columnsCount)
+            children: this.createFieldWidgets(group.parameters, columnsCount),
         };
     }
     /**
      * Convert fields to Form Field widgets
      */
     createFieldWidgets(fields, columnsCount) {
-        return fields.map(field => this.createFormFieldWidget(field));
+        return fields.map((field) => this.createFormFieldWidget(field));
     }
     /**
      * Convert a single field to Form Field widget with editor as child
@@ -1369,9 +1388,9 @@ class AXPLayoutConversionService {
             options: {
                 label: field.title,
                 description: field.description,
-                showLabel: true
+                showLabel: true,
             },
-            children: [field.widget] // The editor widget becomes a child of form-field
+            children: [field.widget], // The editor widget becomes a child of form-field
         };
     }
     /**
@@ -1382,7 +1401,7 @@ class AXPLayoutConversionService {
         // Extract fields directly from fieldset children
         const fields = [];
         if (fieldsetNode.children) {
-            fieldsetNode.children.forEach(formField => {
+            fieldsetNode.children.forEach((formField) => {
                 if (formField.type === 'form-field' && formField.children && formField.children.length > 0) {
                     const field = this.extractFieldFromFormWidget(formField);
                     if (field) {
@@ -1411,7 +1430,7 @@ class AXPLayoutConversionService {
             title: formFieldNode.options?.['label'],
             description: formFieldNode.options?.['description'],
             widget: editorWidget,
-            mode: formFieldNode.mode
+            mode: formFieldNode.mode,
         };
     }
     /**
@@ -1480,18 +1499,18 @@ class AXPLayoutConversionService {
             return hash.toString();
         for (let i = 0; i < str.length; i++) {
             const char = str.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
+            hash = (hash << 5) - hash + char;
             hash = hash & hash; // Convert to 32-bit integer
         }
         return Math.abs(hash).toString(36); // Convert to base36 for shorter string
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -1634,7 +1653,7 @@ class AXPLayoutRendererComponent {
         if (this.expressionCache.size > 50) {
             // Clear half the cache when it gets too large
             const keysToDelete = Array.from(this.expressionCache.keys()).slice(0, 25);
-            keysToDelete.forEach(key => this.expressionCache.delete(key));
+            keysToDelete.forEach((key) => this.expressionCache.delete(key));
         }
         this.expressionCache.set(cacheKey, result);
         return result;
@@ -1750,14 +1769,14 @@ class AXPLayoutRendererComponent {
         this.contextUpdateSubject
             .pipe(debounceTime(16), // ~60fps
         distinctUntilChanged((prev, curr) => isEqual(prev, curr)), startWith(this.context() ?? {}))
-            .subscribe(ctx => {
+            .subscribe((ctx) => {
             this.internalContext.set(ctx);
         });
         // Debounced context changes from widgets
         this.contextChangeSubject
             .pipe(debounceTime(16), // ~60fps
         distinctUntilChanged((prev, curr) => isEqual(prev, curr)))
-            .subscribe(ctx => {
+            .subscribe((ctx) => {
             this.internalContext.set(ctx);
             // Update the model signal directly - it will emit change events automatically
             this.context.set(this.internalContext());
@@ -1769,10 +1788,7 @@ class AXPLayoutRendererComponent {
      * Type guard to check if the input is a form definition
      */
     isFormDefinition(data) {
-        return data &&
-            typeof data === 'object' &&
-            'groups' in data &&
-            Array.isArray(data.groups);
+        return data && typeof data === 'object' && 'groups' in data && Array.isArray(data.groups);
     }
     //#endregion
     //#region ----   Utility Methods   ----
@@ -1806,7 +1822,7 @@ class AXPLayoutRendererComponent {
         }
         // Generate short hash for context
         const keys = Object.keys(context).sort();
-        const contextStr = keys.map(key => `${key}:${context[key]}`).join('|');
+        const contextStr = keys.map((key) => `${key}:${context[key]}`).join('|');
         return this.simpleHash(contextStr);
     }
     /**
@@ -1818,14 +1834,14 @@ class AXPLayoutRendererComponent {
             return hash.toString();
         for (let i = 0; i < str.length; i++) {
             const char = str.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
+            hash = (hash << 5) - hash + char;
             hash = hash & hash; // Convert to 32-bit integer
         }
         // Convert to positive hex string
         return Math.abs(hash).toString(16);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ax-form>
       <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
         @if (widgetTree()) {
@@ -1835,7 +1851,7 @@ class AXPLayoutRendererComponent {
     </ax-form>
   `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, AXPWidgetCoreModule, AXFormModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ax-form>
@@ -1849,11 +1865,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class LayoutBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPLayoutRendererComponent],
@@ -1887,10 +1903,10 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         return this.config?.actions?.footer?.prefix || [];
     }
     visibleFooterSuffixActions() {
-        return this.config?.actions?.footer?.suffix || [
+        return (this.config?.actions?.footer?.suffix || [
             { title: 'Cancel', color: 'secondary', command: { name: 'cancel' } },
-            { title: 'Confirm', color: 'primary', command: { name: 'confirm' } }
-        ];
+            { title: 'Confirm', color: 'primary', command: { name: 'confirm' } },
+        ]);
     }
     isFormLoading() {
         return this.isDialogLoading();
@@ -1903,7 +1919,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         // Store the action and context - same pattern as dynamic-dialog
         const result = {
             context: this.context(),
-            action: actionName
+            action: actionName,
         };
         // Store result in component property
         this.dialogResult = result;
@@ -1925,7 +1941,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             },
             setLoading: (loading) => {
                 this.isDialogLoading.set(loading);
-            }
+            },
         });
     }
     close(result) {
@@ -1934,132 +1950,139 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         }
         super.close(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, usesInheritance: true, ngImport: i0, template: `
-<div class="ax-p-4">
-  <axp-layout-renderer
-    [layout]="config.definition"
-    [context]="context()"
-    (contextChange)="handleContextChanged($event)"
-    (contextInitiated)="handleContextInitiated($event)"
-  >
-  </axp-layout-renderer>
-</div>
-
-<ax-footer>
-  <ax-prefix>
-    <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
-  </ax-prefix>
-  <ax-suffix>
-    <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
-  </ax-suffix>
-</ax-footer>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-p-4">
+      <axp-layout-renderer
+        [layout]="config.definition"
+        [context]="context()"
+        (contextChange)="handleContextChanged($event)"
+        (contextInitiated)="handleContextInitiated($event)"
+      >
+      </axp-layout-renderer>
+    </div>
 
-<!-- Footer Prefix Actions -->
-<ng-template #footerPrefixActions>
-  @for (action of visibleFooterPrefixActions(); track $index) {
-    <ax-button
-      [disabled]="action.disabled || isFormLoading()"
-      [text]="(action.title | translate | async)!"
-      [look]="'outline'"
-      [color]="action.color"
-      (onClick)="executeAction(action)"
-    >
-      @if (isFormLoading() && action.command?.name != 'cancel') {
-        <ax-loading></ax-loading>
-      }
+    <ax-footer>
       <ax-prefix>
-        <i class="{{ action.icon }}"></i>
+        <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
       </ax-prefix>
-    </ax-button>
-  }
-</ng-template>
+      <ax-suffix>
+        <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+      </ax-suffix>
+    </ax-footer>
+
+    <!-- Footer Prefix Actions -->
+    <ng-template #footerPrefixActions>
+      @for (action of visibleFooterPrefixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isFormLoading()"
+          [text]="(action.title | translate | async)!"
+          [look]="'outline'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (isFormLoading() && action.command?.name != 'cancel') {
+            <ax-loading></ax-loading>
+          }
+          <ax-prefix>
+            <i class="{{ action.icon }}"></i>
+          </ax-prefix>
+        </ax-button>
+      }
+    </ng-template>
 
-<!-- Footer Suffix Actions -->
-<ng-template #footerSuffixActions>
-  @for (action of visibleFooterSuffixActions(); track $index) {
-    <ax-button
-      [disabled]="action.disabled || isSubmitting()"
-      [text]="(action.title | translate | async)!"
-      [look]="'solid'"
-      [color]="action.color"
-      (onClick)="executeAction(action)"
-    >
-      @if (action.icon) {
-        <ax-prefix>
-          <ax-icon icon="{{ action.icon }}"></ax-icon>
-        </ax-prefix>
+    <!-- Footer Suffix Actions -->
+    <ng-template #footerSuffixActions>
+      @for (action of visibleFooterSuffixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isSubmitting()"
+          [text]="(action.title | translate | async)!"
+          [look]="'solid'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (action.icon) {
+            <ax-prefix>
+              <ax-icon icon="{{ action.icon }}"></ax-icon>
+            </ax-prefix>
+          }
+        </ax-button>
       }
-    </ax-button>
-  }
-</ng-template>
+    </ng-template>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-dialog-renderer',
                     standalone: true,
-                    imports: [CommonModule, AXPLayoutRendererComponent, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule],
+                    imports: [
+                        CommonModule,
+                        AXPLayoutRendererComponent,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                    ],
                     template: `
-<div class="ax-p-4">
-  <axp-layout-renderer
-    [layout]="config.definition"
-    [context]="context()"
-    (contextChange)="handleContextChanged($event)"
-    (contextInitiated)="handleContextInitiated($event)"
-  >
-  </axp-layout-renderer>
-</div>
-
-<ax-footer>
-  <ax-prefix>
-    <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
-  </ax-prefix>
-  <ax-suffix>
-    <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
-  </ax-suffix>
-</ax-footer>
+    <div class="ax-p-4">
+      <axp-layout-renderer
+        [layout]="config.definition"
+        [context]="context()"
+        (contextChange)="handleContextChanged($event)"
+        (contextInitiated)="handleContextInitiated($event)"
+      >
+      </axp-layout-renderer>
+    </div>
 
-<!-- Footer Prefix Actions -->
-<ng-template #footerPrefixActions>
-  @for (action of visibleFooterPrefixActions(); track $index) {
-    <ax-button
-      [disabled]="action.disabled || isFormLoading()"
-      [text]="(action.title | translate | async)!"
-      [look]="'outline'"
-      [color]="action.color"
-      (onClick)="executeAction(action)"
-    >
-      @if (isFormLoading() && action.command?.name != 'cancel') {
-        <ax-loading></ax-loading>
-      }
+    <ax-footer>
       <ax-prefix>
-        <i class="{{ action.icon }}"></i>
+        <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
       </ax-prefix>
-    </ax-button>
-  }
-</ng-template>
+      <ax-suffix>
+        <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+      </ax-suffix>
+    </ax-footer>
+
+    <!-- Footer Prefix Actions -->
+    <ng-template #footerPrefixActions>
+      @for (action of visibleFooterPrefixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isFormLoading()"
+          [text]="(action.title | translate | async)!"
+          [look]="'outline'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (isFormLoading() && action.command?.name != 'cancel') {
+            <ax-loading></ax-loading>
+          }
+          <ax-prefix>
+            <i class="{{ action.icon }}"></i>
+          </ax-prefix>
+        </ax-button>
+      }
+    </ng-template>
 
-<!-- Footer Suffix Actions -->
-<ng-template #footerSuffixActions>
-  @for (action of visibleFooterSuffixActions(); track $index) {
-    <ax-button
-      [disabled]="action.disabled || isSubmitting()"
-      [text]="(action.title | translate | async)!"
-      [look]="'solid'"
-      [color]="action.color"
-      (onClick)="executeAction(action)"
-    >
-      @if (action.icon) {
-        <ax-prefix>
-          <ax-icon icon="{{ action.icon }}"></ax-icon>
-        </ax-prefix>
+    <!-- Footer Suffix Actions -->
+    <ng-template #footerSuffixActions>
+      @for (action of visibleFooterSuffixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isSubmitting()"
+          [text]="(action.title | translate | async)!"
+          [look]="'solid'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (action.icon) {
+            <ax-prefix>
+              <ax-icon icon="{{ action.icon }}"></ax-icon>
+            </ax-prefix>
+          }
+        </ax-button>
       }
-    </ax-button>
-  }
-</ng-template>
-  `
+    </ng-template>
+  `,
                 }]
         }], propDecorators: { config: [{
                 type: Input