@useinsider/guido 1.0.3-beta.cd0d7f3 → 1.0.3-beta.ce3ed00

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

@@ -1,194 +1,108 @@
-import { BlockType as l, BlockAttr as I } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ItemsBlockId as T } from "./enums/controlEnums.js";
-import { productPairs as r } from "./enums/productEnums.js";
-import { ItemInCartOptions as N, SETTINGS_ENUMS as A } from "./enums/settingsEnums.js";
-import P from "./layouts/horizontal.html.js";
-import S from "./layouts/vertical.html.js";
-const B = `text-decoration:none; 
-    font-family:-apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol'
-`;
-let [R] = r.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [C] = r.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [_] = r.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [$] = r.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [u] = r.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
-const f = (a, t) => `
-    <${l.BLOCK_IMAGE} 
-        ${I.BLOCK_IMAGE.src}="${R}"
-        ${I.BLOCK_IMAGE.alt}="Product Image"
-        ${I.BLOCK_IMAGE.href}="#!"
-        ${I.BLOCK_IMAGE.width}="70"
-        esd-extension-block-id="${T.IMAGE}"
-        data-slot-1
-        product-attr="imageSrc"
-        data-type="${a}" 
-        data-number="${t}"
+import { BlockType as E, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ItemsBlockId as n } from "./enums/controlEnums.js";
+import { productPairs as e } from "./enums/productEnums.js";
+import { ItemInCartOptions as N, SETTINGS_ENUMS as r } from "./enums/settingsEnums.js";
+import d from "./layouts/horizontal.html.js";
+import P from "./layouts/vertical.html.js";
+let [s] = e.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [A] = e.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [a] = e.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [c] = e.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [p] = e.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const $ = () => `
+    <${E.BLOCK_IMAGE} 
+        ${_.BLOCK_IMAGE.src}="${s}"
+        ${_.BLOCK_IMAGE.alt}="Product Image"
+        ${_.BLOCK_IMAGE.href}="#"
+        ${_.BLOCK_IMAGE.width}="70"
+        esd-extension-block-id="${n.IMAGE}"
+        data-type="CART_ITEMS" 
+        data-number="1"
     />
-    `, g = (a) => `
-    <${l.BLOCK_TEXT} 
+    `, S = () => `
+    <${E.BLOCK_TEXT} 
         width="100%" 
         align="center" 
         class="es-p10" 
-        data-type="${a}"
-        esd-extension-block-id="${T.NAME}"
+        esd-extension-block-id="${n.NAME}"
     >
-        <p contenteditable="false">
-            <a  
-                href="#!"
-                style="${B}"
-                product-attr="name"
-                data-slot-2
-                width="100%">
-                ${C}
-            </a>
+        <p
+            data-slot-2
+            width="100%">
+            ${A}
         </p>
-    </${l.BLOCK_TEXT}>
-`, F = (a, t, o, e, i) => {
-  let n = _;
-  if (e && e.trim()) {
-    const d = `&nbsp;${e.trim()}&nbsp;`;
-    n = (i || "0") === "1" ? `${_}${d}` : `${d}${_}`;
+    </${E.BLOCK_TEXT}>
+`, B = (T, t) => {
+  let i = a;
+  if (T && T.trim()) {
+    const o = `&nbsp;${T.trim()}&nbsp;`;
+    i = (t || "0") === "1" ? `${a}${o}` : `${o}${a}`;
   }
-  const c = i === "1" ? "after" : "before", s = `data-formated="${o ? "true" : "false"}"`, E = `data-curency="${c}"`;
   return `
-    <${l.BLOCK_TEXT} 
-        esd-extension-block-id="${T.PRICE}"
+    <${E.BLOCK_TEXT} 
+        esd-extension-block-id="${n.PRICE}"
         class="items-block-price"
         width="100%" 
         align="center" 
     >
-        <p 
-            product-attr="price"
-            contenteditable="false"
-            data-slot-4
-            data-type="${a}"
-            data-number="${t}"
-            ${s}
-            ${E}
-            ${e ? `data-currency_symbol="${e}"` : ""}
-        >
-            ${n}
+        <p contenteditable="false">
+            ${i}
         </p>
-    </${l.BLOCK_TEXT}>
+    </${E.BLOCK_TEXT}>
 `;
-}, b = (a, t, o, e, i) => {
-  let n = $;
-  if (e && e.trim()) {
-    const d = `&nbsp;${e.trim()}&nbsp;`;
-    n = (i || "0") === "1" ? `${$}${d}` : `${d}${$}`;
+}, F = (T, t) => {
+  let i = c;
+  if (T && T.trim()) {
+    const o = `&nbsp;${T.trim()}&nbsp;`;
+    i = (t || "0") === "1" ? `${c}${o}` : `${o}${c}`;
   }
-  const c = i === "1" ? "after" : "before", s = `data-formated="${o ? "true" : "false"}"`, E = `data-curency="${c}"`;
   return `
-    <${l.BLOCK_TEXT} 
+    <${E.BLOCK_TEXT} 
         class="items-block-price"
-        esd-extension-block-id="${T.ORIGINAL_PRICE}"
+        esd-extension-block-id="${n.ORIGINAL_PRICE}"
         width="100%" 
         align="center" 
     >
         <p
-            product-attr="originalPrice"
             contenteditable="false" 
-            data-slot-5
             style="color: #cc0000"
-            data-type="${a}"
-            data-number="${t}"
-            ${s}
-            ${E}
-            ${e ? `data-currency_symbol="${e}"` : ""}
         >
-            <s>${n}</s>
+            <s>${i}</s>
         </p>
-    </${l.BLOCK_TEXT}>
+    </${E.BLOCK_TEXT}>
 `;
-}, U = () => `
-    <${l.BLOCK_TEXT} 
+}, L = () => `
+    <${E.BLOCK_TEXT} 
         width="100%" 
         align="center"
         class="es-p10" 
-        esd-extension-block-id="${T.QUANTITY}"
+        esd-extension-block-id="${n.QUANTITY}"
     >
         <p
-            product-attr="quantity"
             data-slot-3
             contenteditable="false"
             width="100%">
-            ${u}
+            ${p}
         </p>
-    </${l.BLOCK_TEXT}>
-`, L = (a, t) => `
-    <${l.BLOCK_BUTTON} 
+    </${E.BLOCK_TEXT}>
+`, U = () => `
+    <${E.BLOCK_BUTTON} 
         width="100%"
         class="ins-button" 
         name="buy-button" 
         caption="Buy" 
         align="center"
-        esd-extension-block-id="${T.BUTTON}"
-        product-attr="button"
-        data-slot-6
-        data-type="${a}"
-        data-number="${t}"
+        esd-extension-block-id="${n.BUTTON}"
     >Buy
-    </${l.BLOCK_BUTTON}>
-`, m = () => `
-    <esd-config-block style="display: none;"></esd-config-block>
-`, O = (a, t, o, e, i, n, c, s) => {
-  const p = `${`data-type="${t}" data-number="${o}"`} data-orientation="${e}"`;
-  return a.replace(
-    /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
-    `<td$1 ${p}>`
-  ).replace("{-{-PRODUCT_IMAGE-}-}", f(t, o)).replace("{-{-PRODUCT_NAME-}-}", g(t)).replace(
-    "{-{-PRODUCT_PRICE-}-}",
-    F(t, o, i, n, c)
-  ).replace(
-    "{-{-PRODUCT_ORIGINAL_PRICE-}-}",
-    b(
-      t,
-      o,
-      i,
-      n,
-      c
-    )
-  ).replace("{-{-PRODUCT_QUANTITY-}-}", U()).replace("{-{-PRODUCT_BUTTON-}-}", L(t, o)).replace("{-{-CONFIG_BLOCK-}-}", m());
-};
-function x({
-  orientation: a,
-  itemsType: t = A.ITEMS_TYPE.CART_ITEMS,
-  itemId: o,
-  currencySymbol: e,
-  currencyLocation: i,
-  formattedPrice: n = !0
+    </${E.BLOCK_TEXT}>
+`, R = (T, t, i) => T.replace("{-{-PRODUCT_IMAGE-}-}", $()).replace("{-{-PRODUCT_NAME-}-}", S()).replace("{-{-PRODUCT_PRICE-}-}", B(t, i)).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", F(t, i)).replace("{-{-PRODUCT_QUANTITY-}-}", L()).replace("{-{-PRODUCT_BUTTON-}-}", U());
+function k({
+  orientation: T,
+  itemsType: t = r.ITEMS_TYPE.CART_ITEMS,
+  itemId: i,
+  currencySymbol: o,
+  currencyLocation: I,
+  formattedPrice: l = !0
 }) {
-  const c = N[t].findIndex((E) => E.value === o);
-  let s = "1";
-  if (c >= 0)
-    s = String(c + 1);
-  else if (o) {
-    const E = o.match(/\((\d+)\)/);
-    E && ([s] = E);
-  }
-  return R = r.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[c >= 0 ? c : 0], C = r.PAIRS_FOR_EXTENSION.name[t].DEFAULT[c >= 0 ? c : 0], _ = n ? r.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : r.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, $ = n ? r.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : r.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, u = r.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, a === A.ORIENTATION.VERTICAL ? O(
-    S,
-    t,
-    s,
-    a,
-    n,
-    e,
-    i
-  ) : O(
-    P,
-    t,
-    s,
-    a,
-    n,
-    e,
-    i
-  );
+  const O = N[t].findIndex((C) => C.value === i);
+  return s = e.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[O], A = e.PAIRS_FOR_EXTENSION.name[t].DEFAULT[O], a = l ? e.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : e.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, c = l ? e.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : e.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, p = e.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, T === r.ORIENTATION.VERTICAL ? R(P, o, I) : R(d, o, I);
 }
 export {
-  x as getDefaultTemplate
+  k as getDefaultTemplate
 };

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

@@ -133,7 +133,7 @@ const a = c(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), G = p("guidoRecommendationExtension", {
+}), G = p("recommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,

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

@@ -1,135 +1,96 @@
-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 {
+var R = Object.defineProperty;
+var _ = (r, o, $) => o in r ? R(r, o, { enumerable: !0, configurable: !0, writable: !0, value: $ }) : r[o] = $;
+var u = (r, o, $) => _(r, typeof o != "symbol" ? o + "" : o, $);
+import { Control as I, UIElementType as E, UEAttr as e } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class C extends I {
   constructor() {
     super(...arguments);
-    l(this, "currentNode");
-    l(this, "lastBlockInstanceId", null);
+    u(this, "currentNode");
   }
   getContainer() {
-    var e;
-    return (e = document.querySelector("ui-editor")) == null ? void 0 : e.shadowRoot;
+    var $;
+    return ($ = document.querySelector("ui-editor")) == null ? void 0 : $.shadowRoot;
   }
-  onTemplateNodeUpdated(e) {
-    this.currentNode = e;
+  onTemplateNodeUpdated($) {
+    this.currentNode = $;
   }
-  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" }) {
+  _GuLabel({ text: $, name: t = "", position: T = "top" }) {
     return `
-            <${t.LABEL} 
-                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
-                ${$.LABEL.text}="${e}" 
-                ${$.LABEL.name}="${n || `${e} Label`}">
-            </${t.LABEL}>
+            <${E.LABEL} 
+                style="${T === "top" ? "margin-bottom: 8px;" : ""}"
+                ${e.LABEL.text}="${$}" 
+                ${e.LABEL.name}="${t || `${$} Label`}">
+            </${E.LABEL}>
         `;
   }
-  _GuToggle(e) {
+  _GuToggle($) {
     return `
-            <${t.SWITCHER}
-                ${$.SWITCHER.name}="${e}">
-            </${t.SWITCHER}>
+            <${E.SWITCHER}
+                ${e.SWITCHER.name}="${$}">
+            </${E.SWITCHER}>
         `;
   }
-  _GuSelectItem({ text: e, value: n }) {
+  _GuSelectItem({ text: $, value: t }) {
     return `
-            <${t.SELECT_ITEM} 
-                ${$.SELECT_ITEM.text}="${e}" 
-                ${$.SELECT_ITEM.value}="${n}">
-            </${t.SELECT_ITEM}>`;
+            <${E.SELECT_ITEM} 
+                ${e.SELECT_ITEM.text}="${$}" 
+                ${e.SELECT_ITEM.value}="${t}">
+            </${E.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
+  _GuSelect({ name: $, placeholder: t, options: T, className: n = "es-180w" }) {
     return `
-            <${t.SELECTPICKER}
-                class="${o}"
-                ${$.SELECTPICKER.name}="${e}"
-                ${$.SELECTPICKER.placeholder}="${n}">
-                    ${E.map((T) => this._GuSelectItem(T)).join("")}
-            </${t.SELECTPICKER}>
+            <${E.SELECTPICKER}
+                class="${n}"
+                ${e.SELECTPICKER.name}="${$}"
+                ${e.SELECTPICKER.placeholder}="${t}">
+                    ${T.map((O) => this._GuSelectItem(O)).join("")}
+            </${E.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
+  _GuTextInput({ name: $, placeholder: t, className: T = "" }) {
     return `
-            <${t.TEXT}
-                class=${E}
-                ${$.TEXT.name}="${e}"
-                placeholder="${n || e}"
-                ${o ? `${$.TEXT.disabled}="true"` : ""}>
-            </${t.TEXT}>
+            <${E.TEXT}
+                class=${T}
+                ${e.TEXT.name}="${$}"
+                placeholder="${t || $}">
+            </${E.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
+  _GuCounter({ name: $, maxValue: t, minValue: T = 1, step: n = 1 }) {
     return `
-            <${t.COUNTER}
-                ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${E}"
-                ${$.COUNTER.maxValue}="${n}"
-                ${$.COUNTER.step}="${o}">
-            </${t.COUNTER}>
+            <${E.COUNTER}
+                ${e.COUNTER.name}="${$}"
+                ${e.COUNTER.minValue}="${T}"
+                ${e.COUNTER.maxValue}="${t}"
+                ${e.COUNTER.step}="${n}">
+            </${E.COUNTER}>
         `;
   }
-  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
+  _GuRadioButtonItem({ text: $, value: t, icon: T }) {
     return `
-            <${t.RADIO_ITEM}
-                ${$.RADIO_ITEM.value}="${n}"
-                ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
-                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
-            </${t.RADIO_ITEM}>
+            <${E.RADIO_ITEM}
+                ${e.RADIO_ITEM.value}="${t}"
+                ${$ ? `${e.RADIO_ITEM.text}="${$}"` : ""}
+                ${T ? `${e.RADIO_ITEM.icon}="${T}"` : ""}>
+            </${E.RADIO_ITEM}>
         `;
   }
-  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
+  _GuRadioButton({ name: $, buttons: t, id: T = "" }) {
     return `
-            <${t.RADIO_BUTTONS}
-                ${E ? `id="${E}"` : ""}
-                ${$.RADIO_BUTTONS.name}="${e}">
-                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
-            </${t.RADIO_BUTTONS}>
+            <${E.RADIO_BUTTONS}
+                ${T ? `id="${T}"` : ""}
+                ${e.RADIO_BUTTONS.name}="${$}">
+                ${t.map((n) => this._GuRadioButtonItem(n)).join("")}
+            </${E.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: n, id: E = "" }) {
+  _GuButton({ name: $, label: t, id: T = "" }) {
     return `
-            <${t.BUTTON}
-                ${$.BUTTON.name}="${e}"
-                ${E ? `id="${E}"` : ""}
-                ${$.BUTTON.caption}="${n}"}>
-            </${t.BUTTON}>
+            <${E.BUTTON}
+                ${e.BUTTON.name}="${$}"
+                ${T ? `id="${T}"` : ""}
+                ${e.BUTTON.caption}="${t}"}>
+            </${E.BUTTON}>
         `;
   }
   /**
@@ -137,26 +98,26 @@ class _ extends O {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: n, className: E = "" }) {
+  _GuIconButton({ name: $, icon: t, className: T = "" }) {
     return `
-            <${t.BUTTON}
-                class="${E}"
-                ${$.BUTTON.name}="${e}"
-                ${$.BUTTON.icon}="${n}">
-            </${t.BUTTON}>
+            <${E.BUTTON}
+                class="${T}"
+                ${e.BUTTON.name}="${$}"
+                ${e.BUTTON.icon}="${t}">
+            </${E.BUTTON}>
         `;
   }
-  _GuOneColumn(e, n = "") {
+  _GuOneColumn($, t = "") {
     return `
-            <div class="container one-column ${n}">
-                ${e.join("")}
+            <div class="container one-column ${t}">
+                ${$.join("")}
             </div>
         `;
   }
-  _GuTwoColumns(e, n = "") {
+  _GuTwoColumns($, t = "") {
     return `
-            <div class="container two-columns ${n}">
-                ${e.join("")}
+            <div class="container two-columns ${t}">
+                ${$.join("")}
             </div>
         `;
   }
@@ -167,82 +128,82 @@ class _ extends O {
    * @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}>
+  _GuOrderable($, t) {
+    let T = "";
+    t.forEach((O) => {
+      const a = e.ORDERABLE_ITEM && "name" in e.ORDERABLE_ITEM ? e.ORDERABLE_ITEM.name : "name";
+      T += `
+                <${E.ORDERABLE_ITEM} ${a}="${O.key}">
+                    ${O.content}
+                </${E.ORDERABLE_ITEM}>
             `;
     });
-    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const n = e.ORDERABLE && "name" in e.ORDERABLE ? e.ORDERABLE.name : "name";
     return `
-            <${t.ORDERABLE} ${o}="${e}">
-                ${E}
-            </${t.ORDERABLE}>
+            <${E.ORDERABLE} ${n}="${$}">
+                ${T}
+            </${E.ORDERABLE}>
         `;
   }
-  _GuNestedControl(e, n) {
+  _GuNestedControl($, t) {
     return `
-            <${t.NESTED_CONTROL} ${$.NESTED_CONTROL.controlId}="${e}">
-                ${n}
-            </${t.NESTED_CONTROL}>
+            <${E.NESTED_CONTROL} ${e.NESTED_CONTROL.controlId}="${$}">
+                ${t}
+            </${E.NESTED_CONTROL}>
         `;
   }
-  _GuExpandable(e, n) {
+  _GuExpandable($, t) {
     return `
-            <${t.EXPANDABLE}>
-                <${t.EXPANDABLE_HEADER}>
-                    <${t.LABEL} ${$.LABEL.text}="${e}"></${t.LABEL}>
-                </${t.EXPANDABLE_HEADER}>
-                <${t.EXPANDABLE_CONTENT}>
+            <${E.EXPANDABLE}>
+                <${E.EXPANDABLE_HEADER}>
+                    <${E.LABEL} ${e.LABEL.text}="${$}"></${E.LABEL}>
+                </${E.EXPANDABLE_HEADER}>
+                <${E.EXPANDABLE_CONTENT}>
 
-                    ${n}
+                    ${t}
 
-                </${t.EXPANDABLE_CONTENT}>
-            </${t.EXPANDABLE}>
+                </${E.EXPANDABLE_CONTENT}>
+            </${E.EXPANDABLE}>
         `;
   }
-  _GuColorPicker(e) {
+  _GuColorPicker($) {
     return `
-            <${t.COLOR}
-                ${$.COLOR.name}="${e}">
-            </${t.COLOR}>
+            <${E.COLOR}
+                ${e.COLOR.name}="${$}">
+            </${E.COLOR}>
         `;
   }
-  _GuFontFamily(e, n = "Select Font") {
+  _GuFontFamily($, t = "Select Font") {
     return `
-            <${t.FONT_FAMILY_SELECT}
-                ${$.FONT_FAMILY_SELECT.name}="${e}"
-                ${$.FONT_FAMILY_SELECT.placeholder}="${n}">
-            </${t.FONT_FAMILY_SELECT}>
+            <${E.FONT_FAMILY_SELECT}
+                ${e.FONT_FAMILY_SELECT.name}="${$}"
+                ${e.FONT_FAMILY_SELECT.placeholder}="${t}">
+            </${E.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}>
+  _GuRadioButtons($, t) {
+    const T = t.map((n) => `
+                <${E.RADIO_ITEM}
+                    ${e.RADIO_ITEM.text}="${n.text}"
+                    ${e.RADIO_ITEM.value}="${n.value}">
+                </${E.RADIO_ITEM}>
             `).join("");
     return `
-            <${t.RADIO_BUTTONS}
-                ${$.RADIO_BUTTONS.name}="${e}">
-                ${E}
-            </${t.RADIO_BUTTONS}>
+            <${E.RADIO_BUTTONS}
+                ${e.RADIO_BUTTONS.name}="${$}">
+                ${T}
+            </${E.RADIO_BUTTONS}>
         `;
   }
-  _GuCheckbox(e, n) {
+  _GuCheckbox($, t) {
     return `
-            <${t.CHECKBOX}
-                ${$.CHECKBOX.name}="${e}"
-                ${$.CHECKBOX.caption}="${n}">
-            </${t.CHECKBOX}>
+            <${E.CHECKBOX}
+                ${e.CHECKBOX.name}="${$}"
+                ${e.CHECKBOX.caption}="${t}">
+            </${E.CHECKBOX}>
         `;
   }
 }
 export {
-  _ as CommonControl
+  C as CommonControl
 };