@useinsider/guido 3.17.0-beta.ad62b51 → 3.17.0-beta.bdc7d25

package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue.js

@@ -1,18 +1,21 @@
 import r from "./AssignStrategyDrawer.vue2.js";
 /* empty css                          */
-import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e(t.WpDrawer, { attrs: { id: "assign-strategy-drawer", "description-status": "", size: "medium", "description-text": t.drawerDescription, "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.assignStrategyDrawerStatus, "title-text": t.trans("gpt-app-builder.assign-recommendation-strategy") }, on: { cancelOrBackButtonEvent: t.closeDrawer, onCloseEvent: t.closeDrawer, primaryButtonEvent: t.assignStrategy } }, [t.store.assignStrategyDrawerStatus ? e("div", { staticClass: "assign-strategy-drawer-content d-f f-d-c gap-16" }, [e(t.InSelect, { staticClass: "assign-strategy-select", attrs: { id: "assign-strategy-select", "search-status": "", "static-child-position": "bottom right", "button-status": !1, "dynamic-child-position": !1, "label-text": t.trans("ds-steps.recommendation-strategy"), options: t.strategyOptions, "placeholder-text": t.trans("ds-steps.select-strategy"), "skeleton-sizing": { width: 240, height: 42 }, "skeleton-status": t.store.strategiesLoading, state: t.showSelectionError ? "error" : "default", "state-message": t.showSelectionError ? t.trans("ds-steps.select-strategy-tooltip") : "", value: t.selectValue }, on: { select: t.onSelect } }), t.selectedStrategy ? e("div", { key: String(t.selectedStrategy.strategy_id), staticClass: "assign-strategy-detail" }, [e(t.OrgStrategyDetailModal, { attrs: { show: "", "footer-status": !1, strategy: t.selectedStrategy } })], 1) : s._e()], 1) : s._e()]);
-}, n = [], i = /* @__PURE__ */ a(
+/* empty css                          */
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return t.store.assignStrategyDrawerStatus ? s(t.OrgStrategyDetailModal, { staticClass: "assign-strategy-drawer", attrs: { "description-status": "", show: "", "description-text": t.drawerDescription, "footer-button-group-options": t.footerButtonGroupOptions, strategy: t.selectedStrategy ?? {}, "title-text": t.trans("gpt-app-builder.assign-recommendation-strategy") }, on: { close: t.closeDrawer, primaryClick: t.assignStrategy }, scopedSlots: e._u([{ key: "contentTop", fn: function() {
+    return [s("div", { staticClass: "assign-strategy-drawer-content px-5 py-5" }, [s(t.OrgStrategyDropdown, { staticClass: "assign-strategy-select", attrs: { id: "assign-strategy-select", "info-box-position": "bottom right", "create-button-visible": !1, loading: t.store.strategiesLoading, "selected-strategy-id": t.selectedStrategyId, state: t.showSelectionError ? "error" : "default", "state-message": t.showSelectionError ? t.trans("ds-steps.select-strategy-tooltip") : "", strategies: t.strategyOptions }, on: { select: t.onSelect } })], 1)];
+  }, proxy: !0 }], null, !1, 5799417) }) : e._e();
+}, n = [], i = /* @__PURE__ */ o(
   r,
-  o,
+  a,
   n,
   !1,
   null,
-  "c56bb033"
+  "43e684f6"
 );
-const p = i.exports;
+const y = i.exports;
 export {
-  p as default
+  y as default
 };

package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue2.js

@@ -1,38 +1,41 @@
-import { defineComponent as f, defineAsyncComponent as S, ref as l, computed as o, watch as _ } from "vue";
+import { defineComponent as f, defineAsyncComponent as g, ref as l, computed as a, watch as w } from "vue";
 import "@useinsider/design-system-organisms/style";
-import v from "../../../wrappers/WpDrawer.vue.js";
-import { useToaster as w } from "../../../../composables/useToaster.js";
+import { useToaster as _ } from "../../../../composables/useToaster.js";
 import { useTranslations as D } from "../../../../composables/useTranslations.js";
-import { URLS as T } from "../../../../enums/extensions/recommendationBlock.js";
-import { ToasterTypeOptions as g } from "../../../../enums/toaster.js";
-import { useRecommendationExtensionStore as A } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
-import { buildStrategyInfoBoxProps as E } from "../../../../utils/strategyInfoBox.js";
-import { InSelect as O } from "@useinsider/design-system-vue";
-const U = /* @__PURE__ */ f({
+import { URLS as v } from "../../../../enums/extensions/recommendationBlock.js";
+import { ToasterTypeOptions as p } from "../../../../enums/toaster.js";
+import { useRecommendationExtensionStore as T } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
+import O from "./StrategyInfoBoxContent.vue.js";
+import { buildStrategyInfoBoxProps as x } from "../../../../utils/strategyInfoBox.js";
+const L = /* @__PURE__ */ f({
   __name: "AssignStrategyDrawer",
-  setup(x) {
-    const u = S(
+  setup(A) {
+    const m = g(
       async () => (await import("@useinsider/design-system-organisms")).OrgStrategyDetailModal
-    ), r = D(), e = A(), { showToaster: n } = w(), s = l(null), a = l(!1), m = o(() => e.assignStrategyDrawerStatus ? r("email-editor.assign-strategy-description", { url: T.RECOMMENDATION_STRATEGIES_PANEL_PATH }) : "");
-    _(() => e.assignStrategyDrawerStatus, (t) => {
+    ), y = g(
+      async () => (await import("@useinsider/design-system-organisms")).OrgStrategyDropdown
+    ), r = D(), e = T(), { showToaster: n } = _(), s = l(null), o = l(!1), u = a(() => e.assignStrategyDrawerStatus ? r("email-editor.assign-strategy-description", { url: v.RECOMMENDATION_STRATEGIES_PANEL_PATH }) : "");
+    w(() => e.assignStrategyDrawerStatus, (t) => {
       if (!t)
         return;
       const { strategyId: i } = e.recommendationConfigs;
-      s.value = i || null, a.value = !1, e.fetchStrategies().catch(() => {
+      s.value = i || null, o.value = !1, e.fetchStrategies().catch(() => {
         n({
-          type: g.Error,
+          type: p.Error,
           message: r("discovery-strategy.error-description")
         });
       });
     });
-    const p = o(() => e.strategies.map((t) => ({
+    const d = a(() => e.strategies.map((t) => ({
       text: t.name,
       value: t.strategy_id,
-      infoBoxProps: E(t, r)
-    }))), y = o(() => [{ value: s.value }]), c = o(() => {
+      // `slot` lives here, not in the util: the design system renders it with
+      // `<component :is>` inside its own info box, and a util must not import one.
+      infoBoxProps: { ...x(t, r), slot: O }
+    }))), c = a(() => {
       const t = e.strategies.find((i) => String(i.strategy_id) === String(s.value ?? ""));
       return t ? { ...t, fallback_config: null } : null;
-    }), d = o(() => ({
+    }), S = a(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
@@ -44,23 +47,23 @@ const U = /* @__PURE__ */ f({
         labelText: r("products.cancel")
       }
     }));
-    return { __sfc: !0, OrgStrategyDetailModal: u, trans: r, store: e, showToaster: n, selectedStrategyId: s, showSelectionError: a, drawerDescription: m, strategyOptions: p, selectValue: y, selectedStrategy: c, footerButtonGroupOptions: d, closeDrawer: () => {
+    return { __sfc: !0, OrgStrategyDetailModal: m, OrgStrategyDropdown: y, trans: r, store: e, showToaster: n, selectedStrategyId: s, showSelectionError: o, drawerDescription: u, strategyOptions: d, selectedStrategy: c, footerButtonGroupOptions: S, closeDrawer: () => {
       e.closeAssignStrategyDrawer();
     }, assignStrategy: () => {
       const t = c.value;
       if (!t) {
-        a.value = !0;
+        o.value = !0;
         return;
       }
       e.assignStrategy(t), n({
-        type: g.Success,
+        type: p.Success,
         message: r("email-editor.strategy-assigned-success", { strategyName: t.name })
       }), e.closeAssignStrategyDrawer();
     }, onSelect: (t) => {
-      s.value = t.value, a.value = !1;
-    }, WpDrawer: v, InSelect: O };
+      s.value = t.value, o.value = !1;
+    } };
   }
 });
 export {
-  U as default
+  L as default
 };

package/dist/components/organisms/extensions/recommendation/StrategyInfoBoxContent.vue.js

@@ -0,0 +1,19 @@
+import a from "./StrategyInfoBoxContent.vue2.js";
+import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var _ = function() {
+  var t = this, s = t._self._c;
+  return t._self._setupProxy, s("div", { staticClass: "d-f f-d-c mt-3" }, t._l(t.details, function(n, e) {
+    return s("div", { key: n.title, staticClass: "d-f f-d-c", class: { "mt-2": e > 0 } }, [s("span", { staticClass: "f-s-1 f-w-600 l-h-1 t-c-52 mb-12" }, [t._v(t._s(n.title))]), s("span", { staticClass: "f-s-1 l-h-6 t-c-55 w-b-b-w" }, [t._v(t._s(n.value))])]);
+  }), 0);
+}, c = [], f = /* @__PURE__ */ r(
+  a,
+  _,
+  c,
+  !1,
+  null,
+  null
+);
+const m = f.exports;
+export {
+  m as default
+};

package/dist/components/organisms/extensions/recommendation/StrategyInfoBoxContent.vue2.js

@@ -0,0 +1,13 @@
+import { defineComponent as t } from "vue";
+const o = /* @__PURE__ */ t({
+  __name: "StrategyInfoBoxContent",
+  props: {
+    details: null
+  },
+  setup(e) {
+    return { __sfc: !0 };
+  }
+});
+export {
+  o as default
+};

package/dist/guido.css

@@ -1 +1 @@
-@charset "UTF-8";.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-73199fa4] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-6e711fd7]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-b13f0cfc]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-b13f0cfc]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-b13f0cfc]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.gap-16[data-v-c56bb033]{gap:16px}.assign-strategy-select[data-v-c56bb033] .assign-strategy-info-box__updated{margin-top:2px;color:var(--guido-color-gray-600, #6d7686);font-size:12px;line-height:18px}.assign-strategy-select[data-v-c56bb033] .assign-strategy-info-box__row{display:flex;flex-direction:column;margin-top:10px;font-size:12px;line-height:18px}.assign-strategy-select[data-v-c56bb033] .assign-strategy-info-box__label{color:var(--guido-color-gray-600, #6d7686)}.assign-strategy-select[data-v-c56bb033] .assign-strategy-info-box__value{color:var(--guido-color-gray-800, #2c3546);word-break:break-word}.assign-strategy-select[data-v-c56bb033]{width:100%;max-width:none}.assign-strategy-select[data-v-c56bb033] .in-dropdown-box__container{width:58%}.assign-strategy-detail[data-v-c56bb033] .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-detail[data-v-c56bb033] .spaced-dot-sep--top{background-position:center top}.assign-strategy-detail[data-v-c56bb033] .spaced-dot-sep--fc-n:first-child{background:none}.assign-strategy-detail[data-v-c56bb033] .in-drawer__container,.assign-strategy-detail[data-v-c56bb033] .in-drawer__wrapper{position:static!important;inset:auto!important;width:100%!important;max-width:none!important;height:auto!important;border:none!important;box-shadow:none!important;transform:none!important}.assign-strategy-detail[data-v-c56bb033] .in-drawer__content{height:auto!important;max-height:none!important;overflow:visible!important}.assign-strategy-detail[data-v-c56bb033] .in-drawer__content .px-5{padding-left:0!important;padding-right:0!important}.assign-strategy-detail[data-v-c56bb033] .filter-humanizer{margin-right:0!important;margin-left:0!important}.assign-strategy-detail[data-v-c56bb033] .in-drawer__header-main{padding:0!important}.assign-strategy-detail[data-v-c56bb033] .in-tabs-wrapper{padding-right:0;padding-left:0}.assign-strategy-detail[data-v-c56bb033] .in-on-page-message-wrapper{margin-right:0;margin-left:0}.assign-strategy-detail[data-v-c56bb033] .in-drawer__title,.assign-strategy-detail[data-v-c56bb033] [class*=overlay],.assign-strategy-detail[data-v-c56bb033] #close-button-strategy-details-drawer{display:none!important}
+@charset "UTF-8";.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-73199fa4] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-6e711fd7]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-b13f0cfc]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-b13f0cfc]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-b13f0cfc]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-43e684f6]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-43e684f6] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}

package/dist/src/components/organisms/extensions/recommendation/StrategyInfoBoxContent.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    details: {
+        title: string;
+        value: string;
+    }[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/src/utils/strategyInfoBox.d.ts

@@ -1,13 +1,23 @@
 import type { RrsStrategy } from '@@/Types/recommendation';
 import { useTranslations } from '@@/Composables/useTranslations';
-export declare const STRATEGY_INFO_BOX_CLASS = "assign-strategy-info-box";
+interface StrategyInfoBoxDetail {
+    title: string;
+    value: string;
+}
+interface StrategyInfoBoxContent {
+    details: StrategyInfoBoxDetail[];
+}
 /**
  * Props for the design system info box that previews a strategy on hover.
  *
  * The box is InSelect's own per-option feature: the dropdown v-binds this whole
- * object onto `<in-info-box>`, so `titleText`/`descriptionText` are all it takes
- * — no slot component. Both go through the design system's sanitizer, and every
- * partner-supplied value is escaped here before it reaches that markup.
+ * object onto `<in-info-box>` and, when `slot` is set, renders that component
+ * inside it with `slotProps`. `slot` is added by the caller — a util must not
+ * import a component.
+ *
+ * `titleText` still reaches the design system's sanitizer as markup, so the
+ * partner-supplied name is escaped here; the rows go through the component's
+ * text interpolation and need no escaping.
  *
  * `trans` is injectable because callers map this over a whole listing, and
  * `useTranslations()` rebuilds its dictionary and memo cache on every call.
@@ -18,5 +28,8 @@ export declare const buildStrategyInfoBoxProps: (strategy: RrsStrategy, trans?:
     variant: string;
     className: string;
     titleText: string;
+    descriptionStatus: boolean;
     descriptionText: string;
+    slotProps: StrategyInfoBoxContent;
 };
+export {};

package/dist/utils/strategyInfoBox.js

@@ -1,37 +1,68 @@
-import { useTranslations as m } from "../composables/useTranslations.js";
-import { formatShortDate as u } from "./dateUtil.js";
-import { escapeHtml as c } from "./htmlEscape.js";
-const n = "assign-strategy-info-box", a = (e) => typeof e == "string" ? e : typeof e == "number" ? String(e) : "", p = (e, t) => {
-  const r = a(e.algorithm) === "MIXED" ? t("discovery-strategy.mixed-algorithm") : t("discovery-strategy.single-algorithm"), i = a(e.algorithm_used).split(",").map((o) => o.trim()).filter(Boolean).map((o) => t(`recommendation-algorithm-names.${o.replaceAll("_", "-").toLowerCase()}`));
-  return i.length ? `${r} · ${i.join(", ")}` : r;
-}, g = (e, t) => [
+import { useTranslations as a } from "../composables/useTranslations.js";
+import { formatShortDate as c } from "./dateUtil.js";
+import { escapeHtml as l } from "./htmlEscape.js";
+const d = "assign-strategy-info-box", o = (e) => typeof e == "string" ? e : typeof e == "number" ? String(e) : "", u = (e, t) => {
+  const r = o(e.algorithm) === "MIXED" ? t("discovery-strategy.mixed-algorithm") : t("discovery-strategy.single-algorithm"), n = o(e.algorithm_used).split(",").map((i) => i.trim()).filter(Boolean).map((i) => t(`recommendation-algorithm-names.${i.replaceAll("_", "-").toLowerCase()}`));
+  return n.length ? `${r} · ${n.join(", ")}` : r;
+}, m = (e, t) => [
   [e.exclude_view, "discovery-strategy.exclude-recently-view-items"],
   [e.exclude_purchase, "discovery-strategy.exclude-recently-purchased-items"],
   [e.exclude_cart, "discovery-strategy.exclude-recently-added-cart-items"]
-].filter(([r]) => Number(r) === 1).map(([, r]) => t(r)).join(", "), h = (e) => a(
-  e.manual_merchandising || e.manual_merchandising_products
-).trim(), _ = (e) => {
+].filter(([r]) => Number(r) === 1).map(([, r]) => t(r)).join(", "), s = (e) => {
+  const t = o(e).trim();
+  if (!t)
+    return "";
+  let r;
+  try {
+    r = JSON.parse(t);
+  } catch {
+    return t;
+  }
+  if (Array.isArray(r))
+    return r.length ? String(r.length) : "";
+  if (r && typeof r == "object") {
+    const n = Object.keys(r).length;
+    return n ? String(n) : "";
+  }
+  return t;
+}, p = (e) => s(e.manual_merchandising) || s(e.manual_merchandising_products), g = (e) => {
+  if (Array.isArray(e))
+    return e.length;
+  const { conditionList: t } = e ?? {};
+  return Array.isArray(t) ? t.length : 1;
+}, h = (e) => {
   const t = e.filters;
   if (!t)
     return 0;
   try {
     const r = typeof t == "string" ? JSON.parse(t) : t;
-    return Array.isArray(r) ? r.reduce((i, o) => i + (Array.isArray(o) ? o.length : 1), 0) : 0;
+    return !r || typeof r != "object" ? 0 : Object.values(r).reduce((n, i) => n + g(i), 0);
   } catch {
     return 0;
   }
-}, s = (e, t) => `<div class="${n}__row"><span class="${n}__label">${c(e)}</span><span class="${n}__value">${c(t)}</span></div>`, v = (e, t = m()) => {
-  const r = t("recommendation-strategy.none"), i = a(e.updated_at || e.created_at), o = _(e), d = i ? c(t("recommendation-strategy.last-updated-on", { value: u(i) })) : "", l = d ? `<div class="${n}__updated">${d}</div>` : "";
+}, f = (e, t) => {
+  const r = o(e.updated_at || e.created_at);
+  return r ? t("recommendation-strategy.last-updated-on", { value: c(r) }) : "";
+}, y = (e, t = a()) => {
+  const r = t("recommendation-strategy.none"), n = h(e);
   return {
-    id: `strategy-info-${e.strategy_id}`,
-    theme: "light",
-    variant: "information",
-    className: n,
-    titleText: c(a(e.name)),
-    descriptionText: l + s(t("gpt-app-builder.algorithms-and-method"), p(e, t)) + s(t("gpt-app-builder.exclusions"), g(e, t) || r) + s(t("discovery-strategy.filters"), o ? String(o) : r) + s(t("action-builder.manual-merchandising"), h(e) || r)
+    details: [
+      { title: t("gpt-app-builder.algorithms-and-method"), value: u(e, t) },
+      { title: t("gpt-app-builder.exclusions"), value: m(e, t) || r },
+      { title: t("discovery-strategy.filters"), value: n ? String(n) : r },
+      { title: t("action-builder.manual-merchandising"), value: p(e) || r }
+    ]
   };
-};
+}, b = (e, t = a()) => ({
+  id: `strategy-info-${e.strategy_id}`,
+  theme: "light",
+  variant: "information",
+  className: d,
+  titleText: l(o(e.name)),
+  descriptionStatus: !0,
+  descriptionText: f(e, t),
+  slotProps: y(e, t)
+});
 export {
-  n as STRATEGY_INFO_BOX_CLASS,
-  v as buildStrategyInfoBoxProps
+  b as buildStrategyInfoBoxProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.17.0-beta.ad62b51",
+  "version": "3.17.0-beta.bdc7d25",
   "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",
@@ -48,7 +48,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.9.0",
-    "@useinsider/design-system-organisms": "0.0.3-beta.fc2c160",
+    "@useinsider/design-system-organisms": "0.0.3-beta.791d412",
     "@useinsider/design-system-vue": "1.5.0",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",