@mobilon-dev/chotto 0.3.32 → 0.3.34

package/dist/components/2_chatinput_elements/FileUploader/FileUploader.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as M, ref as d, inject as z, computed as A, onMounted as B, createElementBlock as m, openBlock as s, Fragment as E, createCommentVNode as v, createElementVNode as p, createBlock as b, normalizeClass as V, createVNode as D, unref as g, Teleport as N } from "vue";
-import x from "../FilePreview/FilePreview.vue.js";
-import { uploadFile as R } from "../../../hooks/uploadFile/uploadFile.js";
-import { useMessageDraft as j } from "../../../hooks/useMessageDraft.js";
+import { defineComponent as x, ref as n, inject as O, computed as M, watchEffect as P, onMounted as $, onUnmounted as H, createElementBlock as w, openBlock as a, Fragment as L, createCommentVNode as b, createElementVNode as m, createBlock as S, normalizeClass as R, createVNode as j, unref as h, Teleport as T } from "vue";
+import q from "../FilePreview/FilePreview.vue.js";
+import { uploadFile as G } from "../../../hooks/uploadFile/uploadFile.js";
+import { useMessageDraft as J } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../functions/parseMarkdown.js";
-import L from "./icons/FileUploaderIcon.vue.js";
-const O = { key: 0 }, P = { key: 1 }, T = ["disabled"], ie = /* @__PURE__ */ M({
+import K from "./icons/FileUploaderIcon.vue.js";
+const Q = { key: 0 }, W = { key: 1 }, X = ["disabled"], pe = /* @__PURE__ */ x({
   __name: "FileUploader",
   props: {
     filebumpUrl: {
@@ -22,39 +22,57 @@ const O = { key: 0 }, P = { key: 1 }, T = ["disabled"], ie = /* @__PURE__ */ M({
     }
   },
   emits: ["fileUploaded"],
-  setup(u, { emit: q }) {
-    const f = u, l = d(""), o = d(), r = d(), a = z("chatAppId"), { setMessageFile: k, resetMessageFile: I, getMessage: y, setRecordingMessage: w } = j(a), c = A(() => !y().file), F = () => {
-      const t = document.getElementById("chat-input-file-line-" + a);
-      t && (t.style.display = "none"), I(), r.value = void 0, l.value = "";
-    }, h = async () => {
-      var t, i;
-      F(), (t = o.value) != null && t.files && U((i = o.value) == null ? void 0 : i.files[0]);
-    }, C = () => {
-      o.value && c && f.state == "active" && o.value.click();
-    }, S = async (t) => {
+  setup(d, { emit: Y }) {
+    const v = d, r = n(""), s = n(), p = n(), B = n(), i = O("chatAppId"), { setMessageFile: V, resetMessageFile: z, getMessage: C, setRecordingMessage: I } = J(i), f = n("#5F5F5F"), c = n("#404040"), g = n(!1);
+    let u = null;
+    const y = () => {
+      if (!i) {
+        f.value = "#5F5F5F", c.value = "#404040";
+        return;
+      }
+      const l = document.getElementById(i);
+      if (!l) {
+        f.value = "#5F5F5F", c.value = "#404040";
+        return;
+      }
+      const t = window.getComputedStyle(l), e = t.getPropertyValue("--chotto-fileuploader-trigger-color").trim(), o = t.getPropertyValue("--chotto-fileuploader-trigger-hover-color").trim();
+      f.value = e || "#5F5F5F", c.value = o || "#404040";
+    }, A = M(() => g.value ? c.value : f.value);
+    P(() => {
+      y();
+    });
+    const F = M(() => !C().file), E = () => {
+      const l = document.getElementById("chat-input-file-line-" + i);
+      l && (l.style.display = "none"), z(), p.value = void 0, r.value = "";
+    }, N = async () => {
+      var l, t;
+      E(), (l = s.value) != null && l.files && U((t = s.value) == null ? void 0 : t.files[0]);
+    }, D = () => {
+      s.value && F && v.state == "active" && s.value.click();
+    }, k = async (l) => {
       var e;
-      const i = (e = t.clipboardData) == null ? void 0 : e.items;
-      if (i) {
-        for (let n of i)
-          if (n.type.indexOf("image") !== -1) {
-            t.preventDefault();
-            const _ = n.getAsFile();
+      const t = (e = l.clipboardData) == null ? void 0 : e.items;
+      if (t) {
+        for (let o of t)
+          if (o.type.indexOf("image") !== -1) {
+            l.preventDefault();
+            const _ = o.getAsFile();
             _ && U(_);
           }
       }
-    }, U = async (t) => {
-      l.value = "uploading", w(!0);
-      const i = typeof f.filebumpUrl == "string" ? f.filebumpUrl : null;
-      await R(i, t).then((e) => {
-        if (w(!1), l.value = e.status, e.status == "success") {
-          k({
+    }, U = async (l) => {
+      r.value = "uploading", I(!0);
+      const t = typeof v.filebumpUrl == "string" ? v.filebumpUrl : null;
+      await G(t, l).then((e) => {
+        if (I(!1), r.value = e.status, e.status == "success") {
+          V({
             url: e.url,
             name: e.name,
             size: e.size,
             type: e.type
           });
-          const n = document.getElementById("chat-input-file-line-" + a);
-          n && (n.style.display = "inherit"), e.preview && (r.value = {
+          const o = document.getElementById("chat-input-file-line-" + i);
+          o && (o.style.display = "inherit"), e.preview && (p.value = {
             previewUrl: e.preview.previewUrl,
             isImage: e.preview.isImage,
             isVideo: e.preview.isVideo,
@@ -65,41 +83,57 @@ const O = { key: 0 }, P = { key: 1 }, T = ["disabled"], ie = /* @__PURE__ */ M({
         }
       });
     };
-    return B(() => {
-      window.addEventListener("paste", S);
-    }), (t, i) => (s(), m(E, null, [
-      l.value === "uploading" ? (s(), m("div", O, [...i[0] || (i[0] = [
-        p("p", null, "Загрузка файла...", -1)
-      ])])) : l.value === "error" ? (s(), m("div", P, [...i[1] || (i[1] = [
-        p("p", null, "Ошибка при загрузке файла.", -1)
-      ])])) : v("", !0),
-      p("span", {
-        class: V(["file-uploader__trigger", { "file-uploader__disabled": !c.value || u.state == "disabled" }]),
-        disabled: !c.value || u.state == "disabled",
-        onClick: C
+    return $(() => {
+      if (window.addEventListener("paste", k), y(), i) {
+        const l = document.getElementById(i);
+        l && (u = new MutationObserver((t) => {
+          t.forEach((e) => {
+            e.type === "attributes" && e.attributeName === "data-theme" && y();
+          });
+        }), u.observe(l, {
+          attributes: !0,
+          attributeFilter: ["data-theme"]
+        }));
+      }
+    }), H(() => {
+      window.removeEventListener("paste", k), u && (u.disconnect(), u = null);
+    }), (l, t) => (a(), w(L, null, [
+      r.value === "uploading" ? (a(), w("div", Q, [...t[2] || (t[2] = [
+        m("p", null, "Загрузка файла...", -1)
+      ])])) : r.value === "error" ? (a(), w("div", W, [...t[3] || (t[3] = [
+        m("p", null, "Ошибка при загрузке файла.", -1)
+      ])])) : b("", !0),
+      m("span", {
+        ref_key: "triggerElement",
+        ref: B,
+        class: R(["file-uploader__trigger", { "file-uploader__disabled": !F.value || d.state == "disabled" }]),
+        disabled: !F.value || d.state == "disabled",
+        onClick: D,
+        onMouseenter: t[0] || (t[0] = (e) => g.value = !0),
+        onMouseleave: t[1] || (t[1] = (e) => g.value = !1)
       }, [
-        D(g(L))
-      ], 10, T),
-      p("input", {
+        j(h(K), { fill: A.value }, null, 8, ["fill"])
+      ], 42, X),
+      m("input", {
         ref_key: "fileInput",
-        ref: o,
+        ref: s,
         style: { display: "none" },
         type: "file",
-        onChange: h
+        onChange: N
       }, null, 544),
-      g(y)().file ? (s(), b(N, {
+      h(C)().file ? (a(), S(T, {
         key: 2,
-        to: "#chat-input-file-line-" + g(a)
+        to: "#chat-input-file-line-" + h(i)
       }, [
-        r.value ? (s(), b(x, {
+        p.value ? (a(), S(q, {
           key: 0,
-          "file-info": r.value,
-          onReset: F
-        }, null, 8, ["file-info"])) : v("", !0)
-      ], 8, ["to"])) : v("", !0)
+          "file-info": p.value,
+          onReset: E
+        }, null, 8, ["file-info"])) : b("", !0)
+      ], 8, ["to"])) : b("", !0)
     ], 64));
   }
 });
 export {
-  ie as default
+  pe as default
 };

package/dist/components/2_chatinput_elements/FileUploader/icons/FileUploaderIcon.vue.js

@@ -1,21 +1,24 @@
-import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import n from "../../../../_virtual/_plugin-vue_export-helper.js";
-const r = {}, l = {
+import { defineComponent as e, createElementBlock as t, openBlock as l, createElementVNode as o } from "vue";
+const n = {
   width: "26",
   height: "26",
   viewBox: "0 0 26 26",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-};
-function c(i, C) {
-  return t(), e("svg", l, [...C[0] || (C[0] = [
-    o("path", {
-      d: "M7.3125 4.875C7.3125 3.79756 7.74051 2.76425 8.50238 2.00238C9.26425 1.24051 10.2976 0.8125 11.375 0.8125C12.4524 0.8125 13.4858 1.24051 14.2476 2.00238C15.0095 2.76425 15.4375 3.79756 15.4375 4.875V19.5C15.4375 20.1465 15.1807 20.7665 14.7236 21.2236C14.2665 21.6807 13.6465 21.9375 13 21.9375C12.3535 21.9375 11.7335 21.6807 11.2764 21.2236C10.8193 20.7665 10.5625 20.1465 10.5625 19.5V8.125C10.5625 7.90951 10.6481 7.70285 10.8005 7.55048C10.9528 7.3981 11.1595 7.3125 11.375 7.3125C11.5905 7.3125 11.7972 7.3981 11.9495 7.55048C12.1019 7.70285 12.1875 7.90951 12.1875 8.125V19.5C12.1875 19.7155 12.2731 19.9222 12.4255 20.0745C12.5778 20.2269 12.7845 20.3125 13 20.3125C13.2155 20.3125 13.4222 20.2269 13.5745 20.0745C13.7269 19.9222 13.8125 19.7155 13.8125 19.5V4.875C13.8125 4.5549 13.7495 4.23794 13.627 3.94221C13.5045 3.64648 13.3249 3.37777 13.0986 3.15143C12.8722 2.92508 12.6035 2.74554 12.3078 2.62304C12.0121 2.50055 11.6951 2.4375 11.375 2.4375C11.0549 2.4375 10.7379 2.50055 10.4422 2.62304C10.1465 2.74554 9.87777 2.92508 9.65143 3.15143C9.42508 3.37777 9.24554 3.64648 9.12304 3.94221C9.00055 4.23794 8.9375 4.5549 8.9375 4.875V19.5C8.9375 20.5774 9.36551 21.6108 10.1274 22.3726C10.8892 23.1345 11.9226 23.5625 13 23.5625C14.0774 23.5625 15.1108 23.1345 15.8726 22.3726C16.6345 21.6108 17.0625 20.5774 17.0625 19.5V8.125C17.0625 7.90951 17.1481 7.70285 17.3005 7.55048C17.4528 7.3981 17.6595 7.3125 17.875 7.3125C18.0905 7.3125 18.2972 7.3981 18.4495 7.55048C18.6019 7.70285 18.6875 7.90951 18.6875 8.125V19.5C18.6875 21.0084 18.0883 22.4551 17.0217 23.5217C15.9551 24.5883 14.5084 25.1875 13 25.1875C11.4916 25.1875 10.0449 24.5883 8.97833 23.5217C7.91172 22.4551 7.3125 21.0084 7.3125 19.5V4.875Z",
-      fill: "#5F5F5F"
-    }, null, -1)
-  ])]);
-}
-const V = /* @__PURE__ */ n(r, [["render", c]]);
+}, i = ["fill"], a = /* @__PURE__ */ e({
+  __name: "FileUploaderIcon",
+  props: {
+    fill: { default: "#5F5F5F" }
+  },
+  setup(C) {
+    return (c, r) => (l(), t("svg", n, [
+      o("path", {
+        d: "M7.3125 4.875C7.3125 3.79756 7.74051 2.76425 8.50238 2.00238C9.26425 1.24051 10.2976 0.8125 11.375 0.8125C12.4524 0.8125 13.4858 1.24051 14.2476 2.00238C15.0095 2.76425 15.4375 3.79756 15.4375 4.875V19.5C15.4375 20.1465 15.1807 20.7665 14.7236 21.2236C14.2665 21.6807 13.6465 21.9375 13 21.9375C12.3535 21.9375 11.7335 21.6807 11.2764 21.2236C10.8193 20.7665 10.5625 20.1465 10.5625 19.5V8.125C10.5625 7.90951 10.6481 7.70285 10.8005 7.55048C10.9528 7.3981 11.1595 7.3125 11.375 7.3125C11.5905 7.3125 11.7972 7.3981 11.9495 7.55048C12.1019 7.70285 12.1875 7.90951 12.1875 8.125V19.5C12.1875 19.7155 12.2731 19.9222 12.4255 20.0745C12.5778 20.2269 12.7845 20.3125 13 20.3125C13.2155 20.3125 13.4222 20.2269 13.5745 20.0745C13.7269 19.9222 13.8125 19.7155 13.8125 19.5V4.875C13.8125 4.5549 13.7495 4.23794 13.627 3.94221C13.5045 3.64648 13.3249 3.37777 13.0986 3.15143C12.8722 2.92508 12.6035 2.74554 12.3078 2.62304C12.0121 2.50055 11.6951 2.4375 11.375 2.4375C11.0549 2.4375 10.7379 2.50055 10.4422 2.62304C10.1465 2.74554 9.87777 2.92508 9.65143 3.15143C9.42508 3.37777 9.24554 3.64648 9.12304 3.94221C9.00055 4.23794 8.9375 4.5549 8.9375 4.875V19.5C8.9375 20.5774 9.36551 21.6108 10.1274 22.3726C10.8892 23.1345 11.9226 23.5625 13 23.5625C14.0774 23.5625 15.1108 23.1345 15.8726 22.3726C16.6345 21.6108 17.0625 20.5774 17.0625 19.5V8.125C17.0625 7.90951 17.1481 7.70285 17.3005 7.55048C17.4528 7.3981 17.6595 7.3125 17.875 7.3125C18.0905 7.3125 18.2972 7.3981 18.4495 7.55048C18.6019 7.70285 18.6875 7.90951 18.6875 8.125V19.5C18.6875 21.0084 18.0883 22.4551 17.0217 23.5217C15.9551 24.5883 14.5084 25.1875 13 25.1875C11.4916 25.1875 10.0449 24.5883 8.97833 23.5217C7.91172 22.4551 7.3125 21.0084 7.3125 19.5V4.875Z",
+        fill: C.fill
+      }, null, 8, i)
+    ]));
+  }
+});
 export {
-  V as default
+  a as default
 };

package/dist/components/2_chatinput_elements/FileUploader/icons/FileUploaderIcon.vue2.js

@@ -0,0 +1,4 @@
+import f from "./FileUploaderIcon.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,7 @@
+import o from "./StickerPicker.vue2.js";
+/* empty css                   */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f84f2d4d"]]);
+export {
+  e as default
+};

package/dist/components/2_chatinput_elements/StickerPicker/StickerPicker.vue2.js

@@ -0,0 +1,360 @@
+import { defineComponent as Oe, ref as a, inject as Ae, computed as h, watchEffect as Be, watch as j, onMounted as We, onUnmounted as Ne, createElementBlock as n, openBlock as c, Fragment as z, createCommentVNode as E, createVNode as C, unref as P, normalizeClass as se, createElementVNode as L, Transition as le, withCtx as re, withDirectives as Ve, renderList as oe, toDisplayString as ae, vShow as Re, normalizeStyle as He } from "vue";
+import { useMessageDraft as Ie } from "../../../hooks/useMessageDraft.js";
+import "../../../hooks/useSearchModel.js";
+import "../../../hooks/useTheme.js";
+/* empty css                              */
+/* empty css                                              */
+import "../../../node_modules/linkifyjs/dist/linkify.js";
+import "../../../functions/parseMarkdown.js";
+import ne from "./icons/StickerIcon.vue.js";
+import { isAnimatedSticker as F } from "../../2_feed_elements/StickerMessage/utils/stickerUtils.js";
+import "../../2_feed_elements/StickerMessage/utils/suppress-lit-warning.js";
+const Xe = { class: "sticker-picker__container" }, Ye = ["onClick", "onMouseenter", "onMouseleave"], je = ["src"], ze = ["src", "alt"], Ge = {
+  key: 2,
+  class: "sticker-picker__tab-icon-placeholder"
+}, Ke = { class: "sticker-picker__content" }, qe = {
+  key: 0,
+  class: "sticker-picker__empty"
+}, Je = {
+  key: 1,
+  class: "sticker-picker__grid"
+}, Qe = ["onClick", "onMousedown", "onMouseenter", "onTouchstart"], Ze = ["src"], xe = ["src", "alt"], et = ["src"], tt = ["src", "alt"], st = {
+  key: 2,
+  class: "sticker-picker__preview-label"
+}, lt = 500, pt = /* @__PURE__ */ Oe({
+  __name: "StickerPicker",
+  props: {
+    state: { default: "active" },
+    mode: { default: "click" },
+    stickers: { default: () => [] },
+    emptyText: { default: "Нет доступных стикеров" }
+  },
+  setup(U) {
+    const r = U, $ = a(null), D = a(null), O = a(null), A = a(null), v = a(!1), p = a(0), _ = Ae("chatAppId"), { getMessage: ce, setMessageFile: ie, setForceSendMessage: ue } = Ie(_), T = a("#5F5F5F"), M = a("#404040"), B = a(!1);
+    let g = null;
+    const W = () => {
+      if (!_) {
+        T.value = "#5F5F5F", M.value = "#404040";
+        return;
+      }
+      const e = document.getElementById(_);
+      if (!e) {
+        T.value = "#5F5F5F", M.value = "#404040";
+        return;
+      }
+      const t = window.getComputedStyle(e), s = t.getPropertyValue("--chotto-stickerpicker-button-span-color").trim(), l = t.getPropertyValue("--chotto-stickerpicker-button-span-hover-color").trim();
+      T.value = s || "#5F5F5F", M.value = l || "#404040";
+    }, ve = h(() => B.value ? M.value : T.value);
+    Be(() => {
+      W();
+    });
+    const i = a(null), N = a({}), m = a(null), u = a(!1), fe = a(null), f = a(/* @__PURE__ */ new Map()), d = a(/* @__PURE__ */ new Map());
+    let w = !1, S = !1;
+    const k = a(!1), V = a(!1);
+    async function G() {
+      if (!(k.value || V.value)) {
+        V.value = !0;
+        try {
+          await import("../../2_feed_elements/StickerMessage/libs/tgs-player/lottie-player.esm.js"), await import("../../2_feed_elements/StickerMessage/libs/tgs-player/tgs-player.esm.js"), k.value = !0;
+        } catch (e) {
+          console.error("Failed to load TGS libraries:", e);
+        } finally {
+          V.value = !1;
+        }
+      }
+    }
+    const ke = () => {
+      if (!r.stickers || !Array.isArray(r.stickers) || r.stickers.length === 0)
+        return { hasTabs: !1, tabs: [] };
+      const e = r.stickers[0], t = Array.isArray(e), s = e && typeof e == "object" && "stickers" in e;
+      return t ? {
+        hasTabs: !0,
+        tabs: r.stickers.map((l, o) => ({
+          id: `tab-${o}`,
+          label: `Set ${o + 1}`,
+          stickers: l,
+          iconUrl: l && l.length > 0 ? l[0].url : null
+        }))
+      } : s && "stickers" in e ? {
+        hasTabs: !0,
+        tabs: r.stickers.map((l, o) => ({
+          id: l.id || `tab-${o}`,
+          label: l.label || `Set ${o + 1}`,
+          stickers: l.stickers || [],
+          iconUrl: l.iconUrl || (l.stickers && l.stickers.length > 0 ? l.stickers[0].url : null)
+        }))
+      } : {
+        hasTabs: !0,
+        tabs: [{
+          id: "default",
+          label: "Stickers",
+          stickers: r.stickers,
+          iconUrl: r.stickers.length > 0 ? r.stickers[0].url : null
+        }]
+      };
+    }, R = h(() => ke()), de = h(() => R.value.hasTabs && R.value.tabs.length > 0), y = h(() => R.value.tabs), H = h(() => {
+      var e;
+      return y.value.length === 0 ? [] : ((e = y.value[p.value]) == null ? void 0 : e.stickers) || [];
+    }), K = h(() => {
+      const e = H.value.some((s) => F(s.url)), t = y.value.some((s) => s.iconUrl && F(s.iconUrl));
+      return e || t;
+    });
+    j(K, (e) => {
+      e && !k.value && G();
+    }, { immediate: !0 });
+    const I = (e) => F(e.url), pe = (e, t) => {
+      t ? f.value.set(e, t) : f.value.delete(e);
+    }, me = (e, t) => {
+      t ? d.value.set(e, t) : d.value.delete(e);
+    }, he = (e) => {
+      const t = d.value.get(e);
+      t && typeof t.play == "function" && t.play();
+    }, _e = (e) => {
+      const t = d.value.get(e);
+      t && typeof t.pause == "function" && t.pause();
+    };
+    j(p, () => {
+      f.value.clear();
+    }), j(() => r.stickers, () => {
+      p.value >= y.value.length && (p.value = 0);
+    }, { deep: !0 });
+    const ge = (e) => {
+      if (!e) return "image";
+      const t = e.toLowerCase();
+      return t.endsWith(".tgs") || t.endsWith(".webp") ? "sticker" : "image";
+    }, q = (e) => {
+      if (r.state === "disabled") return;
+      const t = ge(e.url);
+      ie({
+        url: e.url,
+        name: e.alt || `sticker.${t === "sticker" ? e.url.toLowerCase().endsWith(".tgs") ? "tgs" : "webp" : "png"}`,
+        type: t
+      }), ue(!0), r.mode === "click" && (v.value = !1);
+    }, J = (e, t) => {
+      fe.value = t.currentTarget, u.value = !1, m.value && clearTimeout(m.value), m.value = setTimeout(() => {
+        u.value = !0, we(e);
+      }, lt);
+    }, Q = () => {
+      if (X(), u.value) {
+        u.value = !1;
+        return;
+      }
+    }, ye = (e, t) => {
+      if (I(e) && k.value) {
+        const s = f.value.get(t);
+        s && typeof s.play == "function" && s.play();
+      }
+    }, be = () => {
+      f.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), !(u.value && i.value) && (X(), b());
+    }, Te = (e, t) => {
+      const s = new MouseEvent("mousedown", {
+        bubbles: !0,
+        cancelable: !0,
+        clientX: t.touches[0].clientX,
+        clientY: t.touches[0].clientY
+      });
+      J(e, s);
+    }, Z = () => {
+      Q();
+    }, Me = (e, t) => {
+      if (u.value) {
+        t.preventDefault(), t.stopPropagation(), u.value = !1, b();
+        return;
+      }
+      q(e);
+    }, X = () => {
+      m.value && (clearTimeout(m.value), m.value = null);
+    }, we = (e) => {
+      i.value = e, N.value = {
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    }, b = () => {
+      i.value = null, N.value = {};
+    }, Se = () => {
+      i.value && (q(i.value), b());
+    }, x = () => {
+      r.state === "active" && (v.value = !0);
+    }, Y = () => {
+      f.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), d.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), v.value = !1;
+    }, Ee = () => {
+      r.mode === "click" && (v.value = !v.value, v.value && x());
+    }, Ce = () => {
+      r.mode === "hover" && (w = !0, x());
+    }, Pe = () => {
+      r.mode === "hover" && (w = !1, setTimeout(() => {
+        !S && !w && Y();
+      }, 150));
+    }, Le = () => {
+      B.value = !0, Ce();
+    }, Fe = () => {
+      B.value = !1, Pe();
+    }, Ue = () => {
+      r.mode === "hover" && (S = !0);
+    }, $e = () => {
+      r.mode === "hover" && (S = !1, setTimeout(() => {
+        !w && !S && Y();
+      }, 150));
+    }, De = (e) => {
+      if (!O.value) return;
+      const t = e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      O.value.scrollLeft += t, e.preventDefault();
+    }, ee = (e) => {
+      r.mode === "click" && v.value && D.value && $.value && e.target instanceof Node && !D.value.contains(e.target) && !$.value.contains(e.target) && Y(), i.value && A.value && e.target instanceof Node && !A.value.contains(e.target) && b();
+    }, te = () => {
+      u.value && (u.value = !1);
+    };
+    return We(() => {
+      if (document.addEventListener("click", ee), document.addEventListener("mouseup", te), W(), _) {
+        const e = document.getElementById(_);
+        e && (g = new MutationObserver((t) => {
+          t.forEach((s) => {
+            s.type === "attributes" && s.attributeName === "data-theme" && W();
+          });
+        }), g.observe(e, {
+          attributes: !0,
+          attributeFilter: ["data-theme"]
+        }));
+      }
+      K.value && !k.value && G();
+    }), Ne(() => {
+      document.removeEventListener("click", ee), document.removeEventListener("mouseup", te), X(), b(), g && (g.disconnect(), g = null), f.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), f.value.clear(), d.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), d.value.clear();
+    }), (e, t) => (c(), n(z, null, [
+      P(ce)().isRecording ? E("", !0) : (c(), n("button", {
+        key: 0,
+        ref_key: "stickerButton",
+        ref: D,
+        class: se(["button", { "button-disabled": U.state === "disabled" }]),
+        onClick: Ee,
+        onMouseenter: Le,
+        onMouseleave: Fe
+      }, [
+        L("span", null, [
+          C(P(ne), { fill: ve.value }, null, 8, ["fill"])
+        ])
+      ], 34)),
+      C(le, null, {
+        default: re(() => [
+          Ve(L("div", {
+            ref_key: "stickerPicker",
+            ref: $,
+            class: "sticker-picker",
+            onMouseenter: Ue,
+            onMouseleave: $e
+          }, [
+            L("div", Xe, [
+              de.value ? (c(), n("div", {
+                key: 0,
+                ref_key: "tabsContainer",
+                ref: O,
+                class: "sticker-picker__tabs",
+                onWheel: De
+              }, [
+                (c(!0), n(z, null, oe(y.value, (s, l) => (c(), n("button", {
+                  key: l,
+                  class: se(["sticker-picker__tab", { "sticker-picker__tab--active": p.value === l }]),
+                  onClick: (o) => p.value = l,
+                  onMouseenter: (o) => he(l),
+                  onMouseleave: (o) => _e(l)
+                }, [
+                  s.iconUrl && P(F)(s.iconUrl) && k.value ? (c(), n("tgs-player", {
+                    key: 0,
+                    ref_for: !0,
+                    ref: (o) => me(l, o),
+                    src: s.iconUrl,
+                    class: "sticker-picker__tab-icon sticker-picker__tab-icon-animated",
+                    loop: "",
+                    mode: "normal"
+                  }, null, 8, je)) : s.iconUrl ? (c(), n("img", {
+                    key: 1,
+                    src: s.iconUrl,
+                    alt: s.label || `Tab ${l + 1}`,
+                    class: "sticker-picker__tab-icon"
+                  }, null, 8, ze)) : (c(), n("span", Ge, [
+                    C(P(ne))
+                  ]))
+                ], 42, Ye))), 128))
+              ], 544)) : E("", !0),
+              L("div", Ke, [
+                H.value.length === 0 ? (c(), n("div", qe, ae(U.emptyText), 1)) : (c(), n("div", Je, [
+                  (c(!0), n(z, null, oe(H.value, (s, l) => (c(), n("button", {
+                    key: l,
+                    class: "sticker-picker__item",
+                    onClick: (o) => Me(s, o),
+                    onMousedown: (o) => J(s, o),
+                    onMouseup: Q,
+                    onMouseenter: (o) => ye(s, l),
+                    onMouseleave: be,
+                    onTouchstart: (o) => Te(s, o),
+                    onTouchend: Z,
+                    onTouchcancel: Z
+                  }, [
+                    I(s) && k.value ? (c(), n("tgs-player", {
+                      key: 0,
+                      ref_for: !0,
+                      ref: (o) => pe(l, o),
+                      src: s.url,
+                      class: "sticker-picker__image sticker-picker__image-animated",
+                      loop: "",
+                      mode: "normal"
+                    }, null, 8, Ze)) : (c(), n("img", {
+                      key: 1,
+                      src: s.url,
+                      alt: s.alt || `Sticker ${l + 1}`,
+                      class: "sticker-picker__image"
+                    }, null, 8, xe))
+                  ], 40, Qe))), 128))
+                ]))
+              ])
+            ])
+          ], 544), [
+            [Re, v.value]
+          ])
+        ]),
+        _: 1
+      }),
+      C(le, { name: "preview" }, {
+        default: re(() => [
+          i.value ? (c(), n("div", {
+            key: 0,
+            ref_key: "previewElement",
+            ref: A,
+            class: "sticker-picker__preview",
+            style: He(N.value),
+            onClick: Se
+          }, [
+            I(i.value) && k.value ? (c(), n("tgs-player", {
+              key: 0,
+              src: i.value.url,
+              class: "sticker-picker__preview-image sticker-picker__preview-image-animated",
+              autoplay: "",
+              loop: "",
+              mode: "normal"
+            }, null, 8, et)) : (c(), n("img", {
+              key: 1,
+              src: i.value.url,
+              alt: i.value.alt || "Preview",
+              class: "sticker-picker__preview-image"
+            }, null, 8, tt)),
+            i.value.alt ? (c(), n("div", st, ae(i.value.alt), 1)) : E("", !0)
+          ], 4)) : E("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+});
+export {
+  pt as default
+};