@masterteam/forms 0.0.63 → 0.0.64

package/fesm2022/masterteam-forms-client-form.mjs

@@ -44,10 +44,10 @@ class ClientFormApiService {
     validate(request) {
         return this.http.post('process-submit/validate', request);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -63,43 +63,43 @@ class ClientFormStateService {
     // ============================================================================
     // Core State Signals
     // ============================================================================
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
-    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    submitError = signal(null, ...(ngDevMode ? [{ debugName: "submitError" }] : []));
-    loadResponse = signal(null, ...(ngDevMode ? [{ debugName: "loadResponse" }] : []));
-    submitResponse = signal(null, ...(ngDevMode ? [{ debugName: "submitResponse" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    submitError = signal(null, ...(ngDevMode ? [{ debugName: "submitError" }] : /* istanbul ignore next */ []));
+    loadResponse = signal(null, ...(ngDevMode ? [{ debugName: "loadResponse" }] : /* istanbul ignore next */ []));
+    submitResponse = signal(null, ...(ngDevMode ? [{ debugName: "submitResponse" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Derived Computeds — Load Response
     // ============================================================================
-    isLoaded = computed(() => !!this.loadResponse(), ...(ngDevMode ? [{ debugName: "isLoaded" }] : []));
-    mode = computed(() => this.loadResponse()?.mode ?? null, ...(ngDevMode ? [{ debugName: "mode" }] : []));
-    isApproval = computed(() => this.mode() === 'Approval', ...(ngDevMode ? [{ debugName: "isApproval" }] : []));
-    isDirect = computed(() => this.mode() === 'Direct', ...(ngDevMode ? [{ debugName: "isDirect" }] : []));
-    formSource = computed(() => this.loadResponse()?.formSource ?? null, ...(ngDevMode ? [{ debugName: "formSource" }] : []));
-    requiresForm = computed(() => this.loadResponse()?.requiresForm ?? false, ...(ngDevMode ? [{ debugName: "requiresForm" }] : []));
-    formConfiguration = computed(() => this.loadResponse()?.formConfiguration ?? null, ...(ngDevMode ? [{ debugName: "formConfiguration" }] : []));
-    values = computed(() => this.loadResponse()?.values ?? [], ...(ngDevMode ? [{ debugName: "values" }] : []));
-    context = computed(() => this.loadResponse()?.context ?? null, ...(ngDevMode ? [{ debugName: "context" }] : []));
-    stepName = computed(() => this.loadResponse()?.stepName ?? null, ...(ngDevMode ? [{ debugName: "stepName" }] : []));
-    requestSchemaId = computed(() => this.loadResponse()?.requestSchemaId ?? null, ...(ngDevMode ? [{ debugName: "requestSchemaId" }] : []));
-    requestId = computed(() => this.loadResponse()?.requestId ?? null, ...(ngDevMode ? [{ debugName: "requestId" }] : []));
-    stepId = computed(() => this.loadResponse()?.stepId ?? null, ...(ngDevMode ? [{ debugName: "stepId" }] : []));
-    stepSchemaId = computed(() => this.loadResponse()?.stepSchemaId ?? null, ...(ngDevMode ? [{ debugName: "stepSchemaId" }] : []));
+    isLoaded = computed(() => !!this.loadResponse(), ...(ngDevMode ? [{ debugName: "isLoaded" }] : /* istanbul ignore next */ []));
+    mode = computed(() => this.loadResponse()?.mode ?? null, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    isApproval = computed(() => this.mode() === 'Approval', ...(ngDevMode ? [{ debugName: "isApproval" }] : /* istanbul ignore next */ []));
+    isDirect = computed(() => this.mode() === 'Direct', ...(ngDevMode ? [{ debugName: "isDirect" }] : /* istanbul ignore next */ []));
+    formSource = computed(() => this.loadResponse()?.formSource ?? null, ...(ngDevMode ? [{ debugName: "formSource" }] : /* istanbul ignore next */ []));
+    requiresForm = computed(() => this.loadResponse()?.requiresForm ?? false, ...(ngDevMode ? [{ debugName: "requiresForm" }] : /* istanbul ignore next */ []));
+    formConfiguration = computed(() => this.loadResponse()?.formConfiguration ?? null, ...(ngDevMode ? [{ debugName: "formConfiguration" }] : /* istanbul ignore next */ []));
+    values = computed(() => this.loadResponse()?.values ?? [], ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    context = computed(() => this.loadResponse()?.context ?? null, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    stepName = computed(() => this.loadResponse()?.stepName ?? null, ...(ngDevMode ? [{ debugName: "stepName" }] : /* istanbul ignore next */ []));
+    requestSchemaId = computed(() => this.loadResponse()?.requestSchemaId ?? null, ...(ngDevMode ? [{ debugName: "requestSchemaId" }] : /* istanbul ignore next */ []));
+    requestId = computed(() => this.loadResponse()?.requestId ?? null, ...(ngDevMode ? [{ debugName: "requestId" }] : /* istanbul ignore next */ []));
+    stepId = computed(() => this.loadResponse()?.stepId ?? null, ...(ngDevMode ? [{ debugName: "stepId" }] : /* istanbul ignore next */ []));
+    stepSchemaId = computed(() => this.loadResponse()?.stepSchemaId ?? null, ...(ngDevMode ? [{ debugName: "stepSchemaId" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Derived Computeds — Value Categories
     // ============================================================================
     /** Process virtual fields (Request_Date, Step_Name, etc.) — read-only display */
-    virtualFields = computed(() => this.values().filter((v) => v.metadata?.source === 'ProcessVirtual'), ...(ngDevMode ? [{ debugName: "virtualFields" }] : []));
+    virtualFields = computed(() => this.values().filter((v) => v.metadata?.source === 'ProcessVirtual'), ...(ngDevMode ? [{ debugName: "virtualFields" }] : /* istanbul ignore next */ []));
     /** Editable form values (non-virtual) */
-    formValues = computed(() => this.values().filter((v) => v.metadata?.source !== 'ProcessVirtual'), ...(ngDevMode ? [{ debugName: "formValues" }] : []));
+    formValues = computed(() => this.values().filter((v) => v.metadata?.source !== 'ProcessVirtual'), ...(ngDevMode ? [{ debugName: "formValues" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Derived Computeds — Submit Response
     // ============================================================================
-    isSubmitted = computed(() => !!this.submitResponse(), ...(ngDevMode ? [{ debugName: "isSubmitted" }] : []));
-    submitStatus = computed(() => this.submitResponse()?.status ?? null, ...(ngDevMode ? [{ debugName: "submitStatus" }] : []));
-    isPendingApproval = computed(() => this.submitStatus() === 'PendingApproval', ...(ngDevMode ? [{ debugName: "isPendingApproval" }] : []));
-    isExecuted = computed(() => this.submitStatus() === 'Executed', ...(ngDevMode ? [{ debugName: "isExecuted" }] : []));
+    isSubmitted = computed(() => !!this.submitResponse(), ...(ngDevMode ? [{ debugName: "isSubmitted" }] : /* istanbul ignore next */ []));
+    submitStatus = computed(() => this.submitResponse()?.status ?? null, ...(ngDevMode ? [{ debugName: "submitStatus" }] : /* istanbul ignore next */ []));
+    isPendingApproval = computed(() => this.submitStatus() === 'PendingApproval', ...(ngDevMode ? [{ debugName: "isPendingApproval" }] : /* istanbul ignore next */ []));
+    isExecuted = computed(() => this.submitStatus() === 'Executed', ...(ngDevMode ? [{ debugName: "isExecuted" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // State Mutations
     // ============================================================================
@@ -127,10 +127,10 @@ class ClientFormStateService {
         this.loadResponse.set(null);
         this.submitResponse.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormStateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -374,8 +374,13 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
         case 'Checkbox':
             return new ToggleFieldConfig(base);
         // ── File ──────────────────────────────────────────────────
-        case 'Attachment':
-            return new UploadFileFieldConfig(base);
+        case 'Attachment': {
+            const isMultiple = prop?.configuration?.['IsMulitple'] ?? false;
+            return new UploadFileFieldConfig({
+                ...base,
+                multiple: isMultiple,
+            });
+        }
         // ── User Search ───────────────────────────────────────────
         case 'User':
             return new UserSearchFieldConfig({
@@ -385,6 +390,15 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
                     useBaseUrl: false,
                 }),
             });
+        case 'MultiUser':
+            return new UserSearchFieldConfig({
+                ...base,
+                apiUrl: 'Identity/users',
+                isMultiple: true,
+                context: new HttpContext().set(REQUEST_CONTEXT, {
+                    useBaseUrl: false,
+                }),
+            });
         // ── Lookup (single select) ────────────────────────────────
         case 'Lookup': {
             const items = resolveLookupOptions(prop, lookups);
@@ -570,6 +584,19 @@ function normalizeSubmitValue(value, viewType) {
                 return value['id'] ?? value;
             }
             return value;
+        case 'MultiUser':
+            if (Array.isArray(value)) {
+                return value.map((v) => v && typeof v === 'object' ? (v['id'] ?? v) : v);
+            }
+            return value;
+        case 'Attachment':
+            if (Array.isArray(value)) {
+                return value.map((v) => v && typeof v === 'object' ? (v['id'] ?? v) : v);
+            }
+            if (value && typeof value === 'object') {
+                return value['id'] ?? value;
+            }
+            return value;
         default:
             return value;
     }
@@ -710,61 +737,62 @@ function stripTemplatePrefix(value) {
 class ClientForm {
     api = inject(ClientFormApiService);
     state = inject(ClientFormStateService);
-    validationSummary = viewChild('validationSummary', ...(ngDevMode ? [{ debugName: "validationSummary" }] : []));
+    validationSummary = viewChild('validationSummary', ...(ngDevMode ? [{ debugName: "validationSummary" }] : /* istanbul ignore next */ []));
     loadSub;
     submitSub;
     formValueSub;
-    hasStartedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasStartedLoad" }] : []));
-    formRuntimeMessages = signal([], ...(ngDevMode ? [{ debugName: "formRuntimeMessages" }] : []));
-    submitValidationMessages = signal([], ...(ngDevMode ? [{ debugName: "submitValidationMessages" }] : []));
+    hasStartedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasStartedLoad" }] : /* istanbul ignore next */ []));
+    formRuntimeMessages = signal([], ...(ngDevMode ? [{ debugName: "formRuntimeMessages" }] : /* istanbul ignore next */ []));
+    submitValidationMessages = signal([], ...(ngDevMode ? [{ debugName: "submitValidationMessages" }] : /* istanbul ignore next */ []));
     runtimeMessages = computed(() => [
         ...this.formRuntimeMessages(),
         ...this.submitValidationMessages(),
-    ], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : []));
+    ], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : /* istanbul ignore next */ []));
     translocoService = inject(TranslocoService);
     // ============================================================================
     // Public State Signals (for parent access via viewChild)
     // ============================================================================
-    submitting = computed(() => this.state.submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
-    submitError = computed(() => this.state.submitError(), ...(ngDevMode ? [{ debugName: "submitError" }] : []));
-    isSubmitted = computed(() => this.state.isSubmitted(), ...(ngDevMode ? [{ debugName: "isSubmitted" }] : []));
-    isPendingApproval = computed(() => this.state.isPendingApproval(), ...(ngDevMode ? [{ debugName: "isPendingApproval" }] : []));
-    isExecuted = computed(() => this.state.isExecuted(), ...(ngDevMode ? [{ debugName: "isExecuted" }] : []));
-    isLoaded = computed(() => this.state.isLoaded(), ...(ngDevMode ? [{ debugName: "isLoaded" }] : []));
-    loading = computed(() => this.state.loading(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    runtimeErrors = computed(() => this.runtimeMessages().filter((msg) => msg.severity === 'error'), ...(ngDevMode ? [{ debugName: "runtimeErrors" }] : []));
-    runtimeWarnings = computed(() => this.runtimeMessages().filter((msg) => msg.severity === 'warning'), ...(ngDevMode ? [{ debugName: "runtimeWarnings" }] : []));
-    currentStep = signal(1, ...(ngDevMode ? [{ debugName: "currentStep" }] : []));
+    submitting = computed(() => this.state.submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+    submitError = computed(() => this.state.submitError(), ...(ngDevMode ? [{ debugName: "submitError" }] : /* istanbul ignore next */ []));
+    isSubmitted = computed(() => this.state.isSubmitted(), ...(ngDevMode ? [{ debugName: "isSubmitted" }] : /* istanbul ignore next */ []));
+    isPendingApproval = computed(() => this.state.isPendingApproval(), ...(ngDevMode ? [{ debugName: "isPendingApproval" }] : /* istanbul ignore next */ []));
+    isExecuted = computed(() => this.state.isExecuted(), ...(ngDevMode ? [{ debugName: "isExecuted" }] : /* istanbul ignore next */ []));
+    isLoaded = computed(() => this.state.isLoaded(), ...(ngDevMode ? [{ debugName: "isLoaded" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this.state.loading(), ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    runtimeErrors = computed(() => this.runtimeMessages().filter((msg) => msg.severity === 'error'), ...(ngDevMode ? [{ debugName: "runtimeErrors" }] : /* istanbul ignore next */ []));
+    runtimeWarnings = computed(() => this.runtimeMessages().filter((msg) => msg.severity === 'warning'), ...(ngDevMode ? [{ debugName: "runtimeWarnings" }] : /* istanbul ignore next */ []));
+    currentStep = signal(1, ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Inputs — Required Context
     // ============================================================================
-    moduleKey = input.required(...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
-    operationKey = input.required(...(ngDevMode ? [{ debugName: "operationKey" }] : []));
+    moduleKey = input.required(...(ngDevMode ? [{ debugName: "moduleKey" }] : /* istanbul ignore next */ []));
+    operationKey = input.required(...(ngDevMode ? [{ debugName: "operationKey" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Inputs — Optional Context
     // ============================================================================
-    moduleId = input(...(ngDevMode ? [undefined, { debugName: "moduleId" }] : []));
-    levelId = input(...(ngDevMode ? [undefined, { debugName: "levelId" }] : []));
-    levelDataId = input(...(ngDevMode ? [undefined, { debugName: "levelDataId" }] : []));
-    moduleDataId = input(...(ngDevMode ? [undefined, { debugName: "moduleDataId" }] : []));
-    requestSchemaId = input(...(ngDevMode ? [undefined, { debugName: "requestSchemaId" }] : []));
-    draftProcessId = input(...(ngDevMode ? [undefined, { debugName: "draftProcessId" }] : []));
-    preview = input(false, ...(ngDevMode ? [{ debugName: "preview" }] : []));
-    returnUrl = input(...(ngDevMode ? [undefined, { debugName: "returnUrl" }] : []));
-    submitRequestMapper = input(null, ...(ngDevMode ? [{ debugName: "submitRequestMapper" }] : []));
+    moduleId = input(...(ngDevMode ? [undefined, { debugName: "moduleId" }] : /* istanbul ignore next */ []));
+    levelId = input(...(ngDevMode ? [undefined, { debugName: "levelId" }] : /* istanbul ignore next */ []));
+    levelDataId = input(...(ngDevMode ? [undefined, { debugName: "levelDataId" }] : /* istanbul ignore next */ []));
+    moduleDataId = input(...(ngDevMode ? [undefined, { debugName: "moduleDataId" }] : /* istanbul ignore next */ []));
+    requestSchemaId = input(...(ngDevMode ? [undefined, { debugName: "requestSchemaId" }] : /* istanbul ignore next */ []));
+    draftProcessId = input(...(ngDevMode ? [undefined, { debugName: "draftProcessId" }] : /* istanbul ignore next */ []));
+    preview = input(false, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    returnUrl = input(...(ngDevMode ? [undefined, { debugName: "returnUrl" }] : /* istanbul ignore next */ []));
+    defaultValues = input(null, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
+    submitRequestMapper = input(null, ...(ngDevMode ? [{ debugName: "submitRequestMapper" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Inputs — UI Configuration
     // ============================================================================
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : []));
-    formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : []));
-    renderMode = input(...(ngDevMode ? [undefined, { debugName: "renderMode" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : /* istanbul ignore next */ []));
+    formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : /* istanbul ignore next */ []));
+    renderMode = input(...(ngDevMode ? [undefined, { debugName: "renderMode" }] : /* istanbul ignore next */ []));
     // Hide the built-in previous/next buttons when step actions are rendered by the parent.
-    showInternalStepActions = input(true, ...(ngDevMode ? [{ debugName: "showInternalStepActions" }] : []));
-    lang = signal(this.translocoService.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
-    lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : []));
-    ignoredFieldKeys = input([], ...(ngDevMode ? [{ debugName: "ignoredFieldKeys" }] : []));
-    rtl = computed(() => this.lang() === 'ar', ...(ngDevMode ? [{ debugName: "rtl" }] : []));
+    showInternalStepActions = input(true, ...(ngDevMode ? [{ debugName: "showInternalStepActions" }] : /* istanbul ignore next */ []));
+    lang = signal(this.translocoService.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : /* istanbul ignore next */ []));
+    lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    ignoredFieldKeys = input([], ...(ngDevMode ? [{ debugName: "ignoredFieldKeys" }] : /* istanbul ignore next */ []));
+    rtl = computed(() => this.lang() === 'ar', ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Outputs
     // ============================================================================
@@ -786,12 +814,16 @@ class ClientForm {
         if (!config)
             return null;
         return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly());
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     initialValues = computed(() => {
-        return mapValuesToFormValue(this.state.formValues(), this.state.formConfiguration());
-    }, ...(ngDevMode ? [{ debugName: "initialValues" }] : []));
-    virtualFields = computed(() => this.state.virtualFields(), ...(ngDevMode ? [{ debugName: "virtualFields" }] : []));
-    hasVirtualFields = computed(() => this.virtualFields().length > 0, ...(ngDevMode ? [{ debugName: "hasVirtualFields" }] : []));
+        const mappedValues = mapValuesToFormValue(this.state.formValues(), this.state.formConfiguration());
+        return {
+            ...(this.defaultValues() ?? {}),
+            ...mappedValues,
+        };
+    }, ...(ngDevMode ? [{ debugName: "initialValues" }] : /* istanbul ignore next */ []));
+    virtualFields = computed(() => this.state.virtualFields(), ...(ngDevMode ? [{ debugName: "virtualFields" }] : /* istanbul ignore next */ []));
+    hasVirtualFields = computed(() => this.virtualFields().length > 0, ...(ngDevMode ? [{ debugName: "hasVirtualFields" }] : /* istanbul ignore next */ []));
     previewFieldKeys = computed(() => {
         const config = this.state.formConfiguration();
         if (!config)
@@ -802,7 +834,7 @@ class ClientForm {
                 ...this.ignoredFieldKeys(),
             ]),
         ];
-    }, ...(ngDevMode ? [{ debugName: "previewFieldKeys" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "previewFieldKeys" }] : /* istanbul ignore next */ []));
     previewEntitySections = computed(() => {
         const config = this.state.formConfiguration();
         if (!config)
@@ -814,7 +846,7 @@ class ClientForm {
             entities: section.entities.filter((entity) => !entity.key || !ignoredFieldKeys.has(entity.key)),
         }))
             .filter((section) => section.entities.length > 0);
-    }, ...(ngDevMode ? [{ debugName: "previewEntitySections" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "previewEntitySections" }] : /* istanbul ignore next */ []));
     editableFormConfig = computed(() => {
         if (this.readonly()) {
             return null;
@@ -832,9 +864,9 @@ class ClientForm {
             }))
                 .filter((section) => section.fields.some((field) => field.type !== 'spacer')),
         };
-    }, ...(ngDevMode ? [{ debugName: "editableFormConfig" }] : []));
-    stepSections = computed(() => this.editableFormConfig()?.sections ?? [], ...(ngDevMode ? [{ debugName: "stepSections" }] : []));
-    hasEditableFormSections = computed(() => this.stepSections().length > 0, ...(ngDevMode ? [{ debugName: "hasEditableFormSections" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "editableFormConfig" }] : /* istanbul ignore next */ []));
+    stepSections = computed(() => this.editableFormConfig()?.sections ?? [], ...(ngDevMode ? [{ debugName: "stepSections" }] : /* istanbul ignore next */ []));
+    hasEditableFormSections = computed(() => this.stepSections().length > 0, ...(ngDevMode ? [{ debugName: "hasEditableFormSections" }] : /* istanbul ignore next */ []));
     effectiveRenderMode = computed(() => {
         const explicitRenderMode = this.renderMode();
         if (explicitRenderMode)
@@ -846,10 +878,10 @@ class ClientForm {
             return configRenderMode;
         }
         return 'form';
-    }, ...(ngDevMode ? [{ debugName: "effectiveRenderMode" }] : []));
-    stepsEnabled = computed(() => this.effectiveRenderMode() === 'steps' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "stepsEnabled" }] : []));
-    tabsEnabled = computed(() => this.effectiveRenderMode() === 'tabs' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "tabsEnabled" }] : []));
-    wizardEnabled = computed(() => this.effectiveRenderMode() === 'wizard' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "wizardEnabled" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveRenderMode" }] : /* istanbul ignore next */ []));
+    stepsEnabled = computed(() => this.effectiveRenderMode() === 'steps' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "stepsEnabled" }] : /* istanbul ignore next */ []));
+    tabsEnabled = computed(() => this.effectiveRenderMode() === 'tabs' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "tabsEnabled" }] : /* istanbul ignore next */ []));
+    wizardEnabled = computed(() => this.effectiveRenderMode() === 'wizard' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "wizardEnabled" }] : /* istanbul ignore next */ []));
     wizardFormConfig = computed(() => {
         const config = this.editableFormConfig();
         if (!config)
@@ -858,12 +890,12 @@ class ClientForm {
             ...config,
             sections: config.sections.map((s) => ({ ...s, label: undefined })),
         };
-    }, ...(ngDevMode ? [{ debugName: "wizardFormConfig" }] : []));
-    sectionNavigationEnabled = computed(() => this.stepsEnabled() || this.tabsEnabled() || this.wizardEnabled(), ...(ngDevMode ? [{ debugName: "sectionNavigationEnabled" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "wizardFormConfig" }] : /* istanbul ignore next */ []));
+    sectionNavigationEnabled = computed(() => this.stepsEnabled() || this.tabsEnabled() || this.wizardEnabled(), ...(ngDevMode ? [{ debugName: "sectionNavigationEnabled" }] : /* istanbul ignore next */ []));
     tabOptions = computed(() => this.stepSections().map((section, index) => ({
         label: section.label || `Tab ${index + 1}`,
         value: index + 1,
-    })), ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
+    })), ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
     stepTimeline = computed(() => {
         const sections = this.stepSections();
         const currentStep = this.currentStep();
@@ -880,7 +912,7 @@ class ClientForm {
                 afterLineActive: index < sections.length - 1 && value < currentStep,
             };
         });
-    }, ...(ngDevMode ? [{ debugName: "stepTimeline" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "stepTimeline" }] : /* istanbul ignore next */ []));
     visibleSectionKeys = computed(() => {
         if (!this.sectionNavigationEnabled())
             return null;
@@ -889,7 +921,7 @@ class ClientForm {
         if (!activeSection)
             return null;
         return [activeSection.key || `section-${currentIndex}`];
-    }, ...(ngDevMode ? [{ debugName: "visibleSectionKeys" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "visibleSectionKeys" }] : /* istanbul ignore next */ []));
     forcedHiddenFieldKeys = computed(() => {
         if (!this.sectionNavigationEnabled())
             return [];
@@ -905,19 +937,19 @@ class ClientForm {
                 .forEach((key) => hiddenFieldKeys.add(key));
         });
         return [...hiddenFieldKeys];
-    }, ...(ngDevMode ? [{ debugName: "forcedHiddenFieldKeys" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "forcedHiddenFieldKeys" }] : /* istanbul ignore next */ []));
     effectiveForcedHiddenFieldKeys = computed(() => {
         return [
             ...new Set([...this.forcedHiddenFieldKeys(), ...this.ignoredFieldKeys()]),
         ];
-    }, ...(ngDevMode ? [{ debugName: "effectiveForcedHiddenFieldKeys" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveForcedHiddenFieldKeys" }] : /* istanbul ignore next */ []));
     footerLoading = computed(() => {
         return (this.state.loading() ||
             (this.autoLoad() &&
                 !this.hasStartedLoad() &&
                 !this.state.isLoaded() &&
                 !this.state.error()));
-    }, ...(ngDevMode ? [{ debugName: "footerLoading" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "footerLoading" }] : /* istanbul ignore next */ []));
     footerState = computed(() => {
         const loading = this.footerLoading();
         const isLoaded = this.state.isLoaded();
@@ -947,7 +979,7 @@ class ClientForm {
             showNextStep: stepNavigationEnabled && canGoToNextStep,
             showSubmit: isLoaded && !loading && (!stepNavigationEnabled || !canGoToNextStep),
         };
-    }, ...(ngDevMode ? [{ debugName: "footerState" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "footerState" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Effects
     // ============================================================================
@@ -1327,10 +1359,10 @@ class ClientForm {
         }
         return 'upcoming';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], viewQueries: [{ propertyName: "validationSummary", first: true, predicate: ["validationSummary"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    <!-- Section header skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Second section skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'clientForm'\">\r\n    @if (previewEntitySections().length > 0) {\r\n      <div class=\"flex flex-col gap-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <div class=\"flex flex-col gap-3\">\r\n            @if (section.label) {\r\n              <h3\r\n                class=\"text-lg font-semibold text-color border-b-2 border-gray-200 pb-2 mb-3\"\r\n              >\r\n                {{ section.label }}\r\n              </h3>\r\n            }\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        @if (wizardEnabled()) {\r\n          <!-- Wizard Mode: vertical stepper left + form right -->\r\n          <div class=\"flex gap-0 min-h-0\">\r\n            <!-- Vertical Stepper -->\r\n            <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\r\n              @for (\r\n                step of stepTimeline();\r\n                track step.key;\r\n                let first = $first;\r\n                let last = $last\r\n              ) {\r\n                @if (!first) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex items-center cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  (click)=\"onStepChange(step.value)\"\r\n                >\r\n                  <span\r\n                    class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? 'bg-primary-100 text-white'\r\n                            : ''\r\n                    \"\r\n                  >\r\n                    @if (step.state === \"completed\") {\r\n                      <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n                    } @else {\r\n                      {{ step.value }}\r\n                    }\r\n                  </span>\r\n                  <span\r\n                    class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n                    [ngClass]=\"{\r\n                      'font-semibold text-primary': step.state === 'current',\r\n                      'font-medium text-surface-700':\r\n                        step.state === 'completed',\r\n                      'font-medium text-surface-400': step.state === 'upcoming',\r\n                    }\"\r\n                    dir=\"auto\"\r\n                  >\r\n                    {{ step.label }}\r\n                  </span>\r\n                </button>\r\n                @if (!last) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n              }\r\n            </div>\r\n            <!-- Form Content + Buttons -->\n            <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\n              @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n                <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\n                  @if (runtimeErrors().length > 0) {\n                    <section class=\"flex flex-col gap-2\">\n                      <p\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                      >\n                        {{ t(\"validation-errors\") }}\n                      </p>\n                      @for (\n                        msg of runtimeErrors();\n                        track msg.ruleId || msg.fieldKey || msg.message\n                      ) {\n                        <p-message\n                          severity=\"error\"\n                          styleClass=\"w-full\"\n                          [text]=\"msg.message\"\n                        />\n                      }\n                    </section>\n                  }\n\n                  @if (runtimeWarnings().length > 0) {\n                    <section class=\"flex flex-col gap-2\">\n                      <p\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                      >\n                        {{ t(\"validation-warnings\") }}\n                      </p>\n                      @for (\n                        msg of runtimeWarnings();\n                        track msg.ruleId || msg.fieldKey || msg.message\n                      ) {\n                        <p-message\n                          severity=\"warn\"\n                          styleClass=\"w-full\"\n                          [text]=\"msg.message\"\n                        />\n                      }\n                    </section>\n                  }\n                </div>\n              }\n              <mt-dynamic-form\r\n                [formConfig]=\"wizardFormConfig() ?? config\"\r\n                [formControl]=\"formControl\"\r\n                [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n                [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n                [preserveForcedHiddenValues]=\"true\"\r\n                (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n              />\r\n              @if (showInternalStepActions()) {\r\n                <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n                  <mt-button\r\n                    [label]=\"t('previous')\"\r\n                    severity=\"secondary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (onClick)=\"goToPreviousStep()\"\r\n                  />\r\n                  <mt-button\r\n                    [label]=\"t('next')\"\r\n                    severity=\"primary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (onClick)=\"goToNextStep()\"\r\n                  />\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\n          <div class=\"flex flex-col gap-4\">\n            @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n              <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\n                @if (runtimeErrors().length > 0) {\n                  <section class=\"flex flex-col gap-2\">\n                    <p\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                    >\n                      {{ t(\"validation-errors\") }}\n                    </p>\n                    @for (\n                      msg of runtimeErrors();\n                      track msg.ruleId || msg.fieldKey || msg.message\n                    ) {\n                      <p-message\n                        severity=\"error\"\n                        styleClass=\"w-full\"\n                        [text]=\"msg.message\"\n                      />\n                    }\n                  </section>\n                }\n\n                @if (runtimeWarnings().length > 0) {\n                  <section class=\"flex flex-col gap-2\">\n                    <p\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                    >\n                      {{ t(\"validation-warnings\") }}\n                    </p>\n                    @for (\n                      msg of runtimeWarnings();\n                      track msg.ruleId || msg.fieldKey || msg.message\n                    ) {\n                      <p-message\n                        severity=\"warn\"\n                        styleClass=\"w-full\"\n                        [text]=\"msg.message\"\n                      />\n                    }\n                  </section>\n                }\n              </div>\n            }\n\r\n            @if (stepsEnabled()) {\r\n              <div class=\"flex flex-col gap-4\">\r\n                <div class=\"overflow-x-auto pb-2\">\r\n                  <div class=\"flex min-w-[36rem] items-start\">\r\n                    @for (\r\n                      step of stepTimeline();\r\n                      track step.key;\r\n                      let first = $first;\r\n                      let last = $last\r\n                    ) {\r\n                      <div\r\n                        class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n                      >\r\n                        @if (!rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (!rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n                          [attr.aria-pressed]=\"step.selected\"\r\n                          [attr.aria-current]=\"\r\n                            step.state === 'current' ? 'step' : null\r\n                          \"\r\n                          [attr.title]=\"step.label\"\r\n                          (click)=\"onStepChange(step.value)\"\r\n                        >\r\n                          <span\r\n                            class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n                            [ngClass]=\"{\r\n                              'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n                                step.state === 'completed' ||\r\n                                step.state === 'current',\r\n\r\n                              'border-surface-300 bg-white text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                          >\r\n                            {{ step.value }}\r\n                          </span>\r\n                          <span\r\n                            class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n                            [ngClass]=\"{\r\n                              'font-semibold text-primary':\r\n                                step.selected || step.state === 'current',\r\n                              'font-medium text-surface-700':\r\n                                step.state === 'completed' && !step.selected,\r\n                              'font-medium text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                            dir=\"auto\"\r\n                          >\r\n                            {{ step.label }}\r\n                          </span>\r\n                        </button>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                @if (showInternalStepActions()) {\r\n                  <div class=\"flex justify-between gap-2\">\r\n                    <mt-button\r\n                      [label]=\"t('previous')\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === 1\"\r\n                      (onClick)=\"goToPreviousStep()\"\r\n                    />\r\n                    <mt-button\r\n                      [label]=\"t('next')\"\r\n                      severity=\"primary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === stepSections().length\"\r\n                      (onClick)=\"goToNextStep()\"\r\n                    />\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (tabsEnabled()) {\r\n              <mt-tabs\r\n                [active]=\"currentStep()\"\r\n                (activeChange)=\"onStepChange($event)\"\r\n                [options]=\"tabOptions()\"\r\n                size=\"small\"\r\n                fluid\r\n              />\r\n            }\r\n            <mt-dynamic-form\r\n              [formConfig]=\"config\"\r\n              [formControl]=\"formControl\"\r\n              [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n              [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n              [preserveForcedHiddenValues]=\"true\"\r\n              (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      }\r\n    } @else if (previewEntitySections().length === 0) {\r\n      <div\r\n        class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n      >\r\n        <p class=\"text-sm text-muted-color\">\r\n          No form required for this operation.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], viewQueries: [{ propertyName: "validationSummary", first: true, predicate: ["validationSummary"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    <!-- Section header skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Second section skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'clientForm'\">\r\n    @if (previewEntitySections().length > 0) {\r\n      <div class=\"flex flex-col gap-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <div class=\"flex flex-col gap-3\">\r\n            @if (section.label) {\r\n              <h3\r\n                class=\"text-lg font-semibold text-color border-b-2 border-gray-200 pb-2 mb-3\"\r\n              >\r\n                {{ section.label }}\r\n              </h3>\r\n            }\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        @if (wizardEnabled()) {\r\n          <!-- Wizard Mode: vertical stepper left + form right -->\r\n          <div class=\"flex gap-0 min-h-0\">\r\n            <!-- Vertical Stepper -->\r\n            <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\r\n              @for (\r\n                step of stepTimeline();\r\n                track step.key;\r\n                let first = $first;\r\n                let last = $last\r\n              ) {\r\n                @if (!first) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex items-center cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  (click)=\"onStepChange(step.value)\"\r\n                >\r\n                  <span\r\n                    class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? 'bg-primary-100 text-white'\r\n                            : ''\r\n                    \"\r\n                  >\r\n                    @if (step.state === \"completed\") {\r\n                      <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n                    } @else {\r\n                      {{ step.value }}\r\n                    }\r\n                  </span>\r\n                  <span\r\n                    class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n                    [ngClass]=\"{\r\n                      'font-semibold text-primary': step.state === 'current',\r\n                      'font-medium text-surface-700':\r\n                        step.state === 'completed',\r\n                      'font-medium text-surface-400': step.state === 'upcoming',\r\n                    }\"\r\n                    dir=\"auto\"\r\n                  >\r\n                    {{ step.label }}\r\n                  </span>\r\n                </button>\r\n                @if (!last) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n              }\r\n            </div>\r\n            <!-- Form Content + Buttons -->\r\n            <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n              @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n                <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n                  @if (runtimeErrors().length > 0) {\r\n                    <section class=\"flex flex-col gap-2\">\r\n                      <p\r\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                      >\r\n                        {{ t(\"validation-errors\") }}\r\n                      </p>\r\n                      @for (\r\n                        msg of runtimeErrors();\r\n                        track msg.ruleId || msg.fieldKey || msg.message\r\n                      ) {\r\n                        <p-message\r\n                          severity=\"error\"\r\n                          styleClass=\"w-full\"\r\n                          [text]=\"msg.message\"\r\n                        />\r\n                      }\r\n                    </section>\r\n                  }\r\n\r\n                  @if (runtimeWarnings().length > 0) {\r\n                    <section class=\"flex flex-col gap-2\">\r\n                      <p\r\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                      >\r\n                        {{ t(\"validation-warnings\") }}\r\n                      </p>\r\n                      @for (\r\n                        msg of runtimeWarnings();\r\n                        track msg.ruleId || msg.fieldKey || msg.message\r\n                      ) {\r\n                        <p-message\r\n                          severity=\"warn\"\r\n                          styleClass=\"w-full\"\r\n                          [text]=\"msg.message\"\r\n                        />\r\n                      }\r\n                    </section>\r\n                  }\r\n                </div>\r\n              }\r\n              <mt-dynamic-form\r\n                [formConfig]=\"wizardFormConfig() ?? config\"\r\n                [formControl]=\"formControl\"\r\n                [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n                [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n                [preserveForcedHiddenValues]=\"true\"\r\n                (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n              />\r\n              @if (showInternalStepActions()) {\r\n                <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n                  <mt-button\r\n                    [label]=\"t('previous')\"\r\n                    severity=\"secondary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (onClick)=\"goToPreviousStep()\"\r\n                  />\r\n                  <mt-button\r\n                    [label]=\"t('next')\"\r\n                    severity=\"primary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (onClick)=\"goToNextStep()\"\r\n                  />\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"flex flex-col gap-4\">\r\n            @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n              <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n                @if (runtimeErrors().length > 0) {\r\n                  <section class=\"flex flex-col gap-2\">\r\n                    <p\r\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                    >\r\n                      {{ t(\"validation-errors\") }}\r\n                    </p>\r\n                    @for (\r\n                      msg of runtimeErrors();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <p-message\r\n                        severity=\"error\"\r\n                        styleClass=\"w-full\"\r\n                        [text]=\"msg.message\"\r\n                      />\r\n                    }\r\n                  </section>\r\n                }\r\n\r\n                @if (runtimeWarnings().length > 0) {\r\n                  <section class=\"flex flex-col gap-2\">\r\n                    <p\r\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                    >\r\n                      {{ t(\"validation-warnings\") }}\r\n                    </p>\r\n                    @for (\r\n                      msg of runtimeWarnings();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <p-message\r\n                        severity=\"warn\"\r\n                        styleClass=\"w-full\"\r\n                        [text]=\"msg.message\"\r\n                      />\r\n                    }\r\n                  </section>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (stepsEnabled()) {\r\n              <div class=\"flex flex-col gap-4\">\r\n                <div class=\"overflow-x-auto pb-2\">\r\n                  <div class=\"flex min-w-[36rem] items-start\">\r\n                    @for (\r\n                      step of stepTimeline();\r\n                      track step.key;\r\n                      let first = $first;\r\n                      let last = $last\r\n                    ) {\r\n                      <div\r\n                        class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n                      >\r\n                        @if (!rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (!rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n                          [attr.aria-pressed]=\"step.selected\"\r\n                          [attr.aria-current]=\"\r\n                            step.state === 'current' ? 'step' : null\r\n                          \"\r\n                          [attr.title]=\"step.label\"\r\n                          (click)=\"onStepChange(step.value)\"\r\n                        >\r\n                          <span\r\n                            class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n                            [ngClass]=\"{\r\n                              'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n                                step.state === 'completed' ||\r\n                                step.state === 'current',\r\n\r\n                              'border-surface-300 bg-white text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                          >\r\n                            {{ step.value }}\r\n                          </span>\r\n                          <span\r\n                            class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n                            [ngClass]=\"{\r\n                              'font-semibold text-primary':\r\n                                step.selected || step.state === 'current',\r\n                              'font-medium text-surface-700':\r\n                                step.state === 'completed' && !step.selected,\r\n                              'font-medium text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                            dir=\"auto\"\r\n                          >\r\n                            {{ step.label }}\r\n                          </span>\r\n                        </button>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                @if (showInternalStepActions()) {\r\n                  <div class=\"flex justify-between gap-2\">\r\n                    <mt-button\r\n                      [label]=\"t('previous')\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === 1\"\r\n                      (onClick)=\"goToPreviousStep()\"\r\n                    />\r\n                    <mt-button\r\n                      [label]=\"t('next')\"\r\n                      severity=\"primary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === stepSections().length\"\r\n                      (onClick)=\"goToNextStep()\"\r\n                    />\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (tabsEnabled()) {\r\n              <mt-tabs\r\n                [active]=\"currentStep()\"\r\n                (activeChange)=\"onStepChange($event)\"\r\n                [options]=\"tabOptions()\"\r\n                size=\"small\"\r\n                fluid\r\n              />\r\n            }\r\n            <mt-dynamic-form\r\n              [formConfig]=\"config\"\r\n              [formControl]=\"formControl\"\r\n              [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n              [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n              [preserveForcedHiddenValues]=\"true\"\r\n              (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      }\r\n    } @else if (previewEntitySections().length === 0) {\r\n      <div\r\n        class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n      >\r\n        <p class=\"text-sm text-muted-color\">\r\n          No form required for this operation.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
             type: Component,
             args: [{ selector: 'mt-client-form', standalone: true, imports: [
                         CommonModule,
@@ -1343,8 +1375,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         Icon,
                         Message,
                         TranslocoDirective,
-                    ], providers: [ClientFormStateService], template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    <!-- Section header skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Second section skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'clientForm'\">\r\n    @if (previewEntitySections().length > 0) {\r\n      <div class=\"flex flex-col gap-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <div class=\"flex flex-col gap-3\">\r\n            @if (section.label) {\r\n              <h3\r\n                class=\"text-lg font-semibold text-color border-b-2 border-gray-200 pb-2 mb-3\"\r\n              >\r\n                {{ section.label }}\r\n              </h3>\r\n            }\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        @if (wizardEnabled()) {\r\n          <!-- Wizard Mode: vertical stepper left + form right -->\r\n          <div class=\"flex gap-0 min-h-0\">\r\n            <!-- Vertical Stepper -->\r\n            <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\r\n              @for (\r\n                step of stepTimeline();\r\n                track step.key;\r\n                let first = $first;\r\n                let last = $last\r\n              ) {\r\n                @if (!first) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex items-center cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  (click)=\"onStepChange(step.value)\"\r\n                >\r\n                  <span\r\n                    class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? 'bg-primary-100 text-white'\r\n                            : ''\r\n                    \"\r\n                  >\r\n                    @if (step.state === \"completed\") {\r\n                      <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n                    } @else {\r\n                      {{ step.value }}\r\n                    }\r\n                  </span>\r\n                  <span\r\n                    class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n                    [ngClass]=\"{\r\n                      'font-semibold text-primary': step.state === 'current',\r\n                      'font-medium text-surface-700':\r\n                        step.state === 'completed',\r\n                      'font-medium text-surface-400': step.state === 'upcoming',\r\n                    }\"\r\n                    dir=\"auto\"\r\n                  >\r\n                    {{ step.label }}\r\n                  </span>\r\n                </button>\r\n                @if (!last) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n              }\r\n            </div>\r\n            <!-- Form Content + Buttons -->\n            <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\n              @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n                <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\n                  @if (runtimeErrors().length > 0) {\n                    <section class=\"flex flex-col gap-2\">\n                      <p\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                      >\n                        {{ t(\"validation-errors\") }}\n                      </p>\n                      @for (\n                        msg of runtimeErrors();\n                        track msg.ruleId || msg.fieldKey || msg.message\n                      ) {\n                        <p-message\n                          severity=\"error\"\n                          styleClass=\"w-full\"\n                          [text]=\"msg.message\"\n                        />\n                      }\n                    </section>\n                  }\n\n                  @if (runtimeWarnings().length > 0) {\n                    <section class=\"flex flex-col gap-2\">\n                      <p\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                      >\n                        {{ t(\"validation-warnings\") }}\n                      </p>\n                      @for (\n                        msg of runtimeWarnings();\n                        track msg.ruleId || msg.fieldKey || msg.message\n                      ) {\n                        <p-message\n                          severity=\"warn\"\n                          styleClass=\"w-full\"\n                          [text]=\"msg.message\"\n                        />\n                      }\n                    </section>\n                  }\n                </div>\n              }\n              <mt-dynamic-form\r\n                [formConfig]=\"wizardFormConfig() ?? config\"\r\n                [formControl]=\"formControl\"\r\n                [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n                [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n                [preserveForcedHiddenValues]=\"true\"\r\n                (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n              />\r\n              @if (showInternalStepActions()) {\r\n                <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n                  <mt-button\r\n                    [label]=\"t('previous')\"\r\n                    severity=\"secondary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (onClick)=\"goToPreviousStep()\"\r\n                  />\r\n                  <mt-button\r\n                    [label]=\"t('next')\"\r\n                    severity=\"primary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (onClick)=\"goToNextStep()\"\r\n                  />\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\n          <div class=\"flex flex-col gap-4\">\n            @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n              <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\n                @if (runtimeErrors().length > 0) {\n                  <section class=\"flex flex-col gap-2\">\n                    <p\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                    >\n                      {{ t(\"validation-errors\") }}\n                    </p>\n                    @for (\n                      msg of runtimeErrors();\n                      track msg.ruleId || msg.fieldKey || msg.message\n                    ) {\n                      <p-message\n                        severity=\"error\"\n                        styleClass=\"w-full\"\n                        [text]=\"msg.message\"\n                      />\n                    }\n                  </section>\n                }\n\n                @if (runtimeWarnings().length > 0) {\n                  <section class=\"flex flex-col gap-2\">\n                    <p\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\n                    >\n                      {{ t(\"validation-warnings\") }}\n                    </p>\n                    @for (\n                      msg of runtimeWarnings();\n                      track msg.ruleId || msg.fieldKey || msg.message\n                    ) {\n                      <p-message\n                        severity=\"warn\"\n                        styleClass=\"w-full\"\n                        [text]=\"msg.message\"\n                      />\n                    }\n                  </section>\n                }\n              </div>\n            }\n\r\n            @if (stepsEnabled()) {\r\n              <div class=\"flex flex-col gap-4\">\r\n                <div class=\"overflow-x-auto pb-2\">\r\n                  <div class=\"flex min-w-[36rem] items-start\">\r\n                    @for (\r\n                      step of stepTimeline();\r\n                      track step.key;\r\n                      let first = $first;\r\n                      let last = $last\r\n                    ) {\r\n                      <div\r\n                        class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n                      >\r\n                        @if (!rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (!rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n                          [attr.aria-pressed]=\"step.selected\"\r\n                          [attr.aria-current]=\"\r\n                            step.state === 'current' ? 'step' : null\r\n                          \"\r\n                          [attr.title]=\"step.label\"\r\n                          (click)=\"onStepChange(step.value)\"\r\n                        >\r\n                          <span\r\n                            class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n                            [ngClass]=\"{\r\n                              'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n                                step.state === 'completed' ||\r\n                                step.state === 'current',\r\n\r\n                              'border-surface-300 bg-white text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                          >\r\n                            {{ step.value }}\r\n                          </span>\r\n                          <span\r\n                            class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n                            [ngClass]=\"{\r\n                              'font-semibold text-primary':\r\n                                step.selected || step.state === 'current',\r\n                              'font-medium text-surface-700':\r\n                                step.state === 'completed' && !step.selected,\r\n                              'font-medium text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                            dir=\"auto\"\r\n                          >\r\n                            {{ step.label }}\r\n                          </span>\r\n                        </button>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                @if (showInternalStepActions()) {\r\n                  <div class=\"flex justify-between gap-2\">\r\n                    <mt-button\r\n                      [label]=\"t('previous')\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === 1\"\r\n                      (onClick)=\"goToPreviousStep()\"\r\n                    />\r\n                    <mt-button\r\n                      [label]=\"t('next')\"\r\n                      severity=\"primary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === stepSections().length\"\r\n                      (onClick)=\"goToNextStep()\"\r\n                    />\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (tabsEnabled()) {\r\n              <mt-tabs\r\n                [active]=\"currentStep()\"\r\n                (activeChange)=\"onStepChange($event)\"\r\n                [options]=\"tabOptions()\"\r\n                size=\"small\"\r\n                fluid\r\n              />\r\n            }\r\n            <mt-dynamic-form\r\n              [formConfig]=\"config\"\r\n              [formControl]=\"formControl\"\r\n              [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n              [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n              [preserveForcedHiddenValues]=\"true\"\r\n              (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      }\r\n    } @else if (previewEntitySections().length === 0) {\r\n      <div\r\n        class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n      >\r\n        <p class=\"text-sm text-muted-color\">\r\n          No form required for this operation.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { validationSummary: [{ type: i0.ViewChild, args: ['validationSummary', { isSignal: true }] }], moduleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleKey", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: true }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], moduleDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleDataId", required: false }] }], requestSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestSchemaId", required: false }] }], draftProcessId: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftProcessId", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }], submitRequestMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitRequestMapper", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLoad", required: false }] }], formMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMode", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], showInternalStepActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInternalStepActions", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }], footerStateChanged: [{ type: i0.Output, args: ["footerStateChanged"] }] } });
+                    ], providers: [ClientFormStateService], template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    <!-- Section header skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Second section skeleton -->\r\n    <div class=\"flex flex-col gap-4\">\r\n      <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n      <div class=\"grid grid-cols-12 gap-4\">\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-6 flex flex-col gap-2\">\r\n          <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n        </div>\r\n        <div class=\"col-span-12 flex flex-col gap-2\">\r\n          <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n          <p-skeleton width=\"100%\" height=\"5rem\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'clientForm'\">\r\n    @if (previewEntitySections().length > 0) {\r\n      <div class=\"flex flex-col gap-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <div class=\"flex flex-col gap-3\">\r\n            @if (section.label) {\r\n              <h3\r\n                class=\"text-lg font-semibold text-color border-b-2 border-gray-200 pb-2 mb-3\"\r\n              >\r\n                {{ section.label }}\r\n              </h3>\r\n            }\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        @if (wizardEnabled()) {\r\n          <!-- Wizard Mode: vertical stepper left + form right -->\r\n          <div class=\"flex gap-0 min-h-0\">\r\n            <!-- Vertical Stepper -->\r\n            <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\r\n              @for (\r\n                step of stepTimeline();\r\n                track step.key;\r\n                let first = $first;\r\n                let last = $last\r\n              ) {\r\n                @if (!first) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex items-center cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  (click)=\"onStepChange(step.value)\"\r\n                >\r\n                  <span\r\n                    class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? 'bg-primary-100 text-white'\r\n                            : ''\r\n                    \"\r\n                  >\r\n                    @if (step.state === \"completed\") {\r\n                      <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n                    } @else {\r\n                      {{ step.value }}\r\n                    }\r\n                  </span>\r\n                  <span\r\n                    class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n                    [ngClass]=\"{\r\n                      'font-semibold text-primary': step.state === 'current',\r\n                      'font-medium text-surface-700':\r\n                        step.state === 'completed',\r\n                      'font-medium text-surface-400': step.state === 'upcoming',\r\n                    }\"\r\n                    dir=\"auto\"\r\n                  >\r\n                    {{ step.label }}\r\n                  </span>\r\n                </button>\r\n                @if (!last) {\r\n                  <div\r\n                    class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n                    [ngClass]=\"\r\n                      step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n                    \"\r\n                  ></div>\r\n                }\r\n              }\r\n            </div>\r\n            <!-- Form Content + Buttons -->\r\n            <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n              @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n                <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n                  @if (runtimeErrors().length > 0) {\r\n                    <section class=\"flex flex-col gap-2\">\r\n                      <p\r\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                      >\r\n                        {{ t(\"validation-errors\") }}\r\n                      </p>\r\n                      @for (\r\n                        msg of runtimeErrors();\r\n                        track msg.ruleId || msg.fieldKey || msg.message\r\n                      ) {\r\n                        <p-message\r\n                          severity=\"error\"\r\n                          styleClass=\"w-full\"\r\n                          [text]=\"msg.message\"\r\n                        />\r\n                      }\r\n                    </section>\r\n                  }\r\n\r\n                  @if (runtimeWarnings().length > 0) {\r\n                    <section class=\"flex flex-col gap-2\">\r\n                      <p\r\n                        class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                      >\r\n                        {{ t(\"validation-warnings\") }}\r\n                      </p>\r\n                      @for (\r\n                        msg of runtimeWarnings();\r\n                        track msg.ruleId || msg.fieldKey || msg.message\r\n                      ) {\r\n                        <p-message\r\n                          severity=\"warn\"\r\n                          styleClass=\"w-full\"\r\n                          [text]=\"msg.message\"\r\n                        />\r\n                      }\r\n                    </section>\r\n                  }\r\n                </div>\r\n              }\r\n              <mt-dynamic-form\r\n                [formConfig]=\"wizardFormConfig() ?? config\"\r\n                [formControl]=\"formControl\"\r\n                [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n                [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n                [preserveForcedHiddenValues]=\"true\"\r\n                (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n              />\r\n              @if (showInternalStepActions()) {\r\n                <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n                  <mt-button\r\n                    [label]=\"t('previous')\"\r\n                    severity=\"secondary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (onClick)=\"goToPreviousStep()\"\r\n                  />\r\n                  <mt-button\r\n                    [label]=\"t('next')\"\r\n                    severity=\"primary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (onClick)=\"goToNextStep()\"\r\n                  />\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"flex flex-col gap-4\">\r\n            @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n              <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n                @if (runtimeErrors().length > 0) {\r\n                  <section class=\"flex flex-col gap-2\">\r\n                    <p\r\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                    >\r\n                      {{ t(\"validation-errors\") }}\r\n                    </p>\r\n                    @for (\r\n                      msg of runtimeErrors();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <p-message\r\n                        severity=\"error\"\r\n                        styleClass=\"w-full\"\r\n                        [text]=\"msg.message\"\r\n                      />\r\n                    }\r\n                  </section>\r\n                }\r\n\r\n                @if (runtimeWarnings().length > 0) {\r\n                  <section class=\"flex flex-col gap-2\">\r\n                    <p\r\n                      class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n                    >\r\n                      {{ t(\"validation-warnings\") }}\r\n                    </p>\r\n                    @for (\r\n                      msg of runtimeWarnings();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <p-message\r\n                        severity=\"warn\"\r\n                        styleClass=\"w-full\"\r\n                        [text]=\"msg.message\"\r\n                      />\r\n                    }\r\n                  </section>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (stepsEnabled()) {\r\n              <div class=\"flex flex-col gap-4\">\r\n                <div class=\"overflow-x-auto pb-2\">\r\n                  <div class=\"flex min-w-[36rem] items-start\">\r\n                    @for (\r\n                      step of stepTimeline();\r\n                      track step.key;\r\n                      let first = $first;\r\n                      let last = $last\r\n                    ) {\r\n                      <div\r\n                        class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n                      >\r\n                        @if (!rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (!rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !last) {\r\n                          <span\r\n                            class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.afterLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n                        @if (rtl() && !first) {\r\n                          <span\r\n                            class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n                            [ngClass]=\"\r\n                              step.beforeLineActive\r\n                                ? 'bg-primary'\r\n                                : 'bg-surface-300'\r\n                            \"\r\n                          ></span>\r\n                        }\r\n\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n                          [attr.aria-pressed]=\"step.selected\"\r\n                          [attr.aria-current]=\"\r\n                            step.state === 'current' ? 'step' : null\r\n                          \"\r\n                          [attr.title]=\"step.label\"\r\n                          (click)=\"onStepChange(step.value)\"\r\n                        >\r\n                          <span\r\n                            class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n                            [ngClass]=\"{\r\n                              'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n                                step.state === 'completed' ||\r\n                                step.state === 'current',\r\n\r\n                              'border-surface-300 bg-white text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                          >\r\n                            {{ step.value }}\r\n                          </span>\r\n                          <span\r\n                            class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n                            [ngClass]=\"{\r\n                              'font-semibold text-primary':\r\n                                step.selected || step.state === 'current',\r\n                              'font-medium text-surface-700':\r\n                                step.state === 'completed' && !step.selected,\r\n                              'font-medium text-surface-500':\r\n                                step.state === 'upcoming',\r\n                            }\"\r\n                            dir=\"auto\"\r\n                          >\r\n                            {{ step.label }}\r\n                          </span>\r\n                        </button>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                @if (showInternalStepActions()) {\r\n                  <div class=\"flex justify-between gap-2\">\r\n                    <mt-button\r\n                      [label]=\"t('previous')\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === 1\"\r\n                      (onClick)=\"goToPreviousStep()\"\r\n                    />\r\n                    <mt-button\r\n                      [label]=\"t('next')\"\r\n                      severity=\"primary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"currentStep() === stepSections().length\"\r\n                      (onClick)=\"goToNextStep()\"\r\n                    />\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            @if (tabsEnabled()) {\r\n              <mt-tabs\r\n                [active]=\"currentStep()\"\r\n                (activeChange)=\"onStepChange($event)\"\r\n                [options]=\"tabOptions()\"\r\n                size=\"small\"\r\n                fluid\r\n              />\r\n            }\r\n            <mt-dynamic-form\r\n              [formConfig]=\"config\"\r\n              [formControl]=\"formControl\"\r\n              [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n              [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n              [preserveForcedHiddenValues]=\"true\"\r\n              (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      }\r\n    } @else if (previewEntitySections().length === 0) {\r\n      <div\r\n        class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n      >\r\n        <p class=\"text-sm text-muted-color\">\r\n          No form required for this operation.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { validationSummary: [{ type: i0.ViewChild, args: ['validationSummary', { isSignal: true }] }], moduleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleKey", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: true }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], moduleDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleDataId", required: false }] }], requestSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestSchemaId", required: false }] }], draftProcessId: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftProcessId", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }], defaultValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValues", required: false }] }], submitRequestMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitRequestMapper", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLoad", required: false }] }], formMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMode", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], showInternalStepActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInternalStepActions", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }], footerStateChanged: [{ type: i0.Output, args: ["footerStateChanged"] }] } });
 
 // ============================================================================
 // API Response Wrapper