@masterteam/forms 0.0.45 → 0.0.47

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

@@ -6,6 +6,7 @@ import { CommonModule } from '@angular/common';
 import { Skeleton } from 'primeng/skeleton';
 import * as i2 from 'primeng/stepper';
 import { StepperModule } from 'primeng/stepper';
+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';
@@ -136,6 +137,11 @@ const WIDTH_TO_COLSPAN = {
     '50': 6,
     '100': 12,
 };
+const WIDTH_TO_ENTITY_SIZE = {
+    '25': 6,
+    '50': 12,
+    '100': 24,
+};
 // ============================================================================
 // Public Mapper Functions
 // ============================================================================
@@ -159,7 +165,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
             const visibleFields = section.fields
                 .filter((field) => {
                 // isRead=false → completely hidden
-                if (field.isRead === false)
+                if (field.isWrite !== true && field.isRead === false)
                     return false;
                 if (mode === 'create')
                     return !field.hiddenInCreation;
@@ -234,18 +240,51 @@ function mapFormValueToSubmitValues(formValue, loadResponse) {
     })
         .filter((value) => !!value);
 }
+function getPreviewOnlyFieldKeys(config, mode = 'create') {
+    return config.sections.flatMap((section) => (section.fields ?? [])
+        .filter((field) => isFieldVisible(field, mode) && isPreviewOnlyField(field))
+        .map((field) => field.propertyKey));
+}
+function mapPreviewFieldsToEntities(config, values, mode = 'create') {
+    const resolvedValues = mapValuesToFormValue(values, config);
+    return config.sections
+        .slice()
+        .sort((a, b) => a.order - b.order)
+        .flatMap((section) => (section.fields ?? [])
+        .filter((field) => isFieldVisible(field, mode) && isPreviewOnlyField(field))
+        .sort((a, b) => a.order - b.order)
+        .flatMap((field) => {
+        const property = field.propertyMetadata;
+        return [
+            {
+                ...property,
+                name: property.name?.display,
+                key: property.key ?? field.propertyKey,
+                value: resolvedValues[field.propertyKey],
+                order: section.order * 1000 + field.order,
+                configuration: {
+                    ...property.configuration,
+                    size: WIDTH_TO_ENTITY_SIZE[field.width] ?? 24,
+                },
+            },
+        ];
+    }));
+}
 // ============================================================================
 // Internal Helpers
 // ============================================================================
-/**
- * Resolve the property item from either `property` or `propertyMetadata`.
- * The API may return the data under either key.
- */
-function resolveProperty(field) {
-    return field.property ?? field.propertyMetadata;
+function isFieldVisible(field, mode) {
+    if (field.isWrite !== true && field.isRead === false)
+        return false;
+    if (mode === 'create')
+        return !field.hiddenInCreation;
+    return !field.hiddenInEditForm;
+}
+function isPreviewOnlyField(field) {
+    return field.isWrite === false && field.isRead !== false;
 }
 function resolveFieldMeta(field) {
-    const property = resolveProperty(field);
+    const property = field.propertyMetadata;
     return {
         property,
         propertyId: property?.propertyId,
@@ -254,7 +293,8 @@ function resolveFieldMeta(field) {
 }
 function mapFieldToConfig(field, lang, lookups) {
     const { property: prop, viewType } = resolveFieldMeta(field);
-    const label = resolvePropertyName(prop, lang) || field.propertyKey;
+    const label = prop?.name?.display ??
+        field.propertyKey;
     const colSpan = WIDTH_TO_COLSPAN[field.width] ?? 12;
     const base = {
         key: field.propertyKey,
@@ -382,14 +422,6 @@ function mapValidationRules(config, lang) {
         enabled: rule.enabled,
     }));
 }
-function resolvePropertyName(property, lang) {
-    if (!property?.name)
-        return '';
-    if (typeof property.name === 'string')
-        return property.name;
-    // Prefer display name, then lang-specific, then English fallback
-    return (property.name['display'] ?? property.name[lang] ?? property.name['en'] ?? '');
-}
 /**
  * Resolve lookup items for Lookup / LookupMultiSelect viewTypes.
  *
@@ -465,7 +497,7 @@ function buildFieldValueMap(config) {
                 field.propertyKey,
                 stripTemplatePrefix(field.propertyKey),
             ]);
-            const property = resolveProperty(field);
+            const property = field.propertyMetadata;
             if (property?.key) {
                 aliases.add(property.key);
                 aliases.add(stripTemplatePrefix(property.key));
@@ -591,7 +623,7 @@ class ClientForm {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : []));
     formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : []));
-    renderMode = input('form', ...(ngDevMode ? [{ debugName: "renderMode" }] : []));
+    renderMode = input(...(ngDevMode ? [undefined, { debugName: "renderMode" }] : []));
     showInternalStepActions = input(true, ...(ngDevMode ? [{ debugName: "showInternalStepActions" }] : []));
     lang = input('en', ...(ngDevMode ? [{ debugName: "lang" }] : []));
     lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : []));
@@ -621,9 +653,47 @@ class ClientForm {
     }, ...(ngDevMode ? [{ debugName: "initialValues" }] : []));
     virtualFields = computed(() => this.state.virtualFields(), ...(ngDevMode ? [{ debugName: "virtualFields" }] : []));
     hasVirtualFields = computed(() => this.virtualFields().length > 0, ...(ngDevMode ? [{ debugName: "hasVirtualFields" }] : []));
-    stepSections = computed(() => this.formConfig()?.sections ?? [], ...(ngDevMode ? [{ debugName: "stepSections" }] : []));
-    stepsEnabled = computed(() => this.renderMode() === 'steps' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "stepsEnabled" }] : []));
-    tabsEnabled = computed(() => this.renderMode() === 'tabs' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "tabsEnabled" }] : []));
+    previewFieldKeys = computed(() => {
+        const config = this.state.formConfiguration();
+        if (!config)
+            return [];
+        return getPreviewOnlyFieldKeys(config, this.formMode());
+    }, ...(ngDevMode ? [{ debugName: "previewFieldKeys" }] : []));
+    previewEntities = computed(() => {
+        const config = this.state.formConfiguration();
+        if (!config)
+            return [];
+        return mapPreviewFieldsToEntities(config, this.state.formValues(), this.formMode());
+    }, ...(ngDevMode ? [{ debugName: "previewEntities" }] : []));
+    editableFormConfig = computed(() => {
+        const config = this.formConfig();
+        if (!config)
+            return null;
+        const previewFieldKeys = new Set(this.previewFieldKeys());
+        return {
+            ...config,
+            sections: config.sections
+                .map((section) => ({
+                ...section,
+                fields: section.fields.filter((field) => !field.key || !previewFieldKeys.has(field.key)),
+            }))
+                .filter((section) => section.fields.some((field) => field.type !== 'spacer')),
+        };
+    }, ...(ngDevMode ? [{ debugName: "editableFormConfig" }] : []));
+    stepSections = computed(() => this.editableFormConfig()?.sections ?? [], ...(ngDevMode ? [{ debugName: "stepSections" }] : []));
+    hasEditableFormSections = computed(() => this.stepSections().length > 0, ...(ngDevMode ? [{ debugName: "hasEditableFormSections" }] : []));
+    effectiveRenderMode = computed(() => {
+        const explicitRenderMode = this.renderMode();
+        if (explicitRenderMode)
+            return explicitRenderMode;
+        const configRenderMode = this.state.formConfiguration()?.renderMode;
+        if (configRenderMode === 'steps' || configRenderMode === 'tabs') {
+            return configRenderMode;
+        }
+        return 'form';
+    }, ...(ngDevMode ? [{ debugName: "effectiveRenderMode" }] : []));
+    stepsEnabled = computed(() => this.effectiveRenderMode() === 'steps' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "stepsEnabled" }] : []));
+    tabsEnabled = computed(() => this.effectiveRenderMode() === 'tabs' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "tabsEnabled" }] : []));
     sectionNavigationEnabled = computed(() => this.stepsEnabled() || this.tabsEnabled(), ...(ngDevMode ? [{ debugName: "sectionNavigationEnabled" }] : []));
     tabOptions = computed(() => this.stepSections().map((section, index) => ({
         label: section.label || `Tab ${index + 1}`,
@@ -643,13 +713,16 @@ class ClientForm {
             return [];
         const sections = this.stepSections();
         const currentIndex = this.currentStep() - 1;
-        return sections.flatMap((section, index) => {
+        const hiddenFieldKeys = new Set();
+        sections.forEach((section, index) => {
             if (index === currentIndex)
-                return [];
-            return section.fields
+                return;
+            section.fields
                 .map((field) => field.key)
-                .filter((key) => !!key);
+                .filter((key) => !!key)
+                .forEach((key) => hiddenFieldKeys.add(key));
         });
+        return [...hiddenFieldKeys];
     }, ...(ngDevMode ? [{ debugName: "forcedHiddenFieldKeys" }] : []));
     // ============================================================================
     // Effects
@@ -871,8 +944,8 @@ class ClientForm {
         const formValue = this.getFormValue();
         const values = mapFormValueToSubmitValues(formValue, loadResponse);
         const req = {
-            moduleKey: context?.moduleKey ?? this.moduleKey(),
-            operationKey: context?.operationKey ?? this.operationKey(),
+            moduleKey: this.moduleKey() ?? context?.moduleKey,
+            operationKey: this.operationKey() ?? context?.operationKey,
             values,
         };
         const moduleId = context?.moduleId ?? this.moduleId();
@@ -899,18 +972,19 @@ class ClientForm {
         return req;
     }
     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 }, 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 }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", 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 -->\n\n<!-- Loading State -->\n@if (state.loading()) {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Section header skeleton -->\n    <div class=\"flex flex-col gap-4\">\n      <p-skeleton width=\"30%\" height=\"1.5rem\" />\n      <div class=\"grid grid-cols-12 gap-4\">\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-12 flex flex-col gap-2\">\n          <p-skeleton width=\"25%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"45%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Second section skeleton -->\n    <div class=\"flex flex-col gap-4\">\n      <p-skeleton width=\"25%\" height=\"1.5rem\" />\n      <div class=\"grid grid-cols-12 gap-4\">\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"50%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-12 flex flex-col gap-2\">\n          <p-skeleton width=\"30%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"5rem\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Loaded State -->\n@if (state.isLoaded() && !state.loading()) {\n  <!-- Dynamic Form -->\n  @if (state.requiresForm() && formConfig(); as config) {\n    <div class=\"flex flex-col gap-4\">\n      @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n        <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\n          @if (runtimeErrors().length > 0) {\n            <div class=\"mb-3\">\n              <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\n                Validation Errors\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\n                @for (\n                  msg of runtimeErrors();\n                  track msg.ruleId || msg.fieldKey || msg.message\n                ) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (runtimeWarnings().length > 0) {\n            <div>\n              <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\n                Validation Warnings\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\n                @for (\n                  msg of runtimeWarnings();\n                  track msg.ruleId || msg.fieldKey || msg.message\n                ) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n      }\n      @if (stepsEnabled()) {\n        <div class=\"flex flex-col gap-4\">\n          <p-stepper\n            [value]=\"currentStep()\"\n            (valueChange)=\"onStepChange($event)\"\n          >\n            <p-step-list>\n              @for (section of stepSections(); track section.key || $index) {\n                <p-step [value]=\"$index + 1\">\n                  {{ section.label || \"Step \" + ($index + 1) }}\n                </p-step>\n              }\n            </p-step-list>\n          </p-stepper>\n\n          @if (showInternalStepActions()) {\n            <div class=\"flex justify-between gap-2\">\n              <button\n                type=\"button\"\n                class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\n                [disabled]=\"currentStep() === 1\"\n                (click)=\"goToPreviousStep()\"\n              >\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\n                [disabled]=\"currentStep() === stepSections().length\"\n                (click)=\"goToNextStep()\"\n              >\n                Next\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      @if (tabsEnabled()) {\n        <mt-tabs\n          [active]=\"currentStep()\"\n          (activeChange)=\"onStepChange($event)\"\n          [options]=\"tabOptions()\"\n          size=\"small\"\n          fluid\n        />\n      }\n\n      <mt-dynamic-form\n        [formConfig]=\"config\"\n        [formControl]=\"formControl\"\n        [visibleSectionKeys]=\"visibleSectionKeys()\"\n        [forcedHiddenFieldKeys]=\"forcedHiddenFieldKeys()\"\n        [preserveForcedHiddenValues]=\"true\"\n        (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\n      />\n    </div>\n  } @else if (!state.requiresForm()) {\n    <div\n      class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\n    >\n      <p class=\"text-sm text-muted-color\">\n        No form required for this operation.\n      </p>\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "ngmodule", type: StepperModule }, { kind: "component", type: i2.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2.StepList, selector: "p-step-list" }, { kind: "component", type: i2.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
+    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 }, 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 }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", 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              <p-stepper\r\n                [value]=\"currentStep()\"\r\n                (valueChange)=\"onStepChange($event)\"\r\n              >\r\n                <p-step-list>\r\n                  @for (\r\n                    section of stepSections();\r\n                    track section.key || $index\r\n                  ) {\r\n                    <p-step [value]=\"$index + 1\">\r\n                      {{ section.label || \"Step \" + ($index + 1) }}\r\n                    </p-step>\r\n                  }\r\n                </p-step-list>\r\n              </p-stepper>\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]=\"forcedHiddenFieldKeys()\"\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }, { kind: "ngmodule", type: StepperModule }, { kind: "component", type: i2.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2.StepList, selector: "p-step-list" }, { kind: "component", type: i2.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
             type: Component,
             args: [{ selector: 'mt-client-form', standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
+                        EntitiesPreview,
                         DynamicForm,
                         Tabs,
                         Skeleton,
                         StepperModule,
-                    ], providers: [ClientFormStateService], template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\n\n<!-- Loading State -->\n@if (state.loading()) {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Section header skeleton -->\n    <div class=\"flex flex-col gap-4\">\n      <p-skeleton width=\"30%\" height=\"1.5rem\" />\n      <div class=\"grid grid-cols-12 gap-4\">\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"40%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-12 flex flex-col gap-2\">\n          <p-skeleton width=\"25%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"45%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Second section skeleton -->\n    <div class=\"flex flex-col gap-4\">\n      <p-skeleton width=\"25%\" height=\"1.5rem\" />\n      <div class=\"grid grid-cols-12 gap-4\">\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"35%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-6 flex flex-col gap-2\">\n          <p-skeleton width=\"50%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"2.5rem\" />\n        </div>\n        <div class=\"col-span-12 flex flex-col gap-2\">\n          <p-skeleton width=\"30%\" height=\"0.875rem\" />\n          <p-skeleton width=\"100%\" height=\"5rem\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Loaded State -->\n@if (state.isLoaded() && !state.loading()) {\n  <!-- Dynamic Form -->\n  @if (state.requiresForm() && formConfig(); as config) {\n    <div class=\"flex flex-col gap-4\">\n      @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n        <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\n          @if (runtimeErrors().length > 0) {\n            <div class=\"mb-3\">\n              <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\n                Validation Errors\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\n                @for (\n                  msg of runtimeErrors();\n                  track msg.ruleId || msg.fieldKey || msg.message\n                ) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (runtimeWarnings().length > 0) {\n            <div>\n              <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\n                Validation Warnings\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\n                @for (\n                  msg of runtimeWarnings();\n                  track msg.ruleId || msg.fieldKey || msg.message\n                ) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n      }\n      @if (stepsEnabled()) {\n        <div class=\"flex flex-col gap-4\">\n          <p-stepper\n            [value]=\"currentStep()\"\n            (valueChange)=\"onStepChange($event)\"\n          >\n            <p-step-list>\n              @for (section of stepSections(); track section.key || $index) {\n                <p-step [value]=\"$index + 1\">\n                  {{ section.label || \"Step \" + ($index + 1) }}\n                </p-step>\n              }\n            </p-step-list>\n          </p-stepper>\n\n          @if (showInternalStepActions()) {\n            <div class=\"flex justify-between gap-2\">\n              <button\n                type=\"button\"\n                class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\n                [disabled]=\"currentStep() === 1\"\n                (click)=\"goToPreviousStep()\"\n              >\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\n                [disabled]=\"currentStep() === stepSections().length\"\n                (click)=\"goToNextStep()\"\n              >\n                Next\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      @if (tabsEnabled()) {\n        <mt-tabs\n          [active]=\"currentStep()\"\n          (activeChange)=\"onStepChange($event)\"\n          [options]=\"tabOptions()\"\n          size=\"small\"\n          fluid\n        />\n      }\n\n      <mt-dynamic-form\n        [formConfig]=\"config\"\n        [formControl]=\"formControl\"\n        [visibleSectionKeys]=\"visibleSectionKeys()\"\n        [forcedHiddenFieldKeys]=\"forcedHiddenFieldKeys()\"\n        [preserveForcedHiddenValues]=\"true\"\n        (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\n      />\n    </div>\n  } @else if (!state.requiresForm()) {\n    <div\n      class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\n    >\n      <p class=\"text-sm text-muted-color\">\n        No form required for this operation.\n      </p>\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"] }]
+                    ], 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              <p-stepper\r\n                [value]=\"currentStep()\"\r\n                (valueChange)=\"onStepChange($event)\"\r\n              >\r\n                <p-step-list>\r\n                  @for (\r\n                    section of stepSections();\r\n                    track section.key || $index\r\n                  ) {\r\n                    <p-step [value]=\"$index + 1\">\r\n                      {{ section.label || \"Step \" + ($index + 1) }}\r\n                    </p-step>\r\n                  }\r\n                </p-step-list>\r\n              </p-stepper>\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]=\"forcedHiddenFieldKeys()\"\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 }] }], 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 }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", 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"] }] } });
 
 // ============================================================================
@@ -931,5 +1005,5 @@ function isFormRequiredInterception(response) {
  * Generated bundle index. Do not edit.
  */
 
-export { ClientForm, ClientFormApiService, ClientFormStateService, isFormRequiredInterception, mapFormValueToSubmitValues, mapToDynamicFormConfig, mapValuesToFormValue };
+export { ClientForm, ClientFormApiService, ClientFormStateService, getPreviewOnlyFieldKeys, isFormRequiredInterception, mapFormValueToSubmitValues, mapPreviewFieldsToEntities, mapToDynamicFormConfig, mapValuesToFormValue };
 //# sourceMappingURL=masterteam-forms-client-form.mjs.map