@vectoriox/iox-ui 4.41.0 → 4.43.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -4048,6 +4048,20 @@ class IoxFormComponent {
         this.name = '';
         this.renderState = FormRenderState.Idle;
         this.feedback = FeedbackTiming.Smart;
+        /**
+         * Move focus to the first field that failed, instead of leaving the visitor to hunt for red
+         * text. On by default — the single most valuable thing a failed submit can do.
+         */
+        this.focusFirstProblem = true;
+        /**
+         * Speak the failure the moment it happens. Without this a screen-reader user only learns a
+         * submit failed if they happen to tab back into the message — the error text is rendered, but
+         * nothing directs them to it.
+         */
+        this.announceFailure = true;
+        /** What the live region is currently saying. Empty between attempts so the same failure
+         *  announces again rather than being swallowed as an unchanged value. */
+        this.announcement = '';
         /**
          * Emitted ONLY when client-side validation passes, carrying the collected values. The host
          * (builder canvas or engine runtime) owns the transport — posting, retries and the server's
@@ -4080,9 +4094,9 @@ class IoxFormComponent {
         event.preventDefault();
         this.runtime.configure(this.runtime.specNow(), this.feedback);
         if (!this.runtime.validateAll()) {
-            // Move the visitor TO the problem rather than leaving them to hunt for red text —
-            // the single most valuable thing a failed submit can do.
-            this.focusFirstInvalid();
+            this.announce(this.runtime.state.errors);
+            if (this.focusFirstProblem)
+                this.focusFirstInvalid();
             this.validationFailed.emit(this.runtime.state.errors);
             return;
         }
@@ -4126,10 +4140,13 @@ class IoxFormComponent {
             if (response?.errors) {
                 this.runtime.applyErrors(response.errors);
                 this.renderState = FormRenderState.Idle;
-                this.focusFirstInvalid();
+                this.announce(response.errors);
+                if (this.focusFirstProblem)
+                    this.focusFirstInvalid();
                 return;
             }
             this.renderState = FormRenderState.Error;
+            this.announce(null);
             return;
         }
         this.renderState = FormRenderState.Success;
@@ -4152,6 +4169,22 @@ class IoxFormComponent {
         if (typeof form.reset === 'function')
             form.reset();
     }
+    /**
+     * Put the failure into the live region. Cleared first so two identical failures in a row are
+     * two announcements, not one — a live region only speaks on CHANGE, and "same error again"
+     * is exactly when a visitor most needs telling.
+     */
+    announce(errors) {
+        if (!this.announceFailure)
+            return;
+        const count = errors ? Object.keys(errors).length : 0;
+        const next = count
+            ? `${count} ${count === 1 ? 'field needs' : 'fields need'} attention.`
+            : 'That did not send.';
+        this.announcement = '';
+        // A microtask is enough for the empty value to be committed before the new one lands.
+        Promise.resolve().then(() => { this.announcement = next; });
+    }
     focusFirstInvalid() {
         const name = this.runtime.firstInvalidName();
         if (!name)
@@ -4168,12 +4201,20 @@ class IoxFormComponent {
         }
     }
     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: `
+    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", focusFirstProblem: "focusFirstProblem", announceFailure: "announceFailure" }, 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>
+        <!-- Failure announcement (board 11). Visually hidden and always PRESENT — an aria-live
+             region added to the DOM at the moment it gains text is not reliably announced; the
+             region has to be there first and only its content change. -->
+        <div *ngIf="announceFailure"
+             class="iox-form__hp"
+             role="status"
+             aria-live="assertive"
+             aria-atomic="true">{{ announcement }}</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"] }); }
+    `, isInline: true, styles: [":host{box-sizing:border-box}.iox-form__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, decorators: [{
             type: Component,
@@ -4181,6 +4222,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         <div class="iox-form__hp" aria-hidden="true">
             <input type="text" [attr.name]="honeypotField" tabindex="-1" autocomplete="off" />
         </div>
+        <!-- Failure announcement (board 11). Visually hidden and always PRESENT — an aria-live
+             region added to the DOM at the moment it gains text is not reliably announced; the
+             region has to be there first and only its content change. -->
+        <div *ngIf="announceFailure"
+             class="iox-form__hp"
+             role="status"
+             aria-live="assertive"
+             aria-atomic="true">{{ announcement }}</div>
         <ng-container #childrenHost></ng-container>
     `, host: {
                         '[class]': "'iox-form iox-node-' + nodeId",
@@ -4210,6 +4259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], feedback: [{
                 type: Input
+            }], focusFirstProblem: [{
+                type: Input
+            }], announceFailure: [{
+                type: Input
             }], formSubmit: [{
                 type: Output
             }], validationFailed: [{
@@ -5191,6 +5244,40 @@ function buildPartSelector(nodeId, partClass, validationClass) {
     const base = validationClass ? `iox-node-${nodeId}.${validationClass}` : `iox-node-${nodeId}`;
     return partClass ? `${base} .${partClass}` : base;
 }
+/**
+ * Design-time validation "states" (wrong/accepted) — not real CSS pseudo-classes. `IoxFieldComponent`
+ * already carries `.iox-invalid`/`.iox-valid` host classes it sets from `forceInvalid`/`showValid`
+ * (decision D5), so authoring "Wrong"/"Accepted" styles compiles to a CLASS-compound selector via
+ * `buildPartSelector`, never a `:pseudo-class` (`:wrong` isn't real CSS). Lives here (not
+ * `@vectoriox/iox-builder`'s `ElementState`/`VALIDATION_STATE_CLASS`, which re-export these same
+ * values) because the SSR engine needs the mapping too and does not depend on iox-builder.
+ */
+const VALIDATION_STATES = ['wrong', 'accepted'];
+const VALIDATION_STATE_CLASS = {
+    wrong: 'iox-invalid',
+    accepted: 'iox-valid',
+};
+/**
+ * type -> part key -> the stable class that part's own template already renders. The single
+ * source of truth for which classes a part maps to, so the builder (render.directive.ts) and the
+ * SSR engine (layout-renderer.service.ts) resolve a part's selector identically without either
+ * duplicating the string literals. `iox-builder`'s `FieldComponentConfig.parts` (the picker's
+ * display labels) is built FROM this map, not the other way round.
+ */
+const PART_CLASS_NAMES = {
+    Field: {
+        label: 'iox-field__label',
+        control: 'iox-field__control',
+        help: 'iox-field__help',
+        error: 'iox-field__error',
+        required: 'iox-field__required',
+    },
+};
+/** The class a declared part compiles against, e.g. ('Field', 'error') -> 'iox-field__error'.
+ *  Undefined when the type declares no such part (or no parts at all). */
+function partClassName(type, partKey) {
+    return PART_CLASS_NAMES[type]?.[partKey];
+}
 
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
@@ -7029,5 +7116,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_PHOSPHOR_WEIGHT, 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, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, 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_PHOSPHOR_WEIGHT, 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, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map