@vectoriox/iox-builder 4.17.1 → 4.18.1

package/index.d.ts

@@ -722,6 +722,53 @@ declare class OverlayService {
     static ɵprov: i0.ɵɵInjectableDeclaration<OverlayService>;
 }
 
+interface FormStateSnapshot {
+    /** The Form the selection currently sits inside, or null. Drives whether a form-state
+     *  control (wherever one is hosted) shows at all. */
+    formId: string | null;
+    state: FormRenderState;
+}
+/**
+ * The form state switcher's OWN state — which form is in scope and which of its four states the
+ * canvas is showing — as a shared, injectable service, the same pattern `ViewportService` already
+ * uses for the current breakpoint. `BuilderComponent` pushes `setTarget()` whenever the selection
+ * changes; any consumer (the toolbar, or — per forms-and-inputs-plan.md board 3 — the Form's own
+ * panel) reads `state$` and calls `setState()`.
+ *
+ * ⚠️ Moved out of `BuilderComponent` itself: hosting BOTH the state and the reveal logic there
+ * meant only the toolbar could ever drive it. The toolbar's own switcher UI broke the header
+ * (`.form-state-bar` had no CSS rule — see forms-and-inputs-plan.md Part 2) and was, separately,
+ * the wrong home per board 3: the switcher belongs to the Form, not to global chrome.
+ *
+ * `setTarget` takes the real node, not just its id, and keeps it (privately) for `setState` to
+ * use — `OverlayService.getNodeRef` matches by REFERENCE, not id (a repeater clone shares its
+ * template's id), so a caller re-deriving "the current form" from an id alone could resolve the
+ * wrong instance. Every consumer of this service only ever needs the id for display; the node
+ * itself is this service's own business.
+ */
+declare class FormStateService {
+    private readonly _overlay;
+    private readonly _state$;
+    readonly state$: rxjs.Observable<FormStateSnapshot>;
+    private _targetNode;
+    constructor(_overlay: OverlayService);
+    getSnapshot(): FormStateSnapshot;
+    /** Called whenever the selection changes. A different form (or none) resets to Idle — a
+     *  visitor never lands on a form already showing someone else's Sent/Failed block. */
+    setTarget(form: ComponentNode | null): void;
+    /**
+     * Writes the state straight onto the live component instance for the CURRENT target (set via
+     * `setTarget`) — a VIEW state, never page data, so it must never be persisted (a saved page
+     * must not ship showing its own success message). Two input names on purpose: the canvas
+     * renders the container twin (`formState`) while the engine renders `IoxFormComponent`
+     * (`renderState`); `safeSetInput` drops whichever the rendered component doesn't declare, so
+     * this works on either path unbranched. A no-op when nothing is in scope.
+     */
+    setState(state: FormRenderState): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FormStateService>;
+}
+
 declare enum PanelEventTypes {
     ELEMENT_SELECT = "elementselect",
     ELEMENT_DESELECT = "elementdeselect",
@@ -1574,6 +1621,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     private dragEngine;
     private dsRegistry;
     private viewportService;
+    private formStateService;
     private interactionEngine;
     private interactionPresetRegistry;
     private clipboard;
@@ -1672,9 +1720,13 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     activeZoom: number;
     activeScreenWidth: number;
     selectedItem: ComponentNode | null;
+    private _selectedPath;
     /** Root → selected node. Drives the breadcrumb bar. Recomputed on every selection
-     *  change (never a getter — see `_emitElementSelect`). */
-    selectedPath: ComponentNode[];
+     *  change (never a getter — see `_emitElementSelect`). A setter, not a plain field, so
+     *  `FormStateService` learns about a form-context change wherever selection changes,
+     *  rather than every call site having to remember to say so itself. */
+    get selectedPath(): ComponentNode[];
+    set selectedPath(path: ComponentNode[]);
     isDragging: boolean;
     scrollThumbTop: number;
     scrollThumbHeight: number;
@@ -1708,12 +1760,6 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     private canvasContentHeight;
     handleToolbarModeChange(mode: BuilderMode): void;
     handleToolbarBreakpointChange(bp: Breakpoint): void;
-    /** The form the selection sits inside, or null. Drives the toolbar's contextual switcher. */
-    activeFormState: FormRenderState;
-    get formStateTarget(): string | null;
-    handleToolbarFormStateChange(state: FormRenderState): void;
-    /** The nearest Form ancestor of the selection (or the selection itself). */
-    private selectedFormNode;
     handleToolbarZoomChange(value: number | 'fit'): void;
     handleToolbarScreenWidthChange(width: number): void;
     get globalElementsBefore(): ComponentNode[];
@@ -1739,7 +1785,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     get canvasMinHeight(): number;
     private sub?;
     private registrySub?;
-    constructor(registry: ComponentRegistryService, overlayService: OverlayService, panelEventService: PanelEventService, dragEngine: DragEngineService, dsRegistry: DataSourceRegistryService, viewportService: ViewportService, interactionEngine: InteractionEngineService, interactionPresetRegistry: InteractionPresetRegistryService, clipboard: BuilderClipboardService, symbolRegistry: SymbolRegistryService, cdr: ChangeDetectorRef, appRef: ApplicationRef, moveableCanvas: MoveableCanvasService, selectoCanvas: SelectoCanvasService, styleRegistry: StyleRegistryService);
+    constructor(registry: ComponentRegistryService, overlayService: OverlayService, panelEventService: PanelEventService, dragEngine: DragEngineService, dsRegistry: DataSourceRegistryService, viewportService: ViewportService, formStateService: FormStateService, interactionEngine: InteractionEngineService, interactionPresetRegistry: InteractionPresetRegistryService, clipboard: BuilderClipboardService, symbolRegistry: SymbolRegistryService, cdr: ChangeDetectorRef, appRef: ApplicationRef, moveableCanvas: MoveableCanvasService, selectoCanvas: SelectoCanvasService, styleRegistry: StyleRegistryService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -2170,16 +2216,8 @@ declare class ToolbarComponent {
     canRedo: boolean;
     isSaving: boolean;
     pageStatus: string;
-    /**
-     * The form the selection sits inside, or null. CONTEXTUAL: the state switcher only appears when
-     * there is a form to switch, because a permanently-present control for a rarely-present element
-     * is exactly the toolbar clutter `builder-usability-plan.md` warns about.
-     */
-    formStateTarget: string | null;
-    activeFormState: FormRenderState;
     modeChange: EventEmitter<BuilderMode>;
     breakpointChange: EventEmitter<Breakpoint>;
-    formStateChange: EventEmitter<FormRenderState>;
     auditToggle: EventEmitter<void>;
     zoomChange: EventEmitter<number | "fit">;
     screenWidthChange: EventEmitter<number>;
@@ -2213,31 +2251,20 @@ declare class ToolbarComponent {
     selectMode(mode: BuilderMode): void;
     constructor(labels: BuilderLabelResolver);
     selectBreakpoint(bp: Breakpoint): void;
-    /** The four states, in the order a submission moves through them. */
-    readonly formStates: {
-        id: FormRenderState;
-        labelKey: string;
-        icon: string;
-    }[];
     /**
      * Translate one of the builder's own chrome strings. Unprovided, the resolver returns the
      * English fallback from `BUILDER_CHROME_EN`, so the library still reads correctly standalone
      * and never renders a raw key.
      */
     t(key: string): string;
-    /** "Show the form's Success state" — one key with a slot, not four sentences to translate. */
-    formStateHint(state: {
-        labelKey: string;
-    }): string;
     get publishLabel(): string;
-    selectFormState(state: FormRenderState): void;
     onSliderChange(event: Event): void;
     toggleWidthPopover(event: Event): void;
     selectScreenWidth(width: number): void;
     toggleZoomPopover(event: Event): void;
     selectZoom(value: number | 'fit'): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "app-toolbar", never, { "activeMode": { "alias": "activeMode"; "required": false; }; "activeBreakpoint": { "alias": "activeBreakpoint"; "required": false; }; "breakpointCounts": { "alias": "breakpointCounts"; "required": false; }; "auditCount": { "alias": "auditCount"; "required": false; }; "auditOpen": { "alias": "auditOpen"; "required": false; }; "activeZoom": { "alias": "activeZoom"; "required": false; }; "activeScreenWidth": { "alias": "activeScreenWidth"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; "formStateTarget": { "alias": "formStateTarget"; "required": false; }; "activeFormState": { "alias": "activeFormState"; "required": false; }; }, { "modeChange": "modeChange"; "breakpointChange": "breakpointChange"; "formStateChange": "formStateChange"; "auditToggle": "auditToggle"; "zoomChange": "zoomChange"; "screenWidthChange": "screenWidthChange"; "undo": "undo"; "redo": "redo"; "save": "save"; "preview": "preview"; "publishToggle": "publishToggle"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "app-toolbar", never, { "activeMode": { "alias": "activeMode"; "required": false; }; "activeBreakpoint": { "alias": "activeBreakpoint"; "required": false; }; "breakpointCounts": { "alias": "breakpointCounts"; "required": false; }; "auditCount": { "alias": "auditCount"; "required": false; }; "auditOpen": { "alias": "auditOpen"; "required": false; }; "activeZoom": { "alias": "activeZoom"; "required": false; }; "activeScreenWidth": { "alias": "activeScreenWidth"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; }, { "modeChange": "modeChange"; "breakpointChange": "breakpointChange"; "auditToggle": "auditToggle"; "zoomChange": "zoomChange"; "screenWidthChange": "screenWidthChange"; "undo": "undo"; "redo": "redo"; "save": "save"; "preview": "preview"; "publishToggle": "publishToggle"; }, never, never, false, never>;
 }
 
 /**
@@ -3141,5 +3168,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
-export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, CreateConfig, Crumb, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FormPresetDef, FormPresetField, HistoryEntry, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, ViewportState, ZoomOption };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
+export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, CreateConfig, Crumb, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FormPresetDef, FormPresetField, FormStateSnapshot, HistoryEntry, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, ViewportState, ZoomOption };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "4.17.1",
+  "version": "4.18.1",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",