@vectoriox/iox-builder 5.1.1 → 5.3.0

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ComponentRef, Type, ChangeDetectorRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ApplicationRef, SimpleChanges, ViewContainerRef, Injector, EnvironmentInjector, InjectionToken, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
 import * as i30 from '@vectoriox/iox-ui';
-import { ResponsiveOverrides, RelativeSourceSpec, Breakpoint, PageStyleSettings, FormRenderState, DesignTokenLike, ComponentInstanceRegistryService, DataSourceEndpoints, PalettePreset } from '@vectoriox/iox-ui';
+import { ResponsiveOverrides, RelativeSourceSpec, Breakpoint, PageStyleSettings, FormRenderState, DesignTokenLike, DesignMode, ComponentInstanceRegistryService, DataSourceEndpoints, PalettePreset, syncNodeDesignClasses } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, IoxContextSlot, PageStyleSettings, SetContextParams, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import * as rxjs from 'rxjs';
 import { Subject, Subscription, BehaviorSubject, Observable } from 'rxjs';
@@ -1090,6 +1090,13 @@ declare const BUILDER_CANVAS_CONTAINER = "iox-canvas";
  * registry — the canvas frame, the global-elements overlay, preview, specimens — wears this class.
  */
 declare const BUILDER_TOKEN_SCOPE_CLASS = "iox-token-scope";
+/** Marks the Google font `<link>`s the canvas adds to `<head>` (one per family, design-system DS4). */
+declare const BUILDER_FONT_LINK_ATTR = "data-iox-font";
+/** What the canvas wears — the studio's colour mode (D6) beside its rows. */
+interface UpsertTokensOptions {
+    /** `settings.design.mode`. Omitted = keep the mode last set (a Tokens-panel edit does not know it). */
+    mode?: DesignMode;
+}
 /**
  * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
@@ -1129,6 +1136,8 @@ declare class StyleRegistryService {
      *  positioning, an Icon's line-height) from EVERY rule of that node, whoever upserts it. */
     private nodeTypes;
     private tokenCss;
+    private tokenRows;
+    private tokenMode;
     private styleEl;
     /**
      * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
@@ -1215,9 +1224,18 @@ declare class StyleRegistryService {
      * block, LAST. It used to be a hand-written copy that emitted variables and dark only.
      * Pass the full row set every time (an empty list clears).
      */
-    upsertTokens(tokens: ReadonlyArray<DesignTokenLike> | null | undefined): void;
+    upsertTokens(tokens: ReadonlyArray<DesignTokenLike> | null | undefined, opts?: UpsertTokensOptions): void;
+    /** The colour mode the canvas compiles in. */
+    get mode(): DesignMode;
     remove(nodeId: string): void;
     destroy(): void;
+    /**
+     * The Google families the org's font tokens name — the SAME catalog and URL the SSR engine links
+     * (design-core `fontsForTokens` / `googleFontHref`), one `<link>` per family. They only declare
+     * @font-face, and only the canvas (`.iox-token-scope`) reads the font tokens, so the admin keeps
+     * Poppins. Links stay for the session: a trial that switches back costs no refetch.
+     */
+    private loadTokenFonts;
     private compile;
     private _flushPending;
     private flush;
@@ -2342,8 +2360,10 @@ declare class OverlayComponent implements OnInit, OnDestroy {
 /**
  * True for nodes rendered on the EDITING canvas — provided by `BuilderComponent` at component level,
  * so it reaches every `[ioxRender]` under `<app-builder>` and nothing else (Preview renders the same
- * directive outside it). Not `IS_PREVIEW`: the admin provides that one from an eagerly imported module,
- * so it reads true everywhere, the canvas included.
+ * directive outside it). It answers "is this the editor?" — the canvas-only "Add image" label hangs off
+ * it. `IS_PREVIEW` answers the other question, "is this a preview/live render?" (links navigate,
+ * sliders run live), and is provided ONLY by Preview (component level) and the engine; neither token
+ * implies the other — a design sampler, for one, is neither.
  */
 declare const IOX_BUILDER_CANVAS: InjectionToken<boolean>;
 /** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
@@ -2376,6 +2396,14 @@ declare const defaultBuilderLabels: BuilderLabelResolver;
  * in one go rather than discovering keys one missing label at a time.
  */
 declare const BUILDER_CHROME_EN: Readonly<Record<string, string>>;
+declare const CANVAS_EMPTY_IMAGE_LABEL_KEY = "builder.chrome.addImage";
+declare const CANVAS_EMPTY_IMAGE_LABEL_EN: string;
+/**
+ * Marks an element the builder draws on the canvas that the live site never has — drop placeholders,
+ * repeat badges, the empty slider hint. A page thumbnail is a picture of the SITE, so its capture
+ * leaves every marked element out.
+ */
+declare const EDITOR_CHROME_ATTRIBUTE = "data-iox-chrome";
 
 declare class ToolbarComponent {
     private readonly labels;
@@ -2849,18 +2877,17 @@ declare class SliderContainerComponent implements OnInit, AfterViewInit, OnChang
 declare class SliderSlideComponent implements OnInit, OnDestroy {
     private dragEngine;
     private cdr;
-    isPreview: boolean;
     children: ComponentNode[];
     nodeId: string;
     dropListId: string;
     childClick: EventEmitter<any>;
     childMouseEnter: EventEmitter<any>;
     childMouseLeave: EventEmitter<void>;
-    constructor(dragEngine: DragEngineService, cdr: ChangeDetectorRef, isPreview: boolean);
+    constructor(dragEngine: DragEngineService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     onDrop(event: IoxDropEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SliderSlideComponent, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SliderSlideComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SliderSlideComponent, "app-slider-slide", never, { "children": { "alias": "children"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
 }
 
@@ -3314,6 +3341,23 @@ declare function nearestFormNode(path: readonly ComponentNode[] | null | undefin
  */
 declare function dropTargetLabel(containerName: string | null | undefined, index: number, childCount: number): string;
 
+type NodeDesign = Parameters<typeof syncNodeDesignClasses>[1];
+/** The editing canvas's "Add image" label, through the host's i18n. */
+declare function canvasEmptyImageLabel(labels: BuilderLabelResolver): string;
+/**
+ * Push a node's empty-image placeholder (design-system DS3) to its rendered component — a no-op for
+ * a component that declares no `emptySrc`. The placeholder depends on the MARKER only, never on the
+ * source, so it is set once at render and again whenever the node's element style changes.
+ */
+declare function syncEmptyImagePlaceholder(ref: ComponentRef<unknown> | null | undefined, node: NodeDesign, emptyLabel: string | null): void;
+/**
+ * Everything a node's element style / colour scheme decides on its rendered host, in ONE call: the
+ * design classes (marker + scheme) and the empty-image placeholder. Every place that switches or
+ * resets a node's style on the canvas calls this, so an adopted Image gains its placeholder at once
+ * instead of after a reload (DS3 D2).
+ */
+declare function syncNodeDesign(ref: ComponentRef<unknown> | null | undefined, node: NodeDesign, emptyLabel: string | null): void;
+
 /**
  * Dialog (actions plan A1b) — an ordinary container whose children are normal nodes, rendered
  * on the live site as a real `<dialog>` (top layer, free focus trap/Esc) and in the CANVAS as a
@@ -3463,5 +3507,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, 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, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, 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, 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, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
-export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, ConsentPreset, CreateConfig, Crumb, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormPresetDef, FormPresetField, FormStateSnapshot, HistoryEntry, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, 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, 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, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, 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, 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, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, textNode, visibilityProps, wrapNode };
+export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, ConsentPreset, CreateConfig, Crumb, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormPresetDef, FormPresetField, FormStateSnapshot, HistoryEntry, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, UpsertTokensOptions, ViewportState, ZoomOption };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "5.1.1",
+  "version": "5.3.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
     "@angular/animations": ">=20.0.0",
     "@angular/cdk": ">=20.0.0",
-    "@vectoriox/iox-ui": ">=5.14.0",
+    "@vectoriox/iox-ui": ">=5.16.0",
     "interactjs": "^1.10.27",
     "primeng": ">=20.0.0",
     "swiper": ">=12.0.0",