@acorex/platform 20.5.0-next.0 → 20.5.0-next.2

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

@@ -1,4 +1,4 @@
-import * as i1$1 from '@angular/common';
+import * as i4 from '@angular/common';
 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';
@@ -10,11 +10,11 @@ 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 * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i3 from '@acorex/components/decorators';
+import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/loading';
+import * as i3 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i5 from '@acorex/core/translation';
@@ -170,12 +170,24 @@ class LayoutBuilder {
         return this;
     }
     dialog(delegate) {
+        if (!this.popupService) {
+            throw new Error('LayoutBuilder requires AXPopupService to create dialogs. Please inject it in the service constructor.');
+        }
         const container = new DialogContainerBuilder(this.popupService);
         if (delegate) {
             delegate(container);
         }
         return container;
     }
+    stepWizard(delegate) {
+        const wizard = new StepWizardBuilder();
+        wizard.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(wizard);
+        }
+        this.root.children.push(wizard.build());
+        return this;
+    }
     formField(label, delegate) {
         const field = new FormFieldBuilder(label);
         field.withInheritanceContext(this.inheritanceContext);
@@ -448,6 +460,16 @@ class ChildContainerMixin extends LayoutContainerMixin {
         }
         return container;
     }
+    stepWizard(delegate) {
+        const wizard = new StepWizardBuilder();
+        wizard.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(wizard);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(wizard.build());
+        return this;
+    }
     formField(label, delegate) {
         const field = new FormFieldBuilder(label);
         field.withInheritanceContext(this.inheritanceContext);
@@ -1031,6 +1053,23 @@ class DialogContainerBuilder {
         }
         return this;
     }
+    addCustomAction(action) {
+        // Add to actions based on position
+        const position = action.position || 'suffix';
+        if (position === 'prefix') {
+            if (!this.dialogState.actions.footer.prefix) {
+                this.dialogState.actions.footer.prefix = [];
+            }
+            this.dialogState.actions.footer.prefix.push(action);
+        }
+        else {
+            if (!this.dialogState.actions.footer.suffix) {
+                this.dialogState.actions.footer.suffix = [];
+            }
+            this.dialogState.actions.footer.suffix.push(action);
+        }
+        return this;
+    }
     // Build method to create dialog node
     build() {
         // If we have content layout, use it directly to avoid extra wrapper
@@ -1255,6 +1294,138 @@ class ActionBuilder {
         return this;
     }
 }
+//#endregion
+//#region ----   Step Wizard Builder Implementation   ----
+/**
+ * Step Builder - Builds individual steps for step wizard
+ */
+class StepBuilder {
+    constructor(id, title) {
+        this.id = id;
+        this.title = title;
+        this.skippable = false;
+        this.inheritanceContext = {};
+    }
+    setIcon(icon) {
+        this.icon = icon;
+        return this;
+    }
+    setDescription(description) {
+        this.description = description;
+        return this;
+    }
+    setSkippable(skippable) {
+        this.skippable = skippable;
+        return this;
+    }
+    content(delegate) {
+        if (delegate) {
+            // Create LayoutBuilder in injection context (will be called from component)
+            const layoutBuilder = new LayoutBuilder();
+            // ✅ IMPORTANT: Propagate inheritance context to content
+            layoutBuilder.inheritanceContext = { ...this.inheritanceContext };
+            delegate(layoutBuilder);
+            this.contentNode = layoutBuilder.build();
+        }
+        return this;
+    }
+    withInheritanceContext(context) {
+        this.inheritanceContext = mergeInheritanceContext(context);
+        return this;
+    }
+    build() {
+        if (!this.contentNode) {
+            throw new Error(`Step '${this.id}' must have content`);
+        }
+        return {
+            id: this.id,
+            title: this.title,
+            icon: this.icon,
+            description: this.description,
+            skippable: this.skippable,
+            content: this.contentNode,
+        };
+    }
+}
+/**
+ * Step Wizard Builder - Builds step wizard widget
+ */
+class StepWizardBuilder extends LayoutContainerMixin {
+    constructor() {
+        super('step-wizard');
+        this.steps = [];
+        this.linear = true;
+        this.wizardDirection = 'horizontal';
+    }
+    setLinear(linear) {
+        this.linear = linear;
+        return this;
+    }
+    setDirection(direction) {
+        this.wizardDirection = direction;
+        return this;
+    }
+    setLook(look) {
+        this.look = look;
+        return this;
+    }
+    setShowActions(show) {
+        this.showActions = show;
+        return this;
+    }
+    setActions(actions) {
+        this.wizardActions = actions;
+        return this;
+    }
+    setGuards(guards) {
+        this.guards = guards;
+        return this;
+    }
+    setEvents(events) {
+        this.events = events;
+        return this;
+    }
+    step(id, title, delegate) {
+        const stepBuilder = new StepBuilder(id, title);
+        // ✅ IMPORTANT: Propagate inheritance context to step
+        stepBuilder.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(stepBuilder);
+        }
+        this.steps.push(stepBuilder.build());
+        return this;
+    }
+    build() {
+        // ✅ Validation
+        if (this.steps.length === 0) {
+            throw new Error('StepWizard must have at least one step');
+        }
+        // ✅ Check duplicate IDs
+        const ids = this.steps.map((s) => s.id);
+        const duplicates = ids.filter((id, index) => ids.indexOf(id) !== index);
+        if (duplicates.length > 0) {
+            throw new Error(`Duplicate step IDs found: ${duplicates.join(', ')}`);
+        }
+        const definition = {
+            steps: this.steps,
+            linear: this.linear,
+            direction: this.wizardDirection,
+            look: this.look,
+            // Do not auto-detect based on dialog context; keep explicit or undefined
+            showActions: this.showActions,
+            actions: this.wizardActions,
+            guards: this.guards,
+            events: this.events,
+        };
+        const node = {
+            name: this.containerState.name,
+            type: 'step-wizard',
+            options: { definition },
+            mode: this.containerState.mode,
+        };
+        return node;
+    }
+}
 
 class AXPLayoutConversionService {
     constructor() {
@@ -1884,29 +2055,60 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     constructor() {
         super(...arguments);
         this.result = new EventEmitter();
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
         // This will be set by the popup service automatically - same as dynamic-dialog
         this.callBack = () => { };
         this.isDialogLoading = signal(false, ...(ngDevMode ? [{ debugName: "isDialogLoading" }] : []));
+        // Aggregated actions for footer rendering
+        this.footerPrefix = signal([], ...(ngDevMode ? [{ debugName: "footerPrefix" }] : []));
+        this.footerSuffix = signal([], ...(ngDevMode ? [{ debugName: "footerSuffix" }] : []));
+        //#endregion
+        //#region ----   View Accessors   ----
+        // Access the internal layout renderer to reach the widgets container injector
+        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : []));
+        this.#eff = effect(() => {
+            let count = 0;
+            if (!this.widgetCoreService) {
+                const renderer = this.layoutRenderer();
+                const container = renderer?.getContainer();
+                this.widgetCoreService = container?.builderService ?? null;
+                count = this.widgetCoreService.registeredWidgetsCount();
+            }
+            else {
+                count = this.widgetCoreService.registeredWidgetsCount();
+                // Clear existing timer
+                if (this.debounceTimer) {
+                    clearTimeout(this.debounceTimer);
+                }
+                // Set new timer to call after 200ms of no count changes
+                this.debounceTimer = setTimeout(() => {
+                    this.aggregateAndEvaluateActions();
+                }, 200);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
+    //#endregion
+    //#region ----   Lifecycle   ----
     ngOnInit() {
         // Initialize context with provided context
         this.context.set(this.config?.context || {});
     }
+    #eff;
+    //#endregion
     handleContextChanged(event) {
         this.context.set(event);
+        this.aggregateAndEvaluateActions();
     }
     handleContextInitiated(event) {
         this.context.set(event);
+        this.aggregateAndEvaluateActions();
     }
-    visibleFooterPrefixActions() {
-        return this.config?.actions?.footer?.prefix || [];
+    footerPrefixActions() {
+        return this.footerPrefix();
     }
-    visibleFooterSuffixActions() {
-        return (this.config?.actions?.footer?.suffix || [
-            { title: 'Cancel', color: 'secondary', command: { name: 'cancel' } },
-            { title: 'Confirm', color: 'primary', command: { name: 'confirm' } },
-        ]);
+    footerSuffixActions() {
+        return this.footerSuffix();
     }
     isFormLoading() {
         return this.isDialogLoading();
@@ -1915,43 +2117,166 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         return this.isDialogLoading();
     }
     async executeAction(action) {
-        const actionName = action.command?.name || action.title?.toLowerCase();
-        // Store the action and context - same pattern as dynamic-dialog
-        const result = {
-            context: this.context(),
-            action: actionName,
-        };
-        // Store result in component property
+        const cmd = action.command;
+        if (cmd !== 'cancel') {
+            const isValid = await this.layoutRenderer()?.validate();
+            if (!isValid?.result) {
+                return;
+            }
+        }
+        if (typeof cmd === 'string' && cmd.startsWith('widget:')) {
+            const parsed = this.parseWidgetCommand(cmd);
+            if (parsed.widgetName && parsed.action) {
+                await this.executeWidgetApi(parsed.widgetName, parsed.action);
+                await this.aggregateAndEvaluateActions();
+                return;
+            }
+        }
+        // Fallback: treat as regular dialog action (cancel/confirm/custom)
+        const result = { context: this.context(), action: cmd };
         this.dialogResult = result;
-        // Store in popup data for DialogRef access
         if (this.data) {
             this.data.context = result.context;
             this.data.action = result.action;
         }
-        // Call the callback with DialogRef - same pattern as dynamic-dialog
         this.callBack({
             close: (result) => {
                 this.close(result);
             },
-            context: () => {
-                return this.context();
-            },
-            action: () => {
-                return result.action;
-            },
+            context: () => this.context(),
+            action: () => result.action,
             setLoading: (loading) => {
                 this.isDialogLoading.set(loading);
             },
         });
     }
-    close(result) {
+    parseWidgetCommand(cmd) {
+        // Expected 'widget:<widgetName>.<action>'
+        if (!cmd?.startsWith('widget:'))
+            return {};
+        const rest = cmd.slice('widget:'.length);
+        const dot = rest.lastIndexOf('.');
+        if (dot <= 0)
+            return {};
+        return { widgetName: rest.slice(0, dot), action: rest.slice(dot + 1) };
+    }
+    async executeWidgetApi(widgetName, apiMethod) {
+        if (!this.widgetCoreService)
+            return;
+        try {
+            const widget = this.widgetCoreService.getWidget(widgetName);
+            const api = widget?.api?.();
+            const fn = api?.[apiMethod];
+            if (typeof fn === 'function') {
+                await Promise.resolve(fn({
+                    close: (result) => {
+                        this.close(result);
+                    },
+                    context: () => this.context(),
+                    setLoading: (loading) => {
+                        this.isDialogLoading.set(loading);
+                    },
+                }));
+            }
+        }
+        catch { }
+    }
+    async close(result) {
         if (result) {
-            this.result.emit(result);
+            const isValid = await this.layoutRenderer()?.validate();
+            if (isValid?.result) {
+                this.result.emit(result);
+            }
         }
         super.close(result);
     }
+    // --- Actions aggregation & evaluation ---
+    async aggregateAndEvaluateActions() {
+        const widgetActions = await this.collectWidgetActions();
+        const dialogActions = this.collectDialogActionsFromConfig();
+        const all = [...widgetActions, ...dialogActions];
+        const evaluated = await this.evaluatePredicates(all);
+        const visible = evaluated.filter((a) => a.hidden !== true);
+        const prefix = visible.filter((a) => (a.zone ?? 'footer') === 'footer' && (a.placement ?? 'suffix') === 'prefix');
+        const suffix = visible.filter((a) => (a.zone ?? 'footer') === 'footer' && (a.placement ?? 'suffix') === 'suffix');
+        this.footerPrefix.set(prefix);
+        this.footerSuffix.set(suffix);
+    }
+    async collectWidgetActions() {
+        if (!this.widgetCoreService)
+            return [];
+        const names = this.widgetCoreService.listRegisteredWidgetNames();
+        const actions = [];
+        for (const name of names) {
+            try {
+                const widget = this.widgetCoreService.getWidget(name);
+                const widgetActs = widget?.actions?.() ?? [];
+                actions.push(...widgetActs);
+            }
+            catch { }
+        }
+        return actions;
+    }
+    collectDialogActionsFromConfig() {
+        const footer = this.config?.actions?.footer;
+        const mapOne = (a, placement) => ({
+            title: a.title,
+            command: typeof a.command === 'string' ? a.command : a.command?.name,
+            icon: a.icon,
+            color: a.color,
+            disabled: a.disabled,
+            hidden: a.hidden,
+            zone: 'footer',
+            placement,
+            scope: a.scope,
+        });
+        const prefix = (footer?.prefix || []).map((a) => mapOne(a, 'prefix'));
+        const suffix = (footer?.suffix || []).map((a) => mapOne(a, 'suffix'));
+        return [...prefix, ...suffix];
+    }
+    async evaluatePredicates(actions) {
+        const out = [];
+        for (const a of actions) {
+            const parsed = typeof a.command === 'string' ? this.parseWidgetCommand(a.command) : {};
+            const api = parsed.widgetName ? await this.resolveApi(parsed.widgetName) : undefined;
+            const scope = {
+                api,
+                widget: { name: parsed.widgetName },
+                dialog: { context: this.context() },
+                context: this.context(),
+            };
+            const disabled = await this.evalBool(a.disabled, scope);
+            const hidden = await this.evalBool(a.hidden, scope);
+            out.push({ ...a, disabled, hidden });
+        }
+        return out;
+    }
+    async evalBool(value, scope) {
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'string') {
+            try {
+                const result = await this.expressionEvaluator.evaluate(value, scope);
+                return !!result;
+            }
+            catch {
+                return false;
+            }
+        }
+        return value;
+    }
+    async resolveApi(widgetName) {
+        try {
+            await this.widgetCoreService?.waitForWidget(widgetName, 2000);
+            const widget = this.widgetCoreService?.getWidget(widgetName);
+            return widget?.api?.();
+        }
+        catch {
+            return undefined;
+        }
+    }
     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: `
+    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" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-p-4">
       <axp-layout-renderer
         [layout]="config.definition"
@@ -1964,52 +2289,42 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
 
     <ax-footer>
       <ax-prefix>
-        <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
+        @for (action of footerPrefixActions(); track $index) {
+          <ax-button
+            [disabled]="action.disabled || isFormLoading()"
+            [text]="(action.title | translate | async)!"
+            [look]="'outline'"
+            [color]="action.color"
+            (onClick)="executeAction(action)"
+          >
+            <ax-prefix>
+              <i class="{{ action.icon }}"></i>
+            </ax-prefix>
+          </ax-button>
+        }
       </ax-prefix>
       <ax-suffix>
-        <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+        @for (action of footerSuffixActions(); track $index) {
+          <ax-button
+            [disabled]="action.disabled || isSubmitting()"
+            [text]="(action.title | translate | async)!"
+            [look]="'solid'"
+            [color]="action.color"
+            (onClick)="executeAction(action)"
+          >
+            @if (isFormLoading()) {
+              <ax-loading></ax-loading>
+            }
+            @if (action.icon) {
+              <ax-prefix>
+                <ax-icon icon="{{ action.icon }}"></ax-icon>
+              </ax-prefix>
+            }
+          </ax-button>
+        }
       </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>
-          }
-        </ax-button>
-      }
-    </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" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: i3.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
             type: Component,
@@ -2037,51 +2352,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
     <ax-footer>
       <ax-prefix>
-        <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
+        @for (action of footerPrefixActions(); track $index) {
+          <ax-button
+            [disabled]="action.disabled || isFormLoading()"
+            [text]="(action.title | translate | async)!"
+            [look]="'outline'"
+            [color]="action.color"
+            (onClick)="executeAction(action)"
+          >
+            <ax-prefix>
+              <i class="{{ action.icon }}"></i>
+            </ax-prefix>
+          </ax-button>
+        }
       </ax-prefix>
       <ax-suffix>
-        <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+        @for (action of footerSuffixActions(); track $index) {
+          <ax-button
+            [disabled]="action.disabled || isSubmitting()"
+            [text]="(action.title | translate | async)!"
+            [look]="'solid'"
+            [color]="action.color"
+            (onClick)="executeAction(action)"
+          >
+            @if (isFormLoading()) {
+              <ax-loading></ax-loading>
+            }
+            @if (action.icon) {
+              <ax-prefix>
+                <ax-icon icon="{{ action.icon }}"></ax-icon>
+              </ax-prefix>
+            }
+          </ax-button>
+        }
       </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>
-          }
-        </ax-button>
-      }
-    </ng-template>
   `,
                 }]
         }], propDecorators: { config: [{