@vectoriox/iox-builder 4.31.1 → 4.32.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1631,7 +1631,11 @@ class OverlayService {
             if (host.classList[i].startsWith('iox-node-'))
                 return host;
         }
-        return host.firstElementChild || host;
+        // The node's own styled element always precedes its children in document order; for the
+        // Dialog it sits BELOW a classless fixed stage, where firstElementChild pointed the
+        // outline at the stage (live find 2026-10-10 — "can't select the white box").
+        const styled = host.querySelector('[class*="iox-node-"]');
+        return styled || host.firstElementChild || host;
     }
     // ── Node → Element registry ──────────────────────────────
     registerNode(node, element, componentRef) {
@@ -8490,10 +8494,21 @@ class BuilderDialogComponent {
         this.selectSub?.unsubscribe();
         this.instanceRegistry.unregister(this.nodeId);
     }
-    /** A click on the stage ITSELF is the backdrop click — children swallow everything else. */
+    /** A click on the stage ITSELF is the backdrop click — children swallow everything else.
+     *  Closing clicks STOP here: the same click would bubble into canvas selection, and
+     *  select$ would reopen the dialog in the same breath (live find 2026-10-10 — "the X
+     *  doesn't work"). */
     onStageClick(event) {
-        if (event.target === event.currentTarget)
-            this.onBackdrop();
+        if (event.target !== event.currentTarget)
+            return;
+        if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false') {
+            event.stopPropagation();
+            this.designOpen = false;
+        }
+    }
+    onCloseClick(event) {
+        event.stopPropagation();
+        this.designOpen = false;
     }
     onBackdrop() {
         if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false')
@@ -8517,7 +8532,8 @@ class BuilderDialogComponent {
                         type="button"
                         class="dialog-close"
                         aria-label="Close dialog"
-                        (click)="designOpen = false">
+                        (mousedown)="$event.stopPropagation()"
+                        (click)="onCloseClick($event)">
                     <i class="ph-thin ph-x"></i>
                 </button>
 
@@ -8553,7 +8569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         type="button"
                         class="dialog-close"
                         aria-label="Close dialog"
-                        (click)="designOpen = false">
+                        (mousedown)="$event.stopPropagation()"
+                        (click)="onCloseClick($event)">
                     <i class="ph-thin ph-x"></i>
                 </button>
 
@@ -9993,6 +10010,13 @@ function setTrait(node, name, value) {
         trait.default = value;
 }
 
+function text$1(content, styles, createConfig) {
+    const node = textNode(content, createConfig);
+    if (node)
+        for (const [prop, value] of Object.entries(styles))
+            setStyleTrait(node, prop, value);
+    return node;
+}
 /**
  * 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
@@ -10019,16 +10043,50 @@ const click = (actions) => ({
         target: 'self', duration: 0, delay: 0, easing: 'ease', ...a,
     })),
 });
-function button(label, createConfig, interaction) {
+const TOKEN$1 = (name, fallback) => `var(--iox-${name}, ${fallback})`;
+function button(label, createConfig, interaction, styles = {}) {
     const btn = createConfig('ButtonBlock');
     const text = textNode(label, createConfig);
     if (!btn || !text)
         return null;
     setTrait(btn, 'tag', 'button');
+    setStyleTrait(text, 'fontSize', 'inherit');
+    setStyleTrait(text, 'fontWeight', 'inherit');
+    setStyleTrait(text, 'color', 'inherit');
+    for (const [prop, value] of Object.entries(styles))
+        setStyleTrait(btn, prop, value);
     btn.children = [text];
     btn.interactions = [interaction];
     return btn;
 }
+/** The C1/C2 board button voices — Swiss by fallback, the brand's the moment tokens seed. */
+const SOLID = {
+    backgroundColor: TOKEN$1('brand-500', '#1f1d1b'), color: TOKEN$1('brandInk', '#ffffff'),
+    fontSize: '12px', fontWeight: '600', padding: '9px 16px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
+const OUTLINED = {
+    backgroundColor: 'transparent', color: TOKEN$1('ink', '#1f1d1b'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('ink', '#1f1d1b'),
+    fontSize: '12px', fontWeight: '600', padding: '8px 16px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
+const QUIET = {
+    backgroundColor: 'transparent', color: TOKEN$1('inkMuted', '#4a453f'),
+    fontSize: '11px', fontWeight: '400', padding: '2px 4px', textDecoration: 'underline',
+};
+const SMALL_ALLOW = {
+    backgroundColor: 'transparent', color: TOKEN$1('ink', '#1f1d1b'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('ink', '#1f1d1b'),
+    fontSize: '11px', fontWeight: '600', padding: '5px 10px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
+const SMALL_REFUSE = {
+    backgroundColor: 'transparent', color: TOKEN$1('inkMuted', '#6b6560'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#d8d4d1'),
+    fontSize: '11px', fontWeight: '600', padding: '5px 10px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
 function row(createConfig, styles, children) {
     const container = createConfig('Container');
     if (!container || children.some(c => !c))
@@ -10050,57 +10108,97 @@ function buildConsentPreset(createConfig) {
     setTrait(banner, 'closeOnBackdrop', false); // clicking away is NOT consent
     setTrait(banner, 'showCloseButton', true); // the runtime records X as a "no"
     setTrait(banner, 'placement', 'bottom'); // A5: placement is the Dialog's own choice
-    setStyleTrait(banner, 'width', 'min(560px, calc(100vw - 32px))');
-    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);
+    // Board C1, Swiss column: a full-width bottom bar, hairline-ruled, surface-on-surface.
+    setStyleTrait(banner, 'width', '100%');
+    setStyleTrait(banner, 'borderRadius', '0px');
+    setStyleTrait(banner, 'padding', '14px 20px');
+    setStyleTrait(banner, 'backgroundColor', TOKEN$1('surface', '#ffffff'));
+    setStyleTrait(banner, 'borderWidth', '1px');
+    setStyleTrait(banner, 'borderStyle', 'solid');
+    setStyleTrait(banner, 'borderColor', TOKEN$1('ink', '#1f1d1b'));
+    setStyleTrait(banner, 'boxShadow', 'none');
+    const heading = text$1('Cookies on this site', { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    // The first layer NAMES the three categories (plan §7) — the board does it in the copy.
+    const body = text$1('We use analytics and marketing cookies only if you allow them. Necessary ones always run.', { fontSize: '11px', color: TOKEN$1('inkMuted', '#4a453f'), lineHeight: '1.5', maxWidth: '330px' }, createConfig);
+    const textCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '4px', flexGrow: '1' }, [heading, body]);
     const accept = button('Accept all', createConfig, click([
         { type: 'grantConsent' },
         { type: 'closeDialog', target: banner.id },
-    ]));
+    ]), SOLID);
     const reject = button('Reject all', createConfig, click([
         { type: 'denyConsent' },
         { type: 'closeDialog', target: banner.id },
-    ]));
+    ]), OUTLINED);
     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)
+    ]), QUIET);
+    const acceptRejectRow = row(createConfig, { display: 'flex', gap: '7px' }, [accept, reject]);
+    const buttonsCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '7px', alignItems: 'center' }, [acceptRejectRow, prefs]);
+    const bannerRow = row(createConfig, { display: 'flex', gap: '18px', alignItems: 'flex-start', flexWrap: 'wrap' }, [textCol, buttonsCol]);
+    if (!bannerRow)
         return null;
-    banner.children = [heading, body, categoriesLine, buttonsRow];
+    banner.children = [bannerRow];
     // ── 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) => {
+    setStyleTrait(preferences, 'width', 'min(480px, calc(100vw - 48px))');
+    setStyleTrait(preferences, 'padding', '18px 20px');
+    setStyleTrait(preferences, 'display', 'flex');
+    setStyleTrait(preferences, 'flexDirection', 'column');
+    setStyleTrait(preferences, 'gap', '12px');
+    const prefsHeading = text$1('Your privacy choices', { fontSize: '16px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    const prefsSub = text$1('Change these any time from “Cookie settings” in the footer.', { fontSize: '12px', color: TOKEN$1('inkMuted', '#6b6560') }, createConfig);
+    const CARD = {
+        display: 'flex', gap: '12px', alignItems: 'flex-start',
+        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
+        borderRadius: TOKEN$1('radius-surface', '8px'), padding: '12px 14px',
+    };
+    const nameText = (s) => text$1(s, { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    const descText = (s) => text$1(s, { fontSize: '11px', color: TOKEN$1('inkMuted', '#6b6560'), lineHeight: '1.5' }, createConfig);
+    const textColOf = (name, desc) => row(createConfig, { display: 'flex', flexDirection: 'column', gap: '2px', flexGrow: '1' }, [nameText(name), descText(desc)]);
+    const alwaysOn = text$1('ALWAYS ON', {
+        fontSize: '10px', fontWeight: '600', color: TOKEN$1('inkMuted', '#6b6560'),
+        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
+        borderRadius: '999px', padding: '3px 8px',
+    }, createConfig);
+    const necessaryCard = row(createConfig, CARD, [
+        textColOf('Necessary', 'Keeps the site working: your session, your language, this very choice. Always on.'),
+        alwaysOn,
+    ]);
+    const categoryCard = (category, name, desc) => {
         const allow = button('Allow', createConfig, click([
             { type: 'setConsentCategory', params: { category, granted: true } },
-        ]));
+        ]), SMALL_ALLOW);
         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]);
+        ]), SMALL_REFUSE);
+        const pair = row(createConfig, { display: 'flex', gap: '6px' }, [allow, refuse]);
+        return row(createConfig, CARD, [textColOf(name, desc), pair]);
     };
-    const necessaryLine = textNode('Necessary — always on', createConfig);
-    const analyticsRow = categoryRow('analytics', 'Analytics');
-    const marketingRow = categoryRow('marketing', 'Marketing');
-    const done = button('Done', createConfig, click([
+    const analyticsCard = categoryCard('analytics', 'Analytics', 'Anonymous counts of visits and pages. Off means the analytics script never loads.');
+    const marketingCard = categoryCard('marketing', 'Marketing', 'Ads measurement and remarketing. Off means no ad cookies and no data shared.');
+    // Board C2's footer: bulk exits live here too — Reject | (grow) | Done | Accept.
+    const prefsReject = button('Reject all', createConfig, click([
+        { type: 'denyConsent' },
+        { type: 'closeDialog', target: preferences.id },
+    ]), OUTLINED);
+    const prefsDone = button('Done', createConfig, click([
+        { type: 'closeDialog', target: preferences.id },
+    ]), { ...OUTLINED, color: TOKEN$1('inkMuted', '#3d3833'), borderColor: TOKEN$1('line', '#d8d4d1') });
+    const prefsAccept = button('Accept all', createConfig, click([
+        { type: 'grantConsent' },
         { type: 'closeDialog', target: preferences.id },
-    ]));
-    if (!prefsHeading || !necessaryLine || !analyticsRow || !marketingRow || !done)
+    ]), SOLID);
+    const spacer = row(createConfig, { flexGrow: '1' }, []);
+    const footer = row(createConfig, { display: 'flex', gap: '8px', alignItems: 'center' }, [prefsReject, spacer, prefsDone, prefsAccept]);
+    if (!prefsHeading || !prefsSub || !necessaryCard || !analyticsCard || !marketingCard || !footer)
         return null;
-    preferences.children = [prefsHeading, necessaryLine, analyticsRow, marketingRow, done];
+    preferences.children = [prefsHeading, prefsSub, necessaryCard, analyticsCard, marketingCard, footer];
     // ── the withdrawal path (§7.3) ───────────────────────────────────────────
     const withdrawal = button('Cookie settings', createConfig, click([
         { type: 'openConsentPreferences', target: preferences.id },
-    ]));
+    ]), QUIET);
     if (!withdrawal)
         return null;
     withdrawal.label = 'Cookie settings';
@@ -10526,7 +10624,9 @@ class FieldComponentConfig extends ComponentConfig {
                 { label: 'Long text', value: 'textarea' },
                 { label: 'Dropdown', value: 'select' },
                 { label: 'Checkbox', value: 'checkbox' },
+                { label: 'Switch', value: 'switch' },
                 { label: 'Radio group', value: 'radio' },
+                { label: 'Slider', value: 'range' },
                 { label: 'Date', value: 'date' },
                 { label: 'Time', value: 'time' },
                 // ⚠️ 'file' is DELIBERATELY ABSENT until uploads are implemented. A file input's
@@ -10539,6 +10639,9 @@ class FieldComponentConfig extends ComponentConfig {
             new TraitConfig('placeholder', 'Hint inside the box', TraitInputType.Text, undefined, '', false, { trait: 'control', values: ['text', 'email', 'tel', 'url', 'number', 'password', 'textarea', 'select'] }),
             new TraitConfig('help', 'Help text', TraitInputType.Text, undefined, ''),
             new TraitConfig('rows', 'Rows', TraitInputType.Number, undefined, 4, false, { trait: 'control', values: 'textarea' }),
+            new TraitConfig('rangeMin', 'Min', TraitInputType.Number, undefined, 0, false, { trait: 'control', values: 'range' }),
+            new TraitConfig('rangeMax', 'Max', TraitInputType.Number, undefined, 100, false, { trait: 'control', values: 'range' }),
+            new TraitConfig('rangeStep', 'Step', TraitInputType.Number, undefined, 1, false, { trait: 'control', values: 'range' }),
             new TraitConfig('labelHidden', 'Hide label (screen readers still read it)', TraitInputType.Checkbox, undefined, false),
             // The submitted key. Derived from the label; editable for external integrations.
             new TraitConfig('name', 'Submitted key', TraitInputType.Text, undefined, ''),