@useinsider/guido 1.0.3-beta.3cb36f8 → 1.0.3-beta.3e280d4

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

@@ -0,0 +1,365 @@
+import { BlockType as t, BlockAttr as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlockId as l } from "./constants.js";
+const C = {
+  TITLE: "You May Also Like!"
+}, _ = `
+    <tr>
+        <td class="spacer" style="height: 20px;"></td>
+    </tr>
+`, E = `
+    <td align="left" class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20">
+        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+                <td align="center">      
+                    <table
+                        class="container"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        border="0">   
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <table
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0">
+                                        <tbody>
+                                            <${t.BLOCK_TEXT} 
+                                                class="es-p10t es-p10b es-p20l es-p20r"
+                                                align="center">
+                                                <p path="1" style="font-size: 28px; color: #333333;">
+                                                    <strong path="1,0">{-{-TITLE-}-}</strong>
+                                                </p>
+                                            </${t.BLOCK_TEXT}>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            ${_}
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                    >
+                                        {-{-PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, y = `
+    <tr>
+        <td>
+            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
+                {-{-PRODUCTS-}-}
+            </table>
+        </td>
+    </tr>
+`, c = `
+    <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
+        <table
+            width="100%"
+            height="100%"
+            cellpadding="0"
+            cellspacing="0"
+            border="0"
+            class="product-card-wrapper"
+            style="background-color: #f8f8f8;">
+            <tr>
+                {-{-PRODUCT_CONTENT-}-}
+            </tr>
+        </table>
+    </td>
+`, w = `
+    <td
+        class="product-image-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${t.BLOCK_IMAGE}
+                    ${n.BLOCK_IMAGE.src}="{-{-PRODUCT_IMAGE-}-}"
+                    ${n.BLOCK_IMAGE.alt}="{-{-PRODUCT_NAME-}-}"
+                    ${n.BLOCK_IMAGE.href}="#"
+                    class="product-image"
+                    align="center"
+                    esd-extension-block-id="${l.IMAGE}">
+                </${t.BLOCK_TEXT}>
+            </tbody>
+        </table>
+    </td>
+`, B = `
+    <td
+        class="product-name-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${t.BLOCK_TEXT}
+                    class="product-name es-p15t es-p15b es-p10l es-p10r"
+                    align="center"
+                    esd-extension-block-id="${l.NAME}">
+                    <p
+                        path="1"
+                        contenteditable="false"
+                        style="font-size: 16px; color: #333333;">
+                        <strong path="1,0">{-{-PRODUCT_NAME-}-}</strong>
+                    </p>
+                </${t.BLOCK_TEXT}>
+            </tbody>
+        </table>
+    </td>
+`, P = `
+    <td
+        class="product-price-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${t.BLOCK_TEXT}
+                    class="product-price"
+                    align="center"
+                    esd-extension-block-id="${l.PRICE}">
+                    <p
+                        path="1"
+                        contenteditable="false"
+                        style="font-size: 16px; color: #333333;">
+                        <strong path="1,0">18,00 TRY</strong>
+                    </p>
+                </${t.BLOCK_TEXT}>
+            </tbody>
+        </table>
+    </td>
+`, N = `
+    <td
+        class="product-old-price-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${t.BLOCK_TEXT}
+                    class="product-old-price"
+                    align="center"
+                    esd-extension-block-id="${l.OLD_PRICE}">
+                    <p
+                        path="1"
+                        contenteditable="false"
+                        style="font-size: 14px; color: #999999;">
+                        <s path="1,0">20,00 TRY</s>
+                    </p>
+                </${t.BLOCK_TEXT}>
+            </tbody>
+        </table>
+    </td>
+`, D = `
+    <td
+        class="button-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${t.BLOCK_BUTTON}
+                    ${n.BLOCK_BUTTON.href}="#"
+                    class="product-name es-p5t"
+                    align="center"
+                    esd-extension-block-id="${l.BUTTON}">
+                    Buy
+                </${t.BLOCK_BUTTON}>
+            </tbody>
+        </table>
+    </td>
+`, x = `
+    <td
+        align="left"
+        esd-extension-block-id="recommendation-block"
+        esd-handler-name="esd-extension-RecommendationBlock"
+        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20"
+    >
+        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+                <td align="center">
+                    <table
+                        class="container"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        border="0">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <table
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0">
+                                        <tbody>
+                                            <tr>
+                                                {-{-TITLE-}-}
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="spacer" style="height: 20px;"></td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                    >
+                                        {-{-PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, U = [
+  "productImage",
+  "productName",
+  "productOldPrice",
+  "productPrice",
+  "productButton"
+];
+function f(r, a, i = U) {
+  const h = (100 / a).toFixed(2), p = [];
+  for (let o = 0; o < r.length; o += a)
+    p.push(r.slice(o, o + a));
+  let d = "";
+  return p.forEach((o, O) => {
+    O > 0 && (d += _);
+    let s = "", g = "", u = "", m = "", T = "";
+    o.forEach((e) => {
+      s += c.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        w.replace("{-{-PRODUCT_IMAGE-}-}", e.image_url).replace("{-{-PRODUCT_NAME-}-}", e.name)
+      ), g += c.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        B.replace("{-{-PRODUCT_NAME-}-}", e.name)
+      ), u += c.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        P
+      ), m += c.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        N
+      ), T += c.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        D
+      );
+    });
+    const b = {
+      productImage: s,
+      productName: g,
+      productPrice: u,
+      productOldPrice: m,
+      productButton: T
+    }, R = i.filter((e) => b[e]).map((e) => `<tr>${b[e]}</tr>`).join("");
+    d += y.replace("{-{-PRODUCTS-}-}", R);
+  }), d.replaceAll("{-{-COLUMN_WIDTH-}-}", `${h}%`);
+}
+function k() {
+  return [
+    {
+      name: "Product Name",
+      image_url: "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png",
+      price: { USD: 18 },
+      original_price: { USD: 20 },
+      discount: { USD: 2 },
+      url: "https://example.com/product/1",
+      item_id: "1",
+      in_stock: 1,
+      locale: "en",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Belt",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
+      price: { TRY: 55 },
+      original_price: { TRY: 65 },
+      discount: { TRY: 10 },
+      url: "https://example.com/product/2",
+      item_id: "2",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Beanie",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
+      price: { TRY: 18 },
+      original_price: { TRY: 20 },
+      discount: { TRY: 2 },
+      url: "https://example.com/product/3",
+      item_id: "3",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Album",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
+      price: { TRY: 15 },
+      original_price: { TRY: 15 },
+      discount: { TRY: 0 },
+      url: "https://example.com/product/4",
+      item_id: "4",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Flying Ninja with a very long product name",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
+      price: { TRY: 12 },
+      original_price: { TRY: 15 },
+      discount: { TRY: 3 },
+      url: "https://example.com/product/5",
+      item_id: "5",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Single",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
+      price: { TRY: 22555 },
+      original_price: { TRY: 33989 },
+      discount: { TRY: 11434 },
+      url: "https://example.com/product/6",
+      item_id: "6",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    }
+  ];
+}
+function I() {
+  const r = k(), i = f(r, 3);
+  return E.replace("{-{-TITLE-}-}", C.TITLE).replace("{-{-PRODUCT_ROWS-}-}", i);
+}
+export {
+  U as DEFAULT_CARD_COMPOSITION,
+  x as default,
+  k as getDefaultProducts,
+  I as getDefaultTemplate,
+  f as prepareProductRows
+};

package/dist/extensions/Blocks/Recommendation/utils/filterUtil.js

@@ -0,0 +1,28 @@
+function l(t) {
+  if (t.length === 0)
+    return "";
+  const o = t.sort((r, e) => r.filterNumber - e.filterNumber), n = o.map((r) => `[${r.attribute}][${r.operatorReplace}][${r.value}]`), [s, ...p] = n;
+  let u = s;
+  for (let r = 0; r < p.length; r++) {
+    const e = o[r + 1].innerGroupOperator;
+    u += `${e}${p[r]}`;
+  }
+  return `(${u})`;
+}
+function m(t) {
+  if (!t || t.length === 0)
+    return "";
+  const o = t.reduce((r, e) => (r[e.filterGroup] || (r[e.filterGroup] = []), r[e.filterGroup].push(e), r), {}), n = Object.keys(o).map(Number).sort((r, e) => r - e), s = n.map((r) => {
+    const e = o[r];
+    return l(e);
+  }), [p, ...u] = s;
+  let i = p;
+  for (let r = 0; r < u.length; r++) {
+    const e = n[r + 1], c = o[e][0].outerGroupOperator;
+    i += `${c}${u[r]}`;
+  }
+  return console.debug("🎉 Complete query generated:", i), i.trim();
+}
+export {
+  m as generateCompleteFilterQuery
+};

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

@@ -0,0 +1,131 @@
+var _ = Object.defineProperty;
+var d = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var u = (n, i, e) => d(n, typeof i != "symbol" ? i + "" : i, e);
+import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
+import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
+import { Block as S, BlockCompositionType as h, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as L } from "./template.js";
+import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
+import { parsePageList as m } from "./utils/utils.js";
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', B = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", C = {
+  [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
+  [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
+};
+class D extends S {
+  constructor() {
+    super();
+    u(this, "selectEventListener", null);
+    u(this, "cancelEventListener", null);
+    u(this, "currentNode");
+  }
+  getId() {
+    return v;
+  }
+  getIcon() {
+    return "unsubscribe-icon";
+  }
+  getBlockCompositionType() {
+    return h.BLOCK;
+  }
+  getName() {
+    return this.api.translate("Unsubscribe Block");
+  }
+  getDescription() {
+    return this.api.translate("Unsubscribe Block Description");
+  }
+  getTemplate() {
+    return L();
+  }
+  onCreated(e) {
+    "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
+  }
+  onSelect(e) {
+    this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
+  }
+  onDelete(e) {
+    this._removeEventListeners(), this._removeBlockTemplatesFromStore(e), this._resetStoreState();
+  }
+  onDestroy() {
+    this._removeEventListeners(), this.currentNode = void 0;
+  }
+  _setupSelectEventListener() {
+    this._removeSelectEventListener(), this.selectEventListener = (e) => {
+      const r = e, { collectionType: t, selectedPages: s } = r.detail;
+      this._updateBlock(t, s.join(","));
+    }, document.addEventListener(a.SELECT, this.selectEventListener);
+  }
+  _removeSelectEventListener() {
+    this.selectEventListener && (document.removeEventListener(a.SELECT, this.selectEventListener), this.selectEventListener = null);
+  }
+  _setupCancelEventListener() {
+    this._removeCancelEventListener(), this.cancelEventListener = () => {
+      this._handleCancel();
+    }, document.addEventListener(a.CANCEL, this.cancelEventListener);
+  }
+  _removeCancelEventListener() {
+    this.cancelEventListener && (document.removeEventListener(a.CANCEL, this.cancelEventListener), this.cancelEventListener = null);
+  }
+  _handleCancel() {
+    this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
+  }
+  _removeEventListeners() {
+    this._removeSelectEventListener(), this._removeCancelEventListener();
+  }
+  _updateBlock(e, r) {
+    if (!this.currentNode || !("querySelector" in this.currentNode))
+      return;
+    const t = this.currentNode.querySelector(g);
+    if (!t)
+      return;
+    const s = this._getMergeTag(e);
+    this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", s).apply(new b(`Updated unsubscribe link to ${s}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, r).apply(new b("Updated unsubscribe block metadata"));
+  }
+  _getMergeTag(e) {
+    return C[e] ?? f;
+  }
+  _openDrawer() {
+    try {
+      const e = c();
+      e.typeSelectionDrawerStatus = !0;
+    } catch (e) {
+      console.error("[UnsubscribeBlock] Failed to open drawer:", e);
+    }
+  }
+  _checkExistingBlocks() {
+    const e = c();
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(B).forEach((t) => {
+      if ("getAttribute" in t) {
+        const s = t.getAttribute(o.PAGE_TYPE);
+        if (s) {
+          const l = Number(s);
+          l === E.GLOBAL_UNSUBSCRIBE ? e.isGlobalUnsubscribeDisabled = !0 : l === E.SUBSCRIPTION_PREFERENCE_CENTER && (e.isSubscriptionPreferencesCenterDisabled = !0);
+        }
+      }
+    });
+  }
+  _loadBlockState(e) {
+    if (!("getAttribute" in e))
+      return;
+    const r = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
+    if (!r || !t)
+      return;
+    const s = c(), l = Number(r), p = m(t);
+    s.setCollectionWithoutAutoSelection(l), s.loadSelectedTemplates(p);
+  }
+  _resetStoreState() {
+    c().$reset();
+  }
+  _removeBlockTemplatesFromStore(e) {
+    if (!("getAttribute" in e))
+      return;
+    const r = e.getAttribute(o.PAGE_LIST);
+    if (!r)
+      return;
+    const t = c(), s = m(r);
+    t.removeUnsubscribePages(s);
+  }
+}
+export {
+  v as UNSUBSCRIBE_BLOCK_ID,
+  D as UnsubscribeBlock
+};

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

@@ -0,0 +1,167 @@
+var h = Object.defineProperty;
+var d = (a, s, e) => s in a ? h(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
+var u = (a, s, e) => d(a, typeof s != "symbol" ? s + "" : s, e);
+import { useUnsubscribeStore as l } from "../../../stores/unsubscribe.js";
+import { Control as T, UEAttr as i, UIElementType as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { DATA_ATTRIBUTES as p } from "./utils/constants.js";
+import { parsePageList as _ } from "./utils/utils.js";
+const g = "ui-elements-unsubscribe", r = {
+  SELECT_BUTTON: "selectTemplateButton",
+  PREV_BUTTON: "prevButton",
+  NEXT_BUTTON: "nextButton",
+  COUNTER_TEXT: "counterText",
+  PREVIEW_IMAGE: "previewImage"
+};
+class N extends T {
+  constructor() {
+    super(...arguments);
+    u(this, "currentPreviewIndex", 0);
+    u(this, "currentNode");
+    u(this, "currentPages");
+    u(this, "valueChangeHandlers", []);
+    u(this, "lastParsedAttribute");
+  }
+  getId() {
+    return g;
+  }
+  getTemplate() {
+    return `
+            <div class="unsubscribe-controls-container container stretch widest-spacing">
+                ${this._getPreview()}
+                ${this._getButton()}
+            </div>
+        `;
+  }
+  onTemplateNodeUpdated(e) {
+    if (this.currentNode = e, "getAttribute" in this.currentNode) {
+      const t = this.currentNode.getAttribute(p.PAGE_LIST);
+      t && (t !== this.lastParsedAttribute && (this.currentPages = _(t), this.lastParsedAttribute = t, this.currentPreviewIndex = 0), this._updatePreview(), this._updateCounter());
+    }
+  }
+  onRender() {
+    this._listenToFormUpdates(), this._updateCounter();
+  }
+  onDestroy() {
+    this.valueChangeHandlers.forEach((e) => {
+      typeof e == "function" && e();
+    }), this.valueChangeHandlers = [], this.currentNode = void 0, this.currentPages = void 0, this.currentPreviewIndex = 0, this.lastParsedAttribute = void 0;
+  }
+  get totalTemplates() {
+    var e;
+    return ((e = this.currentPages) == null ? void 0 : e.length) ?? 0;
+  }
+  _listenToFormUpdates() {
+    this.valueChangeHandlers.push(
+      this.api.onValueChanged(r.SELECT_BUTTON, () => this._onButtonClick())
+    ), this.valueChangeHandlers.push(
+      this.api.onValueChanged(r.PREV_BUTTON, () => this._onPrevClick())
+    ), this.valueChangeHandlers.push(
+      this.api.onValueChanged(r.NEXT_BUTTON, () => this._onNextClick())
+    );
+  }
+  _onButtonClick() {
+    try {
+      const e = l();
+      e.activeType = e.getSelectedCollection[this.currentPreviewIndex], e.pageSelectionUpdateStatus = !0, e.pageSelectionDrawerStatus = !0;
+    } catch (e) {
+      console.error("[UnsubscribeControl] Failed to open drawer:", e);
+    }
+  }
+  _onPrevClick() {
+    this.currentPreviewIndex > 0 && (this.currentPreviewIndex--, this._updatePreview(), this._updateCounter());
+  }
+  _onNextClick() {
+    this.currentPreviewIndex < this.totalTemplates - 1 && (this.currentPreviewIndex++, this._updatePreview(), this._updateCounter());
+  }
+  _updatePreview() {
+    var e;
+    if ((e = this.currentPages) != null && e.length)
+      try {
+        const t = this.currentPages[this.currentPreviewIndex], o = l().getThumbnailByTemplateId(t);
+        if (!o) {
+          console.warn("[UnsubscribeControl] No thumbnail found for page:", t);
+          return;
+        }
+        this.api.updateValues({
+          [r.PREVIEW_IMAGE]: o
+        });
+      } catch (t) {
+        console.error("[UnsubscribeControl] Failed to update preview:", t);
+      }
+  }
+  _updateCounter() {
+    const e = this.currentPreviewIndex + 1, t = this.totalTemplates, c = this.currentPreviewIndex === 0, o = this.currentPreviewIndex >= t - 1;
+    this.api.setUIEAttribute(r.PREV_BUTTON, i.BUTTON.disabled, c), this.api.setUIEAttribute(r.NEXT_BUTTON, i.BUTTON.disabled, o), this.api.setUIEAttribute(
+      r.COUNTER_TEXT,
+      i.LABEL.text,
+      `${this.api.translate("Showing")} ${e} ${this.api.translate("of")} ${t}`
+    );
+  }
+  _getPreview() {
+    return `
+            <div class="unsubscribe-preview-container">
+                <div class="unsubscribe-preview-header">
+                    <div class="unsubscribe-preview-title">${this.api.translate("Unsubscribe Template")}</div>
+                    <div class="unsubscribe-preview-controls">
+                        ${this._getPrevButton()}
+                        ${this._getCounterText()}
+                        ${this._getNextButton()}
+                    </div>
+                </div>
+                <unsubscribe-preview name="${r.PREVIEW_IMAGE}"></unsubscribe-preview>
+            </div>
+        `;
+  }
+  _getButton() {
+    return `
+            <${n.BUTTON}
+                id="${r.SELECT_BUTTON}"
+                class="primary full-width"
+                ${i.BUTTON.name}="${r.SELECT_BUTTON}"
+                ${i.BUTTON.caption}="${this.api.translate("Select Template")}"
+            >
+            </${n.BUTTON}>
+        `;
+  }
+  _getLabel(e, t) {
+    return `
+            <${n.LABEL}
+                ${i.LABEL.text}="${e}"
+                ${i.LABEL.name}="${t}"
+            >
+            </${n.LABEL}>
+        `;
+  }
+  _getIconButton(e, t, c) {
+    const o = c ? `${i.BUTTON.disabled}="true"` : "";
+    return `
+            <${n.BUTTON}
+                id="${e}"
+                class="flat-inline flat-white"
+                ${i.BUTTON.name}="${e}"
+                ${o}
+            >
+                <${n.ICON}
+                    src="${t}"
+                    class="icon-button"
+                ></${n.ICON}>
+            </${n.BUTTON}>
+        `;
+  }
+  _getPrevButton() {
+    const e = this.currentPreviewIndex === 0;
+    return this._getIconButton(r.PREV_BUTTON, "arrow-back", e);
+  }
+  _getNextButton() {
+    const e = this.currentPreviewIndex >= this.totalTemplates - 1;
+    return this._getIconButton(r.NEXT_BUTTON, "arrow-right", e);
+  }
+  _getCounterText() {
+    const t = `Showing ${this.currentPreviewIndex + 1} of ${this.totalTemplates}`;
+    return this._getLabel(t, r.COUNTER_TEXT);
+  }
+}
+export {
+  g as UNSUBSCRIBE_CONTROL_ID,
+  N as UnsubscribeControl
+};