@useinsider/guido 3.0.0-beta.a72fd61 → 3.0.0-beta.ae0075e

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

@@ -0,0 +1,78 @@
+import { TextPaddingsBuiltInControl as d, ButtonBackgroundColorBuiltInControl as c, TextFontFamilyBuiltInControl as u, TextStyleBuiltInControl as i, TextSizeBuiltInControl as C, TextColorBuiltInControl as g, TextAlignBuiltInControl as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlockId as l } from "../../constants/blockIds.js";
+import { RecommendationControlId as e } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as I, ATTR_PRODUCT_ATTR as s } from "../../constants/selectors.js";
+function o(t) {
+  const n = t.closest(I);
+  if (!n)
+    return [];
+  const r = t.asElement().getAttribute(s);
+  if (r) {
+    const T = `[esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}"][${s}="${r}"]`;
+    return n.querySelectorAll(T);
+  }
+  return n.querySelectorAll(
+    `[esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}"]`
+  );
+}
+const A = class extends a {
+  getId() {
+    return e.CUSTOM_ATTR_ALIGN;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, _ = class extends g {
+  getId() {
+    return e.CUSTOM_ATTR_COLOR;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, S = class extends C {
+  getId() {
+    return e.CUSTOM_ATTR_SIZE;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, m = class extends i {
+  getId() {
+    return e.CUSTOM_ATTR_STYLE;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, O = class extends u {
+  getId() {
+    return e.CUSTOM_ATTR_FONT_FAMILY;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, R = class extends c {
+  getId() {
+    return e.CUSTOM_ATTR_BACKGROUND;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, x = class extends d {
+  getId() {
+    return e.CUSTOM_ATTR_PADDINGS;
+  }
+  getTargetNodes(t) {
+    return o(t);
+  }
+}, k = {
+  align: A,
+  color: _,
+  size: S,
+  style: m,
+  fontFamily: O,
+  background: R,
+  paddings: x
+};
+export {
+  k as CustomAttributeControls
+};

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

@@ -1,29 +1,31 @@
-var L = Object.defineProperty;
-var _ = (o, e, t) => e in o ? L(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var r = (o, e, t) => _(o, typeof e != "symbol" ? e + "" : e, t);
-import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as h } from "../../../common-control.js";
-import { LAYOUT_OPTIONS as N, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
+var A = Object.defineProperty;
+var p = (e, o, t) => o in e ? A(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var r = (e, o, t) => p(e, typeof o != "symbol" ? o + "" : o, t);
+import { ModificationDescription as L } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as O } from "../../../common-control.js";
+import { ATTR_DATA_CUSTOM_ATTRIBUTES as T } from "../../constants/selectors.js";
+import { LAYOUT_OPTIONS as h, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as C } from "../../constants/layout.js";
+import { DEFAULT_COMPOSITION as g } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as s } from "../../services/configService.js";
-import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
-import { getCurrentLayout as C, getBlockElement as O, regenerateProductRowsWithStyles as f } from "../main/utils.js";
-const S = "recommendation-layout-control", a = {
+import { useRecommendationExtensionStore as N } from "../../store/recommendation.js";
+import { getCurrentLayout as _, getBlockElement as f, regenerateProductRowsWithStyles as S } from "../main/utils.js";
+const I = "recommendation-layout-control", a = {
   LAYOUT: "layout"
-}, n = {
+}, U = "data-card-composition", n = {
   LAYOUT: "data-layout",
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-class G extends h {
+class w extends O {
   constructor() {
     super(...arguments);
-    r(this, "store", A());
+    r(this, "store", N());
     r(this, "isChangingLayout", !1);
   }
   getId() {
-    return S;
+    return I;
   }
   getTemplate() {
     return `
@@ -32,7 +34,7 @@ class G extends h {
       this._GuLabel({ text: "Layout Orientation" }),
       this._GuRadioButton({
         name: a.LAYOUT,
-        buttons: N
+        buttons: h
       })
     ])}
             </div>
@@ -45,7 +47,7 @@ class G extends h {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
+    const u = s.getConfig(this.currentNode).layout || _(this.currentNode);
     this.api.updateValues({
       [a.LAYOUT]: u
     });
@@ -55,9 +57,9 @@ class G extends h {
    * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
+    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || _(this.currentNode)) === t)
       return;
-    const c = O(this.currentNode);
+    const c = f(this.currentNode);
     if (c) {
       this.isChangingLayout = !0;
       try {
@@ -66,15 +68,15 @@ class G extends h {
           this.currentNode,
           {
             layout: t,
-            columnSpacing: g,
+            columnSpacing: C,
             rowSpacing: l,
             mobileColumnSpacing: d,
             mobileRowSpacing: m
           },
           `Changed layout to ${t}`
         ), this.store.patchCurrentBlockConfig({ orientation: t });
-        const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
-        t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.apply(new p(`Update layout to ${t}`)), this._regenerateProductRows(t);
+        const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, C.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
+        t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.setAttribute(U, g.join(",")).setAttribute(T, "[]"), i.apply(new L(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -86,10 +88,11 @@ class G extends h {
    * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
    */
   _regenerateProductRows(t) {
-    this.currentNode && f({
+    this.currentNode && S({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
-      layout: t
+      layout: t,
+      composition: g
     });
   }
   _listenToFormUpdates() {
@@ -99,6 +102,6 @@ class G extends h {
   }
 }
 export {
-  S as LAYOUT_CONTROL_ID,
-  G as LayoutControl
+  I as LAYOUT_CONTROL_ID,
+  w as LayoutControl
 };