@masterteam/forms 0.0.66 → 0.0.68

package/assets/i18n/ar.json

@@ -3,7 +3,13 @@
     "previous": "السابق",
     "next": "التالي",
     "validation": "يرجى تعبئة جميع الحقول المطلوبة قبل الإرسال.",
+    "validation-next": "يرجى معالجة أخطاء التحقق قبل المتابعة.",
     "validation-errors": "أخطاء التحقق",
-    "validation-warnings": "تحذيرات التحقق"
+    "validation-warnings": "تحذيرات التحقق",
+    "warning-confirmation-header": "تحذيرات التحقق",
+    "warning-confirmation-message": "النموذج يحتوي على تحذيرات تحقق:",
+    "warning-confirmation-question": "هل تريد المتابعة وإرسال النموذج؟",
+    "warning-confirmation-question-next": "هل تريد المتابعة إلى الخطوة التالية؟",
+    "continue-submit": "متابعة"
   }
 }

package/assets/i18n/en.json

@@ -3,7 +3,13 @@
     "previous": "Previous",
     "next": "Next",
     "validation": "Please fill in all required fields before submitting.",
+    "validation-next": "Please resolve validation errors before continuing.",
     "validation-errors": "Validation Errors",
-    "validation-warnings": "Validation Warnings"
+    "validation-warnings": "Validation Warnings",
+    "warning-confirmation-header": "Validation Warnings",
+    "warning-confirmation-message": "The form has validation warnings:",
+    "warning-confirmation-question": "Do you want to continue submitting?",
+    "warning-confirmation-question-next": "Do you want to continue to the next step?",
+    "continue-submit": "Continue"
   }
 }

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

@@ -4,10 +4,10 @@ import * as i2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { switchMap, EMPTY, map } from 'rxjs';
 import { Message } from 'primeng/message';
 import { Skeleton } from 'primeng/skeleton';
 import { Button } from '@masterteam/components/button';
+import { ConfirmationService } from '@masterteam/components/confirmation';
 import { EntitiesPreview } from '@masterteam/components/entities';
 import { Tabs } from '@masterteam/components/tabs';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
@@ -606,24 +606,14 @@ function resolveLoadedFieldValue(value) {
         ? value.value
         : (value.rawValue ?? value.value);
     switch (value.metadata?.viewType) {
-        case 'Date':
-        case 'DateTime':
-        case 'Time':
-            return coerceToDate(resolvedValue);
+        // case 'Date':
+        // case 'DateTime':
+        // case 'Time':
+        //   return coerceToDate(resolvedValue);
         default:
             return resolvedValue;
     }
 }
-function coerceToDate(value) {
-    if (value === null || value === undefined || value === '') {
-        return value;
-    }
-    if (value instanceof Date) {
-        return value;
-    }
-    const coerced = new Date(value);
-    return Number.isNaN(coerced.getTime()) ? value : coerced;
-}
 function buildFieldValueMap(config) {
     const fieldsByKey = new Map();
     const propertyIdCandidates = new Map();
@@ -736,12 +726,14 @@ function stripTemplatePrefix(value) {
  */
 class ClientForm {
     api = inject(ClientFormApiService);
+    confirmationService = inject(ConfirmationService);
     state = inject(ClientFormStateService);
     validationSummary = viewChild('validationSummary', ...(ngDevMode ? [{ debugName: "validationSummary" }] : /* istanbul ignore next */ []));
     loadSub;
     submitSub;
     formValueSub;
     hasStartedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasStartedLoad" }] : /* istanbul ignore next */ []));
+    stepValidationPending = signal(false, ...(ngDevMode ? [{ debugName: "stepValidationPending" }] : /* istanbul ignore next */ []));
     formRuntimeMessages = signal([], ...(ngDevMode ? [{ debugName: "formRuntimeMessages" }] : /* istanbul ignore next */ []));
     submitValidationMessages = signal([], ...(ngDevMode ? [{ debugName: "submitValidationMessages" }] : /* istanbul ignore next */ []));
     runtimeMessages = computed(() => [
@@ -789,10 +781,13 @@ class ClientForm {
     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" }] : /* istanbul ignore next */ []));
+    confirmWarningsOnSubmit = input(true, ...(ngDevMode ? [{ debugName: "confirmWarningsOnSubmit" }] : /* istanbul ignore next */ []));
+    confirmWarningsOnStepChange = input(true, ...(ngDevMode ? [{ debugName: "confirmWarningsOnStepChange" }] : /* 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 */ []));
+    stepNavigationValidating = computed(() => this.stepValidationPending(), ...(ngDevMode ? [{ debugName: "stepNavigationValidating" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Outputs
     // ============================================================================
@@ -958,8 +953,11 @@ class ClientForm {
         const sectionNavigationEnabled = this.sectionNavigationEnabled();
         const currentStep = this.currentStep();
         const stepCount = this.stepSections().length;
-        const canGoToPreviousStep = stepNavigationEnabled && currentStep > 1;
-        const canGoToNextStep = stepNavigationEnabled && currentStep < stepCount;
+        const stepValidationPending = this.stepValidationPending();
+        const canGoToPreviousStep = stepNavigationEnabled && currentStep > 1 && !stepValidationPending;
+        const canGoToNextStep = stepNavigationEnabled &&
+            currentStep < stepCount &&
+            !stepValidationPending;
         return {
             loading,
             isLoaded,
@@ -1054,6 +1052,7 @@ class ClientForm {
             return;
         this.loadSub?.unsubscribe();
         this.hasStartedLoad.set(true);
+        this.stepValidationPending.set(false);
         this.formRuntimeMessages.set([]);
         this.submitValidationMessages.set([]);
         this.state.loading.set(true);
@@ -1105,45 +1104,36 @@ class ClientForm {
         this.state.submitError.set(null);
         const request = this.buildSubmitRequest(loadResponse);
         this.submitValidationMessages.set([]);
-        this.submitSub = this.api
-            .validate(request)
-            .pipe(switchMap((validationResponse) => {
-            const validation = validationResponse.data;
-            if (!validation) {
-                const msg = validationResponse.message ?? 'Failed to validate form';
-                this.state.submitting.set(false);
-                this.state.setSubmitError(msg);
-                this.errored.emit(msg);
-                return EMPTY;
-            }
-            this.submitValidationMessages.set(this.mapSubmitValidationMessages(validation.results ?? []));
-            if (validation.hasBlockingFailures) {
-                this.state.submitting.set(false);
-                return EMPTY;
-            }
-            return this.api.submit(request).pipe(map((response) => ({
-                kind: 'submit',
-                response,
-            })));
-        }))
-            .subscribe({
-            next: ({ response }) => {
-                this.state.submitting.set(false);
-                if (response.data) {
-                    this.state.setSubmitResponse(response.data);
-                    this.submitted.emit(response.data);
-                }
-                else {
-                    const msg = response.message ?? 'Failed to submit form';
+        this.submitSub = this.api.validate(request).subscribe({
+            next: (validationResponse) => {
+                const validation = validationResponse.data;
+                if (!validation) {
+                    const msg = validationResponse.message ?? 'Failed to validate form';
+                    this.state.submitting.set(false);
                     this.state.setSubmitError(msg);
                     this.errored.emit(msg);
+                    return;
                 }
+                this.submitValidationMessages.set(this.mapSubmitValidationMessages(validation.results ?? []));
+                if (validation.hasBlockingFailures) {
+                    this.state.submitting.set(false);
+                    return;
+                }
+                const warnings = this.runtimeWarnings();
+                if (this.confirmWarningsOnSubmit() && warnings.length > 0) {
+                    this.state.submitting.set(false);
+                    this.confirmValidationWarnings(warnings, 'clientForm.warning-confirmation-question', this.translocoService.translate('clientForm.continue-submit'), () => {
+                        this.state.submitting.set(true);
+                        this.submitValidationMessages.set([]);
+                        this.executeSubmit(request);
+                    });
+                    return;
+                }
+                this.executeSubmit(request);
             },
             error: (err) => {
                 this.state.submitting.set(false);
-                const msg = err?.error?.message ??
-                    err?.message ??
-                    'Failed to validate or submit form';
+                const msg = err?.error?.message ?? err?.message ?? 'Failed to validate form';
                 this.state.setSubmitError(msg);
                 this.errored.emit(msg);
             },
@@ -1182,6 +1172,7 @@ class ClientForm {
     reset() {
         this.loadSub?.unsubscribe();
         this.submitSub?.unsubscribe();
+        this.stepValidationPending.set(false);
         this.formControl.reset({});
         this.formRuntimeMessages.set([]);
         this.submitValidationMessages.set([]);
@@ -1194,7 +1185,17 @@ class ClientForm {
         const count = this.stepSections().length;
         if (value < 1 || value > count)
             return;
-        this.currentStep.set(value);
+        if (this.stepValidationPending())
+            return;
+        const currentStep = this.currentStep();
+        if (value === currentStep)
+            return;
+        if (!this.requiresForwardStepValidation(value, currentStep)) {
+            this.applyStepChange(value);
+            return;
+        }
+        const targetStep = Math.min(value, currentStep + 1);
+        this.validateAndAdvanceStep(targetStep);
     }
     goToPreviousStep() {
         this.onStepChange(this.currentStep() - 1);
@@ -1203,11 +1204,14 @@ class ClientForm {
         this.onStepChange(this.currentStep() + 1);
     }
     canGoToPreviousStep() {
-        return ((this.stepsEnabled() || this.wizardEnabled()) && this.currentStep() > 1);
+        return ((this.stepsEnabled() || this.wizardEnabled()) &&
+            this.currentStep() > 1 &&
+            !this.stepValidationPending());
     }
     canGoToNextStep() {
         return ((this.stepsEnabled() || this.wizardEnabled()) &&
-            this.currentStep() < this.stepSections().length);
+            this.currentStep() < this.stepSections().length &&
+            !this.stepValidationPending());
     }
     getCurrentStep() {
         return this.currentStep();
@@ -1311,6 +1315,131 @@ class ClientForm {
             loadResponse,
         });
     }
+    validateAndAdvanceStep(targetStep) {
+        if (this.stepValidationPending()) {
+            return;
+        }
+        const loadResponse = this.state.loadResponse();
+        if (!loadResponse) {
+            const msg = 'Form must be loaded before step navigation';
+            this.state.setSubmitError(msg);
+            this.submitValidationMessages.set([
+                this.createValidationFeedbackMessage(msg, 'error'),
+            ]);
+            this.errored.emit(msg);
+            return;
+        }
+        this.submitSub?.unsubscribe();
+        this.stepValidationPending.set(true);
+        this.state.submitError.set(null);
+        this.submitValidationMessages.set([]);
+        const request = this.buildSubmitRequest(loadResponse);
+        this.submitSub = this.api.validate(request).subscribe({
+            next: (validationResponse) => {
+                this.stepValidationPending.set(false);
+                const validation = validationResponse.data;
+                if (!validation) {
+                    const msg = validationResponse.message ?? 'Failed to validate form';
+                    this.handleValidationRequestFailure(msg);
+                    return;
+                }
+                const backendMessages = this.mapSubmitValidationMessages(validation.results ?? []);
+                const localBlockingIssues = this.hasLocalBlockingValidationIssues();
+                this.submitValidationMessages.set([
+                    ...backendMessages,
+                    ...(localBlockingIssues
+                        ? [
+                            this.createValidationFeedbackMessage(this.translocoService.translate('clientForm.validation-next'), 'error'),
+                        ]
+                        : []),
+                ]);
+                if (validation.hasBlockingFailures || localBlockingIssues) {
+                    return;
+                }
+                const warnings = this.runtimeWarnings();
+                if (this.confirmWarningsOnStepChange() && warnings.length > 0) {
+                    this.confirmValidationWarnings(warnings, 'clientForm.warning-confirmation-question-next', this.translocoService.translate('clientForm.next'), () => this.applyStepChange(targetStep));
+                    return;
+                }
+                this.applyStepChange(targetStep);
+            },
+            error: (err) => {
+                this.stepValidationPending.set(false);
+                const msg = err?.error?.message ?? err?.message ?? 'Failed to validate form';
+                this.handleValidationRequestFailure(msg);
+            },
+        });
+    }
+    applyStepChange(value) {
+        this.submitValidationMessages.set([]);
+        this.currentStep.set(value);
+    }
+    requiresForwardStepValidation(targetStep, currentStep) {
+        return (targetStep > currentStep && (this.stepsEnabled() || this.wizardEnabled()));
+    }
+    hasLocalBlockingValidationIssues() {
+        return (this.formControl.invalid ||
+            this.formRuntimeMessages().some((msg) => msg.severity === 'error'));
+    }
+    handleValidationRequestFailure(message) {
+        this.state.setSubmitError(message);
+        this.submitValidationMessages.set([
+            this.createValidationFeedbackMessage(message, 'error'),
+        ]);
+        this.errored.emit(message);
+    }
+    createValidationFeedbackMessage(message, severity) {
+        return {
+            code: 'FORMULA_FALSE',
+            severity,
+            message,
+        };
+    }
+    confirmValidationWarnings(warnings, questionTranslationKey, acceptLabel, onAccept) {
+        this.confirmationService.confirm({
+            type: 'dialog',
+            header: this.translocoService.translate('clientForm.warning-confirmation-header'),
+            message: this.buildWarningConfirmationMessage(warnings, questionTranslationKey),
+            acceptLabel: acceptLabel,
+            acceptButton: {
+                severity: 'warn',
+            },
+            accept: onAccept,
+            reject: () => { },
+        });
+    }
+    executeSubmit(request) {
+        this.submitSub = this.api.submit(request).subscribe({
+            next: (response) => {
+                this.state.submitting.set(false);
+                if (response.data) {
+                    this.state.setSubmitResponse(response.data);
+                    this.submitted.emit(response.data);
+                }
+                else {
+                    const msg = response.message ?? 'Failed to submit form';
+                    this.state.setSubmitError(msg);
+                    this.errored.emit(msg);
+                }
+            },
+            error: (err) => {
+                this.state.submitting.set(false);
+                const msg = err?.error?.message ?? err?.message ?? 'Failed to submit form';
+                this.state.setSubmitError(msg);
+                this.errored.emit(msg);
+            },
+        });
+    }
+    buildWarningConfirmationMessage(warnings, questionTranslationKey) {
+        const intro = this.translocoService.translate('clientForm.warning-confirmation-message');
+        const question = this.translocoService.translate(questionTranslationKey);
+        const warningLines = [
+            ...new Set(warnings
+                .map((warning) => warning.message?.trim())
+                .filter((message) => !!message)),
+        ].map((message) => `- ${message}`);
+        return [intro, ...warningLines, '', question].join('\n');
+    }
     mapSubmitValidationMessages(results) {
         return results
             .filter((result) => !result.passed)
@@ -1360,7 +1489,7 @@ class ClientForm {
         return 'upcoming';
     }
     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]=\"'previous' | transloco\"\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]=\"'next' | transloco\"\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]=\"'previous' | transloco\"\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]=\"'next' | transloco\"\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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    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 }, confirmWarningsOnSubmit: { classPropertyName: "confirmWarningsOnSubmit", publicName: "confirmWarningsOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnStepChange: { classPropertyName: "confirmWarningsOnStepChange", publicName: "confirmWarningsOnStepChange", 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                  [disabled]=\"stepNavigationValidating()\"\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]=\"'previous' | transloco\"\r\n                    severity=\"secondary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"\r\n                      currentStep() === 1 || stepNavigationValidating()\r\n                    \"\r\n                    (onClick)=\"goToPreviousStep()\"\r\n                  />\r\n                  <mt-button\r\n                    [label]=\"'next' | transloco\"\r\n                    severity=\"primary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"\r\n                      currentStep() === stepSections().length ||\r\n                      stepNavigationValidating()\r\n                    \"\r\n                    [loading]=\"stepNavigationValidating()\"\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                          [disabled]=\"stepNavigationValidating()\"\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]=\"'previous' | transloco\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"\r\n                        currentStep() === 1 || stepNavigationValidating()\r\n                      \"\r\n                      (onClick)=\"goToPreviousStep()\"\r\n                    />\r\n                    <mt-button\r\n                      [label]=\"'next' | transloco\"\r\n                      severity=\"primary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"\r\n                        currentStep() === stepSections().length ||\r\n                        stepNavigationValidating()\r\n                      \"\r\n                      [loading]=\"stepNavigationValidating()\"\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", "mode", "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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
             type: Component,
@@ -1376,8 +1505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Message,
                         TranslocoDirective,
                         TranslocoPipe,
-                    ], 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]=\"'previous' | transloco\"\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]=\"'next' | transloco\"\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]=\"'previous' | transloco\"\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]=\"'next' | transloco\"\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"] }] } });
+                    ], 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                  [disabled]=\"stepNavigationValidating()\"\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]=\"'previous' | transloco\"\r\n                    severity=\"secondary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"\r\n                      currentStep() === 1 || stepNavigationValidating()\r\n                    \"\r\n                    (onClick)=\"goToPreviousStep()\"\r\n                  />\r\n                  <mt-button\r\n                    [label]=\"'next' | transloco\"\r\n                    severity=\"primary\"\r\n                    variant=\"outlined\"\r\n                    [disabled]=\"\r\n                      currentStep() === stepSections().length ||\r\n                      stepNavigationValidating()\r\n                    \"\r\n                    [loading]=\"stepNavigationValidating()\"\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                          [disabled]=\"stepNavigationValidating()\"\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]=\"'previous' | transloco\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"\r\n                        currentStep() === 1 || stepNavigationValidating()\r\n                      \"\r\n                      (onClick)=\"goToPreviousStep()\"\r\n                    />\r\n                    <mt-button\r\n                      [label]=\"'next' | transloco\"\r\n                      severity=\"primary\"\r\n                      variant=\"outlined\"\r\n                      [disabled]=\"\r\n                        currentStep() === stepSections().length ||\r\n                        stepNavigationValidating()\r\n                      \"\r\n                      [loading]=\"stepNavigationValidating()\"\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 }] }], confirmWarningsOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmWarningsOnSubmit", required: false }] }], confirmWarningsOnStepChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmWarningsOnStepChange", 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