@masterteam/forms 0.0.52 → 0.0.54

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

@@ -9,7 +9,7 @@ import { EntitiesPreview } from '@masterteam/components/entities';
 import { Tabs } from '@masterteam/components/tabs';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { HttpClient, HttpContext } from '@angular/common/http';
-import { ValidatorConfig, TextFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig } from '@masterteam/components';
+import { ValidatorConfig, TextFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig, LookupMatrixFieldConfig } from '@masterteam/components';
 import { TranslocoService } from '@jsverse/transloco';
 
 /**
@@ -216,7 +216,11 @@ function mapFormValueToSubmitFields(formValue, loadResponse) {
         }
     }
     return Object.entries(formValue)
-        .filter(([, value]) => value !== undefined && value !== null)
+        .filter(([propertyKey, value]) => {
+        if (value === undefined || value === null)
+            return false;
+        return metadataByKey.get(propertyKey)?.viewType !== 'LookupMatrix';
+    })
         .map(([propertyKey, value]) => {
         const meta = metadataByKey.get(propertyKey);
         const normalizedValue = normalizeSubmitValue(value, meta?.viewType);
@@ -277,6 +281,9 @@ function isFieldVisible(field, mode) {
 function isPreviewOnlyField(field) {
     return field.isWrite === false && field.isRead !== false;
 }
+function isCalculatedField(field) {
+    return field.propertyMetadata?.isCalculated === true;
+}
 function resolveFieldMeta(field) {
     const property = field.propertyMetadata;
     return {
@@ -297,6 +304,7 @@ function mapFieldToConfig(field, lang, lookups, context) {
         order: field.order,
         placeholder: label,
         required: field.isRequired ?? false,
+        disabled: isCalculatedField(field),
         readonly: field.isWrite === false,
         validators: field.isRequired
             ? [ValidatorConfig.required(`${label} is required`)]
@@ -377,7 +385,6 @@ function mapFieldToConfig(field, lang, lookups, context) {
         case 'InternalModule':
         case 'DynamicList':
         case 'API':
-        case 'LookupMatrix':
         case 'Location': {
             const options = extractOptionsFromProperty(prop);
             return new SelectFieldConfig({
@@ -387,6 +394,8 @@ function mapFieldToConfig(field, lang, lookups, context) {
                 optionValue: 'value',
             });
         }
+        case 'LookupMatrix':
+            return buildLookupMatrixFieldConfig(base, prop, lookups);
         // ── Connection (level-to-level) ─────────────────────────
         case 'Connection': {
             const connectionConfig = prop?.configuration ?? {};
@@ -444,19 +453,7 @@ function mapValidationRules(config, lang) {
  * finds the matching lookup definition, and maps its items to select options.
  */
 function resolveLookupOptions(prop, lookups) {
-    const lookupId = prop?.configuration?.['lookup'];
-    if (!lookupId || !lookups.length)
-        return [];
-    const lookup = lookups.find((l) => l.id === lookupId);
-    if (!lookup)
-        return [];
-    return lookup.items
-        .slice()
-        .sort((a, b) => a.order - b.order)
-        .map((item) => ({
-        label: item.name?.display ?? item.key,
-        value: item.key,
-    }));
+    return resolveLookupOptionsById(coerceLookupId(prop?.configuration?.['lookup']), lookups);
 }
 /**
  * Fallback option extractor for non-lookup select types
@@ -479,6 +476,77 @@ function extractOptionsFromProperty(property) {
     }
     return null;
 }
+function resolveLookupOptionsById(lookupId, lookups) {
+    if (!lookupId || !lookups.length)
+        return [];
+    const lookup = lookups.find((item) => item.id === lookupId);
+    if (!lookup)
+        return [];
+    return lookup.items
+        .slice()
+        .sort((a, b) => a.order - b.order)
+        .map((item) => ({
+        id: item.id,
+        key: item.key,
+        label: item.name?.display ?? item.name?.en ?? item.key,
+        value: item.key,
+        color: item.color ?? null,
+        description: item.description?.display ?? item.description?.en ?? undefined,
+    }));
+}
+function resolveLookupNameById(lookupId, lookups) {
+    if (!lookupId)
+        return '';
+    const lookup = lookups.find((item) => item.id === lookupId);
+    return lookup?.name?.display ?? lookup?.name?.en ?? lookup?.key ?? '';
+}
+function buildLookupMatrixFieldConfig(base, prop, lookups) {
+    const configuration = (prop?.configuration ?? {});
+    const xLookupId = coerceLookupId(configuration['xlookupSource']);
+    const yLookupId = coerceLookupId(configuration['ylookupSource']);
+    const zLookupId = coerceLookupId(configuration['zlookupId']);
+    const xOptions = resolveLookupOptionsById(xLookupId, lookups);
+    const yOptions = resolveLookupOptionsById(yLookupId, lookups);
+    const zOptions = resolveLookupOptionsById(zLookupId, lookups);
+    const zOptionsById = new Map(zOptions
+        .filter((item) => item.id != null)
+        .map((item) => [String(item.id), item]));
+    const rawCells = Array.isArray(configuration['lookupsMatrix'])
+        ? configuration['lookupsMatrix']
+        : [];
+    return new LookupMatrixFieldConfig({
+        ...base,
+        required: false,
+        xFieldKey: String(configuration['xPropertyLookupKey'] ?? ''),
+        yFieldKey: String(configuration['yPropertyLookupKey'] ?? ''),
+        xAxisLabel: resolveLookupNameById(xLookupId, lookups),
+        yAxisLabel: resolveLookupNameById(yLookupId, lookups),
+        xOptions,
+        yOptions,
+        cells: rawCells.map((cell) => {
+            const zOption = zOptionsById.get(String(cell['value'] ?? ''));
+            return {
+                row: Number(cell['row'] ?? 0),
+                column: Number(cell['column'] ?? 0),
+                xLookupItemId: String(cell['xValue'] ?? ''),
+                yLookupItemId: String(cell['yValue'] ?? ''),
+                zLookupItemId: cell['value'] == null ? null : String(cell['value']),
+                label: zOption?.label ?? String(cell['value'] ?? ''),
+                color: zOption?.color ?? null,
+            };
+        }),
+    });
+}
+function coerceLookupId(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+}
 function normalizeSubmitValue(value, viewType) {
     switch (viewType) {
         case 'User':
@@ -605,7 +673,10 @@ function stripTemplatePrefix(value) {
  * Self-contained, signal-based (no NGXS). Each instance manages its own state
  * via a component-scoped `ClientFormStateService`.
  *
- * **No action buttons in template.** Parent controls all actions via `viewChild()`:
+ * Submit and reset actions stay external. Step navigation buttons are optional
+ * and can be hidden with `showInternalStepActions`.
+ *
+ * Parent can control actions via `viewChild()`:
  *
  * ```html
  * <mt-client-form #processForm [moduleKey]="'Risk'" [operationKey]="'CloseRisk'" />
@@ -625,6 +696,7 @@ class ClientForm {
     state = inject(ClientFormStateService);
     loadSub;
     submitSub;
+    hasStartedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasStartedLoad" }] : []));
     runtimeMessages = signal([], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : []));
     translocoService = inject(TranslocoService);
     // ============================================================================
@@ -664,6 +736,7 @@ class ClientForm {
     autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : []));
     formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : []));
     renderMode = input(...(ngDevMode ? [undefined, { debugName: "renderMode" }] : []));
+    // Hide the built-in previous/next buttons when step actions are rendered by the parent.
     showInternalStepActions = input(true, ...(ngDevMode ? [{ debugName: "showInternalStepActions" }] : []));
     lang = signal(this.translocoService.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
     lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : []));
@@ -677,6 +750,7 @@ class ClientForm {
     errored = output();
     modeDetected = output();
     formSourceDetected = output();
+    footerStateChanged = output();
     // ============================================================================
     // Internal Form Control
     // ============================================================================
@@ -794,6 +868,43 @@ class ClientForm {
             ...new Set([...this.forcedHiddenFieldKeys(), ...this.ignoredFieldKeys()]),
         ];
     }, ...(ngDevMode ? [{ debugName: "effectiveForcedHiddenFieldKeys" }] : []));
+    footerLoading = computed(() => {
+        return (this.state.loading() ||
+            (this.autoLoad() &&
+                !this.hasStartedLoad() &&
+                !this.state.isLoaded() &&
+                !this.state.error()));
+    }, ...(ngDevMode ? [{ debugName: "footerLoading" }] : []));
+    footerState = computed(() => {
+        const loading = this.footerLoading();
+        const isLoaded = this.state.isLoaded();
+        const renderMode = this.effectiveRenderMode();
+        const stepNavigationEnabled = this.stepsEnabled();
+        const sectionNavigationEnabled = this.sectionNavigationEnabled();
+        const currentStep = this.currentStep();
+        const stepCount = this.stepSections().length;
+        const canGoToPreviousStep = stepNavigationEnabled && currentStep > 1;
+        const canGoToNextStep = stepNavigationEnabled && currentStep < stepCount;
+        return {
+            loading,
+            isLoaded,
+            renderMode,
+            actionMode: loading
+                ? 'loading'
+                : stepNavigationEnabled
+                    ? 'steps'
+                    : 'submit',
+            stepNavigationEnabled,
+            sectionNavigationEnabled,
+            currentStep,
+            stepCount,
+            canGoToPreviousStep,
+            canGoToNextStep,
+            showPreviousStep: stepNavigationEnabled,
+            showNextStep: stepNavigationEnabled && canGoToNextStep,
+            showSubmit: isLoaded && !loading && (!stepNavigationEnabled || !canGoToNextStep),
+        };
+    }, ...(ngDevMode ? [{ debugName: "footerState" }] : []));
     // ============================================================================
     // Effects
     // ============================================================================
@@ -829,6 +940,12 @@ class ClientForm {
                 this.currentStep.set(1);
             }
         });
+        effect(() => {
+            const footerState = this.footerState();
+            untracked(() => {
+                this.footerStateChanged.emit(footerState);
+            });
+        });
     }
     // ============================================================================
     // Public API (accessed via viewChild)
@@ -841,6 +958,7 @@ class ClientForm {
         if (this.state.loading())
             return;
         this.loadSub?.unsubscribe();
+        this.hasStartedLoad.set(true);
         this.runtimeMessages.set([]);
         this.state.loading.set(true);
         this.state.error.set(null);
@@ -977,6 +1095,18 @@ class ClientForm {
     isStepNavigationEnabled() {
         return this.stepsEnabled();
     }
+    isSectionNavigationEnabled() {
+        return this.sectionNavigationEnabled();
+    }
+    isFooterLoading() {
+        return this.footerState().loading;
+    }
+    getResolvedRenderMode() {
+        return this.footerState().renderMode;
+    }
+    getFooterState() {
+        return this.footerState();
+    }
     // ============================================================================
     // Lifecycle
     // ============================================================================
@@ -1067,7 +1197,7 @@ class ClientForm {
         return 'upcoming';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\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\">\r\n    @if (previewEntities().length > 0) {\r\n      <mt-entities-preview [entities]=\"previewEntities()\" />\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        <div class=\"flex flex-col gap-4\">\r\n          @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n            <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n              @if (runtimeErrors().length > 0) {\r\n                <div class=\"mb-3\">\r\n                  <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n                    Validation Errors\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeErrors();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\r\n              }\r\n\r\n              @if (runtimeWarnings().length > 0) {\r\n                <div>\r\n                  <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n                    Validation Warnings\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeWarnings();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\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                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (click)=\"goToPreviousStep()\"\r\n                  >\r\n                    Previous\r\n                  </button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (click)=\"goToNextStep()\"\r\n                  >\r\n                    Next\r\n                  </button>\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    } @else if (previewEntities().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: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], 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\">\r\n    @if (previewEntities().length > 0) {\r\n      <mt-entities-preview [entities]=\"previewEntities()\" />\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        <div class=\"flex flex-col gap-4\">\r\n          @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n            <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n              @if (runtimeErrors().length > 0) {\r\n                <div class=\"mb-3\">\r\n                  <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n                    Validation Errors\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeErrors();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\r\n              }\r\n\r\n              @if (runtimeWarnings().length > 0) {\r\n                <div>\r\n                  <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n                    Validation Warnings\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeWarnings();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\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                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (click)=\"goToPreviousStep()\"\r\n                  >\r\n                    Previous\r\n                  </button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (click)=\"goToNextStep()\"\r\n                  >\r\n                    Next\r\n                  </button>\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    } @else if (previewEntities().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: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
             type: Component,
@@ -1078,8 +1208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         DynamicForm,
                         Tabs,
                         Skeleton,
-                    ], providers: [ClientFormStateService], template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\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\">\r\n    @if (previewEntities().length > 0) {\r\n      <mt-entities-preview [entities]=\"previewEntities()\" />\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        <div class=\"flex flex-col gap-4\">\r\n          @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n            <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n              @if (runtimeErrors().length > 0) {\r\n                <div class=\"mb-3\">\r\n                  <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n                    Validation Errors\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeErrors();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\r\n              }\r\n\r\n              @if (runtimeWarnings().length > 0) {\r\n                <div>\r\n                  <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n                    Validation Warnings\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeWarnings();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\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                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (click)=\"goToPreviousStep()\"\r\n                  >\r\n                    Previous\r\n                  </button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (click)=\"goToNextStep()\"\r\n                  >\r\n                    Next\r\n                  </button>\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    } @else if (previewEntities().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: { moduleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleKey", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: true }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], moduleDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleDataId", required: false }] }], requestSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestSchemaId", required: false }] }], draftProcessId: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftProcessId", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }], submitRequestMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitRequestMapper", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLoad", required: false }] }], formMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMode", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], showInternalStepActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInternalStepActions", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }] } });
+                    ], 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\">\r\n    @if (previewEntities().length > 0) {\r\n      <mt-entities-preview [entities]=\"previewEntities()\" />\r\n    }\r\n\r\n    <!-- Dynamic Form -->\r\n    @if (state.requiresForm() && editableFormConfig(); as config) {\r\n      @if (hasEditableFormSections()) {\r\n        <div class=\"flex flex-col gap-4\">\r\n          @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n            <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n              @if (runtimeErrors().length > 0) {\r\n                <div class=\"mb-3\">\r\n                  <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n                    Validation Errors\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeErrors();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\r\n              }\r\n\r\n              @if (runtimeWarnings().length > 0) {\r\n                <div>\r\n                  <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n                    Validation Warnings\r\n                  </h4>\r\n                  <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n                    @for (\r\n                      msg of runtimeWarnings();\r\n                      track msg.ruleId || msg.fieldKey || msg.message\r\n                    ) {\r\n                      <li>{{ msg.message }}</li>\r\n                    }\r\n                  </ul>\r\n                </div>\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                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === 1\"\r\n                    (click)=\"goToPreviousStep()\"\r\n                  >\r\n                    Previous\r\n                  </button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n                    [disabled]=\"currentStep() === stepSections().length\"\r\n                    (click)=\"goToNextStep()\"\r\n                  >\r\n                    Next\r\n                  </button>\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    } @else if (previewEntities().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: { moduleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleKey", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: true }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], moduleDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleDataId", required: false }] }], requestSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestSchemaId", required: false }] }], draftProcessId: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftProcessId", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }], submitRequestMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitRequestMapper", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLoad", required: false }] }], formMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMode", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], showInternalStepActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInternalStepActions", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }], footerStateChanged: [{ type: i0.Output, args: ["footerStateChanged"] }] } });
 
 // ============================================================================
 // API Response Wrapper