@useinsider/guido 3.27.0-beta.3e42e7a → 3.27.0

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,44 +1,46 @@
-import p from "../static/assets/icons/filled-arrow-rising.svg.js";
-import s from "../static/assets/icons/line-change.svg.js";
-import f from "../static/assets/icons/line-delete.svg.js";
-import a from "../static/assets/icons/line-info.svg.js";
-import c from "../static/assets/icons/line-plus.svg.js";
-import l from "../static/styles/base.css.js";
-import C from "../static/styles/components/accessibility.css.js";
-import d from "../static/styles/components/alert-message.css.js";
-import u from "../static/styles/components/amp-block.css.js";
-import h from "../static/styles/components/base-input.css.js";
-import I from "../static/styles/components/button-group.css.js";
-import g from "../static/styles/components/button.css.js";
-import w from "../static/styles/components/combobox.css.js";
-import y from "../static/styles/components/counter.css.js";
-import A from "../static/styles/components/dropdown-menu.css.js";
-import $ from "../static/styles/components/loader.css.js";
-import b from "../static/styles/components/narrow-panel.css.js";
-import B from "../static/styles/components/popup.css.js";
-import D from "../static/styles/components/recommendation-strategy.css.js";
-import R from "../static/styles/components/skeleton.css.js";
-import P from "../static/styles/components/switcher.css.js";
-import T from "../static/styles/components/tabs.css.js";
-import x from "../static/styles/components/tools.css.js";
-import M from "../static/styles/components/version-history.css.js";
-import O from "../static/styles/components/wide-panel.css.js";
-import V from "../static/styles/variables.css.js";
+import S from "../static/assets/icons/filled-arrow-rising.svg.js";
+import p from "../static/assets/icons/line-change.svg.js";
+import s from "../static/assets/icons/line-delete.svg.js";
+import f from "../static/assets/icons/line-info.svg.js";
+import a from "../static/assets/icons/line-plus.svg.js";
+import c from "../static/styles/base.css.js";
+import l from "../static/styles/components/accessibility.css.js";
+import C from "../static/styles/components/alert-message.css.js";
+import d from "../static/styles/components/amp-block.css.js";
+import u from "../static/styles/components/base-input.css.js";
+import h from "../static/styles/components/button-group.css.js";
+import I from "../static/styles/components/button.css.js";
+import g from "../static/styles/components/combobox.css.js";
+import w from "../static/styles/components/counter.css.js";
+import y from "../static/styles/components/dropdown-menu.css.js";
+import A from "../static/styles/components/loader.css.js";
+import $ from "../static/styles/components/narrow-panel.css.js";
+import b from "../static/styles/components/popup.css.js";
+import B from "../static/styles/components/recommendation-strategy.css.js";
+import D from "../static/styles/components/skeleton.css.js";
+import R from "../static/styles/components/switcher.css.js";
+import P from "../static/styles/components/tabs.css.js";
+import T from "../static/styles/components/tools.css.js";
+import x from "../static/styles/components/version-history.css.js";
+import E from "../static/styles/components/wide-panel.css.js";
+import M from "../static/styles/variables.css.js";
+import { findEditorShadowRoot as O } from "../utils/editorShadowRoot.js";
 function o(i, r) {
   return `--guido-icon-${i}: url("data:image/svg+xml,${encodeURIComponent(r.trim())}");`;
 }
-const W = `:host {
-    ${o("line-change", s)}
-    ${o("line-delete", f)}
-    ${o("filled-arrow-rising", p)}
-    ${o("line-info", a)}
-    ${o("line-plus", c)}
-}`, _ = [
-  V,
+const V = `:host {
+    ${o("line-change", p)}
+    ${o("line-delete", s)}
+    ${o("filled-arrow-rising", S)}
+    ${o("line-info", f)}
+    ${o("line-plus", a)}
+}`, W = [
+  M,
   // Must be on top
-  W,
-  l,
+  V,
+  c,
   // Must be on top
+  C,
   d,
   u,
   h,
@@ -49,34 +51,32 @@ const W = `:host {
   A,
   $,
   b,
-  B,
+  D,
   R,
   P,
   T,
   x,
-  M,
-  O,
-  D,
-  C
+  E,
+  B,
+  l
 ].join(`
 
-`), k = 3e4;
+`), _ = 3e4;
 let e = null;
-function q() {
-  return e || (e = new CSSStyleSheet(), e.replaceSync(_)), e;
+function k() {
+  return e || (e = new CSSStyleSheet(), e.replaceSync(W)), e;
 }
-const fo = () => ({ importCss: () => {
-  const r = q(), S = Date.now() + k, m = () => {
-    var n;
-    const t = (n = document.querySelector("ui-editor")) == null ? void 0 : n.shadowRoot;
+const ao = () => ({ importCss: () => {
+  const r = k(), n = Date.now() + _, m = () => {
+    const t = O();
     if (t) {
       t.adoptedStyleSheets.includes(r) || (t.adoptedStyleSheets = [...t.adoptedStyleSheets, r]);
       return;
     }
-    Date.now() < S && requestAnimationFrame(m);
+    Date.now() < n && requestAnimationFrame(m);
   };
   m();
 } });
 export {
-  fo as useCustomInterfaceAppearance
+  ao as useCustomInterfaceAppearance
 };

package/dist/composables/useFullStoryBridge.js

@@ -1,15 +1,16 @@
+import { findEditorShadowRoot as i } from "../utils/editorShadowRoot.js";
 import { FULLSTORY_BRIDGE_SCRIPT_URL as s } from "../utils/fullStoryScripts.js";
-const l = () => ({ injectFullStory: () => {
-  var c;
-  const n = window;
-  if (typeof n._fs_org != "string" || !n._fs_org)
+const d = () => ({ injectFullStory: () => {
+  var n;
+  const e = window;
+  if (typeof e._fs_org != "string" || !e._fs_org)
     return;
-  const e = document.querySelector("ui-editor"), o = (c = e == null ? void 0 : e.shadowRoot) == null ? void 0 : c.querySelector("iframe"), r = o == null ? void 0 : o.contentDocument;
-  if (!r || r.querySelector('script[data-fullstory-bridge="true"]'))
+  const o = (n = i()) == null ? void 0 : n.querySelector("iframe"), t = o == null ? void 0 : o.contentDocument;
+  if (!t || t.querySelector('script[data-fullstory-bridge="true"]'))
     return;
-  const t = r.createElement("script");
-  t.src = s, t.async = !0, t.crossOrigin = "anonymous", t.dataset.fullstoryBridge = "true", r.head.appendChild(t);
+  const r = t.createElement("script");
+  r.src = s, r.async = !0, r.crossOrigin = "anonymous", r.dataset.fullstoryBridge = "true", t.head.appendChild(r);
 } });
 export {
-  l as useFullStoryBridge
+  d as useFullStoryBridge
 };

package/dist/extensions/Blocks/Recommendation/controls/main/filters.js

@@ -1,21 +1,21 @@
-var n = Object.defineProperty;
-var o = (i, e, t) => e in i ? n(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var r = (i, e, t) => o(i, typeof e != "symbol" ? e + "" : e, t);
-import { CommonControl as s } from "../../../common-control.js";
-import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
-const d = "recommendation-filters-control", a = {
+var o = Object.defineProperty;
+var s = (i, e, t) => e in i ? o(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var r = (i, e, t) => s(i, typeof e != "symbol" ? e + "" : e, t);
+import { CommonControl as l } from "../../../common-control.js";
+import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
+const a = "recommendation-filters-control", u = {
   FILTERS: "filterStatus"
 };
-class h extends s {
+class m extends l {
   constructor() {
     super(...arguments);
-    r(this, "store", l());
+    r(this, "store", d());
     r(this, "addFilterListener", () => {
     });
     r(this, "addFilterButton", null);
   }
   getId() {
-    return d;
+    return a;
   }
   getTemplate() {
     return `
@@ -23,7 +23,7 @@ class h extends s {
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Filters") }),
       this._GuButton({
-        name: a.FILTERS,
+        name: u.FILTERS,
         label: this.api.translate("Add Filter"),
         id: "guido__btn-add-filter"
       })
@@ -42,11 +42,11 @@ class h extends s {
     this.store.openFilterDrawer();
   }
   _setupButtonListener() {
-    var t;
-    this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (t = this.addFilterButton) == null || t.addEventListener("click", this.addFilterListener);
+    var t, n;
+    this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = (t = this.getContainer()) == null ? void 0 : t.querySelector("#guido__btn-add-filter"), (n = this.addFilterButton) == null || n.addEventListener("click", this.addFilterListener);
   }
 }
 export {
-  d as FILTERS_CONTROL_ID,
-  h as FiltersControl
+  a as FILTERS_CONTROL_ID,
+  m as FiltersControl
 };

package/dist/extensions/Blocks/Recommendation/controls/main/strategy.js

@@ -1,34 +1,34 @@
-var w = Object.defineProperty;
-var N = (l, o, t) => o in l ? w(l, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[o] = t;
-var i = (l, o, t) => N(l, typeof o != "symbol" ? o + "" : o, t);
-import { useLegacyStrategyConversion as L } from "../../../../../composables/useLegacyStrategyConversion.js";
-import { ACADEMY_LINKS as $ } from "../../../../../enums/academy.js";
-import { useOnboardingStore as A } from "../../../../../stores/onboarding.js";
+var A = Object.defineProperty;
+var N = (g, o, t) => o in g ? A(g, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[o] = t;
+var r = (g, o, t) => N(g, typeof o != "symbol" ? o + "" : o, t);
+import { useLegacyStrategyConversion as O } from "../../../../../composables/useLegacyStrategyConversion.js";
+import { ACADEMY_LINKS as w } from "../../../../../enums/academy.js";
+import { useOnboardingStore as $ } from "../../../../../stores/onboarding.js";
 import { CommonControl as R } from "../../../common-control.js";
 import { RRS_CONFIG_VERSION as E } from "../../constants/defaultConfig.js";
-import { RecommendationConfigService as C } from "../../services/configService.js";
-import { useRecommendationExtensionStore as O } from "../../store/recommendation.js";
-const I = "recommendation-strategy-control";
-class P extends R {
+import { RecommendationConfigService as k } from "../../services/configService.js";
+import { useRecommendationExtensionStore as I } from "../../store/recommendation.js";
+const q = "recommendation-strategy-control", y = "recommendationLegacyStrategyOnboarding";
+class Y extends R {
   constructor() {
     super(...arguments);
-    i(this, "store", O());
-    i(this, "onboardingStore", A());
-    i(this, "legacyConversion", L());
-    i(this, "storeUnsubscription", () => {
+    r(this, "store", I());
+    r(this, "onboardingStore", $());
+    r(this, "legacyConversion", O());
+    r(this, "storeUnsubscription", () => {
     });
-    i(this, "listeners", []);
-    i(this, "lastPaintedState", null);
+    r(this, "listeners", []);
+    r(this, "lastPaintedState", null);
   }
   getId() {
-    return I;
+    return q;
   }
   getTemplate() {
     const t = this.api.translate(
       "You can assign a recommendation strategy by selecting an existing one or creating a new one to show specific content."
-    ), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy"), r = this.api.translate("Legacy Strategy"), s = this.api.translate(
+    ), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy"), i = this.api.translate("Legacy Strategy"), s = this.api.translate(
       "Note that this is an older version of the Recommendation Strategy. We recommend you update it to the new Recommendation Strategy for an improved experience."
-    ), g = this.api.translate(
+    ), l = this.api.translate(
       "The recommendation strategy used in the recommendation block is no longer available. You can assign a different strategy to it."
     );
     return `
@@ -54,7 +54,7 @@ class P extends R {
                             ${t}
                             ${e}
                             <a
-                                href="${$.EMAIL_RECOMMENDATION_BLOCK}"
+                                href="${w.EMAIL_RECOMMENDATION_BLOCK}"
                                 target="_blank"
                                 rel="noopener noreferrer">${a}</a>.
                         </p>
@@ -78,7 +78,7 @@ class P extends R {
                     <div data-strategy-unavailable-state style="display: none;">
                         <div class="strategy-control-notice-row">
                             <div class="strategy-control-notice strategy-control-notice--error" role="alert">
-                                <p class="strategy-control-notice-text">${g}</p>
+                                <p class="strategy-control-notice-text">${l}</p>
                             </div>
                         </div>
                         ${this._GuTwoColumns([
@@ -103,7 +103,7 @@ class P extends R {
                             </div>
                         </div>
                         <div class="strategy-control-name-band">
-                            <span class="strategy-control-name">${r}</span>
+                            <span class="strategy-control-name">${i}</span>
                             ${this._strategyAction({
       id: "guido__btn-update-legacy-strategy",
       label: this.api.translate("Update"),
@@ -170,13 +170,15 @@ class P extends R {
    * strategyId) for an assigned block.
    */
   _isNodeUnassigned() {
-    if (!C.hasConfig(this.currentNode))
+    if (!k.hasConfig(this.currentNode))
       return !1;
-    const t = C.getConfig(this.currentNode);
+    const t = k.getConfig(this.currentNode);
     return !t.strategyId && (t.configVersion ?? 0) >= E;
   }
   onDestroy() {
-    this._teardown();
+    this._teardown(), requestAnimationFrame(() => {
+      this.store.strategyPanelOpen || this._closeLegacyOnboarding();
+    });
   }
   _teardown() {
     this.store.strategyPanelOpen = !1, this.storeUnsubscription(), this.storeUnsubscription = () => {
@@ -186,37 +188,47 @@ class P extends R {
     const t = this.getContainer();
     if (!t)
       return;
-    const e = (a, r) => {
+    const e = (a, i) => {
       const s = t.querySelector(a);
-      s && (s.addEventListener("click", r), this.listeners.push({ element: s, handler: r }));
+      s && (s.addEventListener("click", i), this.listeners.push({ element: s, handler: i }));
     };
     e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-create-strategy", () => this.store.openStrategyCreation()), e("#guido__btn-assign-unavailable-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-create-unavailable-strategy", () => this.store.openStrategyCreation()), e("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-change-legacy-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-remove-strategy", () => this.store.openRemoveStrategyModal()), e("#guido__btn-remove-legacy-strategy", () => this.store.openRemoveStrategyModal()), e("#guido__btn-update-legacy-strategy", () => {
       this.legacyConversion.convertLegacyStrategy();
     });
   }
+  _closeLegacyOnboarding() {
+    this.onboardingStore.isActive(y) && this.onboardingStore.resetOnboarding(y);
+  }
+  _syncLegacyOnboarding(t) {
+    if (!t) {
+      this._closeLegacyOnboarding();
+      return;
+    }
+    this.onboardingStore.closedThisSession.includes(y) || this.onboardingStore.startOnboarding(y);
+  }
   _renderState() {
-    var f;
-    const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((f = this.store.assignedStrategy) == null ? void 0 : f.name) ?? "" : "", a = !!t && !e && (this.store.strategiesLoading || !this.store.strategiesSettled), r = !!t && !e && !a && this.store.strategiesFetched, s = this.store.legacyConversionLoading, g = this.store.isLegacyStrategyBlock, p = [t, e, a, r, s, g].join("\0");
-    if (p === this.lastPaintedState)
+    var L;
+    const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((L = this.store.assignedStrategy) == null ? void 0 : L.name) ?? "" : "", a = !!t && !e && (this.store.strategiesLoading || !this.store.strategiesSettled), i = !!t && !e && !a && this.store.strategiesFetched, s = this.store.legacyConversionLoading, l = this.store.isLegacyStrategyBlock, v = [t, e, a, i, s, l].join("\0");
+    if (v === this.lastPaintedState)
       return;
     const n = this.getContainer();
     if (!n)
       return;
-    const y = n.querySelector("[data-strategy-empty-state]"), u = n.querySelector("[data-strategy-assigned-state]"), c = n.querySelector("[data-strategy-legacy-state]"), h = n.querySelector("[data-strategy-unavailable-state]"), v = n.querySelector("[data-strategy-loading-state]"), b = n.querySelector("[data-strategy-content]"), m = n.querySelector("[data-strategy-name]"), _ = n.querySelector("[data-strategy-name-skeleton]");
-    if (!y || !u || !c || !h)
+    const h = n.querySelector("[data-strategy-empty-state]"), u = n.querySelector("[data-strategy-assigned-state]"), c = n.querySelector("[data-strategy-legacy-state]"), m = n.querySelector("[data-strategy-unavailable-state]"), b = n.querySelector("[data-strategy-loading-state]"), _ = n.querySelector("[data-strategy-content]"), p = n.querySelector("[data-strategy-name]"), S = n.querySelector("[data-strategy-name-skeleton]");
+    if (!h || !u || !c || !m)
       return;
-    v && (v.style.display = "none"), b && (b.style.display = "");
-    const k = t ? r ? h : u : g ? c : y;
-    [y, u, c, h].forEach((d) => {
-      d.style.display = d === k ? "" : "none";
+    b && (b.style.display = "none"), _ && (_.style.display = "");
+    const f = t ? i ? m : u : l ? c : h;
+    [h, u, c, m].forEach((d) => {
+      d.style.display = d === f ? "" : "none";
     }), c.querySelectorAll("button").forEach((d) => {
       d.disabled = s;
     }), c.classList.toggle("is-converting", s), !t && this._isNodeUnassigned() && this.onboardingStore.startOnboarding("recommendationStrategyOnboarding");
-    const S = this.store.currentRecommendationId;
-    g && S !== null && this.store.blockStates[S] && this.onboardingStore.startOnboarding("recommendationLegacyStrategyOnboarding"), m && (m.style.display = a ? "none" : "", t && !a && (m.textContent = e || `#${t}`)), _ && (_.style.display = a ? "block" : "none"), this.lastPaintedState = p;
+    const C = this.store.currentRecommendationId;
+    C !== null && this.store.blockStates[C] && this._syncLegacyOnboarding(f === c), p && (p.style.display = a ? "none" : "", t && !a && (p.textContent = e || `#${t}`)), S && (S.style.display = a ? "block" : "none"), this.lastPaintedState = v;
   }
 }
 export {
-  I as STRATEGY_CONTROL_ID,
-  P as StrategyControl
+  q as STRATEGY_CONTROL_ID,
+  Y as StrategyControl
 };

package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js

@@ -1,11 +1,11 @@
 var m = Object.defineProperty;
-var p = (o, e, t) => e in o ? m(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var a = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
+var p = (o, t, e) => t in o ? m(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var a = (o, t, e) => p(o, typeof t != "symbol" ? t + "" : t, e);
 import { UIElementType as c, UEAttr as _ } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as d } from "../../common-control.js";
 import { RecommendationControlId as C } from "../constants/controlIds.js";
 import "../constants/selectors.js";
-const S = C.SYNC_INFO_MESSAGE, r = "sync-info-message", u = "Note that changes will be applied to all product cards in your recommendation block.";
+const S = C.SYNC_INFO_MESSAGE, n = "sync-info-message", u = "Note that changes will be applied to all product cards in your recommendation block.";
 class O extends d {
   constructor() {
     super(...arguments);
@@ -16,12 +16,12 @@ class O extends d {
   }
   getTemplate() {
     return `
-            <div class="${r}">
+            <div class="${n}">
                 <${c.ICON}
                     ${_.ICON.src}="migration-info-icon"
-                    class="${r}__icon">
+                    class="${n}__icon">
                 </${c.ICON}>
-                <p class="${r}__text">
+                <p class="${n}__text">
                     ${this.api.translate(u)}
                 </p>
             </div>
@@ -31,8 +31,8 @@ class O extends d {
     this._repositionAboveTabs();
   }
   onDestroy() {
-    var t;
-    super.onDestroy(), (t = this._repositionedElement) == null || t.remove(), this._repositionedElement = null;
+    var e;
+    super.onDestroy(), (e = this._repositionedElement) == null || e.remove(), this._repositionedElement = null;
   }
   /**
    * Moves the info message from inside the Settings tab content
@@ -49,15 +49,15 @@ class O extends d {
    * The element reference is stored so onDestroy() can remove it.
    */
   _repositionAboveTabs() {
-    var l;
-    const n = this.getContainer().querySelector(`.${r}`);
-    if (!n)
+    var i, l;
+    const e = (i = this.getContainer()) == null ? void 0 : i.querySelector(`.${n}`);
+    if (!e)
       return;
-    const i = n.closest("ue-control-panel");
-    if (!i)
+    const s = e.closest("ue-control-panel");
+    if (!s)
       return;
-    const s = i.querySelector("ue-tabs-header");
-    s && ((l = s.parentElement) == null || l.insertBefore(n, s), this._repositionedElement = n);
+    const r = s.querySelector("ue-tabs-header");
+    r && ((l = r.parentElement) == null || l.insertBefore(e, r), this._repositionedElement = e);
   }
 }
 export {

package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js

@@ -1,30 +1,32 @@
-function d(c, t) {
-  const { thousandSeparator: i, decimalSeparator: e, decimalCount: r } = t, [u, o = ""] = String(c).split("."), n = o.slice(0, r).padEnd(r, "0"), a = u.replace(
+function f(t) {
+  return typeof t != "number" || !Number.isFinite(t) ? 2 : Math.min(Math.max(Math.trunc(t), 0), 20);
+}
+function d(t, n) {
+  const { thousandSeparator: c, decimalSeparator: e, decimalCount: r } = n, [u, i = ""] = String(t).split("."), o = i.slice(0, r).padEnd(r, "0"), a = u.replace(
     /\B(?=(\d{3})+(?!\d))/g,
-    i
+    c
   );
-  return r > 0 && n ? `${a}${e}${n}` : a;
+  return r > 0 && o ? `${a}${e}${o}` : a;
 }
-function f(c) {
-  const { price: t, currency: i } = c, {
+function $(t) {
+  const { price: n, currency: c } = t, {
     symbol: e,
     alignment: r,
     thousandSeparator: u,
-    decimalSeparator: o,
-    decimalCount: n
-  } = i;
-  if (typeof t != "number" || Number.isNaN(t)) {
-    const s = "0".repeat(n), m = `0${o}${s}`;
+    decimalSeparator: i
+  } = c, o = f(c.decimalCount);
+  if (typeof n != "number" || Number.isNaN(n)) {
+    const s = "0".repeat(o), m = `0${i}${s}`;
     return r === "before" ? `${e} ${m}` : `${m} ${e}`;
   }
-  const a = d(t, {
+  const a = d(n, {
     thousandSeparator: u,
-    decimalSeparator: o,
-    decimalCount: n
+    decimalSeparator: i,
+    decimalCount: o
   });
   return r === "before" ? `${e} ${a}` : `${a} ${e}`;
 }
 export {
   d as formatNumber,
-  f as formatPrice
+  $ as formatPrice
 };

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

@@ -1,8 +1,9 @@
 var u = Object.defineProperty;
-var c = (l, E, e) => E in l ? u(l, E, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[E] = e;
-var i = (l, E, e) => c(l, typeof E != "symbol" ? E + "" : E, e);
-import { Control as I, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class _ extends I {
+var c = (l, a, e) => a in l ? u(l, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[a] = e;
+var i = (l, a, e) => c(l, typeof a != "symbol" ? a + "" : a, e);
+import { findEditorShadowRoot as I } from "../../utils/editorShadowRoot.js";
+import { Control as O, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class R extends O {
   constructor() {
     super(...arguments);
     i(this, "currentNode");
@@ -11,8 +12,7 @@ class _ extends I {
     i(this, "isAwaitingPanelNode", !1);
   }
   getContainer() {
-    var e;
-    return (e = document.querySelector("ui-editor")) == null ? void 0 : e.shadowRoot;
+    return I();
   }
   onTemplateNodeUpdated(e) {
     this.currentNode = e;
@@ -54,8 +54,8 @@ class _ extends I {
     const t = this.getBlockInstanceId(), o = this.isAwaitingPanelNode;
     if (this.isAwaitingPanelNode = !1, !t)
       return o && e(), !1;
-    const a = t !== this.lastBlockInstanceId;
-    return e(), a && (this.lastBlockInstanceId = t), a;
+    const E = t !== this.lastBlockInstanceId;
+    return e(), E && (this.lastBlockInstanceId = t), E;
   }
   _GuLabel({ text: e, name: t = "", hint: o }) {
     return `
@@ -98,7 +98,7 @@ class _ extends I {
    * and combines it with the text in Stripo's alert-message layout.
    */
   _setInfoMessageValue(e, t) {
-    const o = this.getContainer(), a = o.querySelector(`[data-icon-key="${e}"]`), s = a == null ? void 0 : a.querySelector("ue-icon-component"), r = (s == null ? void 0 : s.outerHTML) ?? "";
+    const o = this.getContainer(), E = o == null ? void 0 : o.querySelector(`[data-icon-key="${e}"]`), s = E == null ? void 0 : E.querySelector("ue-icon-component"), r = (s == null ? void 0 : s.outerHTML) ?? "";
     this.api.setUIEAttribute(
       e,
       "value",
@@ -111,7 +111,7 @@ class _ extends I {
             </div>
             `
     );
-    const T = o.querySelector(`[data-info-message="${e}"]`);
+    const T = o == null ? void 0 : o.querySelector(`[data-info-message="${e}"]`);
     T && (T.style.display = "");
   }
   _GuToggle(e) {
@@ -132,12 +132,12 @@ class _ extends I {
     name: e,
     placeholder: t,
     options: o,
-    className: a = "es-180w",
+    className: E = "es-180w",
     searchable: s = !1
   }) {
     return `
             <${n.SELECTPICKER}
-                class="${a}"
+                class="${E}"
                 ${$.SELECTPICKER.name}="${e}"
                 ${s ? `${$.SELECTPICKER.searchable}="true"` : ""}
                 ${$.SELECTPICKER.placeholder}="${t}">
@@ -145,23 +145,23 @@ class _ extends I {
             </${n.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: t, className: o = "", disabled: a = !1 }) {
+  _GuTextInput({ name: e, placeholder: t, className: o = "", disabled: E = !1 }) {
     return `
             <${n.TEXT}
                 class=${o}
                 ${$.TEXT.name}="${e}"
                 placeholder="${t || e}"
-                ${a ? `${$.TEXT.disabled}="true"` : ""}>
+                ${E ? `${$.TEXT.disabled}="true"` : ""}>
             </${n.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: t, minValue: o = 1, step: a = 1 }) {
+  _GuCounter({ name: e, maxValue: t, minValue: o = 1, step: E = 1 }) {
     return `
             <${n.COUNTER}
                 ${$.COUNTER.name}="${e}"
                 ${$.COUNTER.minValue}="${o}"
                 ${$.COUNTER.maxValue}="${t}"
-                ${$.COUNTER.step}="${a}">
+                ${$.COUNTER.step}="${E}">
             </${n.COUNTER}>
         `;
   }
@@ -179,16 +179,16 @@ class _ extends I {
             <${n.RADIO_BUTTONS}
                 ${o ? `id="${o}"` : ""}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${t.map((a) => this._GuRadioButtonItem(a)).join("")}
+                ${t.map((E) => this._GuRadioButtonItem(E)).join("")}
             </${n.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: t, id: o = "", className: a = "", icon: s = "", disabled: r = !1 }) {
+  _GuButton({ name: e, label: t, id: o = "", className: E = "", icon: s = "", disabled: r = !1 }) {
     return `
             <${n.BUTTON}
                 ${$.BUTTON.name}="${e}"
                 ${o ? `id="${o}"` : ""}
-                ${a ? `class="${a}"` : ""}
+                ${E ? `class="${E}"` : ""}
                 ${s ? `${$.BUTTON.icon}="${s}"` : ""}
                 ${r ? `${$.BUTTON.disabled}="true"` : ""}
                 ${$.BUTTON.caption}="${t}">
@@ -248,9 +248,9 @@ class _ extends I {
                 </${n.ORDERABLE_ITEM}>
             `;
     });
-    const a = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const E = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${n.ORDERABLE} ${a}="${e}">
+            <${n.ORDERABLE} ${E}="${e}">
                 ${o}
             </${n.ORDERABLE}>
         `;
@@ -292,10 +292,10 @@ class _ extends I {
         `;
   }
   _GuRadioButtons(e, t) {
-    const o = t.map((a) => `
+    const o = t.map((E) => `
                 <${n.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${a.text}"
-                    ${$.RADIO_ITEM.value}="${a.value}">
+                    ${$.RADIO_ITEM.text}="${E.text}"
+                    ${$.RADIO_ITEM.value}="${E.value}">
                 </${n.RADIO_ITEM}>
             `).join("");
     return `
@@ -315,5 +315,5 @@ class _ extends I {
   }
 }
 export {
-  _ as CommonControl
+  R as CommonControl
 };