@vectoriox/iox-ui 4.32.0 → 4.33.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -3768,6 +3768,73 @@ function addableActions(existing = []) {
     return ACTION_DESCRIPTORS.filter(action => !action.locked && !action.planned && !used.has(action.type));
 }
 
+/**
+ * The submit transport CONTRACT — what a host must provide to make a form actually send.
+ *
+ * The Form component deliberately owns no HTTP: the builder canvas must never post (an author
+ * clicking Submit while designing would file a real submission), and the SSR engine posts through
+ * Angular's HttpClient. What IS shared is everything around the call — the endpoint's shape, the
+ * anti-spam fields, and how the server's answer maps onto the form's state. Those live here so the
+ * two hosts cannot drift, and so a third host (a hand-built integration) has one thing to read.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core. No Angular, no RxJS, no fetch.
+ */
+/** The field a honeypot input uses. Must match `iox-cms` `anti-spam.ts` — hence the comment there. */
+const HONEYPOT_FIELD = '_iox_hp';
+/** When the form was rendered, so the server can measure fill time. */
+const RENDERED_AT_FIELD = '_iox_t';
+/**
+ * The public submit path. Built here rather than interpolated at each call site, so the engine and
+ * any future host cannot disagree about it — and so changing it is one edit.
+ *
+ * Deliberately relative and WITHOUT a leading slash: the engine mounts under a per-org base href.
+ */
+function submitEndpointPath(orgId, formId) {
+    return `api/site/${encodeURIComponent(orgId)}/forms/${encodeURIComponent(formId)}/submit`;
+}
+/**
+ * Add the anti-spam fields to the collected values.
+ *
+ * Both are invisible to a real visitor and cost them nothing (decision D12). `renderedAt` is the
+ * time the form was rendered, NOT the time of submit — the server measures the difference to catch
+ * a script that fills and posts instantly.
+ */
+function withAntiSpamFields(values, renderedAt, honeypotValue = '') {
+    return { ...values, [HONEYPOT_FIELD]: honeypotValue, [RENDERED_AT_FIELD]: renderedAt };
+}
+/**
+ * Normalise whatever came back into a `SubmitResponse`.
+ *
+ * Fails CLOSED: anything that is not a recognisable success is treated as a failure. A malformed
+ * body must never show the visitor a Success state for a submission that was not stored — that is
+ * the one lie this feature must not tell.
+ */
+function interpretSubmitResponse(body) {
+    if (!body || typeof body !== 'object' || body.ok !== true) {
+        return {
+            ok: false,
+            errors: normaliseErrors(body?.errors),
+        };
+    }
+    const redirect = typeof body.redirect === 'string' && body.redirect.trim()
+        ? body.redirect.trim()
+        : undefined;
+    return { ok: true, redirect };
+}
+/** Keep only entries that actually carry a message, so a junk key cannot blank a field's error. */
+function normaliseErrors(raw) {
+    if (!raw || typeof raw !== 'object')
+        return undefined;
+    const errors = {};
+    for (const [name, value] of Object.entries(raw)) {
+        const messageKey = typeof value?.messageKey === 'string' ? value.messageKey : '';
+        if (!messageKey)
+            continue;
+        errors[name] = value?.params ? { messageKey, params: value.params } : { messageKey };
+    }
+    return Object.keys(errors).length ? errors : undefined;
+}
+
 /*
  * @vectoriox/iox-ui/forms-core — the shared, FRAMEWORK-FREE core of the forms feature.
  *
@@ -3887,6 +3954,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             type: Injectable
         }] });
 
+/**
+ * How a host makes the form actually send. The SSR engine provides one (an HttpClient POST); the
+ * builder canvas deliberately does NOT — an author pressing Submit while designing must never file
+ * a real submission. Without it the component keeps its original behaviour and only emits
+ * `formSubmit`, which is also the escape hatch for a host that wants the transport itself.
+ */
+const IOX_FORM_TRANSPORT = new InjectionToken('IOX_FORM_TRANSPORT');
+/** Where a successful submit sends the visitor. Provided by the host; absent on the canvas. */
+const IOX_FORM_NAVIGATOR = new InjectionToken('IOX_FORM_NAVIGATOR');
 /** Which of the form's four states the canvas / runtime is showing. */
 var FormRenderState;
 (function (FormRenderState) {
@@ -3917,9 +3993,11 @@ class IoxFormComponent {
      * specs construct components directly. `runtime` is provided by THIS component (see
      * `providers`), so every Field created into `childrenHost` resolves this instance by ancestry.
      */
-    constructor(runtime, host) {
+    constructor(runtime, host, transport = null, navigate = null) {
         this.runtime = runtime;
         this.host = host;
+        this.transport = transport;
+        this.navigate = navigate;
         this.nodeId = '';
         /** Stable id the submit endpoint resolves the saved spec by. */
         this.formId = '';
@@ -3935,6 +4013,17 @@ class IoxFormComponent {
         this.formSubmit = new EventEmitter();
         /** Emitted when a submit attempt was refused locally, so a host can react (analytics, focus). */
         this.validationFailed = new EventEmitter();
+        /** Exposed to the template so the input's name and the server's check cannot drift. */
+        this.honeypotField = HONEYPOT_FIELD;
+        /** When this form was rendered — the fill-time signal the server checks. */
+        this.renderedAt = 0;
+        /** Guards against a double submit while a POST is in flight. */
+        this.inFlight = false;
+    }
+    ngOnInit() {
+        // Stamp render time for the fill-time check. Taken ONCE, when the form appears — the whole
+        // point is the gap between seeing the form and sending it.
+        this.renderedAt = Date.now();
     }
     ngOnChanges() {
         // Traits are edited by DIRECT ASSIGNMENT on the canvas, which does not call ngOnChanges —
@@ -3954,7 +4043,71 @@ class IoxFormComponent {
             this.validationFailed.emit(this.runtime.state.errors);
             return;
         }
-        this.formSubmit.emit({ values: this.runtime.values(), event });
+        const values = this.runtime.values();
+        this.formSubmit.emit({ values, event });
+        // No transport means the host owns sending (the builder canvas, which must never post).
+        if (!this.transport || this.inFlight)
+            return;
+        void this.send(values);
+    }
+    /**
+     * The submit lifecycle, owned HERE so both hosts get the same one: submitting → the server's
+     * verdict → success (and an optional redirect) or error. Only the HTTP call itself is the
+     * host's, which is the one part that genuinely differs between the engine and anything else.
+     */
+    async send(values) {
+        this.inFlight = true;
+        this.renderState = FormRenderState.Submitting;
+        this.runtime.setSubmitting(true);
+        let response;
+        try {
+            response = await this.transport({
+                formId: this.formId,
+                values: withAntiSpamFields(values, this.renderedAt, this.honeypotValue()),
+            });
+        }
+        catch {
+            // The call never reached the server. Showing Success here would tell the visitor their
+            // message was sent when nothing was stored — the one lie this feature must not tell.
+            response = { ok: false };
+        }
+        this.inFlight = false;
+        this.runtime.setSubmitting(false);
+        this.applyResponse(response);
+    }
+    /** Turn the server's answer into what the visitor sees. Public so a host-owned transport can reuse it. */
+    applyResponse(response) {
+        if (!response?.ok) {
+            // Per-field verdicts go back onto the fields; anything else is a whole-form failure,
+            // which is what the designed Error block is for.
+            if (response?.errors) {
+                this.runtime.applyErrors(response.errors);
+                this.renderState = FormRenderState.Idle;
+                this.focusFirstInvalid();
+                return;
+            }
+            this.renderState = FormRenderState.Error;
+            return;
+        }
+        this.renderState = FormRenderState.Success;
+        // Clear the values so a visitor who stays on the page does not see their old answers behind
+        // the success message, and cannot resubmit them by pressing enter.
+        this.runtime.reset();
+        this.resetControls();
+        if (response.redirect && this.navigate)
+            this.navigate(response.redirect);
+    }
+    /** The honeypot input's value, if the host rendered one. Absent reads as empty — never as spam. */
+    honeypotValue() {
+        const input = this.host.nativeElement
+            .querySelector?.(`input[name="${HONEYPOT_FIELD}"]`);
+        return input?.value ?? '';
+    }
+    /** Blank the real DOM controls after a success. The runtime state alone would leave them filled. */
+    resetControls() {
+        const form = this.host.nativeElement;
+        if (typeof form.reset === 'function')
+            form.reset();
     }
     focusFirstInvalid() {
         const name = this.runtime.firstInvalidName();
@@ -3971,20 +4124,40 @@ class IoxFormComponent {
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, deps: [{ token: FormRuntimeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormComponent, isStandalone: false, selector: "form[iox-form]", inputs: { nodeId: "nodeId", formId: "formId", name: "name", renderState: "renderState", feedback: "feedback" }, outputs: { formSubmit: "formSubmit", validationFailed: "validationFailed" }, host: { listeners: { "submit": "onSubmit($event)" }, properties: { "class": "'iox-form iox-node-' + nodeId", "attr.novalidate": "''", "attr.data-iox-form": "formId || null", "attr.data-iox-state": "renderState", "attr.aria-busy": "renderState === 'submitting' ? 'true' : null" } }, providers: [FormRuntimeService], viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, deps: [{ token: FormRuntimeService }, { token: i0.ElementRef }, { token: IOX_FORM_TRANSPORT, optional: true }, { token: IOX_FORM_NAVIGATOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormComponent, isStandalone: false, selector: "form[iox-form]", inputs: { nodeId: "nodeId", formId: "formId", name: "name", renderState: "renderState", feedback: "feedback" }, outputs: { formSubmit: "formSubmit", validationFailed: "validationFailed" }, host: { listeners: { "submit": "onSubmit($event)" }, properties: { "class": "'iox-form iox-node-' + nodeId", "attr.novalidate": "''", "attr.data-iox-form": "formId || null", "attr.data-iox-state": "renderState", "attr.aria-busy": "renderState === 'submitting' ? 'true' : null" } }, providers: [FormRuntimeService], viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div class="iox-form__hp" aria-hidden="true">
+            <input type="text" [attr.name]="honeypotField" tabindex="-1" autocomplete="off" />
+        </div>
+        <ng-container #childrenHost></ng-container>
+    `, isInline: true, styles: [":host{box-sizing:border-box}.iox-form__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'form[iox-form]', template: `<ng-container #childrenHost></ng-container>`, host: {
+            args: [{ selector: 'form[iox-form]', template: `
+        <div class="iox-form__hp" aria-hidden="true">
+            <input type="text" [attr.name]="honeypotField" tabindex="-1" autocomplete="off" />
+        </div>
+        <ng-container #childrenHost></ng-container>
+    `, host: {
                         '[class]': "'iox-form iox-node-' + nodeId",
                         '[attr.novalidate]': "''",
                         '[attr.data-iox-form]': 'formId || null',
                         '[attr.data-iox-state]': 'renderState',
                         '[attr.aria-busy]': "renderState === 'submitting' ? 'true' : null",
                         '(submit)': 'onSubmit($event)',
-                    }, providers: [FormRuntimeService], standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [{ type: FormRuntimeService }, { type: i0.ElementRef }], propDecorators: { nodeId: [{
+                    }, providers: [FormRuntimeService], standalone: false, styles: [":host{box-sizing:border-box}.iox-form__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: FormRuntimeService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_FORM_TRANSPORT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_FORM_NAVIGATOR]
+                }] }], propDecorators: { nodeId: [{
                 type: Input
             }], formId: [{
                 type: Input
@@ -5980,5 +6153,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map