@useinsider/guido 1.0.2 → 1.0.3-beta.001f60f

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

@@ -0,0 +1,149 @@
+import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const e = {
+  TITLE: "This is a title text",
+  DESCRIPTION: "This is a description text",
+  YES: "Yes",
+  NO: "No"
+}, d = `
+    <td align="left" class="radio-button-v2 esd-block-radio es-p10t es-p10b es-p30r es-p30l">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <tr>
+                    <td align="left" width="70%" style="vertical-align: top;">
+                        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-TITLE-}-}
+                                </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-DESCRIPTION-}-}
+                                </${t.BLOCK_TEXT}>
+                            </tbody>
+                        </table>
+                    </td>
+                    <td align="right" width="30%" style="vertical-align: middle;">
+                        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                                <tr>
+                                    <td width="50%">
+                                        <table width="100%">
+                                            <tr>
+                                                <td width="24">
+                                                    <input
+                                                        type="radio"
+                                                        id="radioYes"
+                                                        name="unsubscribe"
+                                                        data-cke-editable="1"
+                                                        style="margin: 0px; vertical-align: middle;">
+                                                </td>
+                                                <td style="padding-right: 15px;">
+                                                    <table width="100%">
+                                                        <${t.BLOCK_TEXT}>
+                                                            {-{-YES-}-}
+                                                        </${t.BLOCK_TEXT}>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                    <td width="50%">
+                                        <table width="100%">
+                                            <tr>
+                                                <td width="24">
+                                                    <input
+                                                        type="radio"
+                                                        id="radioNo"
+                                                        name="unsubscribe"
+                                                        data-cke-editable="1"
+                                                        style="margin: 0px; vertical-align: middle;">
+                                                </td>
+                                                <td style="padding-right: 15px;">
+                                                    <table width="100%">
+                                                        <${t.BLOCK_TEXT}>
+                                                            {-{-NO-}-}
+                                                        </${t.BLOCK_TEXT}>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </td>
+`, l = `
+    <td 
+        align="left" 
+        esd-extension-block-id="radio-button-block" 
+        esd-handler-name="esd-extension-RadioButtonBlock"
+        class="radio-button-v2 esd-block-ra esd-radio-button-block esd-extension-block es-p10t es-p10b es-p30r es-p30l"
+    >
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <tr>
+                    <td align="left" width="70%" style="vertical-align: top;">
+                        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                                <tr>
+                                    {-{-TITLE-}-}
+                                </tr>
+                                <tr>
+                                    {-{-DESCRIPTION-}-}
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                    <td align="right" width="30%" style="vertical-align: middle;">
+                        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                                <tr>
+                                    <td width="50%">
+                                        <table width="100%">
+                                            <tr>
+                                                <td width="24">
+                                                    <input
+                                                        type="radio"
+                                                        id="radioYes"
+                                                        name="unsubscribe"
+                                                        data-cke-editable="1"
+                                                        style="margin: 0px; vertical-align: middle;>
+                                                    </td>
+                                                {-{-YES-}-}
+                                            </tr>
+                                        </table>
+                                    </td>
+                                    <td width="50%">
+                                        <table width="100%">
+                                            <tr>
+                                                <td width="24">
+                                                    <input
+                                                        type="radio"
+                                                        id="radioNo"
+                                                        name="unsubscribe"
+                                                        data-cke-editable="1"
+                                                        style="margin: 0px; vertical-align: middle;">
+                                                </td>
+                                                {-{-NO-}-}
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </td>
+`;
+function a() {
+  return d.replace("{-{-TITLE-}-}", `<p path="1">${e.TITLE}</p>`).replace("{-{-DESCRIPTION-}-}", `<p path="1">${e.DESCRIPTION}</p>`).replace("{-{-YES-}-}", `<p path="1">${e.YES}</p>`).replace("{-{-NO-}-}", `<p path="1">${e.NO}</p>`);
+}
+export {
+  l as default,
+  a as getDefaultTemplate
+};

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

@@ -0,0 +1,27 @@
+import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as o } from "./template.js";
+const n = "recommendation-block";
+class c extends e {
+  getId() {
+    return n;
+  }
+  getIcon() {
+    return "recommendation-icon";
+  }
+  getBlockCompositionType() {
+    return t.CONTAINER;
+  }
+  getName() {
+    return this.api.translate("Recommendation Block");
+  }
+  getDescription() {
+    return this.api.translate("Recommendation Block Title Description");
+  }
+  getTemplate() {
+    return o();
+  }
+}
+export {
+  n as BLOCK_ID,
+  c as RecommendationBlock
+};

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

@@ -0,0 +1,277 @@
+var _ = Object.defineProperty;
+var R = (o, n, e) => n in o ? _(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var r = (o, n, e) => R(o, typeof n != "symbol" ? n + "" : n, e);
+import { currencyDecimalCounts as c, currencyOperators as a, currencyLocationMaps as l } from "../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as d } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../common-control.js";
+import { useRecommendationExtensionStore as S } from "./store/recommendation.js";
+const g = "ui-elements-recommendation-block", t = {
+  ALGORITHM: "strategy",
+  PRODUCT_IDS: "productIds",
+  LOCALE: "language",
+  CURRENCY: "value",
+  CURRENCY_LOCATION: "alignment",
+  CURRENCY_SYMBOL: "symbol",
+  CURRENCY_THOUSAND_SEPARATOR: "thousandSeparator",
+  CURRENCY_DECIMAL_SEPARATOR: "decimalSeparator",
+  CURRENCY_DECIMAL_COUNT: "decimalCount",
+  FILTERS: "filterStatus",
+  PRODUCT_COUNT: "size",
+  PRODUCT_IN_ROW: "cardsInRow",
+  SHUFFLE_PRODUCTS: "shuffleProducts",
+  RESPONSIVE: "unresponsive"
+};
+class p extends m {
+  constructor() {
+    super(...arguments);
+    r(this, "store", S());
+    r(this, "storeUnsubscription", () => {
+    });
+    r(this, "addFilterListener", () => {
+    });
+    r(this, "addFilterButton", null);
+  }
+  getId() {
+    return g;
+  }
+  getTemplate() {
+    return `
+            <div class="recommendation-controls-container">
+                ${this._getAlgorithms()}
+                ${this._getLanguages()}
+                ${this._getCurrency()}
+                ${this._getFilterStatus()}
+                ${this._getProductLayout()}
+                ${this._getShuffleProducts()}
+                ${this._getResponsive()}
+            </div>
+        `;
+  }
+  async onRender() {
+    await Promise.all([
+      this.store.fetchRecommendationFilters(),
+      this.store.fetchRecommendationCreateData(),
+      this.store.fetchRecommendationProducts()
+      // TODO: We need to change the location. It's just for testing
+    ]), this._listenStateUpdates(), this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates();
+  }
+  onDestroy() {
+    var e;
+    (e = this.addFilterButton) == null || e.removeEventListener("click", this.addFilterListener), this.storeUnsubscription();
+  }
+  _setFormValues() {
+    const e = this.store.recommendationConfigs;
+    this._setProductIdsVisibility(), this.api.updateValues({
+      [t.ALGORITHM]: e.strategy,
+      [t.PRODUCT_IDS]: e.productIds.join(","),
+      [t.CURRENCY]: e.currencySettings.value,
+      [t.LOCALE]: e.language,
+      [t.CURRENCY_LOCATION]: e.currencySettings.alignment,
+      [t.CURRENCY_SYMBOL]: e.currencySettings.symbol,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: e.currencySettings.thousandSeparator,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: e.currencySettings.decimalSeparator,
+      [t.CURRENCY_DECIMAL_COUNT]: e.currencySettings.decimalCount,
+      [t.PRODUCT_COUNT]: e.size,
+      [t.PRODUCT_IN_ROW]: e.cardsInRow,
+      [t.SHUFFLE_PRODUCTS]: e.shuffleProducts,
+      [t.RESPONSIVE]: !e.unresponsive
+    });
+  }
+  _initializeSelectItems() {
+    const { store: e } = this, s = e.getActivePredictiveAlgorithms, i = e.getLanguages, C = {
+      [t.ALGORITHM]: s,
+      [t.LOCALE]: i,
+      [t.CURRENCY]: e.currencyList,
+      [t.CURRENCY_LOCATION]: l,
+      [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_COUNT]: c,
+      [t.PRODUCT_COUNT]: Number(e.recommendationConfigs.size),
+      [t.PRODUCT_IN_ROW]: e.recommendationConfigs.cardsInRow,
+      [t.SHUFFLE_PRODUCTS]: e.recommendationConfigs.shuffleProducts,
+      [t.RESPONSIVE]: !e.recommendationConfigs.unresponsive
+    };
+    Object.entries(C).forEach(([u, h]) => {
+      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
+    });
+  }
+  _getAlgorithms() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Recommendation Algorithm" }),
+      this._GuSelect({
+        name: t.ALGORITHM,
+        placeholder: "Select Recommendation Algorithm",
+        options: this.store.getActivePredictiveAlgorithms
+      }),
+      this._GuLabel({ text: "Product Ids", name: `${t.PRODUCT_IDS}_label` }),
+      this._GuTextInput({
+        name: t.PRODUCT_IDS,
+        placeholder: "Enter Product Ids",
+        className: "es-180w"
+      })
+    ])}
+        `;
+  }
+  _getLanguages() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Recommendation Locale" }),
+      this._GuSelect({
+        name: t.LOCALE,
+        placeholder: "Select Recommendation Locale",
+        options: this.store.getLanguages
+      })
+    ])}
+        `;
+  }
+  _getCurrency() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Currency" }),
+      this._GuSelect({
+        name: t.CURRENCY,
+        placeholder: "Select Currency",
+        options: this.store.currencyList
+      }),
+      this._GuLabel({ text: "Currency Location" }),
+      this._GuSelect({
+        name: t.CURRENCY_LOCATION,
+        placeholder: "Select Currency Location",
+        options: l
+      }),
+      this._GuLabel({ text: "Currency Symbol" }),
+      this._GuSelect({
+        name: t.CURRENCY_SYMBOL,
+        placeholder: "Select Currency Symbol",
+        options: this.store.getCurrencySymbolList
+      }),
+      this._GuLabel({ text: "Thousand Separator" }),
+      this._GuSelect({
+        name: t.CURRENCY_THOUSAND_SEPARATOR,
+        placeholder: "Select Thousand Separator",
+        options: a
+      }),
+      this._GuLabel({ text: "Decimal Separator" }),
+      this._GuSelect({
+        name: t.CURRENCY_DECIMAL_SEPARATOR,
+        placeholder: "Select Decimal Separator",
+        options: a
+      }),
+      this._GuLabel({ text: "Decimal Count" }),
+      this._GuSelect({
+        name: t.CURRENCY_DECIMAL_COUNT,
+        placeholder: "Select Decimal Count",
+        options: c
+      })
+    ])}
+        `;
+  }
+  _getProductLayout() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Number of Products" }),
+      this._GuCounter({ name: t.PRODUCT_COUNT, maxValue: 9 }),
+      this._GuLabel({ text: "Products in One Row" }),
+      this._GuCounter({ name: t.PRODUCT_IN_ROW, maxValue: 4 })
+    ])}
+        `;
+  }
+  _getFilterStatus() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Filters" }),
+      this._GuButton({
+        name: t.FILTERS,
+        label: "Add Filter",
+        id: "guido__btn-add-filter"
+      })
+    ])}
+        `;
+  }
+  _getShuffleProducts() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Shuffle Recommended Products" }),
+      this._GuToggle(t.SHUFFLE_PRODUCTS)
+    ])}
+        `;
+  }
+  _getResponsive() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Responsive Block" }),
+      this._GuToggle(t.RESPONSIVE)
+    ])}
+        `;
+  }
+  _onFilterChange(e) {
+    this.currentNode && this.store.$patch({
+      filterStatus: e,
+      filterSelectionDrawerStatus: e
+    });
+  }
+  _onFilterSelectClick() {
+    this.store.$patch({
+      filterSelectionDrawerStatus: !0
+    });
+  }
+  _onDataChange(e, s) {
+    this.currentNode && this.store.$patch({
+      recommendationConfigs: {
+        [e]: s
+      }
+    });
+  }
+  _onCurrencyConfigChange(e, s) {
+    this.currentNode && this.store.$patch({
+      recommendationConfigs: {
+        currencySettings: {
+          [e]: s
+        }
+      }
+    });
+  }
+  _onCurrencyChange(e) {
+    const [, s] = e.split(".");
+    this.store.$patch({
+      recommendationConfigs: {
+        currencySettings: {
+          name: s,
+          value: s
+        }
+      }
+    });
+  }
+  _setProductIdsVisibility() {
+    const { recommendationConfigs: e } = this.store, s = e.strategy === "manualMerchandising";
+    this.api.setVisibility(t.PRODUCT_IDS, s), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, s);
+  }
+  _listenToFormUpdates() {
+    var s;
+    this.api.onValueChanged(t.ALGORITHM, (i) => {
+      this._onDataChange(t.ALGORITHM, i), this._setProductIdsVisibility();
+    }), this.api.onValueChanged(t.PRODUCT_IDS, (i) => this._onDataChange(t.PRODUCT_IDS, i.split(",") || [])), this.api.onValueChanged(t.LOCALE, (i) => this._onDataChange(t.LOCALE, i)), this.api.onValueChanged(t.CURRENCY, (i) => this._onCurrencyChange(i)), [
+      t.CURRENCY_LOCATION,
+      t.CURRENCY_SYMBOL,
+      t.CURRENCY_THOUSAND_SEPARATOR,
+      t.CURRENCY_DECIMAL_SEPARATOR,
+      t.CURRENCY_DECIMAL_COUNT
+    ].forEach((i) => {
+      this.api.onValueChanged(i, (C) => this._onCurrencyConfigChange(i, C));
+    }), 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"), (s = this.addFilterButton) == null || s.addEventListener("click", this.addFilterListener);
+  }
+  _listenStateUpdates() {
+    this.storeUnsubscription = this.store.$subscribe((e) => {
+      if ("payload" in e) {
+        const s = e.payload.recommendationConfigs;
+        s && (this.api.updateValues(s), this.store.fetchRecommendationProducts());
+      }
+    });
+  }
+}
+export {
+  g as CONTROL_BLOCK_ID,
+  p as RecommendationBlockControl
+};

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

@@ -0,0 +1,10 @@
+import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlock as t } from "./block.js";
+import { RecommendationBlockControl as e } from "./control.js";
+import { RecommendationIconsRegistry as n } from "./iconsRegistry.js";
+import i from "./recommendation.css.js";
+import { SettingsPanel as m } from "./settingsPanel.js";
+const f = new o().addBlock(t).withSettingsPanelRegistry(m).addControl(e).addStyles(i).withIconsRegistry(n).build();
+export {
+  f as default
+};

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

@@ -0,0 +1,51 @@
+import { IconsRegistry as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class t extends e {
+  registerIconsSvg(C) {
+    C["recommendation-icon"] = `
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 6.4C12 6.73137 11.7301 6.99622 11.4011 7.0355C8.92202 7.33143 7 9.44126 7 12C7 14.5587
+                8.92202 16.6686 11.4011 16.9645C11.7301 17.0038 12 17.2686 12 17.6V20.4C12 20.7314 11.7314 21 11.4
+                21H11C10.4477 21 10 20.5523 10 20V19.2422C9.99988 18.3514 8.92291 17.9053 8.29297 18.5352L7.75684
+                19.0713C7.36633 19.4617 6.73328 19.4617 6.34277 19.0713L4.92871 17.6572C4.53829 17.2667 4.53829 16.6337
+                4.92871 16.2432L5.46484 15.707C6.09466 15.0771 5.64858 14.0001 4.75781 14H4C3.44772 14 3 13.5523 3 13L3
+                11C3 10.4477 3.44772 10 4 10H4.75684C5.6476 9.99988 6.09369 8.92291 5.46387 8.29297L4.92871 
+                7.75781C4.53829 7.36731 4.53829 6.73426 4.92871 6.34375L6.34375 4.92871C6.73426 4.53829 
+                7.36731 4.53829 7.75781 4.92871L8.29297
+                5.46387C8.92291 6.09368 9.99988 5.6476 10 4.75684V4C10 3.44772 10.4477 3 11 3L11.4 3C11.7314 3 12
+                3.26863 12 3.6V6.4ZM13 4C13 3.44786 13.4543 2.98773 13.9893 3.12402C14.1732 3.17098 14.3541 3.23174
+                14.5303 3.30469C15.0156 3.50571 15.4567 3.80044 15.8281 4.17187C16.1996 4.54331 16.4943 4.98442 16.6953
+                5.46973C16.7058 5.49498 16.716 5.52033 16.7259 5.54577C16.8279 5.80746 17.0733 5.9917 17.3531
+                6.01625C17.5539 6.03386 17.7542 6.06671 17.9521 6.11523C18.8954 6.34649 19.723 6.91284 20.2793
+                7.70898C20.8354 8.505 21.0827 9.47631 20.9756 10.4414C20.927 10.8782 20.8065 11.3001 20.6231
+                11.6919C20.5322 11.8861 20.5322 12.112 20.6231 12.3062C20.7962 12.6759 20.9122 13.0708 20.9658
+                13.4775C21.0425 14.0595 20.9901 14.6515 20.8125 15.2109C20.6348 15.7703 20.3358 16.2838 19.9375
+                16.7148C19.5393 17.1457 19.0513 17.4839 18.5078 17.7051C18.1381 17.8555 17.7488 17.9484 17.3532
+                17.9829C17.0734 18.0073 16.8281 18.1917 16.7262 18.4535C16.7162 18.4792 16.7059 18.5048 16.6953
+                18.5303C16.4943 19.0156 16.1996 19.4567 15.8281 19.8281C15.4567 20.1996 15.0156 20.4943 14.5303
+                20.6953C14.3541 20.7683 14.1732 20.829 13.9893 20.876C13.4543 21.0123 13 20.5521 13 20V19.7852C13.0001
+                19.3515 13.365 19.0136 13.7656 18.8477C14.0082 18.7471 14.2284 18.5997 14.4141 18.4141C14.5997 18.2284
+                14.7471 18.0082 14.8477 17.7656C14.9482 17.523 15 17.2626 15 17C15 16.7374 14.9482 16.477 14.8477
+                16.2344C14.7471 15.9918 14.5997 15.7716 14.4141 15.5859C14.2284 15.4003 14.0082 15.2529 13.7656
+                15.1523C13.365 14.9864 13.0001 14.6485 13 14.2148V14C13 13.4479 13.4543 12.9877 13.9893 13.124C14.1732
+                13.171 14.3541 13.2317 14.5303 13.3047C15.0156 13.5057 15.4567 13.8004 15.8281 14.1719C16.1996 14.5433
+                16.4943 14.9844 16.6953 15.4697C16.7632 15.6337 16.8195 15.8017 16.8649 15.9725C16.8686 15.9865 16.881
+                15.9963 16.8955 15.9971C17.1886 16.0123 17.4821 15.9631 17.7539 15.8525C18.0256 15.742 18.2696 15.5729
+                18.4688 15.3574C18.6679 15.1419 18.8174 14.8851 18.9063 14.6055C18.995 14.3259 19.0207 14.0301 18.9824
+                13.7393C18.9441 13.4484 18.8427 13.169 18.6846 12.9219C18.5264 12.6747 18.3156 12.4652 18.0674
+                12.3086C17.6579 12.0502 17.2974 11.626 17.3574 11.1455L17.3721 11.0234C17.4406 10.4755 17.949 10.0755
+                18.4629 10.2773C18.5364 10.3062 18.609 10.3373 18.6807 10.3706C18.811 10.4311 18.9714 10.3635 18.9873
+                10.2207C19.0409 9.73814 18.9177 9.25251 18.6396 8.85449C18.3616 8.45652 17.9481 8.1733 17.4766
+                8.05762C17.3327 8.02235 17.1861 8.00292 17.04 8C16.9439 7.99809 16.8572 8.05928 16.8296 8.15143C16.7913
+                8.27967 16.7467 8.40615 16.6953 8.53027C16.4943 9.01558 16.1996 9.45669 15.8281 9.82812C15.4567 10.1996
+                15.0156 10.4943 14.5303 10.6953C14.3541 10.7683 14.1732 10.829 13.9893 10.876C13.4543 11.0123 13 10.5521
+                13 10V9.78516C13.0001 9.35151 13.365 9.01362 13.7656 8.84766C14.0082 8.74715 14.2284 8.59971 14.4141
+                8.41406C14.5997 8.22841 14.7471 8.00817 14.8477 7.76562C14.9482 7.52297 15 7.26264 15 7C15 6.73736
+                14.9482 6.47703 14.8477 6.23437C14.7471 5.99182 14.5997 5.77159 14.4141 5.58594C14.2284 5.40029 14.0082
+                5.25285 13.7656 5.15234C13.365 4.98638 13.0001 4.64849 13 4.21484V4Z" fill="#666666"/>
+            </svg>
+        `;
+  }
+}
+export {
+  t as RecommendationIconsRegistry
+};

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -0,0 +1,19 @@
+const n = `/* Utils */
+.es-180w { width: 180px; }
+
+/* Recommendation Controls */
+.recommendation-controls-container > .container {
+    padding: 16px;
+}
+
+.recommendation-controls-container > .container:first-child {
+    padding-top: 0;
+}
+
+.container:has(.recommendation-controls-container) {
+    padding: 0
+}
+`;
+export {
+  n as default
+};

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

@@ -0,0 +1,32 @@
+import { SettingsPanelRegistry as o, SettingsPanelTab as t, SettingsTab as e, ContainerControls as r, TextControls as s } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as T } from "./block.js";
+import { CONTROL_BLOCK_ID as i } from "./control.js";
+class a extends o {
+  registerBlockControls(n) {
+    n[T] = [
+      new t(
+        e.SETTINGS,
+        [
+          i,
+          r.EXTERNAL_INDENTS
+        ]
+      ),
+      new t(
+        e.STYLES,
+        [
+          s.TEXT_BLOCK_BACKGROUND_COLOR
+        ]
+      )
+      // TODO: It'll be opened after the card composition is implemented by Stripo team.
+      // new SettingsPanelTab(
+      //     'Card Composition',
+      //     [
+      //         COMPOSITION_CONTROL_BLOCK_ID,
+      //     ]
+      // ).withLabel('Card Composition'),
+    ];
+  }
+}
+export {
+  a as SettingsPanel
+};