mn-angular-lib 0.0.50 → 0.0.52

package/types/mn-angular-lib.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Provider, TemplateRef, OnInit, Type, ComponentRef, AfterViewInit, OnDestroy, ElementRef, QueryList, ChangeDetectorRef, ViewContainerRef, EventEmitter, PipeTransform } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef, OnInit, Type, ComponentRef, AfterViewInit, OnDestroy, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, ViewContainerRef, PipeTransform } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
@@ -368,6 +368,12 @@ interface MnInputBaseProps {
     label?: string;
     /** Placeholder text (overrides uiConfig.placeholder when provided) */
     placeholder?: string;
+    /** Input mask (e.g., '(000) 000-0000') */
+    mask?: string;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Whether to focus this field when the component initializes */
+    autoFocus?: boolean;
     /** Size variant of the input field (default: 'md') */
     size?: MnInputVariants['size'];
     /** Border radius variant (default: 'md') */
@@ -484,6 +490,7 @@ declare class MnInputField implements OnInit {
     ngControl: NgControl;
     /** Resolved UI configuration for the input field */
     protected uiConfig: MnInputFieldUIConfig;
+    private readonly el;
     /** Configuration properties for the input field */
     props: MnInputProps;
     private readonly configService;
@@ -513,6 +520,10 @@ declare class MnInputField implements OnInit {
      */
     constructor(ngControl: NgControl);
     ngOnInit(): void;
+    /**
+     * Focuses the input element.
+     */
+    focus(): void;
     private resolveConfig;
     /**
      * Gets the appropriate adapter based on the input type.
@@ -740,6 +751,10 @@ interface MnInputAdapter<TOut = string | null> {
      * // if startDate is '2024-07-01'
      */
     validate(props: MnInputProps, control: AbstractControl, currentRaw: string | null): ValidationErrors | null;
+    /**
+     * Applies a mask to the raw input value.
+     */
+    applyMask?(value: string, mask: string): string;
 }
 /**
  * Default adapter for text-based input types.
@@ -750,6 +765,7 @@ interface MnInputAdapter<TOut = string | null> {
  * - Values are stored as strings in the FormControl
  * - No special DOM attributes
  * - No additional validation (relies on Angular's built-in validators)
+ * - Supports simple masking (0 for digit, A for alpha, * for any)
  */
 declare const defaultTextAdapter: MnInputAdapter<string | null>;
 /**
@@ -1047,8 +1063,12 @@ interface MnTextareaProps {
     shadow?: MnTextareaVariants['shadow'];
     /** Whether the textarea should take full width of its container */
     fullWidth?: MnTextareaVariants['fullWidth'];
-    /** Resize behavior of the textarea (default: 'vertical') */
+    /** resize behavior of the textarea (default: 'vertical') */
     resize?: MnTextareaVariants['resize'];
+    /** Whether to focus this field when the component initializes */
+    autoFocus?: boolean;
+    /** Autocomplete attribute */
+    autocomplete?: string;
     /**
      * Custom error messages mapped by validator error key.
      * Example: { required: 'This field is mandatory' }
@@ -1133,6 +1153,7 @@ declare class MnTextarea implements OnInit {
     ngControl: NgControl;
     /** Resolved UI configuration for the textarea */
     protected uiConfig: MnTextareaUIConfig;
+    private readonly el;
     /** Configuration properties for the textarea */
     props: MnTextareaProps;
     private readonly configService;
@@ -1162,6 +1183,10 @@ declare class MnTextarea implements OnInit {
      */
     constructor(ngControl: NgControl);
     ngOnInit(): void;
+    /**
+     * Focuses the textarea element.
+     */
+    focus(): void;
     private resolveConfig;
     /**
      * Writes a new value to the textarea element (called by Angular Forms).
@@ -1983,6 +2008,12 @@ interface WizardStepConfig<TModel = any> {
     initialValue?: Partial<TModel>;
     guard?: StepGuard;
     validators?: StepValidator[];
+    /** Custom label for the 'Next' button on this step */
+    nextLabel?: string;
+    /** Custom label for the 'Back' button on this step */
+    backLabel?: string;
+    /** Whether to hide the 'Back' button on this step */
+    hideBack?: boolean;
     /** Condition to show/hide this entire step based on aggregated wizard data */
     visible?: (aggregatedData: Record<ModalStepId, Record<string, any>>) => boolean;
 }
@@ -2010,6 +2041,14 @@ interface TextFieldConfig<TModel = unknown> {
     disabled?: boolean;
     /** Condition to show/hide this field based on other field values */
     visible?: FieldVisibilityCondition<TModel>;
+    /** Input mask (e.g., '(000) 000-0000') */
+    mask?: string;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Whether to focus this field when the modal opens */
+    autoFocus?: boolean;
+    /** When to update the form control value and run validation */
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface NumberFieldConfig<TModel = unknown> {
     kind: FieldKind.NUMBER;
@@ -2024,6 +2063,8 @@ interface NumberFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface SelectFieldConfig<TModel = unknown, TValue = unknown> {
     kind: FieldKind.SELECT;
@@ -2036,6 +2077,8 @@ interface SelectFieldConfig<TModel = unknown, TValue = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
     /** Async data source for loading options dynamically */
     dataSource?: FieldDataSource<TValue, TModel>;
 }
@@ -2044,9 +2087,13 @@ interface CheckboxFieldConfig<TModel = unknown> {
     key: keyof TModel;
     label: string;
     defaultValue?: boolean;
+    validators?: any[];
+    asyncValidators?: any[];
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface DateFieldConfig<TModel = unknown> {
     kind: FieldKind.DATE;
@@ -2060,6 +2107,8 @@ interface DateFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface TextareaFieldConfig<TModel = unknown> {
     kind: FieldKind.TEXTAREA;
@@ -2072,6 +2121,8 @@ interface TextareaFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface DatetimeFieldConfig<TModel = unknown> {
     kind: FieldKind.DATETIME;
@@ -2087,6 +2138,8 @@ interface DatetimeFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface MultiSelectFieldConfig<TModel = unknown, TValue = unknown> {
     kind: FieldKind.MULTI_SELECT;
@@ -2101,6 +2154,8 @@ interface MultiSelectFieldConfig<TModel = unknown, TValue = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
     /** Async data source for loading options dynamically */
     dataSource?: FieldDataSource<TValue, TModel>;
 }
@@ -2114,6 +2169,8 @@ interface PasswordFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface MultiSelectTableFieldConfig<TModel = unknown, TRow = any> {
     kind: FieldKind.MULTI_SELECT_TABLE;
@@ -2128,6 +2185,8 @@ interface MultiSelectTableFieldConfig<TModel = unknown, TRow = any> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface SingleSelectTableFieldConfig<TModel = unknown, TRow = any> {
     kind: FieldKind.SINGLE_SELECT_TABLE;
@@ -2142,6 +2201,8 @@ interface SingleSelectTableFieldConfig<TModel = unknown, TRow = any> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface ColorFieldConfig<TModel = unknown> {
     kind: FieldKind.COLOR;
@@ -2156,6 +2217,8 @@ interface ColorFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface RatingFieldConfig<TModel = unknown> {
     kind: FieldKind.RATING;
@@ -2172,6 +2235,8 @@ interface RatingFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface SliderFieldConfig<TModel = unknown> {
     kind: FieldKind.SLIDER;
@@ -2192,6 +2257,8 @@ interface SliderFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface FileFieldConfig<TModel = unknown> {
     kind: FieldKind.FILE;
@@ -2210,6 +2277,8 @@ interface FileFieldConfig<TModel = unknown> {
     readOnly?: boolean;
     disabled?: boolean;
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 interface CustomFieldConfig<TModel = unknown> {
     kind: FieldKind.CUSTOM;
@@ -2217,9 +2286,17 @@ interface CustomFieldConfig<TModel = unknown> {
     component: Type<unknown>;
     inputs?: ModalInputMap;
     label?: string;
+    validators?: any[];
+    asyncValidators?: any[];
     visible?: FieldVisibilityCondition<TModel>;
+    autoFocus?: boolean;
+    updateOn?: 'change' | 'blur' | 'submit';
 }
 type FormFieldConfig<TModel = unknown> = TextFieldConfig<TModel> | NumberFieldConfig<TModel> | SelectFieldConfig<TModel> | CheckboxFieldConfig<TModel> | DateFieldConfig<TModel> | TextareaFieldConfig<TModel> | DatetimeFieldConfig<TModel> | MultiSelectFieldConfig<TModel> | MultiSelectTableFieldConfig<TModel> | SingleSelectTableFieldConfig<TModel> | PasswordFieldConfig<TModel> | FileFieldConfig<TModel> | ColorFieldConfig<TModel> | RatingFieldConfig<TModel> | SliderFieldConfig<TModel> | CustomFieldConfig<TModel>;
+interface AnimationOptions {
+    type: 'slide' | 'fade' | 'zoom';
+    duration?: number;
+}
 interface FormRowField<TModel = unknown> {
     field: FormFieldConfig<TModel>;
     span?: number;
@@ -2318,12 +2395,21 @@ interface BaseModalConfig<TResult = unknown> {
     /** Polling configuration for periodic async operations */
     polling?: ModalPollingConfig<TResult>;
     /** Handler called when the modal is cancelled or dismissed */
+    readOnly?: boolean;
+    disabled?: boolean;
     onCancel?: ModalCancelHandler<TResult>;
     /** i18n labels for buttons and UI text */
     i18n?: ModalI18nLabels;
+    /** Animation configuration */
+    animation?: AnimationOptions | AnimationOptions['type'];
+    /** Custom component to render in the modal body */
+    component?: Type<unknown>;
+    /** Custom template to render in the modal body */
+    template?: TemplateRef<unknown>;
+    /** Inputs for the custom component */
+    inputs?: ModalInputMap;
 }
-/** Validator that receives aggregated data from all wizard steps before completion */
-type WizardBeforeCompleteValidator = (payload: Record<ModalStepId, Record<string, any>>) => Promise<Record<string, string> | null> | Record<string, string> | null;
+type WizardBeforeCompleteValidator<TResult = any> = (payload: Record<ModalStepId, Record<string, any>>) => Promise<Partial<Record<keyof TResult, string>> | null> | Partial<Record<keyof TResult, string>> | null;
 interface WizardModalConfig<TResult = WizardResult> extends BaseModalConfig<TResult> {
     kind: ModalKind.WIZARD;
     steps: WizardStepConfig[];
@@ -2332,10 +2418,13 @@ interface WizardModalConfig<TResult = WizardResult> extends BaseModalConfig<TRes
     onStepChange?: WizardStepChangeHandler;
     onComplete?: ModalResultHandler<TResult>;
     /** Cross-step validators run before wizard completion */
-    onBeforeComplete?: WizardBeforeCompleteValidator[];
+    onBeforeComplete?: WizardBeforeCompleteValidator<TResult>[];
+    /** Global initial values for all steps */
+    initialValue?: Partial<TResult>;
 }
 interface FormModalConfig<TModel = unknown, TResult = TModel> extends BaseModalConfig<TResult> {
     kind: ModalKind.FORM;
+    body?: any;
     fields: FormFieldConfig<TModel>[];
     rows?: FormRow<TModel>[];
     layout?: FormLayoutMode;
@@ -2355,20 +2444,137 @@ interface ConfirmationModalConfig<TResult = boolean> extends BaseModalConfig<TRe
     tone?: ConfirmationTone;
     confirm?: ConfirmationActionConfig<TResult>;
     cancel?: CancellationActionConfig;
+    body?: any;
+    fields?: FormFieldConfig<any>[];
+    rows?: FormRow<any>[];
+    fieldGroups?: FormFieldGroup<any>[];
+    formValidators?: FormValidator<any>[];
+    groupValidators?: any[];
+    initialValue?: Partial<any>;
 }
 interface CustomModalConfig<TResult = unknown> extends BaseModalConfig<TResult> {
     kind: ModalKind.CUSTOM;
-    component?: Type<unknown>;
-    template?: TemplateRef<unknown>;
-    inputs?: ModalInputMap;
     onComplete?: ModalResultHandler<TResult>;
 }
 type ModalConfig<TResult = any> = WizardModalConfig<TResult> | FormModalConfig<any, TResult> | ConfirmationModalConfig<TResult> | CustomModalConfig<TResult>;
 
-declare class StepBuilder<TModel = any> {
-    private config;
+/**
+ * Shared interface for configurations that support form layouts.
+ */
+interface FormContainerConfig<TModel = any> {
+    fields?: FormFieldConfig<TModel>[];
+    rows?: FormRow<TModel>[];
+    fieldGroups?: FormFieldGroup<TModel>[];
+    formValidators?: FormValidator<TModel>[];
+    groupValidators?: any[];
+    initialValue?: Partial<TModel>;
+    body?: any;
+}
+/**
+ * A builder class that provides form layout capabilities (fields, rows, groups).
+ * This can be used as a delegate to avoid code duplication between FormModalBuilder and StepBuilder.
+ */
+declare class FormLayoutBuilder<TModel = any, TParent = any> {
+    private readonly config;
+    private readonly parent;
     private currentRow;
     private currentRowColumns;
+    constructor(config: FormContainerConfig<TModel>, parent: TParent);
+    /**
+     * Add a custom body/content to the form/step.
+     */
+    body(body: any): TParent;
+    /**
+     * Add a field as a full-width row (single column).
+     */
+    field(field: FormFieldConfig<TModel>): TParent;
+    /**
+     * Start a new row with the specified number of columns.
+     * All subsequent `addToRow()` calls will add fields to this row.
+     */
+    row(columns?: number): TParent;
+    /**
+     * Add a field to the current row started by `row()`.
+     * @param field - The field configuration
+     * @param span - How many columns this field should span (default: 1)
+     */
+    addToRow(field: FormFieldConfig<TModel>, span?: number): TParent;
+    /**
+     * Declarative way to add a row.
+     * @example
+     * .addRow(2, row => {
+     *   row.add({ kind: FieldKind.TEXT, key: 'first', ... });
+     *   row.add({ kind: FieldKind.TEXT, key: 'last', ... });
+     * })
+     */
+    addRow(columns: number, buildFn: (row: {
+        add: (field: FormFieldConfig<TModel>, span?: number) => void;
+    }) => void): TParent;
+    /**
+     * Add a field group with a section header.
+     */
+    fieldGroup(group: FormFieldGroup<TModel>): TParent;
+    /**
+     * Add a field group using a functional builder.
+     */
+    fieldGroup(title: string, buildFn: (group: FormLayoutBuilder<TModel, any>) => void): TParent;
+    /**
+     * Add a field group with title, description, and a functional builder.
+     */
+    fieldGroup(title: string, description: string, buildFn: (group: FormLayoutBuilder<TModel, any>) => void): TParent;
+    private processFieldGroup;
+    /**
+     * Add form-level validators for cross-field validation.
+     */
+    formValidators(validators: FormValidator<TModel>[]): TParent;
+    /**
+     * Add Angular FormGroup-level validators.
+     */
+    groupValidators(validators: any[]): TParent;
+    /**
+     * Set initial value for fields.
+     */
+    initialValue(value: Partial<TModel>): TParent;
+    /**
+     * Set the field to be focused when the form initializes.
+     */
+    focus(key: keyof TModel): TParent;
+    /**
+     * Wraps a field with a fluent API for validation.
+     */
+    fieldWithValidators(field: FormFieldConfig<TModel>): FieldValidatorBuilder<TModel, TParent>;
+    /**
+     * Flushes any pending fields in the current row to the configuration.
+     */
+    flushCurrentRow(): void;
+}
+/**
+ * A builder for adding validation rules to a field fluently.
+ */
+declare class FieldValidatorBuilder<TModel = any, TParent = any> {
+    private field;
+    private parent;
+    constructor(field: FormFieldConfig<TModel>, parent: TParent);
+    required(message?: string): this;
+    minLength(length: number): this;
+    maxLength(length: number): this;
+    pattern(pattern: string | RegExp): this;
+    email(): this;
+    min(value: number): this;
+    max(value: number): this;
+    /**
+     * Add a custom validator.
+     */
+    custom(validator: any): this;
+    /**
+     * Return to the parent builder.
+     */
+    done(): TParent;
+}
+
+declare class StepBuilder<TModel = any> {
+    private config;
+    private layoutBuilder;
     constructor(id: string, title: string);
     body(body: any): this;
     state(state: StepState): this;
@@ -2391,11 +2597,24 @@ declare class StepBuilder<TModel = any> {
      * Add a field to the current row started by `row()`.
      */
     addToRow(field: FormFieldConfig<TModel>, span?: number): this;
-    private flushCurrentRow;
+    /**
+     * Declarative way to add a row.
+     */
+    addRow(columns: number, buildFn: (row: {
+        add: (field: FormFieldConfig<TModel>, span?: number) => void;
+    }) => void): this;
     /**
      * Add a field group with a section header.
      */
     fieldGroup(group: FormFieldGroup<TModel>): this;
+    /**
+     * Add a field group using a functional builder.
+     */
+    fieldGroup(title: string, buildFn: (group: FormLayoutBuilder<TModel, any>) => void): this;
+    /**
+     * Add a field group with title, description, and a functional builder.
+     */
+    fieldGroup(title: string, description: string, buildFn: (group: FormLayoutBuilder<TModel, any>) => void): this;
     /**
      * Add form-level validators for cross-field validation within this step.
      */
@@ -2412,11 +2631,24 @@ declare class StepBuilder<TModel = any> {
      * Set a visibility condition for this step based on aggregated wizard data.
      */
     visible(condition: (aggregatedData: Record<ModalStepId, Record<string, any>>) => boolean): this;
+    /**
+     * Set a custom label for the 'Next' button on this step.
+     */
+    nextLabel(label: string): this;
+    /**
+     * Set a custom label for the 'Back' button on this step.
+     */
+    backLabel(label: string): this;
+    /**
+     * Hide the 'Back' button on this step.
+     */
+    hideBack(hide?: boolean): this;
     build(): WizardStepConfig<TModel>;
 }
 
 declare abstract class BaseModalBuilder<TConfig extends BaseModalConfig<TResult>, TResult = unknown> {
     protected config: TConfig;
+    protected layoutBuilder: FormLayoutBuilder<any, this>;
     protected constructor(initialConfig: TConfig);
     title(title: string): this;
     subtitle(subtitle: string): this;
@@ -2427,73 +2659,105 @@ declare abstract class BaseModalBuilder<TConfig extends BaseModalConfig<TResult>
     backdrop(mode: BackdropMode): this;
     keyboard(mode: KeyboardMode): this;
     intent(intent: ModalIntent): this;
+    readOnly(readOnly?: boolean): this;
+    disabled(disabled?: boolean): this;
     footerActions(actions: ModalFooterAction<TResult>[]): this;
     polling(config: ModalPollingConfig<TResult>): this;
     onCancel(handler: ModalCancelHandler<TResult>): this;
     i18n(labels: ModalI18nLabels): this;
+    component(component: Type<unknown>): this;
+    template(template: TemplateRef<unknown>): this;
+    inputs(inputs: ModalInputMap): this;
+    animation(animation: AnimationOptions | AnimationOptions['type']): this;
+    /**
+     * Add a custom body/content to the modal.
+     */
+    body(body: any): this;
+    /**
+     * Add a field.
+     */
+    field(field: FormFieldConfig<any>): this;
+    /**
+     * Add a field with a fluent validation builder.
+     */
+    fieldWithValidators(field: FormFieldConfig<any>): FieldValidatorBuilder<any, this>;
+    /**
+     * Start a new row.
+     */
+    row(columns?: number): this;
+    /**
+     * Add a field to the current row.
+     */
+    addToRow(field: FormFieldConfig<any>, span?: number): this;
+    /**
+     * Declarative way to add a row.
+     */
+    addRow(columns: number, buildFn: (row: {
+        add: (field: FormFieldConfig<any>, span?: number) => void;
+    }) => void): this;
+    /**
+     * Add a field group.
+     */
+    fieldGroup(group: FormFieldGroup<any>): this;
+    fieldGroup(title: string, buildFn: (group: FormLayoutBuilder<any, any>) => void): this;
+    fieldGroup(title: string, description: string, buildFn: (group: FormLayoutBuilder<any, any>) => void): this;
     build(): Readonly<TConfig>;
 }
 
-declare class WizardModalBuilder extends BaseModalBuilder<WizardModalConfig, WizardResult> {
+declare class WizardModalBuilder<TResult = WizardResult> extends BaseModalBuilder<WizardModalConfig<TResult>, TResult> {
     constructor();
-    step(step: WizardStepConfig | ((builder: StepBuilder) => void)): this;
-    addStep(title: string, buildFn: (builder: StepBuilder) => void, id?: ModalStepId): this;
+    /**
+     * Set initial values for the entire wizard.
+     * Note: This will be merged with individual step initial values.
+     */
+    initialValue(value: Partial<TResult>): this;
+    body(body: any): this;
+    field(field: FormFieldConfig<any>): this;
+    row(columns?: number): this;
+    addToRow(field: FormFieldConfig<any>, span?: number): this;
+    addRow(columns: number, buildFn: (row: {
+        add: (field: FormFieldConfig<any>, span?: number) => void;
+    }) => void): this;
+    fieldGroup(group: FormFieldGroup<any>): this;
+    fieldGroup(title: string, buildFn: (group: FormLayoutBuilder<any, any>) => void): this;
+    fieldGroup(title: string, description: string, buildFn: (group: FormLayoutBuilder<any, any>) => void): this;
+    step<TStepModel = any>(step: WizardStepConfig<TStepModel> | ((builder: StepBuilder<TStepModel>) => void)): this;
+    addStep<TStepModel = any>(title: string, buildFn: (builder: StepBuilder<TStepModel>) => void, id?: ModalStepId): this;
     startAt(stepId: ModalStepId): this;
     flow(mode: WizardFlowMode): this;
     onStepChange(handler: WizardStepChangeHandler): this;
-    onComplete(handler: ModalResultHandler<WizardResult>): this;
-    onBeforeComplete(validators: WizardBeforeCompleteValidator[]): this;
+    onComplete(handler: ModalResultHandler<TResult>): this;
+    onBeforeComplete(validators: WizardBeforeCompleteValidator<TResult>[]): this;
 }
 
 declare class FormModalBuilder<TModel = unknown, TResult = TModel> extends BaseModalBuilder<FormModalConfig<TModel, TResult>, TResult> {
-    private currentRow;
-    private currentRowColumns;
     constructor();
-    /**
-     * Add a field as a full-width row (single column).
-     * This is the simple API — each field gets its own row.
-     */
+    body(body: any): this;
     field(field: FormFieldConfig<TModel>): this;
-    /**
-     * Start a new row with the specified number of columns.
-     * All subsequent `addToRow()` calls will add fields to this row
-     * until the next `row()` or `field()` call.
-     *
-     * @example
-     * .row(2)
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'firstName', label: 'First Name' })
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'lastName', label: 'Last Name' })
-     * .row(3)
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'city', label: 'City' }, 2)
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'zip', label: 'ZIP' })
-     */
     row(columns?: number): this;
-    /**
-     * Add a field to the current row started by `row()`.
-     * @param field - The field configuration
-     * @param span - How many columns this field should span (default: 1)
-     */
     addToRow(field: FormFieldConfig<TModel>, span?: number): this;
-    private flushCurrentRow;
+    addRow(columns: number, buildFn: (row: {
+        add: (field: FormFieldConfig<TModel>, span?: number) => void;
+    }) => void): this;
     layout(mode: FormLayoutMode): this;
     initialValue(value: Partial<TModel>): this;
     submitMode(mode: SubmitMode): this;
     onComplete(handler: ModalResultHandler<TResult>): this;
-    /**
-     * Add form-level validators for cross-field validation.
-     * These receive the entire form value and return an error map or null.
-     */
     formValidators(validators: FormValidator<TModel>[]): this;
-    /**
-     * Add Angular FormGroup-level validators.
-     * These are standard Angular ValidatorFn applied to the FormGroup itself.
-     */
     groupValidators(validators: any[]): this;
     /**
      * Add a field group with a section header.
      * Groups visually separate fields with a title and optional description.
      */
     fieldGroup(group: FormFieldGroup<TModel>): this;
+    /**
+     * Add a field group using a functional builder.
+     */
+    fieldGroup(title: string, buildFn: (group: FormLayoutBuilder<TModel, any>) => void): this;
+    /**
+     * Add a field group with title, description, and a functional builder.
+     */
+    fieldGroup(title: string, description: string, buildFn: (group: FormLayoutBuilder<TModel, any>) => void): this;
     build(): Readonly<FormModalConfig<TModel, TResult>>;
 }
 
@@ -2503,18 +2767,29 @@ declare class ConfirmationModalBuilder<TResult = boolean> extends BaseModalBuild
     tone(tone: ConfirmationTone): this;
     confirmAction(action: ConfirmationActionConfig<TResult>): this;
     cancelAction(action: CancellationActionConfig): this;
+    body(body: any): this;
+    field(field: FormFieldConfig<any>): this;
+    row(columns?: number): this;
+    addToRow(field: FormFieldConfig<any>, span?: number): this;
+    addRow(columns: number, buildFn: (row: {
+        add: (field: FormFieldConfig<any>, span?: number) => void;
+    }) => void): this;
+    fieldGroup(group: FormFieldGroup<any>): this;
+    fieldGroup(title: string, buildFn: (group: FormLayoutBuilder<any, any>) => void): this;
+    fieldGroup(title: string, description: string, buildFn: (group: FormLayoutBuilder<any, any>) => void): this;
+    initialValue(value: Partial<any>): this;
+    formValidators(validators: FormValidator<any>[]): this;
+    groupValidators(validators: any[]): this;
+    build(): Readonly<ConfirmationModalConfig<TResult>>;
 }
 
 declare class CustomModalBuilder<TResult = unknown> extends BaseModalBuilder<CustomModalConfig<TResult>, TResult> {
     constructor();
-    component(component: Type<unknown>): this;
-    template(template: TemplateRef<unknown>): this;
-    inputs(inputs: ModalInputMap): this;
     onComplete(handler: ModalResultHandler<TResult>): this;
 }
 
 declare class ModalBuilder {
-    static wizard(): WizardModalBuilder;
+    static wizard<TResult = any>(): WizardModalBuilder<TResult>;
     static form<TModel = unknown, TResult = TModel>(): FormModalBuilder<TModel, TResult>;
     static confirmation<TResult = boolean>(): ConfirmationModalBuilder<TResult>;
     static custom<TResult = unknown>(): CustomModalBuilder<TResult>;
@@ -2530,12 +2805,14 @@ declare class MnModalRef<TResult = any> implements ModalRef<TResult> {
     dismiss(reason: ModalCloseReason): void;
     private animateAndDestroy;
     update(config: Partial<BaseModalConfig<TResult>>): void;
+    get component(): any;
     private destroy;
 }
 
 declare class MnModalService {
     private readonly appRef;
     private readonly injector;
+    private readonly modalStack;
     open<TResult = any>(config: ModalConfig<TResult>): MnModalRef<TResult>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MnModalService>;
@@ -2546,6 +2823,7 @@ declare class MnModalShellComponent<TResult = any> implements OnInit, AfterViewI
     config: ModalConfig<TResult>;
     modalRef: MnModalRef<TResult>;
     isClosing: boolean;
+    isStacked: boolean;
     readonly ModalKind: typeof ModalKind;
     private previouslyFocusedElement;
     private focusTrapListener;
@@ -2571,6 +2849,7 @@ declare class MnModalShellComponent<TResult = any> implements OnInit, AfterViewI
     get showBackdrop(): boolean;
     get containerSizeClass(): string;
     get showCloseButton(): boolean;
+    get animationClass(): string;
     get hasCustomFooterActions(): boolean;
     get leftFooterActions(): ModalFooterAction<TResult>[];
     get rightFooterActions(): ModalFooterAction<TResult>[];
@@ -2584,11 +2863,15 @@ declare class MnModalShellComponent<TResult = any> implements OnInit, AfterViewI
     static ɵcmp: i0.ɵɵComponentDeclaration<MnModalShellComponent<any>, "mn-modal-shell", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class MnFormBodyComponent<TModel = any, TResult = TModel> implements OnInit, OnDestroy {
+declare class MnFormBodyComponent<TModel = any, TResult = TModel> implements OnInit, OnDestroy, AfterViewInit {
     private fb;
     config: FormModalConfig<TModel, TResult>;
     modalRef: MnModalRef<TResult>;
     hideFooter: boolean;
+    hideCustomBody: boolean;
+    formStatusChange: EventEmitter<string>;
+    inputFields?: QueryList<MnInputField>;
+    textareas?: QueryList<MnTextarea>;
     form: FormGroup;
     rows: FormRow<TModel>[];
     fieldGroups: FormFieldGroup<TModel>[];
@@ -2621,6 +2904,8 @@ declare class MnFormBodyComponent<TModel = any, TResult = TModel> implements OnI
         fileUploadPrompt: any;
     };
     ngOnInit(): void;
+    ngAfterViewInit(): void;
+    applyAutoFocus(): void;
     ngOnDestroy(): void;
     private initializeForm;
     isFieldReadOnly(field: FormFieldConfig<TModel>): boolean;
@@ -2666,7 +2951,7 @@ declare class MnFormBodyComponent<TModel = any, TResult = TModel> implements OnI
     getFileError(field: FormFieldConfig<TModel>): string;
     submit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnFormBodyComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MnFormBodyComponent<any, any>, "mn-form-body", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; "hideFooter": { "alias": "hideFooter"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnFormBodyComponent<any, any>, "mn-form-body", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; "hideFooter": { "alias": "hideFooter"; "required": false; }; "hideCustomBody": { "alias": "hideCustomBody"; "required": false; }; }, { "formStatusChange": "formStatusChange"; }, never, never, true, never>;
 }
 
 declare class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -2722,9 +3007,16 @@ declare class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy
     static ɵcmp: i0.ɵɵComponentDeclaration<MnWizardBodyComponent, "mn-wizard-body", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class MnConfirmationBodyComponent<TResult = boolean> {
+declare class MnConfirmationBodyComponent<TResult = boolean> implements OnInit {
+    private cdr;
     config: ConfirmationModalConfig<TResult>;
     modalRef: MnModalRef<TResult>;
+    formBody?: MnFormBodyComponent;
+    confirmButtonStatus: string;
+    hasFormFields: boolean;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    onFormStatusChange(status: string): void;
     confirm(): Promise<void>;
     cancel(): void;
     get confirmLabel(): string;
@@ -2734,6 +3026,9 @@ declare class MnConfirmationBodyComponent<TResult = boolean> {
     get toneClass(): string;
     getButtonColor(style: ActionStyle): 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
     getButtonVariant(style: ActionStyle): 'fill' | 'outline' | 'text';
+    asAny(val: any): any;
+    get isConfirmDisabled(): boolean;
+    asField(field: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnConfirmationBodyComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MnConfirmationBodyComponent<any>, "mn-confirmation-body", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -2799,7 +3094,17 @@ declare class MnTable<T = any> implements OnInit, OnDestroy {
 /**
  * Types for mn-lib configuration.
  */
+interface MnConfigSettings {
+    /** Application or library version. */
+    version?: string;
+    /** Application or library name. */
+    name?: string;
+}
 interface MnConfigFile {
+    /**
+     * General settings such as version and name.
+     */
+    settings?: MnConfigSettings;
     /**
      * Base defaults by component name. Each value is a plain object with inputs/options for that component.
      */
@@ -2815,14 +3120,26 @@ interface MnConfigFile {
 declare class MnConfigService {
     private readonly http;
     private _config;
+    private _settings;
     private _debugMode;
+    /** Reactive version counter — incremented on every config load. */
+    private _configVersion;
+    readonly configVersion: i0.Signal<number>;
     private readonly lang;
     constructor(http: HttpClient);
+    /** General settings from the config file (version, name, etc.). */
+    get settings(): Readonly<MnConfigSettings>;
     /**
      * Load the configuration JSON from the provided URL and cache it in memory.
      * Consumers should typically call this via the APP_INITIALIZER helper.
      */
     load(url: string, debugMode?: boolean): Promise<void>;
+    /**
+     * Load configuration from a pre-parsed object (no HTTP fetch).
+     * Used for live preview scenarios where config is pushed via postMessage.
+     * Optionally re-bootstraps the language service if a `language` section is present.
+     */
+    loadFromObject(config: Record<string, any>, bootstrapLanguage?: boolean): Promise<void>;
     /**
      * Resolve a configuration object for a component, optionally scoped to a section path
      * and optionally overridden by an instance id.
@@ -3308,5 +3625,22 @@ declare class MnTranslatePipe implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<MnTranslatePipe, "mnTranslate", true>;
 }
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_MN_ALERT_CONFIG, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig, provideMnLanguage };
-export type { ApiError, BaseModalConfig, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColumnDefinition, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnConfigFile, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessagesData, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnShowInput, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableRowAction, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };
+interface MnPreviewMessage {
+    type: 'mn-config-update' | 'mn-translations-update';
+    config?: Record<string, any>;
+    translations?: Record<string, Record<string, string>>;
+}
+/**
+ * Enable live preview mode. Listens for postMessage events from
+ * Mn Web Manager and hot-swaps config/translations at runtime.
+ *
+ * Call this once in your app's bootstrap (e.g., APP_INITIALIZER or root component).
+ *
+ * @param configService - The MnConfigService instance
+ * @param langService - The MnLanguageService instance
+ * @param allowedOrigins - Optional whitelist of allowed origins (security)
+ */
+declare function enableMnPreviewMode(configService: MnConfigService, langService: MnLanguageService, allowedOrigins?: string[]): void;
+
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_MN_ALERT_CONFIG, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig, provideMnLanguage };
+export type { AnimationOptions, ApiError, BaseModalConfig, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColumnDefinition, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessagesData, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnShowInput, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableRowAction, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };