@vectoriox/iox-builder 5.2.0 → 5.3.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, emptyImageSrc, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, syncNodeDesignClasses, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -1558,8 +1558,10 @@ function buildLayoutPreset(def, createNode) {
 /**
  * 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.
  */
 const IOX_BUILDER_CANVAS = new InjectionToken('IOX_BUILDER_CANVAS');
 /** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
@@ -1602,6 +1604,14 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.preview': 'Preview',
     'builder.chrome.addImage': 'Add image',
 });
+const CANVAS_EMPTY_IMAGE_LABEL_KEY = 'builder.chrome.addImage';
+const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_KEY];
+/**
+ * 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.
+ */
+const EDITOR_CHROME_ATTRIBUTE = 'data-iox-chrome';
 
 class ComponentRegistryService {
     constructor() {
@@ -4611,6 +4621,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** The input a component declares to receive its empty-image placeholder (the Image). */
+const EMPTY_SRC_INPUT = 'emptySrc';
+/** The editing canvas's "Add image" label, through the host's i18n. */
+function canvasEmptyImageLabel(labels) {
+    return labels(CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_EMPTY_IMAGE_LABEL_EN);
+}
+/**
+ * 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.
+ */
+function syncEmptyImagePlaceholder(ref, node, emptyLabel) {
+    // Panels hold the selected node's ref untyped; anything without a component type has no inputs.
+    if (!ref?.componentType || !declaredInputNames(ref.componentType).has(EMPTY_SRC_INPUT))
+        return;
+    ref.setInput(EMPTY_SRC_INPUT, emptyImagePlaceholder(node, emptyLabel));
+}
+/**
+ * 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).
+ */
+function syncNodeDesign(ref, node, emptyLabel) {
+    syncNodeDesignClasses(ref?.location?.nativeElement ?? null, node);
+    syncEmptyImagePlaceholder(ref, node, emptyLabel);
+}
+
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
 /**
@@ -4823,14 +4861,11 @@ class RenderDirective {
         // safeSetInput for every component that does not declare it.
         if (node.responsive)
             safeSetInput(componentRef, 'responsive', node.responsive);
-        // Empty images (DS3): a MARKED Image with no source shows the shared placeholder — the
-        // "Add image" label on the editing canvas, the bare blank anywhere else (Preview), which is
-        // what the live site shows. An unmarked Image gets null and renders exactly as before.
-        if (node.type === 'Image') {
-            const src = node.traits?.find(t => t.name === 'src')?.default;
-            const label = this.onCanvas ? this.labels('builder.chrome.addImage', 'Add image') : null;
-            safeSetInput(componentRef, 'emptySrc', emptyImageSrc(node, src, label));
-        }
+        // Empty images (DS3): a MARKED Image shows the shared placeholder whenever its source is empty —
+        // the "Add image" label on the editing canvas, the bare blank anywhere else (Preview), which is
+        // what the live site shows. An unmarked Image gets null and renders exactly as before. Set from
+        // the marker alone, so a source cleared later (Bindings) shows it with no re-render.
+        syncEmptyImagePlaceholder(componentRef, node, this.onCanvas ? canvasEmptyImageLabel(this.labels) : null);
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
         if (node.styleTraits?.length) {
@@ -7671,7 +7706,7 @@ class SectionComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SectionComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SectionComponent, isStandalone: false, selector: "section[iox-section]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'section-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')" } }, ngImport: i0, template: `
-        <div *ngIf="!children.length" class="section-placeholder">
+        <div *ngIf="!children.length" class="section-placeholder" data-iox-chrome>
             <i class="ph-thin ph-rows"></i>
             <span>Drop components here</span>
         </div>
@@ -7689,7 +7724,7 @@ class SectionComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section[iox-section]', template: `
-        <div *ngIf="!children.length" class="section-placeholder">
+        <div *ngIf="!children.length" class="section-placeholder" data-iox-chrome>
             <i class="ph-thin ph-rows"></i>
             <span>Drop components here</span>
         </div>
@@ -7777,7 +7812,7 @@ class BuilderContainerComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderContainerComponent, isStandalone: false, selector: "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container],form[iox-container]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed", formClass: "formClass", formState: "formState" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '') + (formClass ? ' ' + formClass : '')", "attr.data-iox-state": "formClass === \"iox-form\" ? formState : null", "attr.start": "htmlTag === 'ol' && start !== 1 ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, ngImport: i0, template: `
         <!-- Empty-container slot (B2). pointer-events:none, so a click falls through and SELECTS
              this container — and the components panel then inserts INSIDE it. -->
-        <div *ngIf="!children.length" class="container-placeholder">
+        <div *ngIf="!children.length" class="container-placeholder" data-iox-chrome>
             <i class="ph-thin ph-plus"></i>
             <span>Click to select, then add an element</span>
         </div>
@@ -7800,7 +7835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ selector: 'div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container],form[iox-container]', template: `
         <!-- Empty-container slot (B2). pointer-events:none, so a click falls through and SELECTS
              this container — and the components panel then inserts INSIDE it. -->
-        <div *ngIf="!children.length" class="container-placeholder">
+        <div *ngIf="!children.length" class="container-placeholder" data-iox-chrome>
             <i class="ph-thin ph-plus"></i>
             <span>Click to select, then add an element</span>
         </div>
@@ -7884,6 +7919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/** `click` covers plain and modified clicks; a middle click opens a tab through `auxclick` alone. */
+const NAVIGATING_CLICKS = ['click', 'auxclick'];
 class BuilderLinkedContainerComponent {
     constructor(dragEngine, cdr, elRef, isPreview) {
         this.dragEngine = dragEngine;
@@ -7905,12 +7942,14 @@ class BuilderLinkedContainerComponent {
     }
     ngOnInit() {
         if (!this.isPreview) {
-            this.elRef.nativeElement.addEventListener('click', this.capturePreventDefault, true);
+            for (const type of NAVIGATING_CLICKS)
+                this.elRef.nativeElement.addEventListener(type, this.capturePreventDefault, true);
         }
     }
     ngOnDestroy() {
         if (!this.isPreview) {
-            this.elRef.nativeElement.removeEventListener('click', this.capturePreventDefault, true);
+            for (const type of NAVIGATING_CLICKS)
+                this.elRef.nativeElement.removeEventListener(type, this.capturePreventDefault, true);
         }
     }
     get resolvedHref() {
@@ -7941,7 +7980,7 @@ class BuilderLinkedContainerComponent {
            [ioxDropzoneData]="children"
            (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="linked-container-placeholder">
+            <div *ngIf="!children.length" class="linked-container-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-link"></i>
                 <span>Drop components here</span>
             </div>
@@ -7970,7 +8009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
            [ioxDropzoneData]="children"
            (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="linked-container-placeholder">
+            <div *ngIf="!children.length" class="linked-container-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-link"></i>
                 <span>Drop components here</span>
             </div>
@@ -8370,7 +8409,7 @@ class BuilderRepeaterComponent {
         <div class="repeater-wrapper" [class.has-children]="children.length > 0">
 
             <!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
-            <div *ngIf="children.length > 0" class="repeater-badge">
+            <div *ngIf="children.length > 0" class="repeater-badge" data-iox-chrome>
                 <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
             </div>
 
@@ -8384,10 +8423,10 @@ class BuilderRepeaterComponent {
 
                 <!-- EMPTY STATE: badge + placeholder inside root -->
                 <ng-container *ngIf="!children.length">
-                    <div class="repeater-badge">
+                    <div class="repeater-badge" data-iox-chrome>
                         <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
                     </div>
-                    <div class="repeater-placeholder">
+                    <div class="repeater-placeholder" data-iox-chrome>
                         <i class="ph-thin ph-rows"></i>
                         <span>Drop a component here as the item template</span>
                     </div>
@@ -8452,7 +8491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         <div class="repeater-wrapper" [class.has-children]="children.length > 0">
 
             <!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
-            <div *ngIf="children.length > 0" class="repeater-badge">
+            <div *ngIf="children.length > 0" class="repeater-badge" data-iox-chrome>
                 <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
             </div>
 
@@ -8466,10 +8505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
                 <!-- EMPTY STATE: badge + placeholder inside root -->
                 <ng-container *ngIf="!children.length">
-                    <div class="repeater-badge">
+                    <div class="repeater-badge" data-iox-chrome>
                         <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
                     </div>
-                    <div class="repeater-placeholder">
+                    <div class="repeater-placeholder" data-iox-chrome>
                         <i class="ph-thin ph-rows"></i>
                         <span>Drop a component here as the item template</span>
                     </div>
@@ -8575,7 +8614,7 @@ class BuilderButtonBlockComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonBlockComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderButtonBlockComponent, isStandalone: false, selector: "button[iox-button-block],a[iox-button-block]", inputs: { children: "children", style: "style", tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'button-block-root iox-node-' + nodeId", "attr.href": "tag === 'a' ? (href || null) : null", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, ngImport: i0, template: `
-        <span *ngIf="!children.length" class="button-block-placeholder">Button</span>
+        <span *ngIf="!children.length" class="button-block-placeholder" data-iox-chrome>Button</span>
 
         <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
              on each child's host (via ioxDragSourceId), matching the SSR engine. -->
@@ -8591,7 +8630,7 @@ class BuilderButtonBlockComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[iox-button-block],a[iox-button-block]', template: `
-        <span *ngIf="!children.length" class="button-block-placeholder">Button</span>
+        <span *ngIf="!children.length" class="button-block-placeholder" data-iox-chrome>Button</span>
 
         <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
              on each child's host (via ioxDragSourceId), matching the SSR engine. -->
@@ -8742,7 +8781,7 @@ class BuilderDialogComponent {
                     <i class="ph-thin ph-x"></i>
                 </button>
 
-                <div *ngIf="!children.length" class="dialog-placeholder">
+                <div *ngIf="!children.length" class="dialog-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-browser"></i>
                     <span>Drop components here</span>
                 </div>
@@ -8778,7 +8817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     <i class="ph-thin ph-x"></i>
                 </button>
 
-                <div *ngIf="!children.length" class="dialog-placeholder">
+                <div *ngIf="!children.length" class="dialog-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-browser"></i>
                     <span>Drop components here</span>
                 </div>
@@ -9218,7 +9257,7 @@ class SliderContainerComponent {
              (ioxDrop)="onDrop($event)">
 
             <!-- Repeat badge: hover-only, anchored top-left of shell -->
-            <div *ngIf="source" class="slider-repeat-badge">
+            <div *ngIf="source" class="slider-repeat-badge" data-iox-chrome>
                 <i class="ph-thin ph-repeat"></i>
                 <span>{{ source }}</span>
                 <span *ngIf="items.length" class="slider-repeat-badge-count">&times; {{ items.length }}</span>
@@ -9276,7 +9315,7 @@ class SliderContainerComponent {
 
                 </div>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder">
+                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
@@ -9369,7 +9408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
              (ioxDrop)="onDrop($event)">
 
             <!-- Repeat badge: hover-only, anchored top-left of shell -->
-            <div *ngIf="source" class="slider-repeat-badge">
+            <div *ngIf="source" class="slider-repeat-badge" data-iox-chrome>
                 <i class="ph-thin ph-repeat"></i>
                 <span>{{ source }}</span>
                 <span *ngIf="items.length" class="slider-repeat-badge-count">&times; {{ items.length }}</span>
@@ -9427,7 +9466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
                 </div>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder">
+                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
@@ -9613,24 +9652,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }] } });
 
 class SliderSlideComponent {
-    constructor(dragEngine, cdr, isPreview) {
+    constructor(dragEngine, cdr) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
-        this.isPreview = isPreview;
         this.children = [];
         this.nodeId = '';
         this.dropListId = '';
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
-        this.isPreview = !!isPreview;
     }
     ngOnInit() { }
     ngOnDestroy() { }
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SliderSlideComponent, isStandalone: false, selector: "app-slider-slide", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <!-- The .swiper-slide wrapper (with the iox-outer-* class) is provided by SliderContainer —
              Swiper needs it as a direct child of .swiper-wrapper — and the SLIDE'S size lands there
@@ -9645,7 +9682,7 @@ class SliderSlideComponent {
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="slide-placeholder">
+            <div *ngIf="!children.length" class="slide-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-image"></i>
                 <span>Drop components here</span>
             </div>
@@ -9681,7 +9718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="slide-placeholder">
+            <div *ngIf="!children.length" class="slide-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-image"></i>
                 <span>Drop components here</span>
             </div>
@@ -9700,12 +9737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             </div>
         </div>
     `, standalone: false, styles: [":where(.slide-edit-block){position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;background-color:var(--p-surface-300)}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
-        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [IS_PREVIEW]
-                }] }], propDecorators: { children: [{
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], nodeId: [{
                 type: Input
@@ -11456,5 +11488,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-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, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as 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 { 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$1 as 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 };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map