@vectoriox/iox-builder 4.26.0 → 4.28.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -21,6 +21,7 @@ export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTra
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
+import { BEHAVIOUR_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
 import { map, catchError } from 'rxjs/operators';
@@ -916,6 +917,9 @@ var PanelEventTypes;
      *  would (`string` component type, or a block / symbol object). The builder resolves WHERE from
      *  the current selection — see `resolveInsertTarget`. */
     PanelEventTypes["INSERT_COMPONENT"] = "insertcomponent";
+    /** Insert prebuilt node(s) as GLOBAL elements (data = ComponentNode[]) — the consent preset's
+     *  path (D-C5: site-wide by construction). Mirrors the MakeGlobal toolbar action. */
+    PanelEventTypes["INSERT_GLOBAL"] = "insertglobal";
     /** A panel wants to select a NODE it already has a reference to (e.g. the Form's nested field
      *  list). Carries `{ node }`. `OverlayService.setSelect()` alone only updates the overlay's own
      *  visual state — `selectedItem`/`selectedPath` (breadcrumb) and every other panel's idea of
@@ -3268,6 +3272,22 @@ class InteractionEngineService {
                 this.executeDialogAction(action);
                 continue;
             }
+            // Tier-A behaviour (A1c). The canvas-is-live rules are catalog DATA
+            // (ELEMENT_ACTION_DESCRIPTORS): copy runs, scrollTo runs (scrollIntoView — the frame
+            // scrolls natively here; the Lenis rule is the LIVE side's), navigate and submitForm
+            // SIMULATE — a dispatched event the host surfaces as a toast, never a route change
+            // or a fake submit under the author's feet.
+            if (BEHAVIOUR_ACTION_TYPES.has(action.type)) {
+                this.executeBehaviourAction(node, action, selfEl);
+                continue;
+            }
+            // Consent actions (C3). Recording ones SIMULATE — the canvas is the ADMIN's browser,
+            // and an admin's cookie is not a visitor's decision; the toast says what would be
+            // recorded. Opening the preferences dialog is dialog-opening and honestly RUNS.
+            if (CONSENT_ACTION_TYPES.has(action.type)) {
+                this.executeConsentAction(action);
+                continue;
+            }
             // Context actions write STATE, not animation. `selfEl` is deliberate: $item is read by
             // walking up from the element actually hovered/clicked, which for a repeater PREVIEW ROW
             // is the clone — so each row publishes its own item, exactly as on the live site.
@@ -3317,6 +3337,37 @@ class InteractionEngineService {
         // MERGE, not replace — a page can hold several repeaters, each publishing its own source.
         this.contextData = { ...this.contextData, ...(data ?? {}) };
     }
+    executeBehaviourAction(node, action, selfEl) {
+        switch (action.type) {
+            case 'copyToClipboard': {
+                const text = String(action.params?.['text'] ?? '');
+                if (text)
+                    navigator.clipboard?.writeText(text).catch(() => { });
+                return;
+            }
+            case 'scrollTo': {
+                const target = this.resolveTarget(node, action, selfEl);
+                target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                return;
+            }
+            case 'navigate':
+            case 'submitForm': {
+                // Simulated: the host (the admin app) listens and shows "would …" as a toast.
+                const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+                window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+                return;
+            }
+        }
+    }
+    executeConsentAction(action) {
+        if (action.type === 'openConsentPreferences') {
+            const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
+            dialog?.open?.();
+            return;
+        }
+        const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+        window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+    }
     executeDialogAction(action) {
         const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
         if (!dialog)
@@ -6565,11 +6616,32 @@ class BuilderComponent {
         this.lenis = undefined;
         this.lenisRafId = undefined;
     }
+    /**
+     * K5 (actions plan): actions need NAMED targets — the panel lists only labeled nodes, so an
+     * unlabeled Dialog is unpickable. Every insert path labels the node "<Type>" or "<Type> N",
+     * counting existing labels of that family across the whole tree.
+     */
+    autoLabel(config) {
+        if (!config?.type || config.label)
+            return;
+        const base = String(config.type).replace(/([a-z])([A-Z])/g, '$1 $2');
+        let count = 0;
+        const walk = (nodes) => {
+            for (const n of nodes ?? []) {
+                if (typeof n?.label === 'string' && (n.label === base || n.label.startsWith(base + ' ')))
+                    count++;
+                walk(n?.children);
+            }
+        };
+        walk(this.layout);
+        config.label = count === 0 ? base : `${base} ${count + 1}`;
+    }
     addComponent(name) {
         const config = this.registry.createConfig(name);
         if (!config) {
             return;
         }
+        this.autoLabel(config);
         this.layout.push(config);
     }
     onDrop(event) {
@@ -6579,6 +6651,7 @@ class BuilderComponent {
                 const config = this.registry.createConfig(payload.data);
                 if (!config)
                     return;
+                this.autoLabel(config);
                 this.layout.splice(insertIndex, 0, config);
                 this.cdr.markForCheck();
                 this._selectAfterDrop(config);
@@ -7213,6 +7286,23 @@ class BuilderComponent {
             this.insertFromPanel(panelEvent.data);
             return;
         }
+        // Prebuilt roots straight into the GLOBAL elements (the consent preset, D-C5) — the same
+        // moves as the MakeGlobal toolbar action, minus the remove-from-layout step.
+        if (panelEvent.type === PanelEventTypes.INSERT_GLOBAL) {
+            const nodes = (Array.isArray(panelEvent.data) ? panelEvent.data : [panelEvent.data]);
+            for (const node of nodes) {
+                if (!node)
+                    continue;
+                this.autoLabel(node);
+                node.isGlobal = true;
+                node.globalPosition = node.globalPosition ?? 'after';
+                this.globalElements.push(node);
+            }
+            this.globalElementsChange.emit([...this.globalElements]);
+            this.cdr.markForCheck();
+            this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
+            return;
+        }
         // A panel (e.g. the Form's nested field list) wants to select a node it already holds a
         // reference to — same path onTreeNodeSelect/onCrumbSelect use, so selectedItem/selectedPath
         // and every panel stay in sync, not just the overlay's own visual selection box.
@@ -9866,6 +9956,120 @@ function setTrait(node, name, value) {
         trait.default = value;
 }
 
+/**
+ * THE CONSENT PRESET (consent plan C3) — the banner as builder elements, which is the whole bet:
+ * Wix ships a banner you cannot design, Webflow ships a design system and no banner; ours is a
+ * Dialog made of ordinary nodes, so it arrives flavored, stylable, translatable and RTL-correct
+ * like everything else on the canvas.
+ *
+ * Three roots, inserted as GLOBAL elements (D-C5 — site-wide by construction):
+ *  1. the banner Dialog (`consentRole` — the live runtime opens it when `needsPrompt` says so),
+ *  2. the preferences Dialog (per-category Allow/Refuse, recorded immediately — state-free),
+ *  3. a small "Cookie settings" element — the withdrawal path (§7.3), free once actions exist.
+ *
+ * Design rules carried in the tree (§7): Accept and Reject are the SAME component with the same
+ * defaults on the same row — reject is as easy as accept; the three categories are named on the
+ * first layer; `closeOnBackdrop` is OFF — clicking away is not consent; the X stays, because the
+ * live runtime records a close-without-decision as a "no".
+ *
+ * The TEXTS are the customer's (D-C7). These strings are neutral mechanism-microcopy seeded for
+ * editing — never policy language, which we do not write (§8).
+ */
+const click = (actions) => ({
+    id: generateNodeId(),
+    trigger: 'click',
+    actions: actions.map(a => ({
+        target: 'self', duration: 0, delay: 0, easing: 'ease', ...a,
+    })),
+});
+function button(label, createConfig, interaction) {
+    const btn = createConfig('ButtonBlock');
+    const text = textNode(label, createConfig);
+    if (!btn || !text)
+        return null;
+    setTrait(btn, 'tag', 'button');
+    btn.children = [text];
+    btn.interactions = [interaction];
+    return btn;
+}
+function row(createConfig, styles, children) {
+    const container = createConfig('Container');
+    if (!container || children.some(c => !c))
+        return null;
+    for (const [prop, value] of Object.entries(styles))
+        setStyleTrait(container, prop, value);
+    container.children = children;
+    return container;
+}
+/** Build the three roots. Null when any type is missing — a half-built banner never ships. */
+function buildConsentPreset(createConfig) {
+    const banner = createConfig('Dialog');
+    const preferences = createConfig('Dialog');
+    if (!banner || !preferences)
+        return null;
+    // ── the banner ────────────────────────────────────────────────────────────
+    banner.label = 'Consent banner';
+    setTrait(banner, 'consentRole', true);
+    setTrait(banner, 'closeOnBackdrop', false); // clicking away is NOT consent
+    setTrait(banner, 'showCloseButton', true); // the runtime records X as a "no"
+    setStyleTrait(banner, 'width', 'min(560px, calc(100vw - 32px))');
+    setStyleTrait(banner, 'margin', 'auto auto 24px auto'); // bottom-of-viewport placement, restylable
+    const heading = textNode('Privacy choices', createConfig);
+    if (heading)
+        setStyleTrait(heading, 'fontWeight', '600');
+    const body = textNode('We use cookies to understand how this site is used. You choose what we may use, and you can change your mind at any time.', createConfig);
+    const categoriesLine = textNode('Necessary — always on · Analytics · Marketing', createConfig);
+    const accept = button('Accept all', createConfig, click([
+        { type: 'grantConsent' },
+        { type: 'closeDialog', target: banner.id },
+    ]));
+    const reject = button('Reject all', createConfig, click([
+        { type: 'denyConsent' },
+        { type: 'closeDialog', target: banner.id },
+    ]));
+    const prefs = button('Preferences', createConfig, click([
+        { type: 'openConsentPreferences', target: preferences.id },
+    ]));
+    const buttonsRow = row(createConfig, { display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }, [accept, reject, prefs]);
+    if (!heading || !body || !categoriesLine || !buttonsRow)
+        return null;
+    banner.children = [heading, body, categoriesLine, buttonsRow];
+    // ── the preferences modal ────────────────────────────────────────────────
+    preferences.label = 'Consent preferences';
+    setTrait(preferences, 'closeOnBackdrop', true);
+    setTrait(preferences, 'showCloseButton', true);
+    const prefsHeading = textNode('Your privacy choices', createConfig);
+    if (prefsHeading)
+        setStyleTrait(prefsHeading, 'fontWeight', '600');
+    const categoryRow = (category, name) => {
+        const allow = button('Allow', createConfig, click([
+            { type: 'setConsentCategory', params: { category, granted: true } },
+        ]));
+        const refuse = button('Refuse', createConfig, click([
+            { type: 'setConsentCategory', params: { category, granted: false } },
+        ]));
+        const pair = row(createConfig, { display: 'flex', gap: '8px' }, [allow, refuse]);
+        return row(createConfig, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }, [textNode(name, createConfig), pair]);
+    };
+    const necessaryLine = textNode('Necessary — always on', createConfig);
+    const analyticsRow = categoryRow('analytics', 'Analytics');
+    const marketingRow = categoryRow('marketing', 'Marketing');
+    const done = button('Done', createConfig, click([
+        { type: 'closeDialog', target: preferences.id },
+    ]));
+    if (!prefsHeading || !necessaryLine || !analyticsRow || !marketingRow || !done)
+        return null;
+    preferences.children = [prefsHeading, necessaryLine, analyticsRow, marketingRow, done];
+    // ── the withdrawal path (§7.3) ───────────────────────────────────────────
+    const withdrawal = button('Cookie settings', createConfig, click([
+        { type: 'openConsentPreferences', target: preferences.id },
+    ]));
+    if (!withdrawal)
+        return null;
+    withdrawal.label = 'Cookie settings';
+    return { banner, preferences, withdrawal };
+}
+
 /**
  * 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
@@ -9880,10 +10084,14 @@ class DialogComponentConfig extends ComponentConfig {
         this.inputs = {
             closeOnBackdrop: 'checkbox',
             showCloseButton: 'checkbox',
+            consentRole: 'checkbox',
         };
         this.traits = [
             new TraitConfig('closeOnBackdrop', 'Close on backdrop', TraitInputType.Checkbox, undefined, true),
             new TraitConfig('showCloseButton', 'Close button', TraitInputType.Checkbox, undefined, true),
+            // C3: the live runtime opens THIS dialog when consent is owed (needsPrompt), and a
+            // close without a decision records a "no". The canvas never auto-opens anything.
+            new TraitConfig('consentRole', 'Consent banner role', TraitInputType.Checkbox, undefined, false),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -10712,5 +10920,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, 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_PARTS, 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, VALIDATION_STATES, VALIDATION_STATE_CLASS, 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 { 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, 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_PARTS, 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, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, 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, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map