@vectoriox/iox-builder 9.7.0 → 9.8.0

package/index.d.ts

@@ -2125,6 +2125,8 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     previewScrollRef?: ElementRef<HTMLElement>;
     lenisContentRef?: ElementRef<HTMLElement>;
     globalOverlayRef?: ElementRef<HTMLElement>;
+    /** The overlay's BEFORE wrapper comes and goes with its globals; its block size is the page's top reserve. */
+    set globalsBeforeRef(ref: ElementRef<HTMLElement> | undefined);
     components: any[];
     activePanel: string;
     isPanelOpen: boolean;
@@ -2220,6 +2222,11 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     /** The page reserves a bottom bar's height on the canvas where the bar shows (CC1 R1) — design-core's
      *  `barReserveClass` of the bar among the globals, or null. A field, recomputed when globals change. */
     canvasBarReserve: string | null;
+    /** The page's top reserve, in canvas px: the height the in-flow BEFORE globals take (a header), so the
+     *  page's first content starts below it, as on the live site (iox-ui#19). 0 for a fixed header. */
+    canvasHeaderReserve: number;
+    private beforeGlobalsEl;
+    private beforeGlobalsRo?;
     /** Canvas frame height in canvas-space pixels (= previewScroll.clientHeight / scale).
      *  Used as iox-page-component's height so position:fixed top:0;bottom:0 fills the
      *  same area as height:100vh (both resolve to this value). */
@@ -2239,9 +2246,14 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     handleToolbarBreakpointChange(bp: Breakpoint): void;
     handleToolbarZoomChange(value: number | 'fit'): void;
     handleToolbarScreenWidthChange(width: number): void;
-    /** The globals the frame-pinned overlay draws: every BEFORE global, then the pinned AFTER ones (a
-     *  fixed bottom bar, a Dialog) — same order as before iox-ui#12. */
-    get globalElementsInOverlay(): ComponentNode[];
+    /** Every BEFORE global, drawn in the overlay's before wrapper (iox-ui#19). */
+    get globalElementsBefore(): ComponentNode[];
+    /** The pinned AFTER globals (a fixed bottom bar, a Dialog), drawn in the overlay after the wrapper. */
+    get globalElementsPinnedAfter(): ComponentNode[];
+    /** Watch the BEFORE wrapper: a header growing, or turning fixed at a breakpoint, changes the reserve. A
+     *  ResizeObserver reports layout px, untouched by the canvas zoom. */
+    private observeBeforeGlobals;
+    setHeaderReserve(px: number): void;
     readonly globalsAfterClass = "iox-canvas-globals-after";
     /** In-flow AFTER globals (a footer): drawn after the page's content, as the live site draws them. */
     get globalElementsInPage(): ComponentNode[];
@@ -3660,7 +3672,10 @@ declare function pathToNode<T extends {
  *
  * - `Overlay`: the `.global-elements-overlay` layer, outside Lenis and pinned to the frame — a transform
  *   contains fixed children, so this is the only place a `position: fixed` global (the phone's bottom
- *   bar) or a top-layer Dialog stays on screen while the page scrolls. BEFORE globals stay here too.
+ *   bar) or a top-layer Dialog stays on screen while the page scrolls. BEFORE globals stay here too:
+ *   the Drawer shape puts the drawer Dialog INSIDE the Navigation bar, and in the page its fixed stage
+ *   would be contained by the scrolling page instead of the frame. The page reserves the height the
+ *   in-flow ones take instead (iox-ui#19, `overlayGlobals`).
  * - `Page`: in the page's own flow, after its content — where the live site renders an AFTER global
  *   (a footer). In the overlay it stacked under the header, over the top of the page.
  */
@@ -3685,6 +3700,16 @@ interface GlobalLayerSource {
 /** Fixed at its base or at any breakpoint: it pins to the viewport, so on the canvas it pins to the frame. */
 declare function isPinnedGlobal(node: GlobalLayerSource): boolean;
 declare function globalCanvasLayer(node: GlobalLayerSource): GlobalCanvasLayer;
+interface OverlayGlobals<T> {
+    /** Every BEFORE global, drawn in the overlay's `.iox-canvas-globals-before` wrapper. The in-flow ones
+     *  stack in it and its block size is the page's top reserve; a fixed / absolute one and a Dialog's
+     *  fixed stage are out of its flow, so they overlay the page as they do on the live site. */
+    before: T[];
+    /** The pinned AFTER globals (a fixed bottom bar, a Dialog), after the wrapper. */
+    pinnedAfter: T[];
+}
+/** What the overlay draws, in order (iox-ui#19). Any global that is not AFTER is drawn before the page. */
+declare function overlayGlobals<T extends GlobalLayerSource>(globals: readonly T[]): OverlayGlobals<T>;
 
 /**
  * node-path — pure ancestor-chain helpers for the builder's node tree.
@@ -4165,5 +4190,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, 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, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
-export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, CanvasDesignSnapshot, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, CompositePresetDef, ConsentPreset, CreateConfig, Crumb, DesignSpecimenCopy, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormStateSnapshot, GlobalLayerSource, HistoryChange, HistoryEntry, HistoryStep, InsertRefusedEvent, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxInteraction, IoxSymbol, LayerMoreRows, LayerRepeaterRows, LayerTreeContext, LayerTreeRow, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RootEscapeMemory, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, UpsertTokensOptions, ViewportState, ZoomOption };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, 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, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, CanvasDesignSnapshot, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, CompositePresetDef, ConsentPreset, CreateConfig, Crumb, DesignSpecimenCopy, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormStateSnapshot, GlobalLayerSource, HistoryChange, HistoryEntry, HistoryStep, InsertRefusedEvent, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxInteraction, IoxSymbol, LayerMoreRows, LayerRepeaterRows, LayerTreeContext, LayerTreeRow, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, OverlayGlobals, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RootEscapeMemory, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, UpsertTokensOptions, ViewportState, ZoomOption };

package/package.json

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