@useinsider/guido 1.0.3-beta.cedc8cb → 1.0.3-beta.cf8f00f

package/dist/extensions/Blocks/Recommendation/templates/templateUtils.js

@@ -0,0 +1,180 @@
+const R = {
+  TITLE: "You May Also Like!"
+}, O = `
+    <tr>
+        <td class="spacer" style="height: 20px;"></td>
+    </tr>
+`, w = `
+    <tr>
+        <td>
+            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
+                {-{-PRODUCTS-}-}
+            </table>
+        </td>
+    </tr>
+`, i = `
+    <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">
+            <tr>
+                <td
+                    class="product-attribute-cell"
+                    valign="top">
+                    <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                        <tbody>
+                            {-{-PRODUCT_CONTENT-}-}
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, b = [
+  "productImage",
+  "productName",
+  "productOldPrice",
+  "productPrice",
+  "productButton"
+];
+function C() {
+  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 N(p, r, e, l = b) {
+  const n = (100 / r).toFixed(2), a = [];
+  for (let o = 0; o < p.length; o += r)
+    a.push(p.slice(o, o + r));
+  let c = "";
+  return a.forEach((o, _) => {
+    _ > 0 && (c += O);
+    let s = "", u = "", d = "", m = "", g = "";
+    o.forEach((t) => {
+      s += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productImage(t)
+      ), u += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productName(t)
+      ), d += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productPrice(t)
+      ), m += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productOldPrice(t)
+      ), g += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productButton(t)
+      );
+    });
+    const T = {
+      productImage: s,
+      productName: u,
+      productPrice: d,
+      productOldPrice: m,
+      productButton: g
+    }, h = l.filter((t) => !!T[t]).map((t) => `<tr>${T[t]}</tr>`).join("");
+    c += w.replace("{-{-PRODUCTS-}-}", h);
+  }), c.replaceAll("{-{-COLUMN_WIDTH-}-}", `${n}%`);
+}
+function P(p, r, e, l, n = R.TITLE, a) {
+  const c = N(
+    r,
+    e,
+    l,
+    a
+  );
+  return p.replace("{-{-TITLE-}-}", n).replace("{-{-PRODUCT_ROWS-}-}", c);
+}
+export {
+  R as DEFAULTS,
+  b as DEFAULT_CARD_COMPOSITION,
+  P as generateTemplate,
+  C as getDefaultProducts,
+  N as prepareProductRows,
+  i as productCardWrapper,
+  w as productRow,
+  O as spacer
+};

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

@@ -1,17 +1,17 @@
 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);
+var S = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var u = (n, i, e) => S(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 { Block as d, BlockCompositionType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as h } 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 = {
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class D extends S {
+class D extends d {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -25,7 +25,7 @@ class D extends S {
     return "unsubscribe-icon";
   }
   getBlockCompositionType() {
-    return h.BLOCK;
+    return L.BLOCK;
   }
   getName() {
     return this.api.translate("Unsubscribe Block");
@@ -34,10 +34,10 @@ class D extends S {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return L();
+    return h();
   }
   onCreated(e) {
-    "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
+    "getOuterHTML" in e && !e.getOuterHTML() || "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();
@@ -50,8 +50,8 @@ class D extends S {
   }
   _setupSelectEventListener() {
     this._removeSelectEventListener(), this.selectEventListener = (e) => {
-      const r = e, { collectionType: t, selectedPages: s } = r.detail;
-      this._updateBlock(t, s.join(","));
+      const s = e, { collectionType: t, selectedPages: r } = s.detail;
+      this._updateBlock(t, r.join(","));
     }, document.addEventListener(a.SELECT, this.selectEventListener);
   }
   _removeSelectEventListener() {
@@ -71,17 +71,17 @@ class D extends S {
   _removeEventListeners() {
     this._removeSelectEventListener(), this._removeCancelEventListener();
   }
-  _updateBlock(e, r) {
+  _updateBlock(e, s) {
     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"));
+    const r = this._getMergeTag(e);
+    this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return C[e] ?? f;
+    return B[e] ?? f;
   }
   _openDrawer() {
     try {
@@ -93,11 +93,11 @@ class D extends S {
   }
   _checkExistingBlocks() {
     const e = c();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(B).forEach((t) => {
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
       if ("getAttribute" in t) {
-        const s = t.getAttribute(o.PAGE_TYPE);
-        if (s) {
-          const l = Number(s);
+        const r = t.getAttribute(o.PAGE_TYPE);
+        if (r) {
+          const l = Number(r);
           l === E.GLOBAL_UNSUBSCRIBE ? e.isGlobalUnsubscribeDisabled = !0 : l === E.SUBSCRIPTION_PREFERENCE_CENTER && (e.isSubscriptionPreferencesCenterDisabled = !0);
         }
       }
@@ -106,11 +106,11 @@ class D extends S {
   _loadBlockState(e) {
     if (!("getAttribute" in e))
       return;
-    const r = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
-    if (!r || !t)
+    const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
+    if (!s || !t)
       return;
-    const s = c(), l = Number(r), p = m(t);
-    s.setCollectionWithoutAutoSelection(l), s.loadSelectedTemplates(p);
+    const r = c(), l = Number(s), p = m(t);
+    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
   }
   _resetStoreState() {
     c().$reset();
@@ -118,11 +118,11 @@ class D extends S {
   _removeBlockTemplatesFromStore(e) {
     if (!("getAttribute" in e))
       return;
-    const r = e.getAttribute(o.PAGE_LIST);
-    if (!r)
+    const s = e.getAttribute(o.PAGE_LIST);
+    if (!s)
       return;
-    const t = c(), s = m(r);
-    t.removeUnsubscribePages(s);
+    const t = c(), r = m(s);
+    t.removeUnsubscribePages(r);
   }
 }
 export {

package/dist/extensions/Blocks/common-control.js

@@ -1,11 +1,12 @@
-var l = Object.defineProperty;
-var C = (E, o, e) => o in E ? l(E, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : E[o] = e;
-var u = (E, o, e) => C(E, typeof o != "symbol" ? o + "" : o, e);
-import { Control as c, UIElementType as $, UEAttr as t } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class L extends c {
+var c = Object.defineProperty;
+var I = (a, r, e) => r in a ? c(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
+var l = (a, r, e) => I(a, typeof r != "symbol" ? r + "" : r, e);
+import { Control as O, UIElementType as t, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class _ extends O {
   constructor() {
     super(...arguments);
-    u(this, "currentNode");
+    l(this, "currentNode");
+    l(this, "lastBlockInstanceId", null);
   }
   getContainer() {
     var e;
@@ -14,65 +15,121 @@ class L extends c {
   onTemplateNodeUpdated(e) {
     this.currentNode = e;
   }
-  _GuLabel({ text: e, name: T = "", position: n = "top" }) {
+  onDestroy() {
+    this.lastBlockInstanceId = null;
+  }
+  /**
+   * Gets the config block element from the current node.
+   * @returns The config block element or null if not found
+   */
+  getConfigBlock() {
+    if (!this.currentNode)
+      return null;
+    const e = this.currentNode.closest(".items-block-v2");
+    return e ? e.querySelector("esd-config-block") : null;
+  }
+  /**
+   * Gets the current block instance ID from the config block.
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * @returns The block instance ID or null if not found
+   */
+  getBlockInstanceId(e = "data-block-instance-id") {
+    const n = this.getConfigBlock();
+    return n ? n.getAttribute(e) : null;
+  }
+  /**
+   * Handles block instance change detection and syncing.
+   * This is a helper method for controls that need to sync attributes when switching between block instances.
+   * @param syncFunction - Function to call when block instance changes (to sync from attributes)
+   * @param updateUI - Function to call to update the UI (called both on change and when same block)
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * @returns true if block instance changed, false otherwise
+   */
+  handleBlockInstanceChange(e, n, E = "data-block-instance-id") {
+    const o = this.getBlockInstanceId(E);
+    if (!o)
+      return !1;
+    const T = o !== this.lastBlockInstanceId;
+    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
+  }
+  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
     return `
-            <${$.LABEL} 
-                style="${n === "top" ? "margin-bottom: 8px;" : ""}"
-                ${t.LABEL.text}="${e}" 
-                ${t.LABEL.name}="${T || `${e} Label`}">
-            </${$.LABEL}>
+            <${t.LABEL} 
+                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
+                ${$.LABEL.text}="${e}" 
+                ${$.LABEL.name}="${n || `${e} Label`}">
+            </${t.LABEL}>
         `;
   }
   _GuToggle(e) {
     return `
-            <${$.SWITCHER}
-                ${t.SWITCHER.name}="${e}">
-            </${$.SWITCHER}>
+            <${t.SWITCHER}
+                ${$.SWITCHER.name}="${e}">
+            </${t.SWITCHER}>
+        `;
+  }
+  _GuSelectItem({ text: e, value: n }) {
+    return `
+            <${t.SELECT_ITEM} 
+                ${$.SELECT_ITEM.text}="${e}" 
+                ${$.SELECT_ITEM.value}="${n}">
+            </${t.SELECT_ITEM}>`;
+  }
+  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
+    return `
+            <${t.SELECTPICKER}
+                class="${o}"
+                ${$.SELECTPICKER.name}="${e}"
+                ${$.SELECTPICKER.placeholder}="${n}">
+                    ${E.map((T) => this._GuSelectItem(T)).join("")}
+            </${t.SELECTPICKER}>
         `;
   }
-  _GuSelectItem({ text: e, value: T }) {
+  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
     return `
-            <${$.SELECT_ITEM} 
-                ${t.SELECT_ITEM.text}="${e}" 
-                ${t.SELECT_ITEM.value}="${T}">
-            </${$.SELECT_ITEM}>`;
+            <${t.TEXT}
+                class=${E}
+                ${$.TEXT.name}="${e}"
+                placeholder="${n || e}"
+                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+            </${t.TEXT}>
+        `;
   }
-  _GuSelect({ name: e, placeholder: T, options: n, className: r = "es-180w" }) {
+  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
     return `
-            <${$.SELECTPICKER}
-                class="${r}"
-                ${t.SELECTPICKER.name}="${e}"
-                ${t.SELECTPICKER.placeholder}="${T}">
-                    ${n.map((a) => this._GuSelectItem(a)).join("")}
-            </${$.SELECTPICKER}>
+            <${t.COUNTER}
+                ${$.COUNTER.name}="${e}"
+                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.maxValue}="${n}"
+                ${$.COUNTER.step}="${o}">
+            </${t.COUNTER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: T, className: n = "" }) {
+  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
     return `
-            <${$.TEXT}
-                class=${n}
-                ${t.TEXT.name}="${e}"
-                placeholder="${T || e}">
-            </${$.TEXT}>
+            <${t.RADIO_ITEM}
+                ${$.RADIO_ITEM.value}="${n}"
+                ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
+                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
+            </${t.RADIO_ITEM}>
         `;
   }
-  _GuCounter({ name: e, maxValue: T, minValue: n = 1, step: r = 1 }) {
+  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
     return `
-            <${$.COUNTER}
-                ${t.COUNTER.name}="${e}"
-                ${t.COUNTER.minValue}="${n}"
-                ${t.COUNTER.maxValue}="${T}"
-                ${t.COUNTER.step}="${r}">
-            </${$.COUNTER}>
+            <${t.RADIO_BUTTONS}
+                ${E ? `id="${E}"` : ""}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
+            </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: T, id: n = "" }) {
+  _GuButton({ name: e, label: n, id: E = "" }) {
     return `
-            <${$.BUTTON}
-                ${t.BUTTON.name}="${e}"
-                ${n ? `id="${n}"` : ""}
-                ${t.BUTTON.caption}="${T}"}>
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                ${$.BUTTON.name}="${e}"
+                ${E ? `id="${E}"` : ""}
+                ${$.BUTTON.caption}="${n}"}>
+            </${t.BUTTON}>
         `;
   }
   /**
@@ -80,23 +137,112 @@ class L extends c {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: T, className: n = "" }) {
+  _GuIconButton({ name: e, icon: n, className: E = "" }) {
     return `
-            <${$.BUTTON}
-                class="${n}"
-                ${t.BUTTON.name}="${e}"
-                ${t.BUTTON.icon}="${T}">
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                class="${E}"
+                ${$.BUTTON.name}="${e}"
+                ${$.BUTTON.icon}="${n}">
+            </${t.BUTTON}>
         `;
   }
-  _GuTwoColumns(e) {
+  _GuOneColumn(e, n = "") {
     return `
-            <div class="checkbox-select-container container two-columns">
+            <div class="container one-column ${n}">
                 ${e.join("")}
             </div>
         `;
   }
+  _GuTwoColumns(e, n = "") {
+    return `
+            <div class="container two-columns ${n}">
+                ${e.join("")}
+            </div>
+        `;
+  }
+  /**
+   * Creates an orderable (sortable) list control
+   * @param name - The control name for value binding
+   * @param items - Array of item keys/values
+   * @param itemLabels - Optional array of objects with key and label properties for display
+   * @returns HTML string for the orderable control
+   */
+  _GuOrderable(e, n) {
+    let E = "";
+    n.forEach((T) => {
+      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      E += `
+                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
+                    ${T.content}
+                </${t.ORDERABLE_ITEM}>
+            `;
+    });
+    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    return `
+            <${t.ORDERABLE} ${o}="${e}">
+                ${E}
+            </${t.ORDERABLE}>
+        `;
+  }
+  _GuNestedControl(e, n) {
+    return `
+            <${t.NESTED_CONTROL} ${$.NESTED_CONTROL.controlId}="${e}">
+                ${n}
+            </${t.NESTED_CONTROL}>
+        `;
+  }
+  _GuExpandable(e, n) {
+    return `
+            <${t.EXPANDABLE}>
+                <${t.EXPANDABLE_HEADER}>
+                    <${t.LABEL} ${$.LABEL.text}="${e}"></${t.LABEL}>
+                </${t.EXPANDABLE_HEADER}>
+                <${t.EXPANDABLE_CONTENT}>
+
+                    ${n}
+
+                </${t.EXPANDABLE_CONTENT}>
+            </${t.EXPANDABLE}>
+        `;
+  }
+  _GuColorPicker(e) {
+    return `
+            <${t.COLOR}
+                ${$.COLOR.name}="${e}">
+            </${t.COLOR}>
+        `;
+  }
+  _GuFontFamily(e, n = "Select Font") {
+    return `
+            <${t.FONT_FAMILY_SELECT}
+                ${$.FONT_FAMILY_SELECT.name}="${e}"
+                ${$.FONT_FAMILY_SELECT.placeholder}="${n}">
+            </${t.FONT_FAMILY_SELECT}>
+        `;
+  }
+  _GuRadioButtons(e, n) {
+    const E = n.map((o) => `
+                <${t.RADIO_ITEM}
+                    ${$.RADIO_ITEM.text}="${o.text}"
+                    ${$.RADIO_ITEM.value}="${o.value}">
+                </${t.RADIO_ITEM}>
+            `).join("");
+    return `
+            <${t.RADIO_BUTTONS}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${E}
+            </${t.RADIO_BUTTONS}>
+        `;
+  }
+  _GuCheckbox(e, n) {
+    return `
+            <${t.CHECKBOX}
+                ${$.CHECKBOX.name}="${e}"
+                ${$.CHECKBOX.caption}="${n}">
+            </${t.CHECKBOX}>
+        `;
+  }
 }
 export {
-  L as CommonControl
+  _ as CommonControl
 };