@useinsider/guido 3.8.2-beta.2ed8604 → 3.8.2-beta.4487e7b

package/dist/enums/html-validator.js

@@ -1,15 +1,16 @@
-const n = "newsletter.already-in-progress", e = "newsletter.campaign-could-not-be-saved", s = / (==|<=|>=|!=|>|<|in) | (if|elif|endif|else|and|or) |("[\S ]+")|('[\S ]+')|([^”\s\n]+)|(({%)|( %}))/gm, o = /{%( )*now( )(".*")( )*%}/gm, E = /\{\{[^{}]+\}\}/g, i = /(\s)data-[\w-]+=(?:"[^"]*"|'[^']*')/g, t = /^[A-Za-z0-9_.]+$/, _ = [
+const n = "newsletter.already-in-progress", e = "newsletter.campaign-could-not-be-saved", s = / (==|<=|>=|!=|>|<|in) | (if|elif|endif|else|and|or) |("[\S ]+")|('[\S ]+')|([^”\s\n]+)|(({%)|( %}))/gm, o = /{%( )*now( )(".*")( )*%}/gm, E = /\{\{[^{}]+\}\}/g, _ = /(\s)data-[\w-]+=(?:"[^"]*"|'[^']*')/g, i = /^[A-Za-z0-9_.]+$/, t = [
   "ins-unsubscribe-link",
   "ins-global-unsubscribe-link",
-  "ins-preferences-unsubscribe-link"
+  "ins-preferences-unsubscribe-link",
+  "@COUPON_CODE"
 ];
 export {
-  _ as ALLOWED_DYNAMIC_SYSTEM_TOKENS,
+  t as ALLOWED_DYNAMIC_SYSTEM_TOKENS,
   e as CampaignCouldNotBeSavedKey,
   n as CanNotMakeAnyChangesForRunningKey,
-  i as DATA_ATTRIBUTE_REGEX,
+  _ as DATA_ATTRIBUTE_REGEX,
   o as DISPLAY_CONDITIONS_EXCEPTIONS_REGEX,
   s as DISPLAY_CONDITIONS_REGEX,
   E as DYNAMIC_CONTENT_TAG_REGEX,
-  t as VALID_DYNAMIC_VARIABLE_REGEX
+  i as VALID_DYNAMIC_VARIABLE_REGEX
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -1,16 +1,18 @@
 const n = `/* Utils */
-.es-180w { width: 180px; }
+.es-180w {
+    width: 180px;
+}
 
 /* Recommendation Controls - Main settings panel separators */
-.recommendation-controls-container > div {
+.recommendation-controls-container>div {
     border-bottom: 1px solid #eee;
 }
 
-.recommendation-controls-container > div:first-child {
+.recommendation-controls-container>div:first-child {
     padding-top: 0;
 }
 
-.recommendation-controls-container > div:last-child {
+.recommendation-controls-container>div:last-child {
     border-bottom: none;
 }
 
@@ -230,40 +232,60 @@ ue-orderable.orderable-disabled .droppable-icon {
     line-height: 16px;
 }
 
-/* ─── Manual-merchandising Product IDs tags input ───────────────────────── */
-/* The product-ids field uses Stripo's native MULTIPLE_SELECT (chips: add by
-   Enter, remove by ×). These overrides force the Figma palette
-   (#F1F3FE bg / #B5C1F1 border / #0A2ECC text) onto the chips, since the
-   element's default styling is Stripo's.
-   NOTE: the inner chip/close selectors below target Stripo's light-DOM render
-   for ui-editor-extensions@3.8.0 and MUST be re-verified against the rendered
-   DOM (bun start) — adjust if a Stripo upgrade changes the internal markup. */
+/* product ID multiselect — initial */
+.product-ids-multiselect {
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    width: 180px;
+}
 
-.algorithm-control-container .product-ids-multiselect {
-    display: block;
-    width: 100%;
+/* product ID multiselect — hover */
+.product-ids-multiselect:hover {
+    border-color: var(--guido-color-primary-500);
+    background-color: var(--guido-color-gray-0) !important;
 }
 
-/* Each entered ID renders as a chip */
-.algorithm-control-container .product-ids-multiselect .tag,
-.algorithm-control-container .product-ids-multiselect .chip {
-    display: inline-flex;
+/* product ID multiselect — selected (.on) */
+.product-ids-multiselect.on,
+.product-ids-multiselect.on:hover {
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
+    background-color: var(--guido-color-gray-0) !important;
+}
+
+.product-ids-multiselect .multiple-wrapper .multiple-item {
+    display: flex;
     align-items: center;
-    gap: 4px;
     border-radius: 4px;
-    background: var(--guido-color-primary-0, #f1f3fe);
-    border: 1px solid var(--guido-color-primary-200, #b5c1f1);
-    color: var(--guido-color-primary-500, #0a2ecc);
+    border: 1px solid #B5C1F1;
+    background-color: #F1F3FE;
     font-size: 13px;
+    color: #0A2ECC;
     line-height: 16px;
+    box-shadow: none;
+    padding: 0 4px;
+}
+
+/* Close (×): always visible, moved to the right, split off by a left border (Figma).
+   Label is a text node (can't be ordered) so the icon gets order:1 to sit after it;
+   Stripo toggles visibility inline on hover, hence !important to keep it shown. */
+.product-ids-multiselect .multiple-wrapper .multiple-item .multiple-item-remove-icon {
+    visibility: visible !important;
+    opacity: 1;
+    position: static !important;
+    order: 1;
+    margin-left: 4px;
+    border-left: 1px solid #B5C1F1;
+    color: var(--guido-color-primary-500);
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    padding: 4px 0 4px 3px;
 }
 
-/* The × removal control, divided from the label by a left border */
-.algorithm-control-container .product-ids-multiselect .tag .remove,
-.algorithm-control-container .product-ids-multiselect .chip .remove {
-    border-left: 1px solid var(--guido-color-primary-200, #b5c1f1);
-    color: var(--guido-color-primary-500, #0a2ecc);
-    cursor: pointer;
+.product-ids-multiselect .multiple-wrapper .multiple-item:hover {
+    background-color: #F1F3FE;
+    padding: 0 4px;
 }
 `;
 export {

package/dist/extensions/Blocks/common-control.js

@@ -1,6 +1,6 @@
 var c = Object.defineProperty;
-var i = (s, r, e) => r in s ? c(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
-var T = (s, r, e) => i(s, typeof r != "symbol" ? r + "" : r, e);
+var i = (s, a, e) => a in s ? c(s, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[a] = e;
+var T = (s, a, e) => i(s, typeof a != "symbol" ? a + "" : a, e);
 import { Control as I, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 class _ extends I {
   constructor() {
@@ -91,7 +91,7 @@ class _ extends I {
    * and combines it with the text in Stripo's alert-message layout.
    */
   _setInfoMessageValue(e, t) {
-    const E = this.getContainer(), o = E.querySelector(`[data-icon-key="${e}"]`), a = o == null ? void 0 : o.querySelector("ue-icon-component"), l = (a == null ? void 0 : a.outerHTML) ?? "";
+    const E = this.getContainer(), o = E.querySelector(`[data-icon-key="${e}"]`), r = o == null ? void 0 : o.querySelector("ue-icon-component"), l = (r == null ? void 0 : r.outerHTML) ?? "";
     this.api.setUIEAttribute(
       e,
       "value",
@@ -127,7 +127,7 @@ class _ extends I {
                 class="${o}"
                 ${$.SELECTPICKER.name}="${e}"
                 ${$.SELECTPICKER.placeholder}="${t}">
-                    ${E.map((a) => this._GuSelectItem(a)).join("")}
+                    ${E.map((r) => this._GuSelectItem(r)).join("")}
             </${n.SELECTPICKER}>
         `;
   }
@@ -223,11 +223,11 @@ class _ extends I {
    */
   _GuOrderable(e, t) {
     let E = "";
-    t.forEach((a) => {
+    t.forEach((r) => {
       const l = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
       E += `
-                <${n.ORDERABLE_ITEM} ${l}="${a.key}">
-                    ${a.content}
+                <${n.ORDERABLE_ITEM} ${l}="${r.key}">
+                    ${r.content}
                 </${n.ORDERABLE_ITEM}>
             `;
     });
@@ -299,9 +299,10 @@ class _ extends I {
   // Tag/chips input (Stripo MULTIPLE_SELECT): add-by-Enter, remove-by-×.
   // Value is read/written as a string[] via updateValues / onValueChanged.
   _GuMultiSelect({ name: e, placeholder: t = "", className: E = "", disabled: o = !1 }) {
+    const r = [E, o ? "" : "click-enabled"].filter(Boolean).join(" ");
     return `
             <${n.MULTIPLE_SELECT}
-                class="${E}"
+                class="${r}"
                 ${$.MULTIPLE_SELECT.name}="${e}"
                 ${$.MULTIPLE_SELECT.placeholder}="${t}"
                 ${o ? `${$.MULTIPLE_SELECT.disabled}="true"` : ""}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.8.2-beta.2ed8604",
+  "version": "3.8.2-beta.4487e7b",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",