@useinsider/guido 3.18.2-beta.c25d57c → 3.18.2-beta.d3f87c7

package/dist/composables/useStripo.js

@@ -1,23 +1,23 @@
-import { useActionsApi as L } from "./useActionsApi.js";
-import { useBlocksConfig as O } from "./useBlocksConfig.js";
-import { useConfig as q } from "./useConfig.js";
-import { useCustomInterfaceAppearance as H } from "./useCustomInterfaceAppearance.js";
+import { useActionsApi as O } from "./useActionsApi.js";
+import { useBlocksConfig as q } from "./useBlocksConfig.js";
+import { useConfig as H } from "./useConfig.js";
+import { useCustomInterfaceAppearance as w } from "./useCustomInterfaceAppearance.js";
 import { useFullStoryBridge as N } from "./useFullStoryBridge.js";
 import { useModuleRepair as j } from "./useModuleRepair.js";
 import { useStripoEventHandler as z } from "./useStripoEventHandler.js";
 import { useStripoNotifications as $ } from "./useStripoNotifications.js";
 import { useToaster as G } from "./useToaster.js";
 import { localePatch as J } from "../config/i18n/index.js";
-import { en as w } from "../config/i18n/en/index.js";
+import { en as b } from "../config/i18n/en/index.js";
 import { ToasterTypeOptions as X } from "../enums/toaster.js";
 import { useStripoApi as K } from "../services/stripoApi.js";
 import Q from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as b } from "../stores/editor.js";
+import { useEditorStore as k } from "../stores/editor.js";
 import { buildMergeTagEntries as W, flattenDynamicContentList as Y } from "../utils/genericUtil.js";
 import Z from "../package.json.js";
 let n = null;
-const Ce = () => {
-  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: B, getCustomFonts: M, getSyncModulesStatus: T } = K(), { handleEvent: v } = z(), { handleModuleAdd: F } = j(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), f = () => n || (n = new Promise((i, s) => {
+const he = () => {
+  const { features: c, template: u, isFeatureEnabled: m } = H(), { handleError: p, showToaster: B } = G(), { getToken: M, getCustomFonts: T, getSyncModulesStatus: v } = K(), { handleEvent: F } = z(), { handleModuleAdd: A } = j(), { getStripoBlocksConfig: V } = q(), { getStripoNotifications: _ } = $(), f = () => n || (n = new Promise((i, s) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i();
@@ -29,16 +29,16 @@ const Ce = () => {
     }, document.body.appendChild(e);
   }), n.catch(() => {
     n = null;
-  }), n), _ = async (i, s, o, a = [], r = !1) => {
+  }), n), D = async (i, s, o, a = [], r = !1) => {
     var y, E, h, C;
-    const e = b(), { html: d, css: D } = i, { baseBlocks: g, extensions: R } = await A(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, P = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, U = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1);
-    await window.UIEditor.initEditor(
+    const e = k(), { html: d, css: R } = i, { baseBlocks: g, extensions: P } = await V(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, U = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, I = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1), x = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
+    w().importCss(), await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: s,
         html: d,
-        css: D,
-        forceRecreate: U,
+        css: R,
+        forceRecreate: I,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -52,7 +52,7 @@ const Ce = () => {
         conditionsEnabled: S,
         customConditionsEnabled: S,
         enableXSSSecurity: !0,
-        modulesDisabled: P,
+        modulesDisabled: U,
         syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -62,7 +62,7 @@ const Ce = () => {
         displayUTM: !1,
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
-        allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
+        allowedScriptSourceDomains: x,
         ...g ? { baseBlocks: g } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
@@ -80,7 +80,7 @@ const Ce = () => {
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const l = await B();
+            const l = await M();
             t(l);
           } catch (l) {
             p(l, "Failed to refresh token");
@@ -88,8 +88,8 @@ const Ce = () => {
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = H(), { activateCustomViewStyles: l, updateTimerInClonedTemplate: I } = L(), { injectFullStory: x } = N();
-            t(), l(), x(), I(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { activateCustomViewStyles: t, updateTimerInClonedTemplate: l } = O(), { injectFullStory: L } = N();
+            w().importCss(), t(), L(), l(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
@@ -108,34 +108,34 @@ const Ce = () => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: v,
-        onModuleAdd: F,
-        notifications: V(),
+        onEvent: F,
+        onModuleAdd: A,
+        notifications: _(),
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: R,
+        extensions: P,
         localePatch: J
       }
     );
   };
   return { initPlugin: async (i, s, o) => {
-    const a = b();
+    const a = k();
     try {
       await f();
       const [r, e] = await Promise.all([
-        M(),
-        T()
+        T(),
+        v()
       ]);
-      a.syncModulesEnabled = e, await _(i, s, o, r, e);
+      a.syncModulesEnabled = e, await D(i, s, o, r, e);
     } catch {
-      a.loadingStatus = !1, k({
+      a.loadingStatus = !1, B({
         type: X.Error,
-        message: w["An error has occurred. Please report the error code to support."],
+        message: b["An error has occurred. Please report the error code to support."],
         actionButton: {
-          text: w["Reload page"],
+          text: b["Reload page"],
           onClick: () => window.location.reload()
         }
       });
@@ -146,5 +146,5 @@ const Ce = () => {
   } };
 };
 export {
-  Ce as useStripo
+  he as useStripo
 };

package/dist/enums/extensions/recommendationBlock.js

@@ -1,14 +1,20 @@
-import { useTranslations as r } from "../../composables/useTranslations.js";
-const l = {
+import { useTranslations as n } from "../../composables/useTranslations.js";
+const o = {
   RECOMMENDATION_API_URL: "https://recommendationv2.api.useinsider.com",
   // Relative path → same-origin as the embedding inone dashboard.
   PRODUCT_ATTRIBUTES_PATH: "/product-attributes/get-attributes",
   RECOMMENDATION_STRATEGIES_PATH: "/api/recommendation-strategies",
-  RECOMMENDATION_STRATEGIES_PANEL_PATH: "/discovery/recommendation-strategies"
-}, c = {
+  RECOMMENDATION_STRATEGIES_PANEL_PATH: "/discovery/recommendation-strategies",
+  // Smart Recommender hides the Email channel unless the URL asks for it, so a strategy created
+  // without this flag can never be Email-suitable and would never reach the editor's list.
+  RECOMMENDATION_STRATEGY_CREATE_PATH: "/discovery/recommendation-strategies/create?isEmail=true"
+}, d = (e) => {
+  const { RECOMMENDATION_STRATEGIES_PANEL_PATH: r } = o;
+  return `${r}/${e}/edit?isEmail=true`;
+}, m = {
   CLIENT_ID: "clientId"
-}, d = () => {
-  const e = r();
+}, p = () => {
+  const e = n();
   return [
     {
       id: 11,
@@ -71,14 +77,14 @@ const l = {
       path: "top-sellers"
     }
   ];
-}, m = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], p = [
+}, v = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], h = [
   { text: "before the amount", value: "0" },
   { text: "after the amount", value: "1" }
-], v = [
+], x = [
   { text: "dot(.)", value: "." },
   { text: "comma(,)", value: "," },
   { text: "space( )", value: " " }
-], h = [
+], E = [
   { text: "0", value: "0" },
   { text: "1", value: "1" },
   { text: "2", value: "2" },
@@ -90,54 +96,55 @@ const l = {
   { text: "contains", value: "~" },
   { text: "does not contain", value: "!~" },
   { text: "any of", value: a }
-], n = [
+], s = [
   { text: "is exactly", value: "=" },
   { text: "is not exactly", value: "!==" },
   { text: "contains", value: "~" },
   { text: "does not contain", value: "!~" },
   { text: "any of", value: a }
-], o = [
+], i = [
   { text: "is equal to", value: "=" },
   { text: "is greater than", value: ">" },
   { text: "is less than", value: "<" }
-], s = [
+], u = [
   { text: "is equal to", value: "=" },
   { text: "after", value: ">" },
   { text: "before", value: "<" }
-], i = [
+], c = [
   { text: "true", value: "==" },
   { text: "false", value: "!=" }
-], x = (e) => {
+], b = (e) => {
   if (!e)
     return t;
   switch (e) {
     case "Boolean":
-      return i;
+      return c;
     case "Date":
-      return s;
+      return u;
     case "Number":
-      return o;
+      return i;
     case "String":
       return t;
     case "Strings":
-      return n;
+      return s;
     default:
       return t;
   }
 };
 export {
   a as OP_ANY_OF,
-  m as PriceAttributes,
-  c as QUERY_PARAMS,
-  l as URLS,
-  h as currencyDecimalCounts,
-  p as currencyLocationMaps,
-  v as currencyOperators,
-  x as getOperatorOptions,
-  d as getRecommendationFeedSourceMaps,
-  n as operatorOptionsForArrayOfStrings,
-  i as operatorOptionsForBooleans,
-  s as operatorOptionsForDates,
-  o as operatorOptionsForNumbers,
-  t as operatorOptionsForStrings
+  v as PriceAttributes,
+  m as QUERY_PARAMS,
+  o as URLS,
+  E as currencyDecimalCounts,
+  h as currencyLocationMaps,
+  x as currencyOperators,
+  b as getOperatorOptions,
+  p as getRecommendationFeedSourceMaps,
+  s as operatorOptionsForArrayOfStrings,
+  c as operatorOptionsForBooleans,
+  u as operatorOptionsForDates,
+  i as operatorOptionsForNumbers,
+  t as operatorOptionsForStrings,
+  d as strategyEditPath
 };

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,37 +1,37 @@
-var R = Object.defineProperty;
-var B = (a, c, t) => c in a ? R(a, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[c] = t;
-var p = (a, c, t) => B(a, typeof c != "symbol" ? c + "" : c, t);
-import { useConfig as D } from "../../../composables/useConfig.js";
-import { BlockId as y } from "../../../enums/block.js";
-import { getMigrationBannerHtml as C } from "../../../utils/migrationBannerHtml.js";
-import { Block as b, BlockCompositionType as A, ModificationDescription as g } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as E, PRE_RRS_CONFIG_VERSION as S } from "./constants/defaultConfig.js";
+var D = Object.defineProperty;
+var y = (l, c, t) => c in l ? D(l, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[c] = t;
+var f = (l, c, t) => y(l, typeof c != "symbol" ? c + "" : c, t);
+import { useConfig as C } from "../../../composables/useConfig.js";
+import { BlockId as b } from "../../../enums/block.js";
+import { getMigrationBannerHtml as A } from "../../../utils/migrationBannerHtml.js";
+import { Block as E, BlockCompositionType as S, ModificationDescription as g } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as O } from "./constants/defaultConfig.js";
 import { RECOMMENDATION_ID_ATTR as m } from "./constants/selectors.js";
-import { regenerateMobileProductRows as N } from "./controls/main/utils.js";
-import { ensureMobileCssRulesExist as h, setMobileLayoutOptOut as f, hasMobileLayoutOptOut as O } from "./controls/mobileLayout/cssRules.js";
+import { regenerateMobileProductRows as M } from "./controls/main/utils.js";
+import { ensureMobileCssRulesExist as _, setMobileLayoutOptOut as I, hasMobileLayoutOptOut as w } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as s } from "./services/configService.js";
 import { useRecommendationExtensionStore as d } from "./store/recommendation.js";
-import { getDefaultTemplate as M } from "./templates/grid/template.js";
-import { useRecommendationBlockWarning as w } from "./useRecommendationBlockWarning.js";
-const _ = y.Recommendation, u = "recommendation-block-v2", I = "hide-price";
-let k = !1;
-class W extends b {
+import { getDefaultTemplate as x } from "./templates/grid/template.js";
+import { useRecommendationBlockWarning as H } from "./useRecommendationBlockWarning.js";
+const k = b.Recommendation, u = "recommendation-block-v2", R = "hide-price";
+let B = !1;
+class j extends E {
   constructor() {
     super();
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
      * This avoids generating a new (different) ID in onCreated().
      */
-    p(this, "_pendingBlockId", null);
+    f(this, "_pendingBlockId", null);
   }
   getId() {
-    return _;
+    return k;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return A.CONTAINER;
+    return S.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -42,8 +42,8 @@ class W extends b {
     );
   }
   getSettingsPanelTitleHtml() {
-    return C(
-      _,
+    return A(
+      k,
       this.api.translate("Recommendation Block"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
     );
@@ -66,7 +66,7 @@ class W extends b {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, M(t);
+    return this._pendingBlockId = t, x(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -89,23 +89,27 @@ class W extends b {
     }
     const i = this._pendingBlockId ?? this._generateNextId();
     this._pendingBlockId = null, this._assignRecommendationId(t, i);
-    const { config: n, wasFreshDrop: o } = s.initializeConfig(
+    const n = C().isFeatureEnabled("reusableRecommendationStrategy"), o = n && !s.hasConfig(t), { config: r, wasFreshDrop: a } = s.initializeConfig(
       this.api,
       t,
       {
         recommendationId: i,
-        configVersion: D().isFeatureEnabled("reusableRecommendationStrategy") ? E : S
+        configVersion: n ? N : O,
+        // An RRS block picks a strategy, not an algorithm, and its algorithm control is
+        // hidden. Keeping the `mostPopular` default would bake a most-popular feed URL
+        // at save for a block the user never configured.
+        ...o ? { strategy: "" } : {}
       }
-    ), r = d();
-    if (r.setCurrentBlock(i), this._stampHidePrice(t, n.priceHideIfSameAsDiscounted), o) {
-      h(this.api);
-      const l = this._getBlockElement(t);
-      l && (f(this.api, l, !0), N({
+    ), p = d();
+    if (p.setCurrentBlock(i), this._stampHidePrice(t, r.priceHideIfSameAsDiscounted), a) {
+      _(this.api);
+      const h = this._getBlockElement(t);
+      h && (I(this.api, h, !0), M({
         currentNode: t,
         documentModifier: this.api.getDocumentModifier()
       }));
     }
-    r.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
+    p.patchCurrentBlockConfig({ language: r.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
   }
   /**
    * Called when the document changes or template is loaded
@@ -127,11 +131,11 @@ class W extends b {
       }
       this._healLingeringDuplicate(t), s.needsMigration(t) && this._migrateFromLegacy(t), this._healHidePriceAttr(t);
       try {
-        k || (h(this.api), k = !0);
+        B || (_(this.api), B = !0);
         const e = s.getConfig(t), i = this._getBlockElement(t);
         if (i) {
           const n = !e.mobileLayoutEnabled;
-          O(i) !== n && f(this.api, i, n);
+          w(i) !== n && I(this.api, i, n);
         }
       } catch {
       }
@@ -161,7 +165,7 @@ class W extends b {
    */
   _warnIfMultipleBlocks() {
     try {
-      w().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
+      H().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
     } catch {
     }
   }
@@ -211,9 +215,9 @@ class W extends b {
         if (!o)
           return;
         let r = -1;
-        for (let l = 0; l < n.length; l++)
-          if (n[l] === o) {
-            r = l;
+        for (let a = 0; a < n.length; a++)
+          if (n[a] === o) {
+            r = a;
             break;
           }
         if (r <= 0)
@@ -293,7 +297,7 @@ class W extends b {
    */
   _stampHidePrice(t, e) {
     const i = this._getBlockElement(t);
-    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(I, String(e)).apply(new g("Stamp hide-price"));
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(R, String(e)).apply(new g("Stamp hide-price"));
   }
   /**
    * Stamps `hide-price` from config only when the block lacks the attribute —
@@ -301,7 +305,7 @@ class W extends b {
    */
   _healHidePriceAttr(t) {
     const e = this._getBlockElement(t);
-    if (!e || !("getAttribute" in e) || e.getAttribute(I) !== null)
+    if (!e || !("getAttribute" in e) || e.getAttribute(R) !== null)
       return;
     const { priceHideIfSameAsDiscounted: i } = s.getConfig(t);
     this._stampHidePrice(t, i);
@@ -338,6 +342,6 @@ class W extends b {
   }
 }
 export {
-  _ as BLOCK_ID,
-  W as RecommendationBlock
+  k as BLOCK_ID,
+  j as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,13 +1,13 @@
-import { DEFAULT_COLUMN_SPACING as R, DEFAULT_ROW_SPACING as s, DEFAULT_MOBILE_ROW_SPACING as n, DEFAULT_MOBILE_COLUMN_SPACING as O, DEFAULT_MOBILE_CARDS_IN_ROW as e, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as o, ATTR_PRODUCT_NAME as t, ATTR_PRODUCT_OLD_PRICE as _, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as r, ATTR_PRODUCT_OMNIBUS_DISCOUNT as I, ATTR_PRODUCT_BUTTON as i, ATTR_RECOMMENDATION_TITLE as U } from "./selectors.js";
-const A = 1, u = 2, D = {
+import { DEFAULT_COLUMN_SPACING as i, DEFAULT_ROW_SPACING as s, DEFAULT_MOBILE_ROW_SPACING as n, DEFAULT_MOBILE_COLUMN_SPACING as O, DEFAULT_MOBILE_CARDS_IN_ROW as e, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as o, ATTR_PRODUCT_NAME as t, ATTR_PRODUCT_OLD_PRICE as _, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as I, ATTR_PRODUCT_OMNIBUS_DISCOUNT as R, ATTR_PRODUCT_BUTTON as r, ATTR_RECOMMENDATION_TITLE as E } from "./selectors.js";
+const U = 1, u = 2, m = 2, A = {
   code: "USD",
   symbol: "USD",
   alignment: "after",
   decimalCount: 2,
   decimalSeparator: ".",
   thousandSeparator: ","
-}, E = {
+}, D = {
   textBefore: "",
   textAfter: ""
 }, a = {
@@ -18,26 +18,26 @@ const A = 1, u = 2, D = {
   t,
   _,
   T,
-  r,
   I,
-  i
+  R,
+  r
 ], N = {
-  [U]: !0,
+  [E]: !0,
   [o]: !0,
   [t]: !0,
   [T]: !0,
   [_]: !0,
-  [r]: !1,
   [I]: !1,
-  [i]: !0
-}, m = {
+  [R]: !1,
+  [r]: !0
+}, L = {
   // Settings
   strategy: "mostPopular",
   productIds: [],
   size: "6",
   shuffleProducts: !1,
   language: "en_US",
-  currency: D,
+  currency: A,
   filters: [],
   strategyId: "",
   // Layout
@@ -46,7 +46,7 @@ const A = 1, u = 2, D = {
   mobileCardsInRow: e,
   mobileLayoutEnabled: !1,
   previousMobileCardsInRow: e,
-  columnSpacing: R,
+  columnSpacing: i,
   rowSpacing: s,
   mobileColumnSpacing: O,
   mobileRowSpacing: n,
@@ -55,7 +55,7 @@ const A = 1, u = 2, D = {
   visibility: N,
   previousTitleHtml: "",
   // Element settings
-  omnibusPrice: E,
+  omnibusPrice: D,
   omnibusDiscount: a,
   textTrimming: !1,
   // Price placement (block-level, affects all cards)
@@ -66,17 +66,18 @@ const A = 1, u = 2, D = {
   // of "false" (the actual hiding happens server-side at send).
   priceHideIfSameAsDiscounted: !1,
   // Meta
-  configVersion: A,
+  configVersion: U,
   recommendationId: 0
-}, L = [11, 12];
+}, P = [11, 12];
 export {
   u as CURRENT_CONFIG_VERSION,
   c as DEFAULT_COMPOSITION,
-  D as DEFAULT_CURRENCY,
-  m as DEFAULT_NODE_CONFIG,
+  A as DEFAULT_CURRENCY,
+  L as DEFAULT_NODE_CONFIG,
   a as DEFAULT_OMNIBUS_DISCOUNT,
-  E as DEFAULT_OMNIBUS_PRICE,
+  D as DEFAULT_OMNIBUS_PRICE,
   N as DEFAULT_VISIBILITY,
-  L as EXCLUDED_ALGORITHM_IDS,
-  A as PRE_RRS_CONFIG_VERSION
+  P as EXCLUDED_ALGORITHM_IDS,
+  U as PRE_RRS_CONFIG_VERSION,
+  m as RRS_CONFIG_VERSION
 };

package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js

@@ -67,7 +67,7 @@ class se extends ut {
       (d, c) => `
                 <div data-reorder-icon-key="${P}${c}" style="display: none;">
                     <${_.BUTTON}
-                        class="guido-drag-handle-btn flat-inline flat-white"
+                        class="drag-handle-btn flat-inline flat-white"
                         ${O.BUTTON.name}="${P}${c}"
                     >
                         <${_.ICON}
@@ -328,7 +328,7 @@ class se extends ut {
   _createBuiltInItemHtml(t, e) {
     return `
             <div class="orderable-item" draggable="true" data-key="${t.key}">
-                <span class="guido-drag-handle" data-reorder-icon-slot="${e}"></span>
+                <span class="drag-handle" data-reorder-icon-slot="${e}"></span>
                 <span class="item-label">${this.api.translate(t.label)}</span>
                 <div class="item-action" data-action-for="${t.key}"></div>
             </div>
@@ -353,7 +353,7 @@ class se extends ut {
             <div class="orderable-item price-group-item" draggable="true"
                 data-key="${C}" data-group="prices">
                 <div class="price-group-header">
-                    <span class="guido-drag-handle" data-reorder-icon-slot="${t}"></span>
+                    <span class="drag-handle" data-reorder-icon-slot="${t}"></span>
                     <span class="item-label">${this.api.translate("Product Prices")}</span>
                     <div class="item-action" data-action-for="${C}"></div>
                 </div>
@@ -365,7 +365,7 @@ class se extends ut {
     return `
             <div class="orderable-item" draggable="true"
                 data-key="${t}" data-custom-index="${e}">
-                <span class="guido-drag-handle" data-reorder-icon-slot="${r}"></span>
+                <span class="drag-handle" data-reorder-icon-slot="${r}"></span>
                 <div class="custom-attr-select-wrap"
                     data-custom-select-slot="${e}"></div>
                 <div class="item-action"