@vectoriox/iox-ui 4.27.0 → 4.28.0

package/index.d.ts

@@ -875,9 +875,185 @@ declare class ClientGalleryComponent implements AfterViewInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<ClientGalleryComponent, "iox-gallery", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "effect": { "alias": "effect"; "required": false; }; "autoStart": { "alias": "autoStart"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "images": { "alias": "images"; "required": false; }; "showDuration": { "alias": "showDuration"; "required": false; }; "fadeDuration": { "alias": "fadeDuration"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/** Which of the form's four states the canvas / runtime is showing. */
+declare enum FormRenderState {
+    Idle = "idle",
+    Submitting = "submitting",
+    Success = "success",
+    Error = "error"
+}
+/**
+ * Directive-host Form: the real `<form>` IS the host — no wrapper, no inner/outer split. Children
+ * (fields, layout, the submit button, and the two state blocks) render into it via `childrenHost`.
+ *
+ * Scope is ANCESTRY, not naming (decision D1): a Field belongs to its nearest ancestor Form, so
+ * there is no form-id to pick and nothing to mis-wire. The runtime finds its fields by walking the
+ * DOM it owns.
+ *
+ * `renderState` drives which children are visible. In the builder it is set by the canvas state
+ * switcher so an author can DESIGN the success and error blocks; at runtime the same input is
+ * driven by the submit lifecycle. One mechanism, two drivers — the author designs exactly what a
+ * visitor will see.
+ *
+ * ⚠️ `novalidate` is deliberate: the browser's native bubbles would pre-empt our own messages,
+ * which are styleable, translated and announced. Validation still runs — ours does it.
+ */
+declare class IoxFormComponent {
+    nodeId: string;
+    /** Stable id the submit endpoint resolves the saved spec by. */
+    formId: string;
+    /** Author-facing name — what the submissions inbox groups by. */
+    name: string;
+    renderState: FormRenderState | string;
+    /**
+     * Emitted instead of navigating. The host (builder canvas or engine runtime) owns the transport;
+     * this component owns only the DOM contract, so the same component works in both renderers.
+     */
+    formSubmit: EventEmitter<Event>;
+    childrenHost: ViewContainerRef;
+    onSubmit(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFormComponent, "form[iox-form]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "renderState": { "alias": "renderState"; "required": false; }; }, { "formSubmit": "formSubmit"; }, never, never, false, never>;
+}
+
+/** What the visitor actually types into. Chosen by a trait; it also implies a validation rule. */
+declare enum ControlType {
+    Text = "text",
+    Email = "email",
+    Tel = "tel",
+    Url = "url",
+    Number = "number",
+    Password = "password",
+    Textarea = "textarea",
+    Select = "select",
+    Checkbox = "checkbox",
+    Radio = "radio",
+    Date = "date",
+    Time = "time",
+    File = "file",
+    /** Not shown; carries a constant or a bound value (campaign, source page, …). */
+    Hidden = "hidden"
+}
+interface FieldOption {
+    label: string;
+    value: string;
+}
+
+/**
+ * The compound Field: label + control + help + error + required mark, as ONE node (decision D2).
+ *
+ * This is the biggest divergence from Webflow, and it is deliberate. There, a form field is four
+ * loose elements an author can delete — and they do delete the label, which breaks the
+ * `for`/`id` pairing and with it screen-reader support. Here the structure is fixed and
+ * accessibility is guaranteed by construction: the label can be visually hidden, never removed.
+ *
+ * The PARTS are styled through the virtual-trait mechanism (`__labelStyles`, `__errorStyles`, …)
+ * that already compiles `::marker` rules for List — so per-part styling invents no new concept in
+ * the style engine. Each part carries a stable class the compiler targets.
+ *
+ * ⚠️ Control type is a TRAIT, not a component per type (decision D4) — one component, one config,
+ * and choosing `email` also chooses email validation.
+ */
+declare class IoxFieldComponent {
+    nodeId: string;
+    name: string;
+    label: string;
+    control: ControlType | string;
+    placeholder: string;
+    help: string;
+    required: boolean;
+    disabled: boolean;
+    labelHidden: boolean;
+    requiredMark: string;
+    rows: number;
+    accept: string;
+    options: FieldOption[];
+    value: any;
+    /** The resolved, already-translated message. Resolving the key is the host's job, not ours. */
+    errorText: string;
+    /** Design-time or runtime failure. The style compiler targets `.iox-invalid`. */
+    invalid: boolean;
+    /** Only after a successful check — never on an untouched field. */
+    showValid: boolean;
+    valueChange: EventEmitter<any>;
+    touched: EventEmitter<void>;
+    /** Stable per instance so `for`/`id` and `aria-describedby` always pair up. */
+    readonly controlId: string;
+    /** `file`, `date`, `number`… map straight through; everything else is a text input. */
+    get inputType(): string;
+    /** Help and error are BOTH announced, in that order, when both are present. */
+    get describedBy(): string | null;
+    emit(value: any): void;
+    touch(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
+}
+
+/**
+ * Directive-host SubmitButton: the real `<button type="submit">` IS the host.
+ *
+ * It carries no destination configuration of its own — "what happens with the data" is an ordered
+ * action list on the FORM (decision D9), so there is nothing here to wire and nothing to get out of
+ * sync. The button owns only its own appearance and its busy state.
+ *
+ * While submitting it shows `loadingLabel` and is disabled, which is the whole double-submit
+ * defence on the client side (the server's rate limit is the real one).
+ */
+declare class IoxSubmitButtonComponent {
+    nodeId: string;
+    label: string;
+    loadingLabel: string;
+    disableWhileSubmitting: boolean;
+    /** Driven by the form's lifecycle, not by the author. */
+    submitting: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxSubmitButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxSubmitButtonComponent, "button[iox-submit]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "disableWhileSubmitting": { "alias": "disableWhileSubmitting"; "required": false; }; "submitting": { "alias": "submitting"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/**
+ * The Success and Error blocks — real, fully styleable container nodes that the Form auto-creates
+ * and the author cannot delete (decision D7). Hiding one is allowed; removing it is not, because
+ * "the author deleted the success block and the form went quiet" is Webflow's commonest form
+ * failure and we designed it out.
+ *
+ * ⚠️ VISIBILITY IS NOT AN INPUT. Which block shows is decided by CSS keyed on the parent form's
+ * `data-iox-state` attribute (see `iox-form-states.css` / the engine's `styles.scss`):
+ *
+ *     .iox-form-success { display: none }
+ *     .iox-form[data-iox-state="success"] .iox-form-success { display: block }
+ *
+ * That is deliberate. It means the builder's state switcher and the runtime's submit lifecycle
+ * drive the SAME mechanism through one attribute, with no input plumbing down the tree and no
+ * chance of the canvas and the live site disagreeing about what a visitor sees. The selector
+ * out-specifies `.iox-node-{id}`, so the state machine owns visibility and the author owns
+ * everything else about the block.
+ */
+declare class IoxFormSuccessComponent {
+    nodeId: string;
+    childrenHost: ViewContainerRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxFormSuccessComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFormSuccessComponent, "div[iox-form-success]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; }, {}, never, never, false, never>;
+}
+/**
+ * The Error block. One design, five reasons: the renderer writes the resolved reason text into
+ * `message`, so an author designs the block once and every failure mode (network, rejected, spam,
+ * rate-limited, server) renders through it.
+ *
+ * `role="alert"` rather than `status`: a failed submit must interrupt, because the visitor is
+ * about to walk away believing they sent it.
+ */
+declare class IoxFormErrorComponent {
+    nodeId: string;
+    /** Already-translated reason. Resolving the key is the host's job. */
+    message: string;
+    childrenHost: ViewContainerRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxFormErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFormErrorComponent, "div[iox-form-error]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "message": { "alias": "message"; "required": false; }; }, {}, never, never, false, never>;
+}
+
 declare class IoxBuilderComponentsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxBuilderComponentsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<IoxBuilderComponentsModule, [typeof BuilderImageComponent, typeof BuilderSpacerComponent, typeof CardComponent, typeof BuilderDividerComponent, typeof BuilderIconComponent, typeof BuilderLinkComponent, typeof BuilderButtonComponent, typeof BuilderHeadingComponent, typeof TextBlockComponent, typeof SectionComponent, typeof ContainerComponent, typeof LinkedContainerComponent, typeof ClientRepeaterComponent, typeof ButtonBlockComponent, typeof ClientSliderContainerComponent, typeof ClientSliderSlideComponent, typeof ClientListComponent, typeof ClientListItemComponent, typeof ClientGalleryComponent], [typeof i2.CommonModule], [typeof BuilderImageComponent, typeof BuilderSpacerComponent, typeof CardComponent, typeof BuilderDividerComponent, typeof BuilderIconComponent, typeof BuilderLinkComponent, typeof BuilderButtonComponent, typeof BuilderHeadingComponent, typeof TextBlockComponent, typeof SectionComponent, typeof ContainerComponent, typeof LinkedContainerComponent, typeof ClientRepeaterComponent, typeof ButtonBlockComponent, typeof ClientSliderContainerComponent, typeof ClientSliderSlideComponent, typeof ClientListComponent, typeof ClientListItemComponent, typeof ClientGalleryComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<IoxBuilderComponentsModule, [typeof BuilderImageComponent, typeof BuilderSpacerComponent, typeof CardComponent, typeof BuilderDividerComponent, typeof BuilderIconComponent, typeof BuilderLinkComponent, typeof BuilderButtonComponent, typeof BuilderHeadingComponent, typeof TextBlockComponent, typeof SectionComponent, typeof ContainerComponent, typeof LinkedContainerComponent, typeof ClientRepeaterComponent, typeof ButtonBlockComponent, typeof ClientSliderContainerComponent, typeof ClientSliderSlideComponent, typeof ClientListComponent, typeof ClientListItemComponent, typeof ClientGalleryComponent, typeof IoxFormComponent, typeof IoxFieldComponent, typeof IoxSubmitButtonComponent, typeof IoxFormSuccessComponent, typeof IoxFormErrorComponent], [typeof i2.CommonModule], [typeof BuilderImageComponent, typeof BuilderSpacerComponent, typeof CardComponent, typeof BuilderDividerComponent, typeof BuilderIconComponent, typeof BuilderLinkComponent, typeof BuilderButtonComponent, typeof BuilderHeadingComponent, typeof TextBlockComponent, typeof SectionComponent, typeof ContainerComponent, typeof LinkedContainerComponent, typeof ClientRepeaterComponent, typeof ButtonBlockComponent, typeof ClientSliderContainerComponent, typeof ClientSliderSlideComponent, typeof ClientListComponent, typeof ClientListItemComponent, typeof ClientGalleryComponent, typeof IoxFormComponent, typeof IoxFieldComponent, typeof IoxSubmitButtonComponent, typeof IoxFormSuccessComponent, typeof IoxFormErrorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<IoxBuilderComponentsModule>;
 }
 
@@ -2002,5 +2178,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-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, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, 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, 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, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, 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, 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 type { BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, OverrideBreakpoint, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",