@masterteam/forms 0.0.67 → 0.0.69

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

@@ -4,10 +4,11 @@ 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 { Card } from '@masterteam/components/card';
+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';
@@ -44,6 +45,13 @@ class ClientFormApiService {
     validate(request) {
         return this.http.post('process-submit/validate', request);
     }
+    /**
+     * Fetch team members for a given level data entry.
+     * Used when a User-type property has justTeamMembers configuration enabled.
+     */
+    getTeamMembers(levelDataId) {
+        return this.http.get(`LevelData/${levelDataId}/team-members`);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
 }
@@ -158,8 +166,9 @@ const WIDTH_TO_ENTITY_SIZE = {
  * @param lang     Current UI language ('en' | 'ar')
  * @param mode     'create' or 'edit' — filters hidden fields accordingly
  * @param lookups  Available lookup definitions for resolving Lookup/LookupMultiSelect options
+ * @param teamMemberOptions  Pre-fetched team member options (used when property configuration has justTeamMembers=true)
  */
-function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false) {
+function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false, teamMemberOptions = []) {
     return {
         sections: config.sections
             .slice()
@@ -182,7 +191,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
                 type: 'header',
                 columns: 12,
                 order: section.order,
-                fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly)),
+                fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly, teamMemberOptions)),
             };
         })
             .filter((section) => section.fields.length > 0),
@@ -321,7 +330,7 @@ function resolveFieldMeta(field) {
         viewType: property?.viewType ?? 'Text',
     };
 }
-function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
+function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamMemberOptions = []) {
     const { property: prop, viewType } = resolveFieldMeta(field);
     const label = prop?.name?.display ??
         field.propertyKey;
@@ -382,7 +391,18 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
             });
         }
         // ── User Search ───────────────────────────────────────────
-        case 'User':
+        case 'User': {
+            const justTeamMembers = !!prop?.configuration?.['justTeamMembers'];
+            if (justTeamMembers) {
+                return new SelectFieldConfig({
+                    ...base,
+                    options: teamMemberOptions,
+                    optionLabel: 'label',
+                    optionValue: 'value',
+                    filter: teamMemberOptions.length > 10,
+                    showClear: !(field.isRequired ?? false),
+                });
+            }
             return new UserSearchFieldConfig({
                 ...base,
                 apiUrl: 'Identity/users',
@@ -390,6 +410,7 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
                     useBaseUrl: false,
                 }),
             });
+        }
         case 'MultiUser':
             return new UserSearchFieldConfig({
                 ...base,
@@ -726,12 +747,15 @@ function stripTemplatePrefix(value) {
  */
 class ClientForm {
     api = inject(ClientFormApiService);
+    teamMemberOptions = signal([], ...(ngDevMode ? [{ debugName: "teamMemberOptions" }] : /* istanbul ignore next */ []));
+    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(() => [
@@ -779,10 +803,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
     // ============================================================================
@@ -803,7 +830,7 @@ class ClientForm {
         const config = this.state.formConfiguration();
         if (!config)
             return null;
-        return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly());
+        return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly(), this.teamMemberOptions());
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     initialValues = computed(() => {
         const mappedValues = mapValuesToFormValue(this.state.formValues(), this.state.formConfiguration());
@@ -948,8 +975,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,
@@ -1044,6 +1074,8 @@ class ClientForm {
             return;
         this.loadSub?.unsubscribe();
         this.hasStartedLoad.set(true);
+        this.teamMemberOptions.set([]);
+        this.stepValidationPending.set(false);
         this.formRuntimeMessages.set([]);
         this.submitValidationMessages.set([]);
         this.state.loading.set(true);
@@ -1062,6 +1094,23 @@ class ClientForm {
                     if (response.data.formSource) {
                         this.formSourceDetected.emit(response.data.formSource);
                     }
+                    // Fetch team members if any User field has justTeamMembers=true
+                    const hasJustTeamMembers = response.data.formConfiguration?.sections
+                        .flatMap((s) => s.fields ?? [])
+                        .some((f) => f.propertyMetadata?.viewType === 'User' &&
+                        !!f.propertyMetadata?.configuration?.['justTeamMembers']) ?? false;
+                    const levelDataId = this.levelDataId() ?? response.data.context?.levelDataId;
+                    if (hasJustTeamMembers && levelDataId != null) {
+                        this.api.getTeamMembers(levelDataId).subscribe({
+                            next: (res) => {
+                                const options = (res.data ?? []).map((m) => ({
+                                    label: m.user?.displayName ?? m.user?.fullName ?? m.userId,
+                                    value: m.userId,
+                                }));
+                                this.teamMemberOptions.set(options);
+                            },
+                        });
+                    }
                 }
                 else {
                     const msg = response.message ?? 'Failed to load form';
@@ -1095,45 +1144,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);
             },
@@ -1172,6 +1212,7 @@ class ClientForm {
     reset() {
         this.loadSub?.unsubscribe();
         this.submitSub?.unsubscribe();
+        this.stepValidationPending.set(false);
         this.formControl.reset({});
         this.formRuntimeMessages.set([]);
         this.submitValidationMessages.set([]);
@@ -1184,7 +1225,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);
@@ -1193,11 +1244,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();
@@ -1301,6 +1355,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)
@@ -1350,7 +1529,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          <mt-card [title]=\"section.label\">\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </mt-card>\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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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,
@@ -1358,6 +1537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         Button,
+                        Card,
                         EntitiesPreview,
                         DynamicForm,
                         Tabs,
@@ -1366,8 +1546,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          <mt-card [title]=\"section.label\">\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </mt-card>\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