@mobilon-dev/chotto 0.3.96 → 0.3.98

package/dist/components/2_chatinput_elements/WABATemplateSelector/WABATemplateSelector.vue.js

@@ -1,33 +1,12 @@
-import { inject as re, ref as i, computed as u, reactive as ce, onMounted as ie, unref as F, createElementBlock as n, openBlock as o, createElementVNode as s, normalizeClass as j, createCommentVNode as p, Fragment as S, renderList as R, withDirectives as $, vModelRadio as ue, toDisplayString as I, vModelText as de, normalizeStyle as pe, createBlock as L, createVNode as me } from "vue";
-import ve from "../../3_compounds/Feed/assets/chat-background.svg.js";
-import _e from "../PlaceholderComponent/PlaceholderComponent.vue.js";
-import fe from "../WABAAttachmentSection/WABAAttachmentSection.vue.js";
-import ye from "../WABAQuickReplyButtons/WABAQuickReplyButtons.vue.js";
-import he from "../WABASeparatedQuickButtons/WABASeparatedQuickButtons.vue.js";
+import { createElementBlock as r, openBlock as s, createElementVNode as l, normalizeClass as O, createCommentVNode as h, Fragment as W, renderList as U, withDirectives as K, vModelRadio as me, toDisplayString as I, vModelText as _e, normalizeStyle as ve, createBlock as M, createVNode as fe, inject as Y, ref as i, computed as u, reactive as Z, onMounted as $, unref as z } from "vue";
+import ee from "../../3_compounds/Feed/assets/chat-background.svg.js";
+import he from "../PlaceholderComponent/PlaceholderComponent.vue.js";
+import ye from "../WABAAttachmentSection/WABAAttachmentSection.vue.js";
+import be from "../WABAQuickReplyButtons/WABAQuickReplyButtons.vue.js";
+import ge from "../WABASeparatedQuickButtons/WABASeparatedQuickButtons.vue.js";
 /* empty css                          */
-import be from "../../../_virtual/_plugin-vue_export-helper.js";
-const ge = { class: "template-selector" }, we = ["id"], ke = { style: { display: "flex" } }, Te = { style: { display: "flex" } }, Ce = {
-  key: 0,
-  class: "template-selector__button-close"
-}, xe = {
-  key: 1,
-  class: "template-selector__button-close"
-}, Ve = { class: "template-selector__layout" }, Se = { class: "template-selector__first-col" }, Ie = { class: "template-selector__list-groups" }, Ae = { class: "template-selector__label-group" }, Be = ["src", "alt"], We = ["id", "value"], Ee = { class: "template-selector__second-col" }, Pe = { class: "template-selector__searching-container" }, Fe = { class: "template-selector__templates" }, je = {
-  key: 0,
-  class: "template-selector__list-templates"
-}, Re = ["onClick"], Le = { class: "template-selector__item-template-info" }, Oe = { class: "template-selector__item-title" }, Ue = { class: "template-selector__item-text" }, ze = {
-  key: 1,
-  class: "template-selector__plug"
-}, Me = { class: "template-selector__third-col" }, Qe = {
-  key: 0,
-  class: "template-selector__preview"
-}, $e = { class: "template-selector__preview-wrapper" }, qe = { class: "template-selector__preview-text-container" }, Ne = { key: 0 }, Xe = {
-  key: 1,
-  class: "template-selector__plug"
-}, De = {
-  key: 2,
-  class: "template-selector__reply-buttons"
-}, Ge = ["disabled"], He = {
+import we from "../../../_virtual/_plugin-vue_export-helper.js";
+const Te = {
   __name: "WABATemplateSelector",
   props: {
     wabaTemplates: {
@@ -51,11 +30,12 @@ const ge = { class: "template-selector" }, we = ["id"], ke = { style: { display:
     }
   },
   emits: ["closeTemplateWindow", "sendWabaValues"],
-  setup(w, { emit: q }) {
-    const m = w, y = re("chatAppId"), A = q, N = () => {
-      A("closeTemplateWindow"), z();
-    }, X = () => {
-      A("closeTemplateWindow");
+  setup(G, { expose: p, emit: b }) {
+    p();
+    const t = G, y = Y("chatAppId"), g = b, o = () => {
+      g("closeTemplateWindow"), j();
+    }, m = () => {
+      g("closeTemplateWindow");
       const e = {
         text: "",
         templateId: "",
@@ -63,219 +43,318 @@ const ge = { class: "template-selector" }, we = ["id"], ke = { style: { display:
         file: null,
         buttons: null
       };
-      v.value ? (e.text = M.value, e.templateId = a.value.templateId, e.values = Q.value, e.file = v.value) : (e.text = M.value, e.templateId = a.value.templateId, e.values = Q.value), a.value.buttons && (e.buttons = a.value.buttons), A("sendWabaValues", e), z();
-    }, D = (e) => {
+      v.value ? (e.text = L.value, e.templateId = n.value.templateId, e.values = Q.value, e.file = v.value) : (e.text = L.value, e.templateId = n.value.templateId, e.values = Q.value), n.value.buttons && (e.buttons = n.value.buttons), g("sendWabaValues", e), j();
+    }, w = (e) => {
       v.value = e;
-    }, k = i(null), h = i(null), a = i(null), v = i(null), B = i(""), b = i(!1), W = () => {
-      b.value = !b.value, b.value ? (k.value.scrollTop = 0, k.value.style["overflow-y"] = "hidden") : k.value.style["overflow-y"] = "scroll";
-    }, G = (e) => {
-      Object.keys(r).forEach((l) => {
-        r[l] = "";
-      }), v.value = null, m.wabaTemplates.forEach((l) => l.isSelected = !1), e.isSelected = !0, a.value = e, b.value = !1, U();
-    }, H = () => {
-      P(), m.wabaTemplates.forEach((e) => e.isSelected = !1);
-    }, J = u(() => m.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ve)}`), K = u(() => h.value ? m.wabaTemplates.filter((e) => e.groupId === h.value.groupId) : m.wabaTemplates), O = u(() => {
-      const e = B.value.trim().toLowerCase();
-      return K.value.filter((l) => l.title.toLowerCase().includes(e) || l.template.toLowerCase().includes(e));
-    }), r = ce({}), Y = i(null), E = i(), T = i(""), d = i(""), C = i(""), _ = i(!1), Z = u(() => !!(_.value && (C.value == "grid" && d.value == "none" || d.value == "grid" && T.value == "none"))), ee = u(() => !!(_.value && (T.value == "grid" && d.value == "none" || d.value == "grid" && C.value == "none"))), te = () => {
-      _.value && (d.value == "grid" ? se() : C.value == "grid" && P());
-    }, le = () => {
-      _.value && (d.value == "grid" ? U() : T.value == "grid" && P());
-    }, se = () => {
+    }, V = i(null), P = i(null), n = i(null), v = i(null), q = i(""), T = i(!1), te = () => {
+      T.value = !T.value, T.value ? (V.value.scrollTop = 0, V.value.style["overflow-y"] = "hidden") : V.value.style["overflow-y"] = "scroll";
+    }, le = (e) => {
+      Object.keys(d).forEach((a) => {
+        d[a] = "";
+      }), v.value = null, t.wabaTemplates.forEach((a) => a.isSelected = !1), e.isSelected = !0, n.value = e, T.value = !1, F();
+    }, ae = () => {
+      B(), t.wabaTemplates.forEach((e) => e.isSelected = !1);
+    }, oe = u(() => t.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ee)}`), N = u(() => P.value ? t.wabaTemplates.filter((e) => e.groupId === P.value.groupId) : t.wabaTemplates), se = u(() => {
+      const e = q.value.trim().toLowerCase();
+      return N.value.filter((a) => a.title.toLowerCase().includes(e) || a.template.toLowerCase().includes(e));
+    }), d = Z({}), ne = i(null), E = i(), k = i(""), _ = i(""), A = i(""), f = i(!1), re = u(() => !!(f.value && (A.value == "grid" && _.value == "none" || _.value == "grid" && k.value == "none"))), ce = u(() => !!(f.value && (k.value == "grid" && _.value == "none" || _.value == "grid" && A.value == "none"))), ie = () => {
+      f.value && (_.value == "grid" ? X() : A.value == "grid" && B());
+    }, de = () => {
+      f.value && (_.value == "grid" ? F() : k.value == "grid" && B());
+    }, X = () => {
       const e = document.getElementById("waba-template-selector-container-" + y);
-      e.style.setProperty("--chotto-waba-template-first-col-display", "grid"), e.style.setProperty("--chotto-waba-template-second-col-display", "none"), console.log(e, window.getComputedStyle(e).getPropertyValue("--waba-template-first-col-display")), x();
-    }, U = () => {
+      e.style.setProperty("--chotto-waba-template-first-col-display", "grid"), e.style.setProperty("--chotto-waba-template-second-col-display", "none"), console.log(e, window.getComputedStyle(e).getPropertyValue("--waba-template-first-col-display")), S();
+    }, F = () => {
       const e = document.getElementById("waba-template-selector-container-" + y);
-      e.style.setProperty("--chotto-waba-template-third-col-display", "grid"), e.style.setProperty("--chotto-waba-template-second-col-display", "none"), x();
-    }, P = () => {
+      e.style.setProperty("--chotto-waba-template-third-col-display", "grid"), e.style.setProperty("--chotto-waba-template-second-col-display", "none"), S();
+    }, B = () => {
       const e = document.getElementById("waba-template-selector-container-" + y);
-      e.style.setProperty("--chotto-waba-template-second-col-display", "grid"), e.style.setProperty("--chotto-waba-template-first-col-display", "none"), e.style.setProperty("--chotto-waba-template-third-col-display", "none"), x();
-    }, x = () => {
-      const e = document.getElementById("waba-template-selector-container-" + y), l = window.getComputedStyle(e);
-      T.value = l.getPropertyValue("--chotto-waba-template-first-col-display"), d.value = l.getPropertyValue("--chotto-waba-template-second-col-display"), C.value = l.getPropertyValue("--chotto-waba-template-third-col-display");
-    }, ae = (e) => {
-      r[e[1]] = e[0];
-    }, V = u(() => {
-      var f;
-      const e = (f = a.value) == null ? void 0 : f.template;
+      e.style.setProperty("--chotto-waba-template-second-col-display", "grid"), e.style.setProperty("--chotto-waba-template-first-col-display", "none"), e.style.setProperty("--chotto-waba-template-third-col-display", "none"), S();
+    }, S = () => {
+      const e = document.getElementById("waba-template-selector-container-" + y), a = window.getComputedStyle(e);
+      k.value = a.getPropertyValue("--chotto-waba-template-first-col-display"), _.value = a.getPropertyValue("--chotto-waba-template-second-col-display"), A.value = a.getPropertyValue("--chotto-waba-template-third-col-display");
+    }, ue = (e) => {
+      d[e[1]] = e[0];
+    }, R = u(() => {
+      var J;
+      const e = (J = n.value) == null ? void 0 : J.template;
       if (!e) return [];
-      const l = [...e.matchAll(/{{\d+}}/g)], t = [];
-      let c = 0;
-      return l.forEach((g) => {
-        g.index > c && t.push(e.substring(c, g.index)), t.push({ index: parseInt(g[0].slice(2, -2)) }), c = g.index + g[0].length;
-      }), c < e.length && t.push(e.substring(c)), t;
-    }), oe = u(() => {
-      var l, t;
-      if (!a.value)
+      const a = [...e.matchAll(/{{\d+}}/g)], c = [];
+      let x = 0;
+      return a.forEach((C) => {
+        C.index > x && c.push(e.substring(x, C.index)), c.push({ index: parseInt(C[0].slice(2, -2)) }), x = C.index + C[0].length;
+      }), x < e.length && c.push(e.substring(x)), c;
+    }), pe = u(() => {
+      var a, c;
+      if (!n.value)
         return !0;
-      if (!((l = a.value) != null && l.template.match(/{{\d+}}/gi)))
+      if (!((a = n.value) != null && a.template.match(/{{\d+}}/gi)))
         return !1;
-      const e = Object.keys(r).length !== ((t = a.value) == null ? void 0 : t.template.match(/{{\d+}}/gi).length);
-      return a.value.type === "TEXT" ? e : a.value.type !== "TEXT" ? e || !v.value : !1;
-    }), z = () => {
-      Object.keys(r).forEach((e) => {
-        r[e] = "";
-      }), v.value = null, a.value = null, m.wabaTemplates.forEach((e) => e.isSelected = !1);
-    }, M = u(() => {
-      console.log(V.value, a.value.buttons);
-      let e = V.value.map((t) => typeof t == "string" ? t : r[t.index]).join(""), l = "";
-      return a.value.buttons && (l = a.value.buttons.map((t) => `
-| [` + t.text + "]").join("")), e.concat(l);
+      const e = Object.keys(d).length !== ((c = n.value) == null ? void 0 : c.template.match(/{{\d+}}/gi).length);
+      return n.value.type === "TEXT" ? e : n.value.type !== "TEXT" ? e || !v.value : !1;
+    }), j = () => {
+      Object.keys(d).forEach((e) => {
+        d[e] = "";
+      }), v.value = null, n.value = null, t.wabaTemplates.forEach((e) => e.isSelected = !1);
+    }, L = u(() => {
+      console.log(R.value, n.value.buttons);
+      let e = R.value.map((c) => typeof c == "string" ? c : d[c.index]).join(""), a = "";
+      return n.value.buttons && (a = n.value.buttons.map((c) => `
+| [` + c.text + "]").join("")), e.concat(a);
     }), Q = u(() => {
       const e = [];
-      for (const l in r)
-        r[l] !== "" && r[l] !== "Заполнить" && e.push(r[l]);
+      for (const a in d)
+        d[a] !== "" && d[a] !== "Заполнить" && e.push(d[a]);
       return e;
-    }), ne = new ResizeObserver((e) => {
-      const l = e[0].target.clientWidth;
-      l > 700 && (_.value = !1), l < 700 && (_.value = !0);
+    }), D = new ResizeObserver((e) => {
+      const a = e[0].target.clientWidth;
+      a > 700 && (f.value = !1), a < 700 && (f.value = !0);
     });
-    return ie(() => {
-      x(), F(E) && ne.observe(F(E));
-    }), (e, l) => (o(), n("div", ge, [
-      s("div", {
-        id: "waba-template-selector-container-" + F(y),
-        ref_key: "refContainer",
-        ref: E,
-        class: j({
-          "template-selector__container-inline": !w.elevatedWindow,
-          "template-selector__container-elevated": w.elevatedWindow
-        })
-      }, [
-        s("div", ke, [
-          s("div", Te, [
-            Z.value ? (o(), n("button", Ce, [
-              s("span", {
-                class: "pi pi-arrow-left",
-                onClick: te
-              })
-            ])) : p("", !0),
-            ee.value ? (o(), n("button", xe, [
-              s("span", {
-                class: "pi pi-arrow-right",
-                onClick: le
-              })
-            ])) : p("", !0)
-          ]),
-          s("button", { class: "template-selector__button-close" }, [
-            s("span", {
-              class: "pi pi-times",
-              onClick: N
+    $(() => {
+      S(), z(E) && D.observe(z(E));
+    });
+    const H = { props: t, chatAppId: y, emit: g, closeTemplateWindow: o, handlePutMessage: m, handleFileSelected: w, previewContainer: V, selectedGroup: P, selectedTemplate: n, selectedFile: v, searchQuery: q, allVariantsShow: T, selectAllVariants: te, selectTemplate: le, clearSelectedTemplate: ae, defaultBackground: oe, filteredTemplates: N, searchedTemplate: se, wabaValues: d, selectedIndex: ne, refContainer: E, showFirstCol: k, showSecondCol: _, showThirdCol: A, isOneCol: f, allowTurnLeft: re, allowTurnRight: ce, turnLeft: ie, turnRight: de, setFirstColVisible: X, setThirdColVisible: F, setSecondColVisible: B, updateShowValues: S, updateWabaValue: ue, templateParts: R, allFieldsUnFilled: pe, resetValues: j, fullText: L, enteredValues: Q, resizeObserver: D, computed: u, ref: i, reactive: Z, onMounted: $, inject: Y, unref: z, get chatBackgroundRaw() {
+      return ee;
+    }, PlaceholderComponent: he, WABAAttachmentSection: ye, WABAQuickReplyButtons: be, WABASeparatedQuickButtons: ge };
+    return Object.defineProperty(H, "__isScriptSetup", { enumerable: !1, value: !0 }), H;
+  }
+}, ke = { class: "template-selector" }, Ae = ["id"], Se = { style: { display: "flex" } }, xe = { style: { display: "flex" } }, Ce = {
+  key: 0,
+  class: "template-selector__button-close"
+}, Ve = {
+  key: 1,
+  class: "template-selector__button-close"
+}, Be = { class: "template-selector__layout" }, We = { class: "template-selector__first-col" }, Ie = { class: "template-selector__list-groups" }, Pe = { class: "template-selector__label-group" }, Ee = ["src", "alt"], Fe = ["id", "value"], Re = { class: "template-selector__second-col" }, je = { class: "template-selector__searching-container" }, Le = { class: "template-selector__templates" }, Qe = {
+  key: 0,
+  class: "template-selector__list-templates"
+}, Oe = ["onClick"], Ue = { class: "template-selector__item-template-info" }, Me = { class: "template-selector__item-title" }, ze = { class: "template-selector__item-text" }, Ge = {
+  key: 1,
+  class: "template-selector__plug"
+}, qe = { class: "template-selector__third-col" }, Ne = {
+  key: 0,
+  class: "template-selector__preview"
+}, Xe = { class: "template-selector__preview-wrapper" }, De = { class: "template-selector__preview-text-container" }, He = { key: 0 }, Je = {
+  key: 1,
+  class: "template-selector__plug"
+}, Ke = {
+  key: 2,
+  class: "template-selector__reply-buttons"
+}, Ye = ["disabled"];
+function Ze(G, p, b, t, y, g) {
+  return s(), r("div", ke, [
+    l("div", {
+      id: "waba-template-selector-container-" + t.chatAppId,
+      ref: "refContainer",
+      class: O({
+        "template-selector__container-inline": !b.elevatedWindow,
+        "template-selector__container-elevated": b.elevatedWindow
+      })
+    }, [
+      l("div", Se, [
+        l("div", xe, [
+          t.allowTurnLeft ? (s(), r("button", Ce, [
+            l("span", {
+              class: "pi pi-arrow-left",
+              onClick: t.turnLeft
+            })
+          ])) : h("v-if", !0),
+          t.allowTurnRight ? (s(), r("button", Ve, [
+            l("span", {
+              class: "pi pi-arrow-right",
+              onClick: t.turnRight
             })
+          ])) : h("v-if", !0)
+        ]),
+        l("button", { class: "template-selector__button-close" }, [
+          l("span", {
+            class: "pi pi-times",
+            onClick: t.closeTemplateWindow
+          })
+        ])
+      ]),
+      l("div", Be, [
+        l("div", We, [
+          l("ul", Ie, [
+            (s(!0), r(
+              W,
+              null,
+              U(b.groupTemplates, (o, m) => (s(), r(
+                "li",
+                {
+                  key: m,
+                  class: O(["template-selector__item-group", { "template-selector__item-selected": t.selectedGroup === o }]),
+                  onClick: t.clearSelectedTemplate
+                },
+                [
+                  l("label", Pe, [
+                    o.iconUrl ? (s(), r("img", {
+                      key: 0,
+                      class: "template-selector__item-group-icon",
+                      src: o.iconUrl,
+                      alt: o.title
+                    }, null, 8, Ee)) : h("v-if", !0),
+                    K(l("input", {
+                      id: m,
+                      "onUpdate:modelValue": p[0] || (p[0] = (w) => t.selectedGroup = w),
+                      value: o,
+                      class: "template-selector__input-group",
+                      type: "radio"
+                    }, null, 8, Fe), [
+                      [me, t.selectedGroup]
+                    ]),
+                    l(
+                      "span",
+                      null,
+                      I(o.title),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                2
+                /* CLASS */
+              ))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
           ])
         ]),
-        s("div", Ve, [
-          s("div", Se, [
-            s("ul", Ie, [
-              (o(!0), n(S, null, R(w.groupTemplates, (t, c) => (o(), n("li", {
-                key: c,
-                class: j(["template-selector__item-group", { "template-selector__item-selected": h.value === t }]),
-                onClick: H
-              }, [
-                s("label", Ae, [
-                  t.iconUrl ? (o(), n("img", {
-                    key: 0,
-                    class: "template-selector__item-group-icon",
-                    src: t.iconUrl,
-                    alt: t.title
-                  }, null, 8, Be)) : p("", !0),
-                  $(s("input", {
-                    id: c,
-                    "onUpdate:modelValue": l[0] || (l[0] = (f) => h.value = f),
-                    value: t,
-                    class: "template-selector__input-group",
-                    type: "radio"
-                  }, null, 8, We), [
-                    [ue, h.value]
-                  ]),
-                  s("span", null, I(t.title), 1)
-                ])
-              ], 2))), 128))
-            ])
-          ]),
-          s("div", Ee, [
-            s("div", Pe, [
-              $(s("input", {
-                "onUpdate:modelValue": l[1] || (l[1] = (t) => B.value = t),
+        l("div", Re, [
+          l("div", je, [
+            K(l(
+              "input",
+              {
+                "onUpdate:modelValue": p[1] || (p[1] = (o) => t.searchQuery = o),
                 class: "template-selector__searching-input",
                 type: "text",
                 placeholder: "Поиск шаблона"
-              }, null, 512), [
-                [de, B.value]
-              ])
-            ]),
-            s("div", Fe, [
-              O.value.length !== 0 ? (o(), n("ul", je, [
-                (o(!0), n(S, null, R(O.value, (t, c) => (o(), n("li", {
-                  key: c,
-                  class: j(["template-selector__item-template", { "template-selector__item-selected": t.isSelected }]),
-                  onClick: (f) => G(t)
-                }, [
-                  s("div", Le, [
-                    s("p", Oe, I(t.title), 1),
-                    s("p", Ue, I(t.template), 1)
-                  ])
-                ], 10, Re))), 128))
-              ])) : (o(), n("p", ze, " Шаблоны отсутствуют "))
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [_e, t.searchQuery]
             ])
           ]),
-          s("div", Me, [
-            s("div", {
-              ref_key: "previewContainer",
-              ref: k,
+          l("div", Le, [
+            t.searchedTemplate.length !== 0 ? (s(), r("ul", Qe, [
+              (s(!0), r(
+                W,
+                null,
+                U(t.searchedTemplate, (o, m) => (s(), r("li", {
+                  key: m,
+                  class: O(["template-selector__item-template", { "template-selector__item-selected": o.isSelected }]),
+                  onClick: (w) => t.selectTemplate(o)
+                }, [
+                  l("div", Ue, [
+                    l(
+                      "p",
+                      Me,
+                      I(o.title),
+                      1
+                      /* TEXT */
+                    ),
+                    l(
+                      "p",
+                      ze,
+                      I(o.template),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ], 10, Oe))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : (s(), r("p", Ge, " Шаблоны отсутствуют "))
+          ])
+        ]),
+        l("div", qe, [
+          l(
+            "div",
+            {
+              ref: "previewContainer",
               class: "template-selector__preview-container",
-              style: pe({ backgroundImage: `url(${J.value})` })
-            }, [
-              V.value.length > 0 ? (o(), n("div", Qe, [
-                s("div", $e, [
-                  a.value.type != "TEXT" ? (o(), L(fe, {
+              style: ve({ backgroundImage: `url(${t.defaultBackground})` })
+            },
+            [
+              t.templateParts.length > 0 ? (s(), r("div", Ne, [
+                l("div", Xe, [
+                  t.selectedTemplate.type != "TEXT" ? (s(), M(t.WABAAttachmentSection, {
                     key: 0,
-                    type: a.value.type,
-                    "template-id": a.value.templateId,
-                    onFileSelected: D
-                  }, null, 8, ["type", "template-id"])) : p("", !0),
-                  s("div", qe, [
-                    (o(!0), n(S, null, R(V.value, (t, c) => (o(), n(S, { key: c }, [
-                      typeof t == "string" ? (o(), n("span", Ne, I(t), 1)) : typeof t == "object" ? (o(), L(_e, {
-                        key: 1,
-                        index: t.index,
-                        value: r[t.index] || "Заполнить",
-                        "is-filled": !!r[t.index],
-                        onClick: (f) => Y.value = t.index,
-                        onEdit: ae
-                      }, null, 8, ["index", "value", "is-filled", "onClick"])) : p("", !0)
-                    ], 64))), 128))
+                    type: t.selectedTemplate.type,
+                    "template-id": t.selectedTemplate.templateId,
+                    onFileSelected: t.handleFileSelected
+                  }, null, 8, ["type", "template-id"])) : h("v-if", !0),
+                  l("div", De, [
+                    (s(!0), r(
+                      W,
+                      null,
+                      U(t.templateParts, (o, m) => (s(), r(
+                        W,
+                        { key: m },
+                        [
+                          typeof o == "string" ? (s(), r(
+                            "span",
+                            He,
+                            I(o),
+                            1
+                            /* TEXT */
+                          )) : typeof o == "object" ? (s(), M(t.PlaceholderComponent, {
+                            key: 1,
+                            index: o.index,
+                            value: t.wabaValues[o.index] || "Заполнить",
+                            "is-filled": !!t.wabaValues[o.index],
+                            onClick: (w) => t.selectedIndex = o.index,
+                            onEdit: t.updateWabaValue
+                          }, null, 8, ["index", "value", "is-filled", "onClick"])) : h("v-if", !0)
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
                   ]),
-                  l[2] || (l[2] = s("p", { class: "template-selector__preview-time" }, " 22:22 ", -1)),
-                  a.value.buttons ? (o(), L(ye, {
+                  p[2] || (p[2] = l(
+                    "p",
+                    { class: "template-selector__preview-time" },
+                    " 22:22 ",
+                    -1
+                    /* CACHED */
+                  )),
+                  t.selectedTemplate.buttons ? (s(), M(t.WABAQuickReplyButtons, {
                     key: 1,
-                    buttons: a.value.buttons,
-                    onSelectAllVariants: W
-                  }, null, 8, ["buttons"])) : p("", !0)
+                    buttons: t.selectedTemplate.buttons,
+                    onSelectAllVariants: t.selectAllVariants
+                  }, null, 8, ["buttons"])) : h("v-if", !0)
                 ])
-              ])) : (o(), n("p", Xe, " Предпросмотр шаблона ")),
-              b.value ? (o(), n("div", De, [
-                s("div", {
+              ])) : (s(), r("p", Je, " Предпросмотр шаблона ")),
+              t.allVariantsShow ? (s(), r("div", Ke, [
+                l("div", {
                   class: "template-selector__semitransparent-overlay",
-                  onClick: W
+                  onClick: t.selectAllVariants
                 }),
-                me(he, {
-                  buttons: a.value.buttons,
-                  onSelectAllVariants: W
+                fe(t.WABASeparatedQuickButtons, {
+                  buttons: t.selectedTemplate.buttons,
+                  onSelectAllVariants: t.selectAllVariants
                 }, null, 8, ["buttons"])
-              ])) : p("", !0)
-            ], 4),
-            s("button", {
-              class: "template-selector__button-paste",
-              disabled: oe.value,
-              onClick: X
-            }, " Отправить ", 8, Ge)
-          ])
+              ])) : h("v-if", !0)
+            ],
+            4
+            /* STYLE */
+          ),
+          l("button", {
+            class: "template-selector__button-paste",
+            disabled: t.allFieldsUnFilled,
+            onClick: t.handlePutMessage
+          }, " Отправить ", 8, Ye)
         ])
-      ], 10, we)
-    ]));
-  }
-}, at = /* @__PURE__ */ be(He, [["__scopeId", "data-v-3a4405f2"]]);
+      ])
+    ], 10, Ae)
+  ]);
+}
+const rt = /* @__PURE__ */ we(Te, [["render", Ze], ["__scopeId", "data-v-e9bb3fee"], ["__file", "/var/store/dev-space/repos-projects/chotto/chotto/src/components/2_chatinput_elements/WABATemplateSelector/WABATemplateSelector.vue"]]);
 export {
-  at as default
+  rt as default
 };