@useinsider/guido 3.0.0-beta.7d3a300 → 3.0.0-beta.952fc1f

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

@@ -1,43 +1,49 @@
-var g = Object.defineProperty;
-var C = (d, c, t) => c in d ? g(d, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[c] = t;
-var i = (d, c, t) => C(d, typeof c != "symbol" ? c + "" : c, t);
-import { CommonControl as p } from "../../../common-control.js";
+var f = Object.defineProperty;
+var p = (d, l, t) => l in d ? f(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
+var s = (d, l, t) => p(d, typeof l != "symbol" ? l + "" : l, t);
+import { CommonControl as g } from "../../../common-control.js";
 import { DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
-import { RecommendationConfigService as m } from "../../services/configService.js";
+import { RecommendationConfigService as h } from "../../services/configService.js";
 import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
 import { AlgorithmControl as R } from "./algorithm.js";
-import { ALGORITHM_CONTROL_ID as H } from "./algorithm.js";
+import { ALGORITHM_CONTROL_ID as J } from "./algorithm.js";
 import { CurrencyControl as N } from "./currency.js";
-import { CURRENCY_CONTROL_ID as K } from "./currency.js";
-import { FiltersControl as b } from "./filters.js";
-import { FILTERS_CONTROL_ID as J } from "./filters.js";
-import { LocaleControl as _ } from "./locale.js";
-import { LOCALE_CONTROL_ID as X } from "./locale.js";
-import { ProductLayoutControl as I } from "./productLayout.js";
-import { PRODUCT_LAYOUT_CONTROL_ID as tt } from "./productLayout.js";
+import { CURRENCY_CONTROL_ID as X } from "./currency.js";
+import { FiltersControl as _ } from "./filters.js";
+import { FILTERS_CONTROL_ID as tt } from "./filters.js";
+import { LayoutOrientationControl as b } from "./layoutOrientation.js";
+import { LAYOUT_ORIENTATION_CONTROL_ID as ot } from "./layoutOrientation.js";
+import { LocaleControl as O } from "./locale.js";
+import { LOCALE_CONTROL_ID as nt } from "./locale.js";
+import { ProductCountControl as I } from "./productCount.js";
+import { PRODUCT_COUNT_CONTROL_ID as st } from "./productCount.js";
+import { ProductLayoutControl as T } from "./productLayout.js";
+import { PRODUCT_LAYOUT_CONTROL_ID as lt } from "./productLayout.js";
 import { ShuffleControl as S } from "./shuffle.js";
-import { SHUFFLE_CONTROL_ID as ot } from "./shuffle.js";
-import { getBlockElement as P, updateProductContentInPlace as T, regenerateProductRowsWithStyles as L } from "./utils.js";
-import { adjustProductsToSize as nt, formatProductPrice as st, getCardComposition as it, getCurrentLayout as at, reapplySpacing as ct, regenerateMobileProductRows as lt, regenerateProductRows as ut, setCurrencyAttributes as dt, updatePricesInPlace as mt, updateSingleProductContent as ht } from "./utils.js";
-import { useDebounceFn as h } from "../../../../../node_modules/@vueuse/shared/index.js";
-const k = "recommendation-id", D = "ui-elements-recommendation-block";
-class W extends p {
+import { SHUFFLE_CONTROL_ID as ut } from "./shuffle.js";
+import { getBlockElement as L, updateProductContentInPlace as P, regenerateProductRowsWithStyles as D } from "./utils.js";
+import { adjustProductsToSize as ht, formatProductPrice as mt, getCardComposition as Ct, getCurrentLayout as ft, reapplySpacing as pt, regenerateMobileProductRows as gt, regenerateProductRows as yt, setCurrencyAttributes as Rt, updatePricesInPlace as Nt, updateSingleProductContent as _t } from "./utils.js";
+import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
+const k = "recommendation-id", E = "ui-elements-recommendation-block";
+class H extends g {
   constructor() {
     super(...arguments);
-    i(this, "store", y());
-    i(this, "storeUnsubscription", () => {
+    s(this, "store", y());
+    s(this, "storeUnsubscription", () => {
     });
     // Sub-control instances for lifecycle management
-    i(this, "algorithmControl", null);
-    i(this, "localeControl", null);
-    i(this, "currencyControl", null);
-    i(this, "productLayoutControl", null);
-    i(this, "filtersControl", null);
-    i(this, "shuffleControl", null);
+    s(this, "algorithmControl", null);
+    s(this, "localeControl", null);
+    s(this, "currencyControl", null);
+    s(this, "productCountControl", null);
+    s(this, "productLayoutControl", null);
+    s(this, "filtersControl", null);
+    s(this, "shuffleControl", null);
+    s(this, "layoutOrientationControl", null);
     /**
      * Debounced product fetch to prevent rapid API calls during config changes
      */
-    i(this, "_debouncedFetchProducts", h(() => {
+    s(this, "_debouncedFetchProducts", m(() => {
       this.store.fetchRecommendationProducts();
     }, 500));
     /**
@@ -51,16 +57,16 @@ class W extends p {
      * count. The store pads products to the configured size, so in-place only
      * fails when the size actually changed.
      */
-    i(this, "_debouncedRegenerateWithProducts", h(() => {
+    s(this, "_debouncedRegenerateWithProducts", m(() => {
       const t = this.store.recommendationProducts;
       if (!this.currentNode || !this.api)
         return;
       const e = this.api.getDocumentModifier();
-      T({
+      P({
         currentNode: this.currentNode,
         documentModifier: e,
         products: t
-      }) || L({
+      }) || D({
         currentNode: this.currentNode,
         documentModifier: e,
         products: t
@@ -68,16 +74,29 @@ class W extends p {
     }, 100));
   }
   getId() {
-    return D;
+    return E;
   }
   getTemplate() {
-    return this.algorithmControl = new R(), this.localeControl = new _(), this.currencyControl = new N(), this.productLayoutControl = new I(), this.filtersControl = new b(), this.shuffleControl = new S(), `
+    return this.algorithmControl = new R(), this.localeControl = new O(), this.currencyControl = new N(), this.productCountControl = new I(), this.productLayoutControl = new T(), this.filtersControl = new _(), this.shuffleControl = new S(), this.layoutOrientationControl = new b(), [
+      this.algorithmControl,
+      this.localeControl,
+      this.currencyControl,
+      this.productCountControl,
+      this.productLayoutControl,
+      this.filtersControl,
+      this.shuffleControl,
+      this.layoutOrientationControl
+    ].forEach((e) => {
+      e.api = this.api;
+    }), `
             <div class="recommendation-controls-container">
+                ${this.layoutOrientationControl.getTemplate()}
+                ${this.productCountControl.getTemplate()}
+                ${this.productLayoutControl.getTemplate()}
                 ${this.algorithmControl.getTemplate()}
                 ${this.localeControl.getTemplate()}
                 ${this.currencyControl.getTemplate()}
                 ${this.filtersControl.getTemplate()}
-                ${this.productLayoutControl.getTemplate()}
                 ${this.shuffleControl.getTemplate()}
             </div>
         `;
@@ -96,6 +115,8 @@ class W extends p {
     super.onTemplateNodeUpdated(t);
     const e = this._getRecommendationIdFromNode(t);
     e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), this._syncNodeConfigToStore(), e !== null && !((r = this.store.blockStates[e]) != null && r.isInitialized) && this._fetchBlockData(e), [
+      this.layoutOrientationControl,
+      this.productCountControl,
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
@@ -103,12 +124,14 @@ class W extends p {
       this.filtersControl,
       this.shuffleControl
     ].forEach((n) => {
-      var s;
-      n != null && n.api && (n.currentNode = t, (s = n.onTemplateNodeUpdated) == null || s.call(n, t));
+      var i;
+      n != null && n.api && (n.currentNode = t, (i = n.onTemplateNodeUpdated) == null || i.call(n, t));
     });
   }
   onDestroy() {
     this.storeUnsubscription(), [
+      this.layoutOrientationControl,
+      this.productCountControl,
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
@@ -126,6 +149,8 @@ class W extends p {
    */
   _initializeSubControls() {
     [
+      this.layoutOrientationControl,
+      this.productCountControl,
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
@@ -150,7 +175,7 @@ class W extends p {
    */
   _syncNodeConfigToStore() {
     var r;
-    const t = m.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
+    const t = h.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
     this.store.patchCurrentBlockConfig({
       strategy: t.strategy,
       language: t.language,
@@ -207,31 +232,31 @@ class W extends p {
   _applySmartDefaults() {
     if (!this.currentNode || !this.api)
       return;
-    const t = m.getConfig(this.currentNode), e = {};
+    const t = h.getConfig(this.currentNode), e = {};
     let o = null, r = null, n = null;
     if (t.currency.code === a.currency.code) {
-      const { currencyList: s } = this.store;
-      s.length > 0 && (s.some(
+      const { currencyList: i } = this.store;
+      i.length > 0 && (i.some(
         (u) => u.value === `price.${a.currency.code}`
-      ) || (o = s[0].value.replace("price.", ""), e.currency = {
+      ) || (o = i[0].value.replace("price.", ""), e.currency = {
         ...a.currency,
         code: o,
         symbol: o
       }));
     }
     if (t.strategy === a.strategy) {
-      const s = this.store.getActivePredictiveAlgorithms;
-      s.length > 0 && (s.some(
+      const i = this.store.getActivePredictiveAlgorithms;
+      i.length > 0 && (i.some(
         (u) => u.value === a.strategy
-      ) || (r = s[0].value, e.strategy = r));
+      ) || (r = i[0].value, e.strategy = r));
     }
     if (t.language === a.language) {
-      const s = this.store.getLanguages;
-      s.length > 0 && (s.some(
+      const i = this.store.getLanguages;
+      i.length > 0 && (i.some(
         (u) => u.value === a.language
-      ) || (n = s[0].value, e.language = n));
+      ) || (n = i[0].value, e.language = n));
     }
-    !o && !r && !n || (m.updateConfig(
+    !o && !r && !n || (h.updateConfig(
       this.api,
       this.currentNode,
       e,
@@ -256,7 +281,7 @@ class W extends p {
    * Reads the recommendation-id attribute from the block element within the node
    */
   _getRecommendationIdFromNode(t) {
-    const e = P(t);
+    const e = L(t);
     if (!e || !("getAttribute" in e))
       return null;
     const o = e.getAttribute(k);
@@ -287,10 +312,10 @@ class W extends p {
         r = n, e = t.recommendationProducts, o = t.$state.configVersion;
         return;
       }
-      const s = t.$state.configVersion;
-      s !== o && (o = s, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
-      const l = t.recommendationProducts, u = l !== e, f = Array.isArray(l) && l.length > 0;
-      u && f && (e = l, this._debouncedRegenerateWithProducts());
+      const i = t.$state.configVersion;
+      i !== o && (o = i, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
+      const c = t.recommendationProducts, u = c !== e, C = Array.isArray(c) && c.length > 0;
+      u && C && (e = c, this._debouncedRegenerateWithProducts());
     });
   }
   /**
@@ -301,7 +326,7 @@ class W extends p {
     if (!this.currentNode || !this.api)
       return;
     const { filters: t } = this.store.recommendationConfigs;
-    m.updateConfig(
+    h.updateConfig(
       this.api,
       this.currentNode,
       { filters: t },
@@ -310,31 +335,35 @@ class W extends p {
   }
 }
 export {
-  H as ALGORITHM_CONTROL_ID,
+  J as ALGORITHM_CONTROL_ID,
   R as AlgorithmControl,
-  D as CONTROL_BLOCK_ID,
-  K as CURRENCY_CONTROL_ID,
+  E as CONTROL_BLOCK_ID,
+  X as CURRENCY_CONTROL_ID,
   N as CurrencyControl,
-  J as FILTERS_CONTROL_ID,
-  b as FiltersControl,
-  X as LOCALE_CONTROL_ID,
-  _ as LocaleControl,
-  tt as PRODUCT_LAYOUT_CONTROL_ID,
-  I as ProductLayoutControl,
-  W as RecommendationBlockControl,
-  ot as SHUFFLE_CONTROL_ID,
+  tt as FILTERS_CONTROL_ID,
+  _ as FiltersControl,
+  ot as LAYOUT_ORIENTATION_CONTROL_ID,
+  nt as LOCALE_CONTROL_ID,
+  b as LayoutOrientationControl,
+  O as LocaleControl,
+  st as PRODUCT_COUNT_CONTROL_ID,
+  lt as PRODUCT_LAYOUT_CONTROL_ID,
+  I as ProductCountControl,
+  T as ProductLayoutControl,
+  H as RecommendationBlockControl,
+  ut as SHUFFLE_CONTROL_ID,
   S as ShuffleControl,
-  nt as adjustProductsToSize,
-  st as formatProductPrice,
-  P as getBlockElement,
-  it as getCardComposition,
-  at as getCurrentLayout,
-  ct as reapplySpacing,
-  lt as regenerateMobileProductRows,
-  ut as regenerateProductRows,
-  L as regenerateProductRowsWithStyles,
-  dt as setCurrencyAttributes,
-  mt as updatePricesInPlace,
-  T as updateProductContentInPlace,
-  ht as updateSingleProductContent
+  ht as adjustProductsToSize,
+  mt as formatProductPrice,
+  L as getBlockElement,
+  Ct as getCardComposition,
+  ft as getCurrentLayout,
+  pt as reapplySpacing,
+  gt as regenerateMobileProductRows,
+  yt as regenerateProductRows,
+  D as regenerateProductRowsWithStyles,
+  Rt as setCurrencyAttributes,
+  Nt as updatePricesInPlace,
+  P as updateProductContentInPlace,
+  _t as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/controls/{layout/index.js → main/layoutOrientation.js}

@@ -1,53 +1,61 @@
-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";
+var O = Object.defineProperty;
+var p = (o, e, t) => e in o ? O(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var r = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
+import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../../common-control.js";
+import { ATTR_DATA_CUSTOM_ATTRIBUTES as L } from "../../constants/selectors.js";
+import { LAYOUT_OPTIONS as T, 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";
+import { DEFAULT_COMPOSITION as _ } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as s } from "../../services/configService.js";
-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 = {
+import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
+import { getCurrentLayout as C, getBlockElement as I, regenerateProductRowsWithStyles as S } from "./utils.js";
+const U = "recommendation-layout-orientation-control", A = "recommendationInfoBannerTest", a = {
   LAYOUT: "layout"
-}, U = "data-card-composition", n = {
+}, y = "data-card-composition", i = {
   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 w extends O {
+class Y extends N {
   constructor() {
     super(...arguments);
-    r(this, "store", N());
+    r(this, "store", f());
     r(this, "isChangingLayout", !1);
   }
   getId() {
-    return I;
+    return U;
   }
   getTemplate() {
     return `
             <div class="layout-control-container">
+                ${this._GuOnPageMessage({ name: A })}
+
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Layout Orientation" }),
+      this._GuLabel({ text: this.api.translate("Layout Orientation") }),
       this._GuRadioButton({
         name: a.LAYOUT,
-        buttons: h
+        buttons: T
       })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._listenToFormUpdates();
+    this._setInfoMessageValue(
+      A,
+      this.api.translate(
+        `Note that updating the Layout Orientation, Number of Products and
+                Products in One Row settings resets the style of your Recommendation block.`
+      )
+    ), this._setFormValues(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const u = s.getConfig(this.currentNode).layout || _(this.currentNode);
+    const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
     this.api.updateValues({
       [a.LAYOUT]: u
     });
@@ -57,9 +65,9 @@ class w extends O {
    * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || _(this.currentNode)) === t)
+    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
       return;
-    const c = f(this.currentNode);
+    const c = I(this.currentNode);
     if (c) {
       this.isChangingLayout = !0;
       try {
@@ -68,15 +76,15 @@ class w extends O {
           this.currentNode,
           {
             layout: t,
-            columnSpacing: C,
+            columnSpacing: g,
             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, 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);
+        const n = this.api.getDocumentModifier().modifyHtml(c).setAttribute(i.LAYOUT, t).setAttribute(i.COLUMN_SPACING, g.toString()).setAttribute(i.ROW_SPACING, l.toString()).setAttribute(i.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(i.MOBILE_ROW_SPACING, m.toString());
+        t === "list" ? (n.setClass("es-m-p0"), n.setClass("ins-recommendation-list-layout")) : (n.removeClass("es-m-p0"), n.removeClass("ins-recommendation-list-layout")), n.setAttribute(y, _.join(",")).setAttribute(L, "[]"), n.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -92,7 +100,7 @@ class w extends O {
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       layout: t,
-      composition: g
+      composition: _
     });
   }
   _listenToFormUpdates() {
@@ -102,6 +110,6 @@ class w extends O {
   }
 }
 export {
-  I as LAYOUT_CONTROL_ID,
-  w as LayoutControl
+  U as LAYOUT_ORIENTATION_CONTROL_ID,
+  Y as LayoutOrientationControl
 };

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

@@ -21,10 +21,10 @@ class E extends c {
     return `
             <div class="locale-control-container">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Recommendation Locale" }),
+      this._GuLabel({ text: this.api.translate("Recommendation Locale") }),
       this._GuSelect({
         name: n.LOCALE,
-        placeholder: "Select Recommendation Locale",
+        placeholder: this.api.translate("Select Recommendation Locale"),
         options: this.store.getLanguages
       })
     ])}

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

@@ -0,0 +1,58 @@
+var s = Object.defineProperty;
+var u = (e, o, t) => o in e ? s(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var i = (e, o, t) => u(e, typeof o != "symbol" ? o + "" : o, t);
+import { CommonControl as a } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
+import { RecommendationConfigService as n } from "../../services/configService.js";
+import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
+const C = "recommendation-product-count-control", r = {
+  PRODUCT_COUNT: "size"
+};
+class g extends a {
+  constructor() {
+    super(...arguments);
+    i(this, "store", d());
+  }
+  getId() {
+    return C;
+  }
+  getTemplate() {
+    return `
+            <div class="product-count-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate("Number of Products") }),
+      this._GuCounter({ name: r.PRODUCT_COUNT, maxValue: c })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = n.getConfig(this.currentNode);
+    this.api.updateValues({
+      [r.PRODUCT_COUNT]: t.size
+    });
+  }
+  _onProductCountChange(t) {
+    !this.currentNode || n.getConfig(this.currentNode).size === t || (n.updateConfig(
+      this.api,
+      this.currentNode,
+      { size: t },
+      `Changed product count to ${t}`
+    ), this.store.patchCurrentBlockConfig({ size: t }));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(r.PRODUCT_COUNT, (t) => {
+      this._onProductCountChange(t.toString());
+    });
+  }
+}
+export {
+  C as PRODUCT_COUNT_CONTROL_ID,
+  g as ProductCountControl
+};