{"version":3,"file":"mn-angular-lib-modal-ui.mjs","sources":["../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-form-body/mn-custom-field-host.directive.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-custom-body-host/mn-custom-body-host.component.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-form-body/mn-form-body.component.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-form-body/mn-form-body.component.html","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-footer-actions/mn-footer-actions.component.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-wizard-body/mn-wizard-body.component.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-wizard-body/mn-wizard-body.component.html","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-confirmation-body/mn-confirmation-body.component.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-confirmation-body/mn-confirmation-body.component.html","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-modal-shell/mn-modal-shell.component.ts","../../../projects/mn-angular-lib/modal-ui/src/mn-modal/components/mn-modal-shell/mn-modal-shell.component.html","../../../projects/mn-angular-lib/modal-ui/public-api.ts","../../../projects/mn-angular-lib/modal-ui/mn-angular-lib-modal-ui.ts"],"sourcesContent":["import {\n Directive,\n Input,\n ViewContainerRef,\n OnInit,\n OnDestroy,\n ComponentRef,\n Type,\n forwardRef,\n inject\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { ModalInputMap } from 'mn-angular-lib/modal-core';\n\n@Directive({\n selector: '[mnCustomFieldHost]',\n standalone: true,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MnCustomFieldHostDirective),\n multi: true,\n },\n ],\n})\nexport class MnCustomFieldHostDirective implements OnInit, OnDestroy, ControlValueAccessor {\n private vcr = inject(ViewContainerRef);\n\n @Input() component!: Type;\n @Input() inputs?: ModalInputMap;\n\n private componentRef?: ComponentRef;\n private onChange: (val: unknown) => void = () => {\n };\n private onTouched: () => void = () => {};\n\n ngOnInit(): void {\n if (!this.component) return;\n\n this.vcr.clear();\n this.componentRef = this.vcr.createComponent(this.component);\n\n // Pass inputs to the component\n if (this.inputs) {\n Object.entries(this.inputs).forEach(([key, value]) => {\n (this.componentRef!.instance as Record)[key] = value;\n });\n }\n\n // Wire up value accessor if the component supports it\n const instance = this.componentRef.instance as {\n registerOnChange?: (fn: (val: unknown) => void) => void;\n registerOnTouched?: (fn: () => void) => void;\n };\n if (typeof instance.registerOnChange === 'function') {\n instance.registerOnChange((val: unknown) => this.onChange(val));\n }\n if (typeof instance.registerOnTouched === 'function') {\n instance.registerOnTouched(() => this.onTouched());\n }\n }\n\n ngOnDestroy(): void {\n this.componentRef?.destroy();\n }\n\n writeValue(val: unknown): void {\n const instance = this.componentRef?.instance as { writeValue?: (val: unknown) => void };\n if (instance && typeof instance.writeValue === 'function') {\n instance.writeValue(val);\n }\n }\n\n registerOnChange(fn: (val: unknown) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n const instance = this.componentRef?.instance as { setDisabledState?: (isDisabled: boolean) => void };\n if (instance && typeof instance.setDisabledState === 'function') {\n instance.setDisabledState(isDisabled);\n }\n }\n}\n","import {\n Component,\n Input,\n OnInit,\n Type,\n ViewChild,\n ViewContainerRef,\n ComponentRef,\n TemplateRef,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MnModalRef } from 'mn-angular-lib/modal-core';\nimport { CustomModalConfig } from 'mn-angular-lib/modal-core';\n\n@Component({\n selector: 'mn-custom-body-host',\n standalone: true,\n imports: [CommonModule],\n template: '',\n})\nexport class MnCustomBodyHostComponent implements OnInit {\n @Input() config!: CustomModalConfig;\n @Input() modalRef!: MnModalRef;\n\n @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;\n\n private componentRef?: ComponentRef;\n\n ngOnInit(): void {\n setTimeout(() => this.loadContent(), 0);\n }\n\n private loadContent(): void {\n if (!this.container) return;\n\n this.container.clear();\n\n if (this.config.component) {\n this.attachComponent(this.config.component);\n } else if (this.config.template) {\n this.attachTemplate(this.config.template);\n }\n }\n\n attachComponent(component: Type): void {\n this.componentRef = this.container.createComponent(component);\n\n // Pass inputs to the component\n if (this.config.inputs) {\n Object.entries(this.config.inputs).forEach(([key, value]) => {\n (this.componentRef!.instance as Record)[key] = value;\n });\n }\n\n // Pass modalRef if the component has a modalRef property\n const instance = this.componentRef.instance as Record;\n if (instance && 'modalRef' in instance) {\n instance['modalRef'] = this.modalRef;\n }\n }\n\n attachTemplate(template: TemplateRef): void {\n this.container.createEmbeddedView(template, {\n $implicit: this.modalRef,\n modalRef: this.modalRef,\n });\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n inject,\n Input,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n Type,\n ViewChildren,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n AbstractControlOptions,\n FormBuilder,\n FormGroup,\n ReactiveFormsModule,\n ValidatorFn,\n Validators,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { MnModalRef } from 'mn-angular-lib/modal-core';\nimport {\n FieldDataSource,\n FieldKind,\n FieldRequiredCondition,\n FieldVisibilityCondition,\n FileFieldConfig,\n FormFieldConfig,\n FormFieldGroup,\n FormModalConfig,\n FormRow,\n ModalCloseReason,\n ModalI18nLabels,\n ModalInputMap,\n MultiSelectTableFieldConfig,\n RatingFieldConfig,\n SelectOption,\n SingleSelectTableFieldConfig,\n SliderFieldConfig,\n SubmitMode,\n} from 'mn-angular-lib/modal-core';\nimport { MnButton } from 'mn-angular-lib/button';\nimport { MnInputField } from 'mn-angular-lib/forms';\nimport { MnCheckbox } from 'mn-angular-lib/forms';\nimport { MnDatetime } from 'mn-angular-lib/forms';\nimport { MnMultiSelect } from 'mn-angular-lib/forms';\nimport { MnTextarea } from 'mn-angular-lib/forms';\nimport { MnFileInput } from 'mn-angular-lib/forms';\nimport { MnSelect, MnSelectOption, MnSelectProps } from 'mn-angular-lib/forms';\nimport { MnCustomFieldHostDirective } from './mn-custom-field-host.directive';\nimport { MnLanguageService } from 'mn-angular-lib/core';\nimport { MnTable, TableDataSource } from 'mn-angular-lib/collection';\nimport { MnCustomBodyHostComponent } from '../mn-custom-body-host/mn-custom-body-host.component';\nimport { LucideDynamicIcon, LucideIconData } from '@lucide/angular';\nimport { MN_MODAL_ACTION_ICONS, MODAL_ACTION_ICON_SIZE } from 'mn-angular-lib/modal-core';\n\n/**\n * A structural \"view\" over the {@link FormFieldConfig} discriminated union that\n * exposes every member-specific property as optional. The template and several\n * helpers need to read properties that only exist on some union members (e.g.\n * `placeholder`, `swatches`, `mode`, `dataSource`, `validators`). Casting the\n * field to this view keeps that access type-checked without resorting to `any`.\n */\ntype FormFieldView = FormFieldConfig & {\n label?: string;\n placeholder?: string;\n validators?: ValidatorFn[];\n asyncValidators?: ValidatorFn[];\n updateOn?: 'change' | 'blur' | 'submit';\n options?: SelectOption[];\n dataSource?: FieldDataSource;\n disabled?: boolean;\n readOnly?: boolean;\n visible?: FieldVisibilityCondition;\n conditionallyRequired?: FieldRequiredCondition;\n autoFocus?: boolean;\n defaultValue?: unknown;\n mask?: string;\n autocomplete?: string;\n minDate?: string;\n maxDate?: string;\n mode?: 'date' | 'time' | 'datetime-local';\n min?: number | string;\n max?: number | string;\n step?: number;\n rows?: number;\n searchable?: boolean;\n searchPlaceholder?: string;\n maxSelections?: number;\n collapseThreshold?: number;\n collapsePlaceholder?: string;\n allSelectedPlaceholder?: string;\n swatches?: string[];\n showValue?: boolean;\n unit?: string;\n accept?: string;\n multiple?: boolean;\n displayMode?: 'dropzone' | 'thumbnail' | 'list' | 'compact';\n dropzoneHint?: string;\n dropActiveHint?: string;\n replaceLabel?: string;\n removeLabel?: string;\n currentUrl?: string | null;\n currentUrls?: string[] | null;\n onClear?: () => void;\n // Non-optional in the view: the template only reads these inside the\n // matching @case/@if guards where the runtime value is always present.\n // Keeping them non-undefined avoids spurious template type errors that the\n // previous `any` cast masked, without changing runtime behavior.\n maxSize: number;\n maxFiles?: number;\n component: Type;\n inputs?: ModalInputMap;\n};\n\n@Component({\n selector: 'mn-form-body',\n standalone: true,\n imports: [\n CommonModule,\n ReactiveFormsModule,\n MnButton,\n MnInputField,\n MnCheckbox,\n MnDatetime,\n MnMultiSelect,\n MnTextarea,\n MnFileInput,\n MnSelect,\n MnCustomFieldHostDirective,\n MnTable,\n MnCustomBodyHostComponent,\n LucideDynamicIcon,\n ],\n templateUrl: './mn-form-body.component.html',\n styleUrls: ['./mn-form-body.component.css'],\n})\nexport class MnFormBodyComponent\n implements OnInit, OnDestroy, AfterViewInit\n{\n private fb = inject(FormBuilder);\n\n /**\n * Change detector used to announce state this component mutates outside an Angular\n * event handler — after an `await`, or from an RxJS subscription. Consuming apps run\n * zoneless, where such a write notifies nothing: the view is never marked dirty, so it\n * keeps rendering the stale value and `checkNoChanges` then reports it as NG0100\n * (e.g. the submit button staying disabled on \"Submitting...\" after a failed submit).\n * Every async mutation of {@link isSubmitting}, {@link fieldLoading}, {@link fieldOptions}\n * and {@link formErrors} must be followed by `markForCheck()`.\n */\n private readonly cdr = inject(ChangeDetectorRef);\n\n @Input() config!: FormModalConfig;\n @Input() modalRef!: MnModalRef;\n @Input() hideFooter = false;\n @Input() hideCustomBody = false;\n @Output() formStatusChange = new EventEmitter();\n\n @ViewChildren(MnInputField) inputFields?: QueryList;\n @ViewChildren(MnTextarea) textareas?: QueryList;\n\n form!: FormGroup;\n rows: FormRow[] = [];\n fieldGroups: FormFieldGroup[] = [];\n isSubmitting = false;\n readonly FieldKind = FieldKind;\n readonly ModalCloseReason = ModalCloseReason;\n\n /** Cross-field validation errors: { fieldKey: errorMessage } */\n formErrors: Record = {};\n\n /** Track which fields are currently visible (for conditional fields) */\n fieldVisibility: Record = {};\n\n /** Track which fields are currently conditionally required */\n fieldConditionallyRequired: Record = {};\n\n /** Track loading state per field for async data sources */\n fieldLoading: Record = {};\n\n /** Dynamic options loaded from data sources */\n fieldOptions: Record = {};\n\n private valueChangesSubscription?: Subscription;\n\n asField(field: FormFieldConfig): FormFieldView {\n return field as FormFieldView;\n }\n\n asKey(key: keyof TModel | string): string {\n return key as string;\n }\n\n // The template builds untyped `props` object literals and passes them to\n // strongly-typed child component `[props]` inputs. There is no single static\n // type for those literals, so this identity bridge must return `any` to keep\n // the template assignment-compatible. This is a genuine template-bridge case.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n asAny(val: unknown): any {\n return val;\n }\n\n hasRequiredValidator(field: FormFieldConfig): boolean {\n const view = field as FormFieldView;\n // Check if conditionallyRequired is currently active\n if (view.conditionallyRequired) {\n const formValue = (this.form?.value ?? {}) as Partial;\n if (view.conditionallyRequired(formValue)) return true;\n }\n const validators = view.validators;\n if (!validators) return false;\n // Check if Validators.required is in the array by testing a dummy control\n const control = this.fb.control(null, validators);\n const errors = control.errors;\n return errors != null && 'required' in errors;\n }\n\n /** Store table data sources keyed by field key for template access */\n tableDataSources: Record> = {};\n\n private languageService = inject(MnLanguageService);\n\n private static readonly DEFAULT_LABELS: Record = {\n submit: 'Submit',\n cancel: 'Cancel',\n submitting: 'Submitting...',\n selectPlaceholder: 'Select...',\n loading: 'Loading...',\n fileUploadPrompt: 'Click or drag files here',\n fieldRequired: 'This field is required',\n loadingOptions: 'Loading options...',\n accepted: 'Accepted:',\n maxSize: 'Max size:',\n };\n\n private resolveLabel(i18nValue: string | undefined, key: string): string {\n if (i18nValue) return i18nValue;\n const translated = this.languageService.translate(`common.${key}`);\n return translated === `common.${key}` ? MnFormBodyComponent.DEFAULT_LABELS[key] : translated;\n }\n\n /** Resolved i18n labels with defaults, falling back to translated keys */\n get labels() {\n // The config's i18n map may carry extra keys beyond ModalI18nLabels (e.g.\n // fieldRequired, loadingOptions), so widen the type to expose them as\n // declared optional properties (keeps dot access type-checked).\n const i18n: ModalI18nLabels &\n Partial> =\n this.config.i18n || {};\n return {\n submit: this.resolveLabel(i18n.submit, 'submit'),\n cancel: this.resolveLabel(i18n.cancel, 'cancel'),\n submitting: this.resolveLabel(i18n.submitting, 'submitting'),\n selectPlaceholder: this.resolveLabel(i18n.selectPlaceholder, 'selectPlaceholder'),\n loading: this.resolveLabel(i18n.loading, 'loading'),\n fileUploadPrompt: this.resolveLabel(i18n.fileUploadPrompt, 'fileUploadPrompt'),\n fieldRequired: this.resolveLabel(i18n.fieldRequired, 'fieldRequired'),\n loadingOptions: this.resolveLabel(i18n.loadingOptions, 'loadingOptions'),\n accepted: this.resolveLabel(i18n.accepted, 'accepted'),\n maxSize: this.resolveLabel(i18n.maxSize, 'maxSize'),\n };\n }\n\n ngOnInit(): void {\n this.initializeForm();\n this.buildRows();\n this.initializeVisibility();\n this.initializeDataSources();\n this.initializeTableFields();\n this.subscribeToValueChanges();\n\n if (this.config.disabled || this.config.readOnly) {\n this.form.disable();\n }\n\n // Emit initial status\n setTimeout(() => {\n this.formStatusChange.emit(this.form.status);\n });\n }\n\n ngAfterViewInit(): void {\n // Small delay to ensure children are fully rendered and MnModalShell hasn't just stolen focus\n setTimeout(() => {\n this.applyAutoFocus();\n }, 100);\n }\n\n public applyAutoFocus(): void {\n const autoFocusField = this.config.fields.find((f) => (f as FormFieldView).autoFocus);\n if (!autoFocusField) return;\n\n const key = autoFocusField.key as string;\n\n // Small delay to ensure browser is ready to focus\n setTimeout(() => {\n // Try finding in MnInputField components\n const inputField = this.inputFields?.find((f) => f.props.id === key);\n if (inputField) {\n inputField.focus();\n return;\n }\n\n // Try finding in MnTextarea components\n const textarea = this.textareas?.find((f) => f.props?.id === key);\n if (textarea) {\n textarea.focus();\n return;\n }\n\n // Fallback to native element if possible\n const el = document.getElementById(key);\n if (el) el.focus();\n }, 50);\n }\n\n ngOnDestroy(): void {\n this.valueChangesSubscription?.unsubscribe();\n }\n\n private initializeForm(): void {\n const formControls: Record = {};\n\n this.config.fields.forEach((field) => {\n const fieldConfig = field as FormFieldView;\n let initialValue: unknown = this.config.initialValue?.[field.key as keyof TModel] ?? null;\n\n // Handle checkbox default values\n if (field.kind === FieldKind.CHECKBOX && initialValue === null) {\n initialValue = fieldConfig.defaultValue ?? false;\n }\n\n const validators = fieldConfig.validators || [];\n const asyncValidators = fieldConfig.asyncValidators || [];\n const updateOn = fieldConfig.updateOn || 'change';\n\n formControls[field.key as string] = [\n initialValue,\n {\n validators,\n asyncValidators,\n updateOn,\n },\n ];\n });\n\n this.form = this.fb.group(formControls);\n\n // Apply Angular FormGroup-level validators\n if (this.config.groupValidators && this.config.groupValidators.length > 0) {\n this.form.setValidators(this.config.groupValidators);\n this.form.updateValueAndValidity();\n }\n\n // Apply disabled/readOnly state to controls\n this.config.fields.forEach((field) => {\n const fieldView = field as FormFieldView;\n const control = this.form.get(field.key as string);\n if (control && (fieldView.disabled || fieldView.readOnly)) {\n control.disable();\n }\n });\n }\n\n isFieldReadOnly(field: FormFieldConfig): boolean {\n return this.config.readOnly === true || (field as FormFieldView).readOnly === true;\n }\n\n isFieldDisabled(field: FormFieldConfig): boolean {\n return this.config.disabled === true || (field as FormFieldView).disabled === true;\n }\n\n /** Track which field groups are currently visible */\n groupVisibility: Record = {};\n\n private buildRows(): void {\n if (this.config.rows && this.config.rows.length > 0) {\n this.rows = this.config.rows;\n } else {\n // Create rows for fields that are not in any row or group\n const fieldsInGroups = new Set();\n (this.config.fieldGroups || []).forEach((g) => {\n (g.rows || []).forEach((r) =>\n r.fields.forEach((f) => fieldsInGroups.add(f.field.key as string)),\n );\n // Also check if group has flat fields list (compatibility)\n if (g.fields) {\n g.fields.forEach((f) => fieldsInGroups.add(f.key as string));\n }\n });\n\n const fieldsInRows = new Set();\n (this.config.rows || []).forEach((r) =>\n r.fields.forEach((f) => fieldsInRows.add(f.field.key as string)),\n );\n\n const standaloneFields = this.config.fields.filter(\n (f) => !fieldsInGroups.has(f.key as string) && !fieldsInRows.has(f.key as string),\n );\n\n if (standaloneFields.length > 0) {\n this.rows = standaloneFields.map((field) => ({\n columns: 1,\n fields: [{ field, span: 1 }],\n }));\n }\n }\n // Build field groups\n this.fieldGroups = this.config.fieldGroups || [];\n // Initialize group visibility\n this.initializeGroupVisibility();\n }\n\n private initializeGroupVisibility(): void {\n this.fieldGroups.forEach((group, index) => {\n const key = group.title || `group-${index}`;\n const isVisible = group.visible ? group.visible(this.form.value) : true;\n this.groupVisibility[key] = isVisible;\n // If group is hidden, clear validators on its fields\n if (!isVisible) {\n group.fields.forEach((field) => {\n const control = this.form.get(field.key as string);\n if (control) {\n control.clearValidators();\n control.updateValueAndValidity({ emitEvent: false });\n }\n });\n }\n });\n }\n\n private updateGroupVisibility(): void {\n const formValue = this.form.value;\n this.fieldGroups.forEach((group, index) => {\n const key = group.title || `group-${index}`;\n const wasVisible = this.groupVisibility[key];\n const isVisible = group.visible ? group.visible(formValue) : true;\n this.groupVisibility[key] = isVisible;\n\n if (!isVisible && wasVisible) {\n // Group became hidden — clear validators on its fields\n group.fields.forEach((field) => {\n const control = this.form.get(field.key as string);\n if (control) {\n control.clearValidators();\n control.updateValueAndValidity({ emitEvent: false });\n }\n });\n } else if (isVisible && !wasVisible) {\n // Group became visible — restore validators\n group.fields.forEach((field) => {\n const fieldView = field as FormFieldView;\n const validators = fieldView.validators || [];\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValidators(validators);\n control.updateValueAndValidity({ emitEvent: false });\n }\n });\n }\n });\n }\n\n isGroupVisible(group: FormFieldGroup): boolean {\n const key = group.title || `group-${this.fieldGroups.indexOf(group)}`;\n return this.groupVisibility[key];\n }\n\n // =========================\n // Feature 1: Conditional/Dynamic Fields\n // =========================\n\n private initializeVisibility(): void {\n const formValue = this.form.value as Partial;\n this.config.fields.forEach((field) => {\n const key = field.key as string;\n const fieldView = field as FormFieldView;\n const isVisible = fieldView.visible ? fieldView.visible(formValue) : true;\n this.fieldVisibility[key] = isVisible;\n\n // If initially hidden, clear validators so they don't block submit\n if (!isVisible) {\n const control = this.form.get(key);\n if (control) {\n control.clearValidators();\n control.updateValueAndValidity({ emitEvent: false });\n }\n } else if (fieldView.conditionallyRequired) {\n // Initialize conditionallyRequired state for visible fields\n const isRequired = fieldView.conditionallyRequired(formValue);\n this.fieldConditionallyRequired[key] = isRequired;\n if (isRequired) {\n const control = this.form.get(key);\n if (control) {\n const validators = this.buildValidators(fieldView, formValue);\n control.setValidators(validators);\n control.updateValueAndValidity({ emitEvent: false });\n }\n }\n }\n });\n }\n\n private updateVisibility(): void {\n const formValue = this.form.value as Partial;\n this.config.fields.forEach((field) => {\n const key = field.key as string;\n const fieldView = field as FormFieldView;\n const wasVisible = this.fieldVisibility[key];\n const isVisible = fieldView.visible ? fieldView.visible(formValue) : true;\n this.fieldVisibility[key] = isVisible;\n\n // When a field becomes hidden, clear its validators so it doesn't block submit\n const control = this.form.get(key);\n if (control) {\n if (!isVisible && wasVisible) {\n control.clearValidators();\n control.updateValueAndValidity({ emitEvent: false });\n } else if (isVisible && !wasVisible) {\n // Restore validators (including conditionallyRequired if active)\n const validators = this.buildValidators(fieldView, formValue);\n control.setValidators(validators);\n control.updateValueAndValidity({ emitEvent: false });\n } else if (isVisible) {\n // Update conditionallyRequired for visible fields\n this.updateConditionallyRequired(fieldView, formValue);\n }\n }\n });\n }\n\n /**\n * Builds the full validator array for a field, including conditionallyRequired.\n * @param field The field configuration view.\n * @param formValue The current form values.\n * @returns Array of validators to apply.\n */\n private buildValidators(field: FormFieldView, formValue: Partial): ValidatorFn[] {\n const baseValidators = field.validators ? [...field.validators] : [];\n if (field.conditionallyRequired && field.conditionallyRequired(formValue)) {\n if (!baseValidators.includes(Validators.required)) {\n baseValidators.push(Validators.required);\n }\n }\n return baseValidators;\n }\n\n /**\n * Updates the conditionallyRequired state for a single field and adjusts validators.\n * @param field The field configuration view.\n * @param formValue The current form values.\n */\n private updateConditionallyRequired(\n field: FormFieldView,\n formValue: Partial,\n ): void {\n if (!field.conditionallyRequired) return;\n const key = field.key as string;\n const wasRequired = this.fieldConditionallyRequired[key] ?? false;\n const isRequired = field.conditionallyRequired(formValue);\n this.fieldConditionallyRequired[key] = isRequired;\n\n if (isRequired !== wasRequired) {\n const control = this.form.get(key);\n if (control) {\n const validators = this.buildValidators(field, formValue);\n control.setValidators(validators);\n control.updateValueAndValidity({ emitEvent: false });\n }\n }\n }\n\n isFieldVisible(field: FormFieldConfig): boolean {\n return this.fieldVisibility[field.key as string];\n }\n\n // =========================\n // Feature 2: Cross-Field Validation\n // =========================\n\n private runFormValidators(): void {\n this.formErrors = {};\n if (!this.config.formValidators) return;\n\n const formValue = this.form.value;\n for (const validator of this.config.formValidators) {\n const errors = validator(formValue);\n if (errors) {\n Object.assign(this.formErrors, errors);\n }\n }\n }\n\n getFieldError(key: string): string | null {\n return this.formErrors[key] || null;\n }\n\n get hasFormErrors(): boolean {\n return Object.keys(this.formErrors).length > 0;\n }\n\n // =========================\n // Feature 3: Async Data Sources\n // =========================\n\n private initializeDataSources(): void {\n this.config.fields.forEach((field) => {\n const fieldView = field as FormFieldView;\n if (fieldView.dataSource) {\n this.loadFieldOptions(\n field.key as string,\n fieldView.dataSource,\n this.form.value as Partial,\n );\n }\n });\n }\n\n isFieldLoading(key: string): boolean {\n return this.fieldLoading[key];\n }\n\n /** Get options for a field — uses dataSource options if available, otherwise static options */\n getFieldOptions(field: FormFieldConfig): SelectOption[] {\n const key = field.key as string;\n if (this.fieldOptions[key] !== undefined) {\n return this.fieldOptions[key];\n }\n return (field as FormFieldView).options || [];\n }\n\n /** Convert SelectOption[] to MnSelectOption[] for mn-lib-select */\n getSelectOptions(field: FormFieldConfig): MnSelectOption[] {\n return this.getFieldOptions(field).map((o) => ({\n label: o.label,\n value: o.value,\n disabled: o.state === 'disabled',\n }));\n }\n\n getSelectProps(field: FormFieldConfig): MnSelectProps {\n return {\n id: field.key as string,\n label: this.asField(field).label,\n placeholder: this.isFieldLoading(field.key as string)\n ? this.labels.loading\n : this.labels.selectPlaceholder,\n options: this.getSelectOptions(field),\n fullWidth: true,\n };\n }\n\n private async loadFieldOptions(\n key: string,\n dataSource: FieldDataSource,\n formValue: Partial,\n ): Promise {\n this.fieldLoading[key] = true;\n this.cdr.markForCheck();\n try {\n this.fieldOptions[key] = await dataSource.load(formValue);\n } catch (error) {\n console.error(`Failed to load options for field '${key}':`, error);\n this.fieldOptions[key] = [];\n } finally {\n // Resolved after an `await`, so nothing has told Angular the spinner can go and the\n // options have arrived. Without this the field renders \"Loading options...\" forever.\n this.fieldLoading[key] = false;\n this.cdr.markForCheck();\n }\n }\n\n // =========================\n // Feature: Multi-Select Table Fields\n // =========================\n\n private initializeTableFields(): void {\n this.config.fields.forEach((field) => {\n if (field.kind === FieldKind.MULTI_SELECT_TABLE) {\n const tableField = field as MultiSelectTableFieldConfig;\n const ds = tableField.tableDataSource;\n // Force multi selection mode\n ds.selectionMode = 'multi';\n\n // Default the selection summary on. A table used as a form field is always\n // inside a modal, where it is short, paged and searched — so the rows the\n // user has already picked are the ones most likely to be scrolled out of\n // sight, which is exactly what the summary exists to prevent. Set\n // `selectionSummary: false` on the data source to opt a field out.\n ds.selectionSummary ??= true;\n\n // A modal is too short to make a rows-per-page choice meaningful, and the\n // selector costs a row of footer the sheet cannot spare. Pinning the options\n // to the single configured size hides it through the paginator's existing\n // \"more than one option\" rule rather than adding a second way to hide it.\n ds.pageSizeOptions = [ds.pageSize ?? 10];\n\n // Pre-select rows from the form's initial value\n const control = this.form.get(field.key as string);\n if (control && Array.isArray(control.value) && control.value.length > 0) {\n ds.initialSelectedIds = control.value.map((v: unknown) => String(v));\n } else if (control && control.value === null) {\n control.setValue([], { emitEvent: false });\n }\n\n this.tableDataSources[field.key as string] = ds;\n } else if (field.kind === FieldKind.SINGLE_SELECT_TABLE) {\n const tableField = field as SingleSelectTableFieldConfig;\n const ds = tableField.tableDataSource;\n // Force single selection mode\n ds.selectionMode = 'single';\n\n // Pre-select row from the form's initial value\n const control = this.form.get(field.key as string);\n if (control && control.value != null) {\n ds.initialSelectedIds = [String(control.value)];\n }\n\n this.tableDataSources[field.key as string] = ds;\n }\n });\n }\n\n onTableSelectionChange(field: FormFieldConfig, selectedRows: unknown[]): void {\n if (field.kind === FieldKind.SINGLE_SELECT_TABLE) {\n const tableField = field as SingleSelectTableFieldConfig;\n const getVal = tableField.getRowValue || tableField.tableDataSource.getID;\n const value = selectedRows.length > 0 ? getVal(selectedRows[0]) : null;\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValue(value);\n control.markAsTouched();\n }\n } else {\n const tableField = field as MultiSelectTableFieldConfig;\n const getVal = tableField.getRowValue || tableField.tableDataSource.getID;\n const values = selectedRows.map((row) => getVal(row));\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValue(values);\n control.markAsTouched();\n }\n }\n }\n\n // =========================\n // Feature: Rating Fields\n // =========================\n\n getRatingRange(field: FormFieldConfig): number[] {\n const max = (field as RatingFieldConfig).max || 5;\n return Array.from({ length: max }, (_, i) => i + 1);\n }\n\n setRating(field: FormFieldConfig, value: number): void {\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValue(value);\n control.markAsTouched();\n }\n }\n\n getRatingValue(field: FormFieldConfig): number {\n return this.form.get(field.key as string)?.value || 0;\n }\n\n // =========================\n // Feature: Slider Fields\n // =========================\n\n onSliderChange(field: FormFieldConfig, event: Event): void {\n const input = event.target as HTMLInputElement;\n const value = parseFloat(input.value);\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValue(value);\n control.markAsTouched();\n }\n }\n\n getSliderValue(field: FormFieldConfig): number {\n const f = field as SliderFieldConfig;\n return this.form.get(field.key as string)?.value ?? f.min ?? 0;\n }\n\n // =========================\n // Feature: Color Fields\n // =========================\n\n onColorChange(field: FormFieldConfig, event: Event): void {\n const input = event.target as HTMLInputElement;\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValue(input.value);\n control.markAsTouched();\n }\n }\n\n setColorFromSwatch(field: FormFieldConfig, color: string): void {\n const control = this.form.get(field.key as string);\n if (control) {\n control.setValue(color);\n control.markAsTouched();\n }\n }\n\n getColorValue(field: FormFieldConfig): string {\n return this.form.get(field.key as string)?.value || '#000000';\n }\n\n // =========================\n // Value Changes Subscription\n // =========================\n\n private subscribeToValueChanges(): void {\n // Initialize previousFormValue with current form state to avoid false \"changed\" on first emission\n this.previousFormValue = { ...this.form.value };\n\n this.valueChangesSubscription = this.form.valueChanges.subscribe((formValue) => {\n // Update conditional visibility\n this.updateVisibility();\n\n // Update group visibility\n this.updateGroupVisibility();\n\n // Run cross-field validators\n this.runFormValidators();\n\n // Reload data sources that depend on changed fields\n this.reloadDependentDataSources(formValue);\n\n // Emit status change\n this.formStatusChange.emit(this.form.status);\n\n // `valueChanges` can fire from outside an Angular event handler (a CVA writing on\n // init, or a caller patching the form), and the callbacks above rewrite visibility,\n // required-state and cross-field errors that the template reads.\n this.cdr.markForCheck();\n });\n }\n\n private previousFormValue: Partial = {};\n\n private reloadDependentDataSources(formValue: Partial): void {\n this.config.fields.forEach((field) => {\n const fieldView = field as FormFieldView;\n const dataSource: FieldDataSource | undefined = fieldView.dataSource;\n if (!dataSource?.dependsOn) return;\n\n // Check if any dependency changed\n const changed = dataSource.dependsOn.some((depKey) => {\n return formValue[depKey as keyof TModel] !== this.previousFormValue[depKey as keyof TModel];\n });\n\n if (changed) {\n this.loadFieldOptions(field.key as string, dataSource, formValue);\n }\n });\n this.previousFormValue = { ...formValue };\n }\n\n // =========================\n // Feature: File Upload Fields\n // =========================\n\n /**\n * Invokes a FILE field's `onClear` callback when its existing image is removed.\n * FILE fields render {@link MnFileInput}, which owns selection/validation and\n * writes the value (`File | File[] | null`) straight to the form control.\n * @param field The field whose existing image was cleared.\n */\n onFileCleared(field: FormFieldConfig): void {\n (field as FileFieldConfig).onClear?.();\n }\n\n /** Icon size (px) for the footer action buttons. */\n readonly actionIconSize = MODAL_ACTION_ICON_SIZE;\n\n /** Whether action-button icons should render on this modal (defaults to true). */\n get showActionIcons(): boolean {\n return this.config.showActionIcons !== false;\n }\n\n /** The leading icon for the submit button, or null when icons are disabled. */\n get submitIcon(): LucideIconData | null {\n return this.showActionIcons ? MN_MODAL_ACTION_ICONS.confirm : null;\n }\n\n /** The leading icon for the cancel button, or null when icons are disabled. */\n get cancelIcon(): LucideIconData | null {\n return this.showActionIcons ? MN_MODAL_ACTION_ICONS.cancel : null;\n }\n\n async submit(): Promise {\n // Run cross-field validators before submit\n this.runFormValidators();\n\n if (this.form.invalid || this.isSubmitting || this.hasFormErrors) {\n this.form.markAllAsTouched();\n return;\n }\n\n if (this.config.submitMode === SubmitMode.ONCE) {\n this.isSubmitting = true;\n }\n\n const formValue = this.form.value as TResult;\n\n try {\n if (this.config.onComplete) {\n await this.config.onComplete.handle(formValue);\n }\n this.modalRef.close(formValue);\n } catch (error) {\n // Always allow retry on error, regardless of submit mode. This runs after an `await`,\n // so it must announce itself: otherwise the button stays disabled on \"Submitting...\"\n // and the user can never retry the action that just failed.\n this.isSubmitting = false;\n this.cdr.markForCheck();\n console.error('Form submission error:', error);\n }\n }\n}\n","@if ((config.component || config.template) && !hideCustomBody) {\n \n}\n\n
\n \n \n @switch (rowField.field.kind) {\n @case (FieldKind.TEXT) {\n
\n \n
\n }\n\n @case (FieldKind.NUMBER) {\n
\n \n
\n }\n\n @case (FieldKind.PASSWORD) {\n
\n \n
\n }\n\n @case (FieldKind.SELECT) {\n
\n \n @if (isFieldLoading(asKey(rowField.field.key))) {\n
\n
\n
\n }\n @if (getFieldError(asKey(rowField.field.key))) {\n
\n {{ getFieldError(asKey(rowField.field.key)) }}\n
\n }\n
\n }\n\n @case (FieldKind.CHECKBOX) {\n
\n \n
\n }\n\n @case (FieldKind.DATE) {\n
\n \n
\n }\n\n @case (FieldKind.DATETIME) {\n
\n \n
\n }\n\n @case (FieldKind.TEXTAREA) {\n
\n \n
\n }\n\n @case (FieldKind.MULTI_SELECT) {\n
\n @if (isFieldLoading(asKey(rowField.field.key))) {\n
\n
\n {{ labels.loadingOptions }}\n
\n }\n @if (!isFieldLoading(asKey(rowField.field.key))) {\n \n }\n @if (getFieldError(asKey(rowField.field.key))) {\n
\n {{ getFieldError(asKey(rowField.field.key)) }}\n
\n }\n
\n }\n\n @case (FieldKind.MULTI_SELECT_TABLE) {\n \n }\n\n @case (FieldKind.SINGLE_SELECT_TABLE) {\n \n }\n\n @case (FieldKind.COLOR) {\n
\n \n
\n \n {{ getColorValue(rowField.field) }}\n
\n @if (asField(rowField.field).swatches) {\n
\n @for (swatch of asField(rowField.field).swatches; track swatch) {\n \n }\n
\n }\n @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n
\n {{ labels.fieldRequired }}\n
\n }\n
\n }\n\n @case (FieldKind.RATING) {\n
\n \n {{ asField(rowField.field).label }}\n @if (hasRequiredValidator(rowField.field)) {\n *\n }\n \n
\n @for (star of getRatingRange(rowField.field); track star) {\n getRatingValue(rowField.field)\"\n [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n (click)=\"setRating(rowField.field, star)\"\n >\n ★\n \n }\n {{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}\n
\n @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n
\n {{ labels.fieldRequired }}\n
\n }\n
\n }\n\n @case (FieldKind.SLIDER) {\n
\n \n
\n \n @if (asField(rowField.field).showValue !== false) {\n \n {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n \n }\n
\n
\n {{ asField(rowField.field).min ?? 0 }}\n {{ asField(rowField.field).max ?? 100 }}\n
\n @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n
\n {{ labels.fieldRequired }}\n
\n }\n
\n }\n\n @case (FieldKind.FILE) {\n
\n \n
\n }\n\n @case (FieldKind.CUSTOM) {\n
\n \n
\n }\n\n @default {\n
\n }\n }\n\n \n @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n
\n {{ getFieldError(asKey(rowField.field.key)) }}\n
\n }\n \n\n \n \n
\n @if (asField(rowField.field).label) {\n \n {{ asField(rowField.field).label }}\n @if (hasRequiredValidator(rowField.field)) {\n *\n }\n \n }\n \n @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n
\n {{ labels.fieldRequired }}\n
\n }\n
\n \n\n \n @if (fieldGroups.length > 0) {\n
\n @for (group of fieldGroups; track group.title) {\n
\n
\n

{{ group.title }}

\n @if (group.description) {\n

{{ group.description }}

\n }\n
\n @for (row of group.rows; track $index) {\n
\n @for (rowField of row.fields; track rowField.field.key) {\n
\n \n
\n }\n
\n }\n
\n }\n
\n }\n\n \n @if (rows.length > 0) {\n
\n @for (row of rows; track $index) {\n
\n @for (rowField of row.fields; track rowField.field.key) {\n
\n \n
\n }\n
\n }\n
\n }\n\n \n @if (formErrors['_form']) {\n
\n {{ formErrors['_form'] }}\n
\n }\n\n @if (!hideFooter) {\n
\n \n @if (cancelIcon; as icon) {\n \n }\n {{ labels.cancel }}\n \n\n
\n\n \n @if (submitIcon; as icon) {\n \n }\n {{ isSubmitting ? labels.submitting : labels.submit }}\n \n
\n }\n
\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LucideDynamicIcon, LucideIconData } from '@lucide/angular';\nimport { MnButton, MnButtonTypes } from 'mn-angular-lib/button';\nimport { ActionStyle, ModalFooterAction } from 'mn-angular-lib/modal-core';\nimport { defaultIconForStyle, MODAL_ACTION_ICON_SIZE } from 'mn-angular-lib/modal-core';\n\n@Component({\n selector: 'mn-footer-actions',\n standalone: true,\n imports: [CommonModule, MnButton, LucideDynamicIcon],\n host: { class: 'contents' },\n template: `\n @for (action of leftActions; track action.label) {\n \n @if (iconFor(action); as icon) {\n \n }\n {{ action.label }}\n \n }\n\n
\n\n @for (action of rightActions; track action.label) {\n \n @if (iconFor(action); as icon) {\n \n }\n {{ action.label }}\n \n }\n `,\n})\nexport class MnFooterActionsComponent {\n @Input() actions: ModalFooterAction[] = [];\n /** Whether to render leading icons on the action buttons (defaults to true). */\n @Input() showIcons = true;\n @Output() actionClick = new EventEmitter>();\n\n /** Icon size (px) for the footer action buttons. */\n readonly actionIconSize = MODAL_ACTION_ICON_SIZE;\n\n /**\n * Resolves the leading icon for a footer action, or null when icons are disabled.\n * Uses the per-action override, else the default derived from its style.\n * @param action The footer action to resolve an icon for.\n */\n iconFor(action: ModalFooterAction): LucideIconData | null {\n if (!this.showIcons) return null;\n return action.icon ?? defaultIconForStyle(action.style);\n }\n\n get leftActions(): ModalFooterAction[] {\n return this.actions.filter((a) => a.position === 'left');\n }\n\n get rightActions(): ModalFooterAction[] {\n return this.actions.filter((a) => a.position !== 'left');\n }\n\n getButtonData(action: ModalFooterAction): Partial {\n switch (action.style) {\n case ActionStyle.PRIMARY:\n return { variant: 'fill', color: 'primary', disabled: action.disabled };\n case ActionStyle.DANGER:\n return { variant: 'fill', color: 'danger', disabled: action.disabled };\n case ActionStyle.GHOST:\n return { variant: 'text', color: 'gray', disabled: action.disabled };\n case ActionStyle.SECONDARY:\n default:\n return { variant: 'outline', color: 'secondary', disabled: action.disabled };\n }\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n inject,\n Input,\n OnDestroy,\n OnInit,\n QueryList,\n signal,\n TemplateRef,\n Type,\n ViewChild,\n ViewChildren,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { MnModalRef } from 'mn-angular-lib/modal-core';\nimport {\n ActionStyle,\n CustomModalConfig,\n FormModalConfig,\n ModalCloseReason,\n ModalFooterAction,\n ModalKind,\n ModalRef,\n ModalSize,\n ModalStepId,\n NavigationDirection,\n WizardFlowMode,\n WizardModalConfig,\n WizardResult,\n WizardStepConfig,\n} from 'mn-angular-lib/modal-core';\nimport { MnButton, MnButtonTypes } from 'mn-angular-lib/button';\nimport { MnFormBodyComponent } from '../mn-form-body/mn-form-body.component';\nimport { MnCustomBodyHostComponent } from '../mn-custom-body-host/mn-custom-body-host.component';\nimport { MnFooterActionsComponent } from '../mn-footer-actions/mn-footer-actions.component';\nimport { MnLanguageService } from 'mn-angular-lib/core';\nimport { LucideDynamicIcon, LucideIconData } from '@lucide/angular';\nimport { MN_MODAL_ACTION_ICONS, MODAL_ACTION_ICON_SIZE } from 'mn-angular-lib/modal-core';\n\n@Component({\n selector: 'mn-wizard-body',\n standalone: true,\n imports: [\n CommonModule,\n ReactiveFormsModule,\n MnButton,\n MnFormBodyComponent,\n MnCustomBodyHostComponent,\n MnFooterActionsComponent,\n LucideDynamicIcon,\n ],\n templateUrl: './mn-wizard-body.component.html',\n styleUrls: ['./mn-wizard-body.component.css'],\n})\nexport class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy {\n private cdr = inject(ChangeDetectorRef);\n\n @Input() config!: WizardModalConfig;\n @Input() modalRef!: MnModalRef;\n\n @ViewChildren(MnFormBodyComponent) formBodies!: QueryList;\n @ViewChildren('stepWrapper') stepWrappers!: QueryList>;\n /**\n * The step body's scroll container. Every step renders into this one element\n * (inactive steps are hidden, not destroyed), so its scroll offset is shared —\n * without an explicit reset, arriving on a new step lands you wherever the\n * previous step was scrolled to. See {@link setCurrentStep}.\n */\n @ViewChild('stepScroller') stepScroller?: ElementRef;\n\n currentStepId!: ModalStepId;\n /**\n * Title of the currently active step, mirrored into a signal so the modal\n * shell can append it to the modal title on small screens (where the step\n * labels under the progress circles are hidden). A signal — not a getter —\n * because the shell lives outside this component's change-detection subtree,\n * so a plain field mutation here would not update the shell in a zoneless app.\n */\n readonly currentStepTitle = signal(undefined);\n visitedStepIds: ModalStepId[] = [];\n isCurrentStepValid = true;\n isCompleting = false;\n wizardErrors: Record = {};\n\n /**\n * Min-height (px) for the step container, sized to the tallest step so the\n * modal does not jump when navigating between steps. Monotonic — only grows.\n */\n measuredMinHeight = 0;\n\n private languageService = inject(MnLanguageService);\n\n private static readonly DEFAULT_LABELS: Record = {\n next: 'Next',\n back: 'Back',\n close: 'Close',\n complete: 'Complete',\n completing: 'Completing...',\n };\n\n private resolveLabel(i18nValue: string | undefined, key: string): string {\n if (i18nValue) return i18nValue;\n const translated = this.languageService.translate(`common.${key}`);\n return translated === `common.${key}` ? MnWizardBodyComponent.DEFAULT_LABELS[key] : translated;\n }\n\n /** Resolved i18n labels with defaults, falling back to translated keys */\n get labels() {\n const i18n = (this.config as { i18n?: Record }).i18n || {};\n return {\n next: this.resolveLabel(i18n['next'], 'next'),\n back: this.resolveLabel(i18n['back'], 'back'),\n close: this.resolveLabel(i18n['close'], 'close'),\n complete: this.resolveLabel(i18n['complete'], 'complete'),\n completing: this.resolveLabel(i18n['completing'], 'completing'),\n };\n }\n\n /** Pre-built form configs keyed by step id — only for steps that have fields */\n stepFormConfigs: Record> = {};\n\n /**\n * Pre-built host configs keyed by step id — only for steps whose body is a\n * component or template (not a plain string) and that have no form fields.\n * Drives the `mn-custom-body-host` rendered for those steps.\n */\n stepBodyConfigs: Record = {};\n\n private statusSubscription?: Subscription;\n private formBodiesSubscription?: Subscription;\n\n ngOnInit(): void {\n // Pre-build form configs for all form-driven steps\n for (const step of this.config.steps) {\n if (step.fields && step.fields.length > 0) {\n // Merge top-level initialValue with step-level initialValue\n const mergedInitialValue = {\n ...(this.config.initialValue || {}),\n ...(step.initialValue || {}),\n };\n\n this.stepFormConfigs[step.id] = {\n kind: ModalKind.FORM,\n fields: step.fields,\n rows: step.rows,\n fieldGroups: step.fieldGroups,\n formValidators: step.formValidators,\n groupValidators: step.groupValidators,\n initialValue: mergedInitialValue,\n readOnly: this.config.readOnly,\n disabled: this.config.disabled,\n } as FormModalConfig;\n } else {\n // A component/template body (not a plain string) renders through the\n // custom-body host. Pre-build its config once so the `@Input` identity\n // stays stable across change detection and the body is not re-created.\n const bodyConfig = this.buildStepBodyConfig(step);\n if (bodyConfig) {\n this.stepBodyConfigs[step.id] = bodyConfig;\n }\n }\n }\n\n this.setCurrentStep(this.config.startStepId || this.config.steps[0]?.id);\n if (this.currentStepId) {\n this.visitedStepIds.push(this.currentStepId);\n }\n }\n\n ngAfterViewInit(): void {\n // Subscribe to form bodies list changes to track validity\n this.formBodiesSubscription = this.formBodies.changes.subscribe(() => {\n this.trackCurrentStepValidity();\n // Apply autofocus when form bodies change (e.g. step navigation)\n setTimeout(() => {\n this.getCurrentFormBody()?.applyAutoFocus();\n }, 100);\n // Re-measure in case dynamic field visibility changed a step's height\n this.measureTallestStep();\n });\n // Initial validity check\n this.trackCurrentStepValidity();\n\n // Pre-size the modal to the tallest step so it does not jump between steps.\n // All steps are already rendered (display:none), so this is a pure layout\n // read — it creates no components and triggers no data loads or autofocus.\n setTimeout(() => this.measureTallestStep(), 0);\n // A second pass catches content that grows after async data sources resolve.\n setTimeout(() => this.measureTallestStep(), 300);\n }\n\n isTextBody(step: WizardStepConfig): boolean {\n return typeof step.body === 'string';\n }\n\n /**\n * Builds the {@link CustomModalConfig} used to render a step whose body is a\n * component or template. Returns `undefined` for steps with no body or a\n * plain-string body (those render through their own template branches).\n * @param step The wizard step to inspect.\n */\n private buildStepBodyConfig(step: WizardStepConfig): CustomModalConfig | undefined {\n const body = step.body;\n if (!body || typeof body === 'string') return undefined;\n const config: CustomModalConfig = { kind: ModalKind.CUSTOM, inputs: step.bodyInputs };\n if (body instanceof TemplateRef) {\n config.template = body;\n } else {\n config.component = body as Type;\n }\n return config;\n }\n\n async goToStep(step: WizardStepConfig): Promise {\n if (!this.canNavigateToStep(step)) return;\n if (step.id === this.currentStepId) return;\n\n // Validate current step's form before allowing direct step navigation\n const formBody = this.getCurrentFormBody();\n if (formBody && formBody.form.invalid) {\n formBody.form.markAllAsTouched();\n return;\n }\n\n const previousStepId = this.currentStepId;\n this.setCurrentStep(step.id);\n\n if (!this.visitedStepIds.includes(this.currentStepId)) {\n this.visitedStepIds.push(this.currentStepId);\n }\n\n await this.notifyStepChange(previousStepId, NavigationDirection.DIRECT);\n this.trackCurrentStepValidity();\n }\n\n ngOnDestroy(): void {\n this.statusSubscription?.unsubscribe();\n this.formBodiesSubscription?.unsubscribe();\n }\n\n /**\n * Measures every step's natural height and records the tallest as\n * {@link measuredMinHeight}. Monotonic: the value only ever grows, so a\n * re-measure can never shrink the modal. Skipped when the modal has an\n * explicit height or is full-size (those are already fixed-height).\n */\n private measureTallestStep(): void {\n if (this.config.sizeHeight || this.config.sizeWidth === ModalSize.FULL) return;\n const wrappers = this.stepWrappers?.toArray().map((ref) => ref.nativeElement) ?? [];\n if (wrappers.length === 0) return;\n\n // Synchronous pre-paint pass: show one step at a time, read its height,\n // then restore the original display values (so there is no visible flicker).\n const originalDisplay = wrappers.map((el) => el.style.display);\n let tallest = 0;\n for (let i = 0; i < wrappers.length; i++) {\n for (let j = 0; j < wrappers.length; j++) {\n wrappers[j].style.display = i === j ? 'block' : 'none';\n }\n tallest = Math.max(tallest, wrappers[i].offsetHeight);\n }\n wrappers.forEach((el, i) => (el.style.display = originalDisplay[i]));\n\n if (tallest > this.measuredMinHeight) {\n this.measuredMinHeight = tallest;\n this.cdr.detectChanges();\n }\n }\n\n /** Get visible steps (filtered by visibility condition) */\n get visibleSteps(): WizardStepConfig[] {\n return this.config.steps.filter((s) => this.isStepVisible(s));\n }\n\n isStepVisible(step: WizardStepConfig): boolean {\n if (!step.visible) return true;\n return step.visible(this.getAggregatedData());\n }\n\n get currentStep() {\n return this.config.steps.find((s) => s.id === this.currentStepId);\n }\n\n get currentVisibleIndex(): number {\n return this.visibleSteps.findIndex((s) => s.id === this.currentStepId);\n }\n\n get currentStepIndex(): number {\n return this.config.steps.findIndex((s) => s.id === this.currentStepId);\n }\n\n get canGoBack(): boolean {\n return this.currentVisibleIndex > 0;\n }\n\n get canGoNext(): boolean {\n return this.currentVisibleIndex < this.visibleSteps.length - 1;\n }\n\n get isLastStep(): boolean {\n return this.currentVisibleIndex === this.visibleSteps.length - 1;\n }\n\n /** Icon size (px) for the wizard action buttons. */\n readonly actionIconSize = MODAL_ACTION_ICON_SIZE;\n\n /** Whether action-button icons should render on this wizard (defaults to true). */\n get showActionIcons(): boolean {\n return this.config.showActionIcons !== false;\n }\n\n /**\n * The leading icon for the back button, or null when icons are disabled.\n * Shows a back arrow when navigation is possible, otherwise a cross (the\n * button acts as \"Close\" on the first step).\n */\n get backIcon(): LucideIconData | null {\n if (!this.showActionIcons) return null;\n return this.canGoBack ? MN_MODAL_ACTION_ICONS.back : MN_MODAL_ACTION_ICONS.cancel;\n }\n\n /** The trailing icon for the next button, or null when icons are disabled. */\n get nextIcon(): LucideIconData | null {\n return this.showActionIcons ? MN_MODAL_ACTION_ICONS.next : null;\n }\n\n /** The leading icon for the complete button, or null when icons are disabled. */\n get completeIcon(): LucideIconData | null {\n return this.showActionIcons ? MN_MODAL_ACTION_ICONS.confirm : null;\n }\n\n /** Index of the current step for the progress line */\n get currentProgressIndex(): number {\n return this.currentVisibleIndex;\n }\n\n get isFreeFlow(): boolean {\n return this.config.flow === WizardFlowMode.FREE;\n }\n\n canNavigateToStep(step: WizardStepConfig): boolean {\n if (!this.isFreeFlow) return false;\n return this.isStepVisible(step);\n }\n\n async next(): Promise {\n if (!this.canGoNext) return;\n\n const currentStep = this.currentStep;\n\n // Validate embedded form if present\n const formBody = this.getCurrentFormBody();\n if (formBody && formBody.form.invalid) {\n formBody.form.markAllAsTouched();\n return;\n }\n\n if (currentStep?.guard?.canExit) {\n const canExit = await currentStep.guard.canExit();\n if (!canExit) return;\n }\n\n if (currentStep?.validators) {\n for (const validator of currentStep.validators) {\n const result = await validator.validate();\n if (result.status === 'invalid') return;\n }\n }\n\n // Find next visible step\n const nextStep = this.visibleSteps[this.currentVisibleIndex + 1];\n if (!nextStep) return;\n\n if (nextStep.guard?.canEnter) {\n const canEnter = await nextStep.guard.canEnter();\n if (!canEnter) return;\n }\n\n const previousStepId = this.currentStepId;\n this.setCurrentStep(nextStep.id);\n\n if (!this.visitedStepIds.includes(this.currentStepId)) {\n this.visitedStepIds.push(this.currentStepId);\n }\n\n await this.notifyStepChange(previousStepId, NavigationDirection.FORWARD);\n this.trackCurrentStepValidity();\n }\n\n /** Find the MnFormBodyComponent for the current step */\n private getCurrentFormBody(): MnFormBodyComponent | undefined {\n if (!this.formBodies) return undefined;\n // formBodies only contains entries for steps that have stepFormConfigs\n // We need to find which form body index corresponds to the current step\n const formStepIds = this.config.steps\n .filter((s) => this.stepFormConfigs[s.id])\n .map((s) => s.id);\n const formIndex = formStepIds.indexOf(this.currentStepId);\n if (formIndex === -1) return undefined;\n return this.formBodies.toArray()[formIndex];\n }\n\n private trackCurrentStepValidity(): void {\n // Unsubscribe from previous\n this.statusSubscription?.unsubscribe();\n this.statusSubscription = undefined;\n\n const formBody = this.getCurrentFormBody();\n if (formBody && formBody.form) {\n this.isCurrentStepValid = formBody.form.valid;\n this.statusSubscription = formBody.form.statusChanges.subscribe(() => {\n this.isCurrentStepValid = formBody.form.valid;\n this.cdr.detectChanges();\n });\n } else {\n this.isCurrentStepValid = true;\n }\n this.cdr.detectChanges();\n }\n\n async back(): Promise {\n if (!this.canGoBack) {\n // Call onCancel handler if configured\n if (this.config.onCancel) {\n await this.config.onCancel(ModalCloseReason.CANCELLED);\n }\n this.modalRef.dismiss(ModalCloseReason.CANCELLED);\n return;\n }\n\n const prevStep = this.visibleSteps[this.currentVisibleIndex - 1];\n const previousStepId = this.currentStepId;\n\n // Remove current step from visited so the circle resets\n this.visitedStepIds = this.visitedStepIds.filter((id) => id !== this.currentStepId);\n\n this.setCurrentStep(prevStep.id);\n\n await this.notifyStepChange(previousStepId, NavigationDirection.BACKWARD);\n this.trackCurrentStepValidity();\n }\n\n /**\n * Activates a step and mirrors its title into {@link currentStepTitle} so the\n * shell can reflect the step name in the modal title on small screens.\n * @param stepId Id of the step to make current.\n */\n private setCurrentStep(stepId: ModalStepId): void {\n this.currentStepId = stepId;\n this.currentStepTitle.set(this.config.steps.find((s) => s.id === stepId)?.title);\n // A new step always starts at its top — the shared scroller would otherwise\n // keep the previous step's offset. Instant, not smooth: a scroll animation\n // during a step swap reads as a glitch. Absent before the view is created.\n if (this.stepScroller) {\n this.stepScroller.nativeElement.scrollTop = 0;\n }\n }\n\n async complete(): Promise {\n if (this.isCompleting) return;\n\n const currentStep = this.currentStep;\n\n // Validate embedded form if present\n const formBody = this.getCurrentFormBody();\n if (formBody && formBody.form.invalid) {\n formBody.form.markAllAsTouched();\n return;\n }\n\n if (currentStep?.validators) {\n for (const validator of currentStep.validators) {\n const result = await validator.validate();\n if (result.status === 'invalid') return;\n }\n }\n\n this.isCompleting = true;\n this.wizardErrors = {};\n this.cdr.detectChanges();\n\n try {\n const aggregatedData = this.getAggregatedData();\n\n // Run cross-step validators (onBeforeComplete)\n if (this.config.onBeforeComplete) {\n for (const validator of this.config.onBeforeComplete) {\n const errors = await validator(aggregatedData);\n if (errors) {\n this.wizardErrors = { ...this.wizardErrors, ...errors };\n }\n }\n if (Object.keys(this.wizardErrors).length > 0) {\n this.isCompleting = false;\n this.cdr.detectChanges();\n return;\n }\n }\n\n const result: WizardResult = {\n status: ModalCloseReason.COMPLETED,\n visitedStepIds: this.visitedStepIds,\n payload: aggregatedData,\n };\n\n if (this.config.onComplete) {\n await this.config.onComplete.handle(result);\n }\n\n this.modalRef.close(result);\n } catch (error) {\n this.isCompleting = false;\n this.cdr.detectChanges();\n console.error('Wizard completion error:', error);\n }\n }\n\n /** Collect form data from all form-driven steps, namespaced by step ID */\n private getAggregatedData(): Record> {\n const aggregated: Record> = {};\n if (!this.formBodies) return aggregated;\n\n const formStepIds = this.config.steps\n .filter((s) => this.stepFormConfigs[s.id])\n .map((s) => s.id);\n\n this.formBodies.toArray().forEach((fb, index) => {\n if (fb.form && formStepIds[index]) {\n aggregated[formStepIds[index]] = { ...fb.form.value };\n }\n });\n\n return aggregated;\n }\n\n /**\n * Maps a footer action's ActionStyle to mnButton data props.\n * @param action The footer action configuration.\n */\n getFooterActionButtonData(action: ModalFooterAction): Partial {\n switch (action.style) {\n case ActionStyle.DANGER:\n return { variant: 'outline', color: 'danger' };\n case ActionStyle.PRIMARY:\n return { variant: 'fill', color: 'primary' };\n case ActionStyle.SECONDARY:\n return { variant: 'outline', color: 'secondary' };\n case ActionStyle.GHOST:\n return { variant: 'text', color: 'gray' };\n default:\n return { variant: 'outline', color: 'secondary' };\n }\n }\n\n /**\n * Handles a custom footer action click.\n * @param action The footer action configuration.\n */\n async handleFooterAction(action: ModalFooterAction): Promise {\n if (action.handler) {\n await action.handler(this.modalRef as unknown as ModalRef);\n }\n if (action.closesModal) {\n this.modalRef.close(\n (action.closeReason || ModalCloseReason.PROGRAMMATIC) as unknown as WizardResult,\n );\n }\n }\n\n private async notifyStepChange(\n previousStepId: ModalStepId,\n direction: NavigationDirection,\n ): Promise {\n if (this.config.onStepChange) {\n await this.config.onStepChange.handle({\n previousStepId,\n currentStepId: this.currentStepId,\n direction,\n });\n }\n }\n}\n","
\n @if (config.component || config.template) {\n \n }\n\n \n
\n
\n \n
\n\n \n @if (visibleSteps.length > 1) {\n
\n }\n\n @for (step of visibleSteps; track step.id; let i = $index; ) {\n \n {{ i + 1 }}\n
\n