@masterteam/forms 0.0.34 → 0.0.36

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

@@ -0,0 +1,598 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, signal, computed, input, output, effect, untracked, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { HttpClient } from '@angular/common/http';
+
+/**
+ * Stateless HTTP service for process-forms runtime APIs.
+ * Root-provided — safe to share across multiple ClientForm instances.
+ */
+class ClientFormApiService {
+    http = inject(HttpClient);
+    baseUrl = 'process-forms';
+    /**
+     * Load form configuration and values for a given operation context.
+     * Backend determines mode (Approval vs Direct) based on published schema.
+     */
+    load(request) {
+        return this.http.post(`${this.baseUrl}/load`, request);
+    }
+    /**
+     * Submit form values. Result depends on mode:
+     * - Approval → status: 'PendingApproval'
+     * - Direct   → status: 'Executed'
+     */
+    submit(request) {
+        return this.http.post(`${this.baseUrl}/submit`, request);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Per-instance signal-based state for ClientForm.
+ *
+ * NOT providedIn root — each ClientForm component provides its own instance
+ * via `providers: [ClientFormStateService]`, enabling multiple independent
+ * forms on the same page.
+ */
+class ClientFormStateService {
+    // ============================================================================
+    // Core State Signals
+    // ============================================================================
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    submitError = signal(null, ...(ngDevMode ? [{ debugName: "submitError" }] : []));
+    loadResponse = signal(null, ...(ngDevMode ? [{ debugName: "loadResponse" }] : []));
+    submitResponse = signal(null, ...(ngDevMode ? [{ debugName: "submitResponse" }] : []));
+    // ============================================================================
+    // Derived Computeds — Load Response
+    // ============================================================================
+    isLoaded = computed(() => !!this.loadResponse(), ...(ngDevMode ? [{ debugName: "isLoaded" }] : []));
+    mode = computed(() => this.loadResponse()?.mode ?? null, ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    isApproval = computed(() => this.mode() === 'Approval', ...(ngDevMode ? [{ debugName: "isApproval" }] : []));
+    isDirect = computed(() => this.mode() === 'Direct', ...(ngDevMode ? [{ debugName: "isDirect" }] : []));
+    formSource = computed(() => this.loadResponse()?.formSource ?? null, ...(ngDevMode ? [{ debugName: "formSource" }] : []));
+    isFallbackForm = computed(() => {
+        const source = this.formSource();
+        return source === 'ModuleFallback' || source === 'LevelFallback';
+    }, ...(ngDevMode ? [{ debugName: "isFallbackForm" }] : []));
+    requiresForm = computed(() => this.loadResponse()?.requiresForm ?? false, ...(ngDevMode ? [{ debugName: "requiresForm" }] : []));
+    formConfiguration = computed(() => this.loadResponse()?.formConfiguration ?? null, ...(ngDevMode ? [{ debugName: "formConfiguration" }] : []));
+    values = computed(() => this.loadResponse()?.values ?? [], ...(ngDevMode ? [{ debugName: "values" }] : []));
+    context = computed(() => this.loadResponse()?.context ?? null, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    stepName = computed(() => this.loadResponse()?.stepName ?? null, ...(ngDevMode ? [{ debugName: "stepName" }] : []));
+    requestSchemaId = computed(() => this.loadResponse()?.requestSchemaId ?? null, ...(ngDevMode ? [{ debugName: "requestSchemaId" }] : []));
+    requestId = computed(() => this.loadResponse()?.requestId ?? null, ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    stepId = computed(() => this.loadResponse()?.stepId ?? null, ...(ngDevMode ? [{ debugName: "stepId" }] : []));
+    stepSchemaId = computed(() => this.loadResponse()?.stepSchemaId ?? null, ...(ngDevMode ? [{ debugName: "stepSchemaId" }] : []));
+    // ============================================================================
+    // Derived Computeds — Value Categories
+    // ============================================================================
+    /** Process virtual fields (Request_Date, Step_Name, etc.) — read-only display */
+    virtualFields = computed(() => this.values().filter((v) => v.metadata?.source === 'ProcessVirtual'), ...(ngDevMode ? [{ debugName: "virtualFields" }] : []));
+    /** Editable form values (non-virtual) */
+    formValues = computed(() => this.values().filter((v) => v.metadata?.source !== 'ProcessVirtual'), ...(ngDevMode ? [{ debugName: "formValues" }] : []));
+    // ============================================================================
+    // Derived Computeds — Submit Response
+    // ============================================================================
+    isSubmitted = computed(() => !!this.submitResponse(), ...(ngDevMode ? [{ debugName: "isSubmitted" }] : []));
+    submitStatus = computed(() => this.submitResponse()?.status ?? null, ...(ngDevMode ? [{ debugName: "submitStatus" }] : []));
+    isPendingApproval = computed(() => this.submitStatus() === 'PendingApproval', ...(ngDevMode ? [{ debugName: "isPendingApproval" }] : []));
+    isExecuted = computed(() => this.submitStatus() === 'Executed', ...(ngDevMode ? [{ debugName: "isExecuted" }] : []));
+    createdEntityId = computed(() => this.submitResponse()?.createdEntityId ?? null, ...(ngDevMode ? [{ debugName: "createdEntityId" }] : []));
+    // ============================================================================
+    // State Mutations
+    // ============================================================================
+    setLoadResponse(response) {
+        this.loadResponse.set(response);
+        this.error.set(null);
+    }
+    setSubmitResponse(response) {
+        this.submitResponse.set(response);
+        this.submitError.set(null);
+    }
+    setError(message) {
+        this.error.set(message);
+        this.loading.set(false);
+    }
+    setSubmitError(message) {
+        this.submitError.set(message);
+        this.submitting.set(false);
+    }
+    reset() {
+        this.loading.set(false);
+        this.submitting.set(false);
+        this.error.set(null);
+        this.submitError.set(null);
+        this.loadResponse.set(null);
+        this.submitResponse.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormStateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormStateService, decorators: [{
+            type: Injectable
+        }] });
+
+// ============================================================================
+// viewType → DynamicField type mapping
+// ============================================================================
+const VIEW_TYPE_MAP = {
+    User: 'select',
+    Text: 'text',
+    LongText: 'editor-field',
+    Percentage: 'slider',
+    Date: 'date',
+    Currency: 'text',
+    Number: 'number',
+    Lookup: 'select',
+    LookupMultiSelect: 'multi-select',
+    Checkbox: 'toggle',
+    InternalModule: 'select',
+    DynamicList: 'select',
+    API: 'select',
+    Time: 'date',
+    Status: 'select',
+    Attachment: 'upload-file',
+    EditableListView: 'text',
+    LookupLog: 'text',
+    LookupMatrix: 'select',
+    Location: 'select',
+};
+const WIDTH_TO_COLSPAN = {
+    '25': 3,
+    '50': 6,
+    '100': 12,
+};
+// ============================================================================
+// Public Mapper Functions
+// ============================================================================
+/**
+ * Convert a runtime FormConfiguration into a DynamicFormConfig
+ * that can be passed directly to `<mt-dynamic-form>`.
+ *
+ * @param config  The form configuration from the load API
+ * @param lang    Current UI language ('en' | 'ar')
+ * @param mode    'create' or 'edit' — filters hidden fields accordingly
+ */
+function mapToDynamicFormConfig(config, lang = 'en', mode = 'create') {
+    return {
+        sections: config.sections
+            .slice()
+            .sort((a, b) => a.order - b.order)
+            .map((section) => {
+            const sectionName = section.name[lang] ?? section.name['en'] ?? '';
+            const visibleFields = section.fields
+                .filter((field) => {
+                // isRead=false → completely hidden
+                if (field.isRead === false)
+                    return false;
+                if (mode === 'create')
+                    return !field.hiddenInCreation;
+                return !field.hiddenInEditForm;
+            })
+                .sort((a, b) => a.order - b.order);
+            return {
+                key: section.id,
+                label: sectionName,
+                type: 'header',
+                columns: 12,
+                order: section.order,
+                fields: visibleFields.map((field) => mapFieldToConfig(field, lang)),
+            };
+        })
+            .filter((section) => section.fields.length > 0),
+    };
+}
+/**
+ * Convert API property values into a flat key-value object
+ * suitable for `formControl.patchValue()`.
+ *
+ * Only includes non-virtual (editable) values.
+ */
+function mapValuesToFormValue(values) {
+    const result = {};
+    for (const v of values) {
+        if (v.metadata?.source === 'ProcessVirtual')
+            continue;
+        result[v.propertyKey] = v.value;
+    }
+    return result;
+}
+/**
+ * Convert the current form value back into the submit payload format.
+ *
+ * Maps `requestPropertyId` from the load response metadata where available,
+ * so backend can match to schema request properties.
+ */
+function mapFormValueToSubmitValues(formValue, loadResponse) {
+    const metadataByKey = new Map();
+    for (const v of loadResponse.values) {
+        if (v.metadata) {
+            metadataByKey.set(v.propertyKey, {
+                propertyId: v.metadata.propertyId,
+            });
+        }
+    }
+    return Object.entries(formValue)
+        .filter(([, value]) => value !== undefined && value !== null)
+        .map(([propertyKey, value]) => {
+        const meta = metadataByKey.get(propertyKey);
+        const submitValue = { propertyKey, value };
+        if (meta?.propertyId) {
+            submitValue.requestPropertyId = meta.propertyId;
+        }
+        return submitValue;
+    });
+}
+// ============================================================================
+// Internal Helpers
+// ============================================================================
+function mapFieldToConfig(field, lang) {
+    const viewType = field.property?.viewType ?? 'Text';
+    const fieldType = VIEW_TYPE_MAP[viewType] ?? 'text';
+    const label = resolvePropertyName(field.property, lang);
+    const colSpan = WIDTH_TO_COLSPAN[field.width] ?? 12;
+    const config = {
+        key: field.propertyKey,
+        label,
+        type: fieldType,
+        colSpan,
+        order: field.order,
+        placeholder: label,
+        required: field.isRequired ?? false,
+        readonly: field.isWrite === false,
+        validators: field.isRequired
+            ? [{ type: 'required', message: `${label} is required` }]
+            : [],
+    };
+    // Enrich select-type fields with options from property configuration
+    if (fieldType === 'select' || fieldType === 'multi-select') {
+        const options = extractOptionsFromProperty(field.property);
+        if (options) {
+            config.options = options;
+            config.optionLabel = 'label';
+            config.optionValue = 'value';
+        }
+    }
+    return config;
+}
+function resolvePropertyName(property, lang) {
+    if (!property?.name)
+        return '';
+    if (typeof property.name === 'string')
+        return property.name;
+    return property.name[lang] ?? property.name['en'] ?? '';
+}
+function extractOptionsFromProperty(property) {
+    if (!property?.configuration)
+        return null;
+    // Options may be in different shapes depending on property configuration
+    const config = property.configuration;
+    if (Array.isArray(config['options'])) {
+        return config['options'];
+    }
+    if (Array.isArray(config['items'])) {
+        return config['items'].map((item) => ({
+            label: typeof item.name === 'string'
+                ? item.name
+                : (item.name?.['en'] ?? item.label ?? String(item.value)),
+            value: item.id ?? item.value ?? item.key,
+        }));
+    }
+    return null;
+}
+
+/**
+ * Client Form — Runtime process form component.
+ *
+ * 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()`:
+ *
+ * ```html
+ * <mt-client-form #processForm [moduleKey]="'Risk'" [operationKey]="'CloseRisk'" />
+ * <button (click)="processForm.load()">Load</button>
+ * <button (click)="processForm.submit()">Submit</button>
+ * ```
+ *
+ * Or programmatically:
+ * ```typescript
+ * readonly processForm = viewChild.required(ClientForm);
+ * this.processForm().load();
+ * this.processForm().submit();
+ * ```
+ */
+class ClientForm {
+    api = inject(ClientFormApiService);
+    state = inject(ClientFormStateService);
+    loadSub;
+    submitSub;
+    // ============================================================================
+    // Inputs — Required Context
+    // ============================================================================
+    moduleKey = input.required(...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
+    operationKey = input.required(...(ngDevMode ? [{ debugName: "operationKey" }] : []));
+    // ============================================================================
+    // Inputs — Optional Context
+    // ============================================================================
+    moduleId = input(...(ngDevMode ? [undefined, { debugName: "moduleId" }] : []));
+    levelId = input(...(ngDevMode ? [undefined, { debugName: "levelId" }] : []));
+    levelDataId = input(...(ngDevMode ? [undefined, { debugName: "levelDataId" }] : []));
+    moduleDataId = input(...(ngDevMode ? [undefined, { debugName: "moduleDataId" }] : []));
+    requestSchemaId = input(...(ngDevMode ? [undefined, { debugName: "requestSchemaId" }] : []));
+    draftProcessId = input(...(ngDevMode ? [undefined, { debugName: "draftProcessId" }] : []));
+    preview = input(false, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    returnUrl = input(...(ngDevMode ? [undefined, { debugName: "returnUrl" }] : []));
+    // ============================================================================
+    // Inputs — UI Configuration
+    // ============================================================================
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : []));
+    formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : []));
+    lang = input('en', ...(ngDevMode ? [{ debugName: "lang" }] : []));
+    // ============================================================================
+    // Outputs
+    // ============================================================================
+    loaded = output();
+    submitted = output();
+    errored = output();
+    modeDetected = output();
+    formSourceDetected = output();
+    // ============================================================================
+    // Internal Form Control
+    // ============================================================================
+    formControl = new FormControl({});
+    // ============================================================================
+    // Computed — Dynamic Form Config
+    // ============================================================================
+    formConfig = computed(() => {
+        const config = this.state.formConfiguration();
+        if (!config)
+            return null;
+        return mapToDynamicFormConfig(config, this.lang(), this.formMode());
+    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    initialValues = computed(() => {
+        return mapValuesToFormValue(this.state.formValues());
+    }, ...(ngDevMode ? [{ debugName: "initialValues" }] : []));
+    virtualFields = computed(() => this.state.virtualFields(), ...(ngDevMode ? [{ debugName: "virtualFields" }] : []));
+    hasVirtualFields = computed(() => this.virtualFields().length > 0, ...(ngDevMode ? [{ debugName: "hasVirtualFields" }] : []));
+    // ============================================================================
+    // Auto-Load Effect
+    // ============================================================================
+    autoLoadEffect = effect(() => {
+        const autoLoad = this.autoLoad();
+        const moduleKey = this.moduleKey();
+        const operationKey = this.operationKey();
+        if (autoLoad && moduleKey && operationKey) {
+            untracked(() => this.load());
+        }
+    }, ...(ngDevMode ? [{ debugName: "autoLoadEffect" }] : []));
+    // ============================================================================
+    // Patch Values Effect — applies initial values after load
+    // ============================================================================
+    patchValuesEffect = effect(() => {
+        const values = this.initialValues();
+        const isLoaded = this.state.isLoaded();
+        if (isLoaded && Object.keys(values).length > 0) {
+            untracked(() => {
+                this.formControl.patchValue(values, { emitEvent: false });
+            });
+        }
+    }, ...(ngDevMode ? [{ debugName: "patchValuesEffect" }] : []));
+    // ============================================================================
+    // Public API (accessed via viewChild)
+    // ============================================================================
+    /**
+     * Load form configuration from the API.
+     * Builds request from current input values.
+     */
+    load() {
+        if (this.state.loading())
+            return;
+        this.loadSub?.unsubscribe();
+        this.state.loading.set(true);
+        this.state.error.set(null);
+        this.state.submitResponse.set(null);
+        const request = this.buildLoadRequest();
+        this.loadSub = this.api.load(request).subscribe({
+            next: (response) => {
+                this.state.loading.set(false);
+                if (response.data) {
+                    this.state.setLoadResponse(response.data);
+                    this.loaded.emit(response.data);
+                    if (response.data.mode) {
+                        this.modeDetected.emit(response.data.mode);
+                    }
+                    if (response.data.formSource) {
+                        this.formSourceDetected.emit(response.data.formSource);
+                    }
+                }
+                else {
+                    const msg = response.message ?? 'Failed to load form';
+                    this.state.setError(msg);
+                    this.errored.emit(msg);
+                }
+            },
+            error: (err) => {
+                const msg = err?.error?.message ?? err?.message ?? 'Failed to load form';
+                this.state.setError(msg);
+                this.errored.emit(msg);
+            },
+        });
+    }
+    /**
+     * Submit the current form values.
+     * Builds submit request from form value + load context.
+     */
+    submit() {
+        if (this.state.submitting())
+            return;
+        this.submitSub?.unsubscribe();
+        this.state.submitting.set(true);
+        this.state.submitError.set(null);
+        const request = this.buildSubmitRequest();
+        this.submitSub = this.api.submit(request).subscribe({
+            next: (response) => {
+                this.state.submitting.set(false);
+                if (response.data) {
+                    this.state.setSubmitResponse(response.data);
+                    this.submitted.emit(response.data);
+                }
+                else {
+                    const msg = response.message ?? 'Failed to submit form';
+                    this.state.setSubmitError(msg);
+                    this.errored.emit(msg);
+                }
+            },
+            error: (err) => {
+                const msg = err?.error?.message ?? err?.message ?? 'Failed to submit form';
+                this.state.setSubmitError(msg);
+                this.errored.emit(msg);
+            },
+        });
+    }
+    /**
+     * Get the current form value as a flat key-value object.
+     */
+    getFormValue() {
+        return this.formControl.value ?? {};
+    }
+    /**
+     * Get the current form value mapped to submit payload format.
+     */
+    getSubmitValues() {
+        const loadResponse = this.state.loadResponse();
+        if (!loadResponse)
+            return [];
+        return mapFormValueToSubmitValues(this.getFormValue(), loadResponse);
+    }
+    /**
+     * Check whether the current form state is valid.
+     */
+    isValid() {
+        return this.formControl.valid;
+    }
+    /**
+     * Reset the component to its initial state.
+     */
+    reset() {
+        this.loadSub?.unsubscribe();
+        this.submitSub?.unsubscribe();
+        this.formControl.reset({});
+        this.state.reset();
+    }
+    // ============================================================================
+    // Lifecycle
+    // ============================================================================
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+        this.submitSub?.unsubscribe();
+    }
+    // ============================================================================
+    // Private Helpers
+    // ============================================================================
+    buildLoadRequest() {
+        const req = {
+            moduleKey: this.moduleKey(),
+            operationKey: this.operationKey(),
+        };
+        const moduleId = this.moduleId();
+        const levelId = this.levelId();
+        const levelDataId = this.levelDataId();
+        const moduleDataId = this.moduleDataId();
+        const requestSchemaId = this.requestSchemaId();
+        const draftProcessId = this.draftProcessId();
+        const preview = this.preview();
+        if (moduleId != null)
+            req.moduleId = moduleId;
+        if (levelId != null)
+            req.levelId = levelId;
+        if (levelDataId != null)
+            req.levelDataId = levelDataId;
+        if (moduleDataId != null)
+            req.moduleDataId = moduleDataId;
+        if (requestSchemaId != null)
+            req.requestSchemaId = requestSchemaId;
+        if (draftProcessId != null)
+            req.draftProcessId = draftProcessId;
+        if (preview)
+            req.preview = preview;
+        return req;
+    }
+    buildSubmitRequest() {
+        const loadResponse = this.state.loadResponse();
+        const context = this.state.context();
+        const formValue = this.getFormValue();
+        const values = loadResponse
+            ? mapFormValueToSubmitValues(formValue, loadResponse)
+            : Object.entries(formValue)
+                .filter(([, v]) => v !== undefined && v !== null)
+                .map(([propertyKey, value]) => ({ propertyKey, value }));
+        const req = {
+            moduleKey: context?.moduleKey ?? this.moduleKey(),
+            operationKey: context?.operationKey ?? this.operationKey(),
+            values,
+        };
+        const moduleId = context?.moduleId ?? this.moduleId();
+        const levelId = context?.levelId ?? this.levelId();
+        const levelDataId = context?.levelDataId ?? this.levelDataId();
+        const moduleDataId = context?.moduleDataId ?? this.moduleDataId();
+        const requestSchemaId = context?.requestSchemaId ?? this.requestSchemaId();
+        const draftProcessId = this.draftProcessId();
+        const returnUrl = this.returnUrl();
+        if (moduleId != null)
+            req.moduleId = moduleId;
+        if (levelId != null)
+            req.levelId = levelId;
+        if (levelDataId != null)
+            req.levelDataId = levelDataId;
+        if (moduleDataId != null)
+            req.moduleDataId = moduleDataId;
+        if (requestSchemaId != null)
+            req.requestSchemaId = requestSchemaId;
+        if (draftProcessId != null)
+            req.draftProcessId = draftProcessId;
+        if (returnUrl)
+            req.returnUrl = returnUrl;
+        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 }, lang: { classPropertyName: "lang", publicName: "lang", 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-4 animate-pulse\">\r\n    <div class=\"h-6 bg-surface-200 rounded w-1/3\"></div>\r\n    <div class=\"grid grid-cols-12 gap-4\">\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-12 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Error State -->\r\n@if (state.error(); as error) {\r\n  <div\r\n    class=\"flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 border border-red-200\"\r\n    role=\"alert\"\r\n  >\r\n    <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n    <span class=\"text-sm font-medium\">{{ error }}</span>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <!-- Step Info Bar -->\r\n  @if (state.stepName() || state.mode()) {\r\n    <div\r\n      class=\"flex items-center gap-3 mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\"\r\n    >\r\n      @if (state.stepName()) {\r\n        <span class=\"text-sm font-semibold text-surface-700\">\r\n          {{ state.stepName() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.mode()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\r\n          [class]=\"\r\n            state.isApproval()\r\n              ? 'bg-amber-100 text-amber-800'\r\n              : 'bg-emerald-100 text-emerald-800'\r\n          \"\r\n        >\r\n          {{ state.mode() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.isFallbackForm()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-800\"\r\n        >\r\n          {{ state.formSource() }}\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Virtual Fields (read-only process context) -->\r\n  @if (hasVirtualFields()) {\r\n    <div class=\"mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\">\r\n      <div\r\n        class=\"grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3 lg:grid-cols-4\"\r\n      >\r\n        @for (field of virtualFields(); track field.propertyKey) {\r\n          <div class=\"flex flex-col gap-0.5\">\r\n            <span class=\"text-xs text-muted-color font-medium\">\r\n              {{ field.propertyKey | titlecase }}\r\n            </span>\r\n            <span class=\"text-sm text-surface-800 font-medium\">\r\n              {{ field.value ?? \"\u2014\" }}\r\n            </span>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Dynamic Form -->\r\n  @if (state.requiresForm() && formConfig(); as config) {\r\n    <mt-dynamic-form [formConfig]=\"config\" [formControl]=\"formControl\" />\r\n  } @else if (!state.requiresForm()) {\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\r\n  <!-- Submit Error -->\r\n  @if (state.submitError(); as submitError) {\r\n    <div\r\n      class=\"mt-4 flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 border border-red-200\"\r\n      role=\"alert\"\r\n    >\r\n      <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n      <span class=\"text-sm font-medium\">{{ submitError }}</span>\r\n    </div>\r\n  }\r\n\r\n  <!-- Submit Success -->\r\n  @if (state.isSubmitted()) {\r\n    <div\r\n      class=\"mt-4 flex items-center gap-2 p-3 rounded-lg border\"\r\n      [class]=\"\r\n        state.isPendingApproval()\r\n          ? 'bg-amber-50 text-amber-700 border-amber-200'\r\n          : 'bg-emerald-50 text-emerald-700 border-emerald-200'\r\n      \"\r\n    >\r\n      <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n      <span class=\"text-sm font-medium\">\r\n        @if (state.isPendingApproval()) {\r\n          Request submitted for approval.\r\n        } @else {\r\n          Operation executed successfully.\r\n        }\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <!-- Submitting Overlay -->\r\n  @if (state.submitting()) {\r\n    <div class=\"mt-4 flex items-center gap-2 text-sm text-muted-color\">\r\n      <div\r\n        class=\"w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin\"\r\n      ></div>\r\n      <span>Submitting...</span>\r\n    </div>\r\n  }\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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+}
+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, DynamicForm], 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-4 animate-pulse\">\r\n    <div class=\"h-6 bg-surface-200 rounded w-1/3\"></div>\r\n    <div class=\"grid grid-cols-12 gap-4\">\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-12 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Error State -->\r\n@if (state.error(); as error) {\r\n  <div\r\n    class=\"flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 border border-red-200\"\r\n    role=\"alert\"\r\n  >\r\n    <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n    <span class=\"text-sm font-medium\">{{ error }}</span>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <!-- Step Info Bar -->\r\n  @if (state.stepName() || state.mode()) {\r\n    <div\r\n      class=\"flex items-center gap-3 mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\"\r\n    >\r\n      @if (state.stepName()) {\r\n        <span class=\"text-sm font-semibold text-surface-700\">\r\n          {{ state.stepName() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.mode()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\r\n          [class]=\"\r\n            state.isApproval()\r\n              ? 'bg-amber-100 text-amber-800'\r\n              : 'bg-emerald-100 text-emerald-800'\r\n          \"\r\n        >\r\n          {{ state.mode() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.isFallbackForm()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-800\"\r\n        >\r\n          {{ state.formSource() }}\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Virtual Fields (read-only process context) -->\r\n  @if (hasVirtualFields()) {\r\n    <div class=\"mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\">\r\n      <div\r\n        class=\"grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3 lg:grid-cols-4\"\r\n      >\r\n        @for (field of virtualFields(); track field.propertyKey) {\r\n          <div class=\"flex flex-col gap-0.5\">\r\n            <span class=\"text-xs text-muted-color font-medium\">\r\n              {{ field.propertyKey | titlecase }}\r\n            </span>\r\n            <span class=\"text-sm text-surface-800 font-medium\">\r\n              {{ field.value ?? \"\u2014\" }}\r\n            </span>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Dynamic Form -->\r\n  @if (state.requiresForm() && formConfig(); as config) {\r\n    <mt-dynamic-form [formConfig]=\"config\" [formControl]=\"formControl\" />\r\n  } @else if (!state.requiresForm()) {\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\r\n  <!-- Submit Error -->\r\n  @if (state.submitError(); as submitError) {\r\n    <div\r\n      class=\"mt-4 flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 border border-red-200\"\r\n      role=\"alert\"\r\n    >\r\n      <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n      <span class=\"text-sm font-medium\">{{ submitError }}</span>\r\n    </div>\r\n  }\r\n\r\n  <!-- Submit Success -->\r\n  @if (state.isSubmitted()) {\r\n    <div\r\n      class=\"mt-4 flex items-center gap-2 p-3 rounded-lg border\"\r\n      [class]=\"\r\n        state.isPendingApproval()\r\n          ? 'bg-amber-50 text-amber-700 border-amber-200'\r\n          : 'bg-emerald-50 text-emerald-700 border-emerald-200'\r\n      \"\r\n    >\r\n      <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n      <span class=\"text-sm font-medium\">\r\n        @if (state.isPendingApproval()) {\r\n          Request submitted for approval.\r\n        } @else {\r\n          Operation executed successfully.\r\n        }\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <!-- Submitting Overlay -->\r\n  @if (state.submitting()) {\r\n    <div class=\"mt-4 flex items-center gap-2 text-sm text-muted-color\">\r\n      <div\r\n        class=\"w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin\"\r\n      ></div>\r\n      <span>Submitting...</span>\r\n    </div>\r\n  }\r\n}\r\n", styles: [":host{display:block}\n"] }]
+        }], 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 }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", 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"] }] } });
+
+// ============================================================================
+// API Response Wrapper
+// ============================================================================
+/**
+ * Type guard to detect a FormRequired interception response from legacy commands.
+ * Use in HTTP interceptors to redirect to process-forms flow.
+ */
+function isFormRequiredInterception(response) {
+    return (response?.status === 'FormRequired' &&
+        typeof response?.requestSchemaId === 'number');
+}
+
+// Client Form - Runtime process form component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClientForm, ClientFormApiService, ClientFormStateService, isFormRequiredInterception, mapFormValueToSubmitValues, mapToDynamicFormConfig, mapValuesToFormValue };
+//# sourceMappingURL=masterteam-forms-client-form.mjs.map