@useinsider/guido 2.0.0-beta.b46bbf6 → 2.0.0-beta.b889d81

package/dist/extensions/Blocks/Items/template.js

@@ -1,86 +1,29 @@
-import { BlockType as $, BlockAttr as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ItemsBlockId as b } from "./enums/controlEnums.js";
-import { productPairs as c, templateFirstLine as v } from "./enums/productEnums.js";
-import { ItemInCartOptions as X, SETTINGS_ENUMS as y, DefaultConfigValues as P } from "./enums/settingsEnums.js";
-import K from "./layouts/horizontal.html.js";
-import z from "./layouts/vertical.html.js";
-let [N] = c.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [A] = c.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [f] = c.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [k] = c.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [m] = c.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
-const S = (e) => e.split(";").map((t) => t.trim()).filter((t) => !t.toLowerCase().startsWith("text-align")).join("; ").replace(/;\s*$/, ""), G = (e, t, n) => {
-  const a = n || P.productImageWidth;
-  return `
-        <td class="esd-block-image document-node-component default-block-component selectable ng-star-inserted"
-            align="center"
-            esd-extension-block-id="items-block-image"
-            data-slot-1=""
-            product-attr="imageSrc"
-            data-type="${e}"
-            data-number="${t}"
-            style="font-size: 0px;">
-            <a class="document-node-component ng-star-inserted"
-                target="_blank"
-                href="#!">
-                <img class="adapt-img document-node-component ng-star-inserted"
-                    src="${N}"
-                    alt="${A}"
-                    width="${a}">
-            </a>
-        </td>
-    `;
-}, Q = (e, t) => `
-    <${$.BLOCK_IMAGE}
-        ${R.BLOCK_IMAGE.src}="${N}"
-        ${R.BLOCK_IMAGE.alt}="${A}"
-        ${R.BLOCK_IMAGE.href}="#!"
-        ${R.BLOCK_IMAGE.width}="${P.productImageWidth}"
-        ${R.BLOCK_IMAGE.height}="${P.productImageWidth}"
-        esd-extension-block-id="${b.IMAGE}"
+import { BlockType as l, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ItemsBlockId as T } from "./enums/controlEnums.js";
+import { productPairs as i, templateFirstLine as N } from "./enums/productEnums.js";
+import { ItemInCartOptions as f, SETTINGS_ENUMS as O, DefaultConfigValues as P } from "./enums/settingsEnums.js";
+import B from "./layouts/horizontal.html.js";
+import g from "./layouts/vertical.html.js";
+let [C] = i.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [A] = i.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [p] = i.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [I] = i.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [u] = i.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const h = (a, t) => `
+    <${l.BLOCK_IMAGE} 
+        ${_.BLOCK_IMAGE.src}="${C}"
+        ${_.BLOCK_IMAGE.alt}="${A}"
+        ${_.BLOCK_IMAGE.href}="#!"
+        ${_.BLOCK_IMAGE.width}=${P.productImageWidth}
+        esd-extension-block-id="${T.IMAGE}"
         data-slot-1
         product-attr="imageSrc"
-        data-type="${e}"
+        data-type="${a}" 
         data-number="${t}"
     />
-    `, W = (e, t, n, a) => {
-  const l = `
-        text-decoration:none;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
-        font-family: inherit;
-        color: inherit;
-        display: block;
-        word-wrap:break-word;
-        white-space: nowrap;
-        width: ${n === y.ORIENTATION.HORIZONTAL ? "130px" : "520px"};
-        overflow: hidden;
-        text-overflow: ellipsis;
-    `, o = a || l;
-  return t ? `
-            <td class="esd-block-text es-p10"
-                align="center"
-                width="100%"
-                data-type="${e}"
-                esd-extension-block-id="${b.NAME}"
-                style="display: table-cell;">
-                <div id="renderedContent" class="service-element text-block-input-area text-block-preview-area"
-                    style="outline: none;" contenteditable="">
-                    <p contenteditable="false" path="1">
-                        <a
-                            href="#!"
-                            style="${o}"
-                            product-attr="name"
-                            data-slot-2
-                            width="100%">
-                            ${A}
-                        </a>
-                    </p>
-                </div>
-            </td>
-        ` : `<${$.BLOCK_TEXT} 
+    `, F = (a) => `
+    <${l.BLOCK_TEXT} 
         width="100%" 
         align="center" 
         class="es-p10" 
-        data-type="${e}"
-        esd-extension-block-id="${b.NAME}"
+        data-type="${a}"
+        esd-extension-block-id="${T.NAME}"
     >
         <p contenteditable="false">
             <a  
@@ -105,264 +48,148 @@ const S = (e) => e.split(";").map((t) => t.trim()).filter((t) => !t.toLowerCase(
                 ${A}
             </a>
         </p>
-    </${$.BLOCK_TEXT}>
-`;
-}, q = (e, t, n, a, r, l, o) => {
-  let d = f;
-  if (a && a.trim()) {
-    const u = `&nbsp;${a.trim()}&nbsp;`;
-    d = (r || "0") === "1" ? `${f}${u}` : `${u}${f}`;
-  }
-  const s = r === "1" ? "after" : "before", T = `data-formated="${n ? "true" : "false"}"`, i = `data-curency="${s}"`, E = a ? `data-currency_symbol="${a}"` : "";
-  if (l) {
-    const p = S(o || "color: #060606; white-space: nowrap; font-size: 20px;");
-    return `
-        <td class="esd-block-text items-block-price"
-            align="center"
-            esd-extension-block-id="items-block-price"
-            width="100%">
-            <p product-attr="price"
-                contenteditable="false"
-                data-slot-4
-                data-type="${e}"
-                data-number="${t}"
-                ${T}
-                ${i}
-                ${E}
-                style="${p}">
-                ${d}
-            </p>
-        </td>`;
+    </${l.BLOCK_TEXT}>
+`, S = (a, t, o, e, c) => {
+  let n = p;
+  if (e && e.trim()) {
+    const E = `&nbsp;${e.trim()}&nbsp;`;
+    n = (c || "0") === "1" ? `${p}${E}` : `${E}${p}`;
   }
+  const r = c === "1" ? "after" : "before", d = `data-formated="${o ? "true" : "false"}"`, s = `data-curency="${r}"`;
   return `
-    <${$.BLOCK_TEXT}
-        esd-extension-block-id="${b.PRICE}"
+    <${l.BLOCK_TEXT} 
+        esd-extension-block-id="${T.PRICE}"
         class="items-block-price"
-        width="100%"
-        align="center"
+        width="100%" 
+        align="center" 
     >
-        <p
+        <p 
             product-attr="price"
             contenteditable="false"
             data-slot-4
-            data-type="${e}"
+            data-type="${a}"
             data-number="${t}"
-            ${T}
-            ${i}
-            ${a ? `data-currency_symbol="${a}"` : ""}
-        >
             ${d}
+            ${s}
+            ${e ? `data-currency_symbol="${e}"` : ""}
+        >
+            ${n}
         </p>
-    </${$.BLOCK_TEXT}>
+    </${l.BLOCK_TEXT}>
 `;
-}, V = (e, t, n, a, r, l, o = !0, d) => {
-  let s = k;
-  if (a && a.trim()) {
-    const p = `&nbsp;${a.trim()}&nbsp;`;
-    s = (r || "0") === "1" ? `${k}${p}` : `${p}${k}`;
-  }
-  const T = r === "1" ? "after" : "before", i = `data-formated="${n ? "true" : "false"}"`, E = `data-curency="${T}"`, u = o ? "" : ' style="display: none;"';
-  if (l) {
-    const O = S(d || "color: #cc0000; white-space: nowrap; font-size: 19px;");
-    return `
-        <td class="esd-block-text items-block-price"
-            esd-extension-block-id="items-block-original-price"
-            width="100%"
-            align="center"${u}>
-            <p
-                product-attr="originalPrice"
-                contenteditable="false"
-                data-slot-5
-                data-type="${e}"
-                data-number="${t}"
-                ${i}
-                ${E}
-                ${a ? `data-currency_symbol="${a}"` : ""}
-                style="${O}">
-                <s>${s}</s>
-            </p>
-        </td>`;
+}, L = (a, t, o, e, c) => {
+  let n = I;
+  if (e && e.trim()) {
+    const E = `&nbsp;${e.trim()}&nbsp;`;
+    n = (c || "0") === "1" ? `${I}${E}` : `${E}${I}`;
   }
+  const r = c === "1" ? "after" : "before", d = `data-formated="${o ? "true" : "false"}"`, s = `data-curency="${r}"`;
   return `
-    <${$.BLOCK_TEXT}
+    <${l.BLOCK_TEXT} 
         class="items-block-price"
-        esd-extension-block-id="${b.ORIGINAL_PRICE}"
-        width="100%"
-        align="center"
-        ${o ? "" : 'style="display: none;"'}
+        esd-extension-block-id="${T.ORIGINAL_PRICE}"
+        width="100%" 
+        align="center" 
     >
         <p
             product-attr="originalPrice"
-            contenteditable="false"
+            contenteditable="false" 
             data-slot-5
             style="color: #cc0000"
-            data-type="${e}"
+            data-type="${a}"
             data-number="${t}"
-            ${i}
-            ${E}
-            ${a ? `data-currency_symbol="${a}"` : ""}
+            ${d}
+            ${s}
+            ${e ? `data-currency_symbol="${e}"` : ""}
         >
-            <s>${s}</s>
+            <s>${n}</s>
         </p>
-    </${$.BLOCK_TEXT}>
+    </${l.BLOCK_TEXT}>
 `;
-}, H = (e = !0, t, n) => {
-  const a = e ? "" : 'style="display: none;"';
-  return t ? `
-            <td class="esd-block-text es-p10 document-node-component default-block-component selectable"
-                width="100%" align="center" esd-extension-block-id="items-block-quantity" ${a}>
-                <div class="service-element text-block-input-area text-block-preview-area"
-                    style="outline: none;" contenteditable="">
-                    <p product-attr="quantity" data-slot-3="" contenteditable="false" width="100%" path="1"
-                        style="${n || "text-align: center; font-size: 14px;"}">
-                        ${m}
-                    </p>
-                </div>
-            </td>` : `
-        <${$.BLOCK_TEXT}
-            width="100%"
-            align="center"
-            class="es-p10"
-            esd-extension-block-id="${b.QUANTITY}"
-            ${e ? "" : 'style="display: none;"'}
-        >
-            <p
-                product-attr="quantity"
-                data-slot-3
-                contenteditable="false"
-                width="100%">
-                ${m}
-            </p>
-        </${$.BLOCK_TEXT}>
-    `;
-}, j = (e, t, n = "Buy", a, r) => a ? `
-        <td class="esd-block-button ins-button default-block-component selectable"
-            align="center" width="100%" name="buy-button" caption="${n}"
-            esd-extension-block-id="items-block-button"
-            product-attr="button" data-slot-6="" data-type="${e}" data-number="${t}">
-            <span class="es-button-border" style="border-width: 0px;">
-                <a class="es-button" href="#!" target="_blank" style="${r || ""}">
-                    ${n}
-                </a>
-            </span>
-        </td>` : `
-        <${$.BLOCK_BUTTON}
-            width="100%"
-            class="ins-button"
-            name="buy-button"
-            caption="${n}"
-            align="center"
-            esd-extension-block-id="${b.BUTTON}"
-            product-attr="button"
-            data-slot-6
-            data-type="${e}"
-            data-number="${t}"
-        >${n}
-        </${$.BLOCK_BUTTON}>
-    `, Y = (e) => !e || Object.keys(e).length === 0 ? '<esd-config-block style="display: none;"></esd-config-block>' : `<esd-config-block style="display: none;" ${Object.entries(e).map(([n, a]) => `${n}="${a}"`).join(" ")}></esd-config-block>`, Z = (e, t, n) => {
-  const a = t === y.ORIENTATION.VERTICAL, r = n === "horizontal";
-  return a ? r ? e : e.replace(
-    /<td\s+[^>]*class="[^"]*product-(?:original-)?price-class[^"]*"[^>]*>/gi,
-    (l) => l.replace(/width="50%"/gi, 'width="100%"').replace(/width:\s*50%;/gi, "width: 100%;")
-  ) : r ? e : e.replace(
-    /<td\s+[^>]*class="[^"]*horizontal-price[^"]*"[^>]*>/gi,
-    (l) => /style\s*=\s*"/i.test(l) ? l.replace(/style\s*=\s*"([^"]*)"/i, 'style="display: none; $1"') : l.replace(/>$/, ' style="display: none;">')
-  ).replace(
-    /<td\s+[^>]*class="[^"]*vertical-price[^"]*"[^>]*>/gi,
-    (l) => l.replace(/display:\s*none;?/gi, "display: table-cell;")
-  );
-}, J = (e) => e ? `<td align="center"
-            esd-extension-block-id="items-block" width="560"
-            data-number="4"
-            class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : v, g = (e, t, n, a, r, l, o, d, s, T, i, E, u, p = "horizontal", O, _, I) => {
-  const x = `${`data-type="${t}" data-number="${n}"`} data-orientation="${a}"`, L = e.replace(
+}, b = () => `
+    <${l.BLOCK_TEXT} 
+        width="100%" 
+        align="center"
+        class="es-p10" 
+        esd-extension-block-id="${T.QUANTITY}"
+    >
+        <p
+            product-attr="quantity"
+            data-slot-3
+            contenteditable="false"
+            width="100%">
+            ${u}
+        </p>
+    </${l.BLOCK_TEXT}>
+`, U = (a, t) => `
+    <${l.BLOCK_BUTTON} 
+        width="100%"
+        class="ins-button" 
+        name="buy-button" 
+        caption="Buy" 
+        align="center"
+        esd-extension-block-id="${T.BUTTON}"
+        product-attr="button"
+        data-slot-6
+        data-type="${a}"
+        data-number="${t}"
+    >Buy
+    </${l.BLOCK_BUTTON}>
+`, D = () => `
+    <esd-config-block style="display: none;"></esd-config-block>
+`, R = (a, t, o, e, c, n, r, d) => {
+  const $ = `${`data-type="${t}" data-number="${o}"`} data-orientation="${e}"`;
+  return a.replace(
     /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
-    `<td$1 ${x}>`
-  ), F = s == null ? void 0 : s["data-product_image_control_image-width"], C = l ? G(t, n, F) : Q(t, n), M = (i == null ? void 0 : i.buttonLabel) || "Buy", U = (i == null ? void 0 : i.quantityControlEnabled) !== void 0 ? i.quantityControlEnabled : !0, D = (i == null ? void 0 : i.originalPriceVisible) !== void 0 ? i.originalPriceVisible : (s == null ? void 0 : s["data-product_original_price_control_enabled"]) !== "false", B = L.replace("{-{-TEMPLATE_FIRST_LINE-}-}", J(l)).replace("{-{-PRODUCT_IMAGE-}-}", C).replace("{-{-PRODUCT_NAME-}-}", W(t, l, a, E)).replaceAll(
+    `<td$1 ${$}>`
+  ).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", h(t, o)).replace("{-{-PRODUCT_NAME-}-}", F(t)).replaceAll(
     "{-{-PRODUCT_PRICE-}-}",
-    q(t, n, r, o, d, l, O)
+    S(t, o, c, n, r)
   ).replaceAll(
     "{-{-PRODUCT_ORIGINAL_PRICE-}-}",
-    V(
+    L(
       t,
-      n,
-      r,
       o,
-      d,
-      l,
-      D,
-      _
+      c,
+      n,
+      r
     )
-  ).replace("{-{-PRODUCT_QUANTITY-}-}", H(U, l, I)).replace("{-{-PRODUCT_BUTTON-}-}", j(t, n, M, l, u)).replace("{-{-CONFIG_BLOCK-}-}", Y(s));
-  return Z(B, a, p);
+  ).replace("{-{-PRODUCT_QUANTITY-}-}", b()).replace("{-{-PRODUCT_BUTTON-}-}", U(t, o)).replace("{-{-CONFIG_BLOCK-}-}", D());
 };
-function st({
-  orientation: e,
-  itemsType: t = y.ITEMS_TYPE.CART_ITEMS,
-  itemId: n,
-  currencySymbol: a,
-  currencyLocation: r,
-  migrate: l = !1,
-  formattedPrice: o = !0,
-  configBlockAttributes: d,
-  nodeConfig: s,
-  nameStyles: T,
-  buttonStyles: i,
-  priceStyles: E,
-  originalPriceStyles: u,
-  quantityStyles: p,
-  priceOrientation: O
+function G({
+  orientation: a,
+  itemsType: t = O.ITEMS_TYPE.CART_ITEMS,
+  itemId: o,
+  currencySymbol: e,
+  currencyLocation: c,
+  formattedPrice: n = !0
 }) {
-  const _ = X[t].findIndex((h) => h.value === n);
-  let I = "1";
-  if (_ >= 0)
-    I = String(_ + 1);
-  else if (n) {
-    const h = n.match(/\((\d+)\)/);
-    h && h[1] && ([, I] = h);
+  const r = f[t].findIndex((s) => s.value === o);
+  let d = "1";
+  if (r >= 0)
+    d = String(r + 1);
+  else if (o) {
+    const s = o.match(/\((\d+)\)/);
+    s && s[1] && ([, d] = s);
   }
-  N = c.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[_ >= 0 ? _ : 0], A = c.PAIRS_FOR_EXTENSION.name[t].DEFAULT[_ >= 0 ? _ : 0], f = o ? c.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : c.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, k = o ? c.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : c.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, m = c.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT;
-  const w = O || (s == null ? void 0 : s.priceOrientation) || "horizontal";
-  return e === y.ORIENTATION.VERTICAL ? g(
-    z,
+  return C = i.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[r >= 0 ? r : 0], A = i.PAIRS_FOR_EXTENSION.name[t].DEFAULT[r >= 0 ? r : 0], p = n ? i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, I = n ? i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, u = i.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, a === O.ORIENTATION.VERTICAL ? R(
+    g,
     t,
-    I,
-    e,
-    o,
-    l,
-    a,
-    r,
     d,
-    void 0,
-    // nodup
-    s,
-    T,
-    i,
-    w,
-    E,
-    u,
-    p
-  ) : g(
-    K,
-    t,
-    I,
-    e,
-    o,
-    l,
     a,
-    r,
+    n,
+    e,
+    c
+  ) : R(
+    B,
+    t,
     d,
-    void 0,
-    // nodup
-    s,
-    T,
-    i,
-    w,
-    E,
-    u,
-    p
+    a,
+    n,
+    e,
+    c
   );
 }
 export {
-  st as getDefaultTemplate
+  G as getDefaultTemplate
 };

package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js

@@ -1,6 +1,6 @@
 import { useItemsBlockStore as e } from "../store/items-block.js";
 import { syncAttributeFromConfigBlock as r, createBooleanSyncConfig as i, createStringSyncConfig as s } from "./syncAttributeFromConfigBlock.js";
-function C(t) {
+function m(t) {
   const o = e(), n = i(
     "PRODUCT_NAME_TRIMMING",
     (c) => o.setNameTrimming(c),
@@ -12,7 +12,7 @@ function f(t) {
   const o = e(), n = i(
     "PRODUCT_PRICE_HIDE_DISCOUNT",
     (c) => o.setHideDiscount(c),
-    !0
+    !1
   );
   r(t, n);
 }
@@ -24,7 +24,7 @@ function R(t) {
   );
   r(t, n);
 }
-function _(t) {
+function O(t) {
   const o = e(), n = s(
     "PRODUCT_PRICE_CURRENCY_SYMBOL",
     (c) => o.setCurrencySymbol(c),
@@ -32,7 +32,7 @@ function _(t) {
   );
   r(t, n);
 }
-function y(t) {
+function _(t) {
   const o = e(), n = s(
     "PRODUCT_PRICE_CURRENCY_LOCATION",
     (c) => o.setCurrencyLocation(c),
@@ -40,7 +40,7 @@ function y(t) {
   );
   r(t, n);
 }
-function T(t) {
+function I(t) {
   const o = e(), n = s(
     "PRODUCT_BUTTON_LINK",
     (c) => o.setButtonLink(c),
@@ -48,7 +48,7 @@ function T(t) {
   );
   r(t, n);
 }
-function g(t) {
+function T(t) {
   const o = e(), n = s(
     "PRODUCT_IMAGE_LINK",
     (c) => o.setImageLink(c),
@@ -56,12 +56,21 @@ function g(t) {
   );
   r(t, n);
 }
+function y(t) {
+  const o = e(), n = s(
+    "PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION",
+    (c) => o.setPriceOrientation(c),
+    "horizontal"
+  );
+  r(t, n);
+}
 export {
-  T as syncButtonLinkFromAttributes,
-  y as syncCurrencyLocationFromAttributes,
-  _ as syncCurrencySymbolFromAttributes,
+  I as syncButtonLinkFromAttributes,
+  _ as syncCurrencyLocationFromAttributes,
+  O as syncCurrencySymbolFromAttributes,
   R as syncFormattedPriceFromAttributes,
   f as syncHideDiscountFromAttributes,
-  g as syncImageLinkFromAttributes,
-  C as syncNameTrimmingFromAttributes
+  T as syncImageLinkFromAttributes,
+  m as syncNameTrimmingFromAttributes,
+  y as syncPriceOrientationFromAttributes
 };

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

@@ -289,7 +289,7 @@ class b extends g {
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
       this.api.onValueChanged(i, (a) => this._onCurrencyConfigChange(i, a));
-    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, String(i))), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
+    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {