@dialpad/dialtone-vue 3.218.3 → 3.218.5

package/dist/lib/emoji-picker/emoji-picker.js

@@ -1,1015 +1,2 @@
-import { ref as S, onMounted as re, openBlock as E, createElementBlock as I, createVNode as F, unref as k, withKeys as J, withModifiers as ue, createSlots as ye, withCtx as N, computed as M, watch as K, Fragment as W, renderList as G, createBlock as Z, resolveDynamicComponent as Le, nextTick as x, onBeforeUnmount as Te, createElementVNode as A, toDisplayString as z, withDirectives as te, createCommentVNode as Y, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
-import { DtIconSearch as je, DtIconClose as Ie, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as De, DtIconLightbulb as Ce, DtIconHeart as Be, DtIconFlag as Fe, DtIconDialpadStar as Ke } from "@dialpad/dialtone-icons/vue3";
-import Ne from "../input/input.js";
-import de from "../button/button.js";
-import { returnFirstEl as Me } from "../../common/utils/index.js";
-import Pe from "../tab/tab-group.js";
-import Ue from "../tab/tab.js";
-import { emojisGrouped as D } from "@dialpad/dialtone-emojis";
-import { EMOJIS_PER_ROW as $, ARROW_KEYS as H, CDN_URL as Q, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
-import Je from "../tooltip/tooltip.js";
-import { DialtoneLocalization as Ve } from "../../localization/index.js";
-const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
-  __name: "emoji_search",
-  props: {
-    searchPlaceholderLabel: {
-      type: String,
-      required: !0
-    },
-    modelValue: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(t, { expose: g, emit: y }) {
-    const l = y, f = S(null);
-    function R() {
-      l("update:modelValue", ""), L();
-    }
-    function L() {
-      f.value.focus();
-    }
-    return re(() => {
-      L();
-    }), g({
-      focusSearchInput: L
-    }), (j, m) => (E(), I("div", He, [
-      F(k(Ne), {
-        id: "searchInput",
-        ref_key: "searchInput",
-        ref: f,
-        placeholder: t.searchPlaceholderLabel,
-        "model-value": t.modelValue,
-        "onUpdate:modelValue": m[0] || (m[0] = (a) => j.$emit("update:modelValue", a)),
-        onKeydown: [
-          m[1] || (m[1] = J((a) => j.$emit("focus-tabset"), ["up"])),
-          m[2] || (m[2] = J(ue((a) => j.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          m[3] || (m[3] = J((a) => j.$emit("select-first-emoji"), ["enter"]))
-        ]
-      }, ye({
-        leftIcon: N(() => [
-          F(k(je), { size: "200" })
-        ]),
-        _: 2
-      }, [
-        t.modelValue.length > 0 ? {
-          name: "rightIcon",
-          fn: N(() => [
-            F(k(de), {
-              importance: "clear",
-              size: "xs",
-              class: "d-emoji-picker__search-x-button",
-              circle: "",
-              kind: "muted",
-              onClick: R
-            }, {
-              icon: N(() => [
-                F(k(Ie), { size: "200" })
-              ]),
-              _: 1
-            })
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["placeholder", "model-value"])
-    ]));
-  }
-}, qe = { class: "d-emoji-picker__tabset" }, We = {
-  __name: "emoji_tabset",
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether to show the custom emojis tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showCustomEmojisTab: {
-      type: Boolean,
-      default: !1
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: !0
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The labels for the aria-label
-     * @type {Array}
-     * @required
-     */
-    tabSetLabels: {
-      type: Array,
-      required: !0
-    }
-  },
-  emits: [
-    /**
-     * Emitted when a tab is selected
-     * @event selected-tabset
-     * @param {String} tabId - The name of the tab that was selected
-     */
-    "selected-tabset",
-    "focus-search-input",
-    "focus-skin-selector"
-  ],
-  setup(t, { expose: g, emit: y }) {
-    const l = t, f = y, R = [
-      { label: l.tabSetLabels[0], icon: Re },
-      { label: l.tabSetLabels[1], icon: Ae },
-      { label: l.tabSetLabels[2], icon: $e },
-      { label: l.tabSetLabels[3], icon: we },
-      { label: l.tabSetLabels[4], icon: Oe },
-      { label: l.tabSetLabels[5], icon: De },
-      { label: l.tabSetLabels[6], icon: Ce },
-      { label: l.tabSetLabels[7], icon: Be },
-      { label: l.tabSetLabels[8], icon: Fe },
-      { label: l.tabSetLabels[9], icon: Ke }
-    ], L = M(() => {
-      const o = l.showRecentlyUsedTab ? R : R.slice(1);
-      return l.showCustomEmojisTab || o.pop(), o.map((e, n) => ({
-        ...e,
-        // IDs on dt-tab component need to be on string
-        id: (n + 1).toString(),
-        panelId: (n + 1).toString()
-      }));
-    }), j = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
-    K(
-      () => l.scrollIntoTab,
-      () => {
-        j.value || (m.value = (l.scrollIntoTab + 1).toString());
-      }
-    ), K(
-      j,
-      () => {
-        j.value && (m.value = null);
-      }
-    );
-    function d(o) {
-      const e = parseInt(o);
-      m.value = o, f("selected-tabset", e);
-    }
-    function C(o) {
-      a.value.push(Me(o.$el));
-    }
-    function B() {
-      a.value[0].focus();
-    }
-    function w(o, e) {
-      o.key === "Enter" && (d(e), a.value[e - 1].blur()), o.key === "Tab" && (o.preventDefault(), o.shiftKey ? f("focus-skin-selector") : f("focus-search-input")), o.key === "ArrowDown" && f("focus-search-input");
-    }
-    return g({
-      focusTabset: B
-    }), (o, e) => (E(), I("div", qe, [
-      F(k(Pe), {
-        selected: m.value,
-        size: "sm",
-        "tab-list-class": "d-emoji-picker__tabset-list"
-      }, {
-        tabs: N(() => [
-          (E(!0), I(W, null, G(L.value, (n, v) => (E(), Z(k(Ue), {
-            id: n.id,
-            key: n.id,
-            ref_for: !0,
-            ref: (c) => {
-              c && C(c);
-            },
-            label: n.label,
-            "panel-id": n.panelId,
-            tabindex: v + 1,
-            "aria-controls": "d-emoji-picker-list",
-            onKeydown: (c) => w(c, n.id),
-            onClickCapture: ue((c) => d(n.id), ["stop"])
-          }, {
-            default: N(() => [
-              (E(), Z(Le(n.icon), { size: "400" }))
-            ]),
-            _: 2
-          }, 1032, ["id", "label", "panel-id", "tabindex", "onKeydown", "onClickCapture"]))), 128))
-        ]),
-        _: 1
-      }, 8, ["selected"])
-    ]));
-  }
-};
-function Ge() {
-  const t = S([]), g = S([]), y = S(!1), l = S(!0);
-  function f(o, e) {
-    a(o, e - 1) || (t.value[o - 1] ? a(o - 1, t.value[o - 1].length - 1) : a(t.value.length - 1, t.value[t.value.length - 1].length - 1));
-  }
-  function R(o, e) {
-    a(o, e + 1) || a(o + 1, 0) || a(0, 0);
-  }
-  function L(o, e) {
-    a(0, e - 1) || a(0, g.value.length - 1);
-  }
-  function j(o, e) {
-    a(0, e + 1) || a(0, 0);
-  }
-  function m(o, e, n) {
-    y.value ? o === "left" ? L(e, n) : o === "right" && j(e, n) : o === "left" ? f(e, n) : o === "right" && R(e, n);
-  }
-  function a(o, e) {
-    var v, c, T;
-    const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (T = (c = t.value) == null ? void 0 : c[o]) == null ? void 0 : T[e];
-    return n ? (n.focus(), !0) : !1;
-  }
-  function d(o, e, n) {
-    t.value[e] || (t.value[e] = []), t.value[e][n] = o;
-  }
-  function C(o, e) {
-    g.value[e] = o;
-  }
-  function B(o, e) {
-    var n;
-    if (l.value = !1, o === H.ARROW_UP) {
-      const v = e % $;
-      if (!a(0, e - $)) {
-        const c = g.value.length - g.value.length % $ + v;
-        a(0, c), a(0, c) || a(0, g.value.length - 1);
-      }
-    }
-    if (o === H.ARROW_DOWN && !a(0, e + $)) {
-      const v = e % $;
-      (n = g.value) != null && n[e + ($ - v)] ? a(0, g.value.length - 1) : a(0, v);
-    }
-    o === H.ARROW_LEFT && m("left", 0, e), o === H.ARROW_RIGHT && m("right", 0, e);
-  }
-  function w(o, e, n) {
-    var v, c;
-    if (o === "ArrowUp") {
-      const T = n % $;
-      if (e === 0) {
-        const r = $ - t.value[t.value.length - 1].length % $, i = t.value[t.value.length - 1].length + r - ($ - T);
-        a(t.value.length - 1, i) || a(t.value.length - 1, t.value[t.value.length - 1].length - 1);
-        return;
-      }
-      if (!a(e, n - $)) {
-        const r = e - 1 < 0 ? 0 : e - 1, i = t.value[r].length, _ = i - i % $ + T;
-        a(r, _) || a(e - 1, t.value[e - 1].length - 1);
-      }
-    }
-    if (o === "ArrowDown" && !a(e, n + $)) {
-      const T = n % $;
-      (c = (v = t.value) == null ? void 0 : v[e]) != null && c[n + ($ - T)] ? a(e, t.value[e].length - 1) : a(e + 1, T) || a(0, T) || a(0, t.value[0].length - 1);
-    }
-    o === "ArrowLeft" && m("left", e, n), o === "ArrowRight" && m("right", e, n);
-  }
-  return {
-    emojiFilteredRefs: g,
-    isFiltering: y,
-    hoverFirstEmoji: l,
-    setEmojiRef: d,
-    setFilteredRef: C,
-    focusEmoji: a,
-    handleArrowNavigationFiltered: B,
-    handleArrowNavigation: w
-  };
-}
-const Ye = { class: "d-emoji-picker__selector" }, Qe = {
-  key: 0,
-  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, Xe = { key: 0 }, Ze = { class: "d-emoji-picker__tab" }, xe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], et = ["alt", "aria-label", "title", "src"], tt = {
-  key: 2,
-  class: "d-emoji-picker__alignment"
-}, ot = {
-  class: "d-emoji-picker__tab",
-  "data-qa": "filtered-emojis"
-}, lt = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], st = ["alt", "aria-label", "title", "src"], nt = {
-  __name: "emoji_selector",
-  props: {
-    /**
-     * The filter to apply to the emoji list
-     * @type {String}
-     * @default ''
-     */
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The labels for the tabset
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: !0
-    },
-    selectedTabset: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     */
-    searchResultsLabel: {
-      type: String,
-      required: !0
-    },
-    searchNoResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The list of recently used emojis
-     * @type {Array}
-     */
-    recentlyUsedEmojis: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * The list of custom emojis
-     * @type {Array}
-     */
-    customEmojis: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: [
-    /**
-     * Emitted when the user hover over an emoji
-     * @event highlighted-emoji
-     * @param {Object} emoji - The emoji data that was hovered
-      */
-    "highlighted-emoji",
-    /**
-     * Emitted when the user select an emoji
-     * @event selected-emoji
-     * @param {Object} emoji - The emoji data that was selected
-      */
-    "selected-emoji",
-    /**
-     * Emitted when the user scroll into an emoji tab
-     * @event scroll-into-tab
-     * @param {Number} tab-index - The tab that was scrolled into
-      */
-    "scroll-into-tab",
-    /**
-     * Emitted when the user reach bottom scroll
-     * This event is used on handleScroll method
-     * @event scroll-bottom-reached
-     */
-    "scroll-bottom-reached",
-    /**
-     * Emitted when the user reach the end of the emoji list
-     * @event focus-skin-selector
-      */
-    "focus-skin-selector",
-    /**
-     * Emitted when the user shift tab in first tab of emoji selector
-     * @event focus-search-input
-      */
-    "focus-search-input"
-  ],
-  setup(t, { expose: g, emit: y }) {
-    const l = t, f = y, {
-      emojiFilteredRefs: R,
-      isFiltering: L,
-      hoverFirstEmoji: j,
-      setEmojiRef: m,
-      setFilteredRef: a,
-      focusEmoji: d,
-      handleArrowNavigationFiltered: C,
-      handleArrowNavigation: B
-    } = Ge(), w = S(null), o = S(null), e = S(null), n = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"], v = M(() => {
-      let s = l.tabsetLabels.map((u) => ({ label: u, ref: S(null) }));
-      return l.recentlyUsedEmojis && !l.recentlyUsedEmojis.length && (s = l.tabsetLabels.slice(1).map((u) => ({ label: u, ref: S(null) }))), l.customEmojis && !l.customEmojis.length && s.pop(), s;
-    }), c = S(v.value[0].label), T = M(() => {
-      const s = l.recentlyUsedEmojis.length ? n.slice() : n.slice(1);
-      return l.customEmojis && !l.customEmojis.length && s.pop(), s;
-    }), r = S([]), i = M(() => [
-      ...D[`People${l.skinTone}`],
-      ...D.Nature,
-      ...D.Food,
-      ...D[`Activity${l.skinTone}`],
-      ...D.Travel,
-      ...D[`Objects${l.skinTone}`],
-      ...D.Symbols,
-      ...D.Flags
-    ]), _ = me(() => {
-      R.value = [], se();
-    }), le = () => {
-      const s = o.value;
-      s.scrollTop + s.clientHeight >= s.scrollHeight && f("scroll-bottom-reached");
-    };
-    K(i, () => {
-      se();
-    }, { immediate: !0 }), K(
-      () => l.recentlyUsedEmojis,
-      () => {
-        D["Recently used"] = l.recentlyUsedEmojis;
-      },
-      { immediate: !0 }
-    ), K(
-      () => l.customEmojis,
-      () => {
-        D.Custom = l.customEmojis;
-      },
-      { immediate: !0 }
-    ), K(() => l.emojiFilter, () => {
-      he(), l.emojiFilter ? L.value = !0 : (L.value = !1, P(null)), _();
-    }), K(
-      () => l.selectedTabset,
-      (s) => {
-        q(s.tabId);
-      },
-      { deep: !0 }
-    );
-    function ee(s, u = !1) {
-      j.value = u, f("highlighted-emoji", s);
-    }
-    function se() {
-      const s = l.emojiFilter.toLowerCase();
-      r.value = i.value.filter((u) => {
-        const h = u.name.toLowerCase().includes(s), p = u.keywords.some((b) => b.toLowerCase().includes(s));
-        return h || p;
-      }), x(() => {
-        s && ee(r.value[0], !0);
-      });
-    }
-    function me(s, u = 300) {
-      let h;
-      return (...p) => {
-        clearTimeout(h), h = setTimeout(() => s(...p), u);
-      };
-    }
-    function ve(s) {
-      return s.date_added ? s.image : Q + s.unicode_character + ".png";
-    }
-    function be(s) {
-      s.target.parentNode.style.display = "none";
-    }
-    function q(s, u = !0) {
-      const p = v.value[s - 1].ref.value[0];
-      x(() => {
-        const b = o.value, U = s === 1 ? 0 : p.offsetTop - 15;
-        b.scrollTop = U, u && d(s - 1, 0);
-      });
-    }
-    function he() {
-      const s = o.value;
-      s.scrollTop = 0;
-    }
-    function pe() {
-      o.value.addEventListener("scroll", le);
-    }
-    function _e() {
-      e.value = new IntersectionObserver(async (s) => {
-        s.forEach((u) => {
-          var b, U, O, ne, ie;
-          const { target: h } = u, p = parseInt(h.dataset.index);
-          u.isIntersecting && h.offsetTop <= w.value.offsetTop + 50 ? (c.value = ((b = v.value[p - 1]) == null ? void 0 : b.label) ?? ((U = v.value[0]) == null ? void 0 : U.label), f("scroll-into-tab", p - 1)) : u.boundingClientRect.bottom <= ((O = w.value) == null ? void 0 : O.getBoundingClientRect().bottom) ? (f("scroll-into-tab", p), c.value = (ne = v.value[p]) == null ? void 0 : ne.label) : p === 1 && (f("scroll-into-tab", p), c.value = (ie = v.value[0]) == null ? void 0 : ie.label);
-        });
-      }), e.value.observe(w.value), Array.from(o.value.children).forEach((s, u) => {
-        e.value.observe(s), s.dataset.index = u;
-      });
-    }
-    const Ee = (s, u, h) => {
-      if (s.preventDefault(), Object.values(H).includes(s.key)) {
-        C(s.key, u);
-        return;
-      }
-      switch (s.key) {
-        case "Tab":
-          f("focus-skin-selector");
-          break;
-        case "Enter":
-          X(h, s);
-          break;
-      }
-    }, ke = (s, u, h, p) => {
-      if (s.preventDefault(), Object.values(H).includes(s.key)) {
-        B(s.key, u, h);
-        return;
-      }
-      switch (s.key) {
-        case "Tab":
-          s.shiftKey ? d(u, 0) && u > 0 ? q(u, !0) : (q(1, !1), f("focus-search-input")) : d(u + 1, 0) ? q(u + 1 + 1, !1) : f("focus-skin-selector");
-          break;
-        case "Enter":
-          X(p, s);
-          break;
-      }
-    };
-    function X(s, u) {
-      f("selected-emoji", { ...s, shift_key: u.shiftKey });
-    }
-    function P(s) {
-      f("highlighted-emoji", s);
-    }
-    function Se() {
-      d(0, 0);
-    }
-    function ge() {
-      q(T.value.length, !0);
-    }
-    return re(() => {
-      _e(), pe();
-    }), Te(() => {
-      e.value.disconnect(), o.value.removeEventListener("scroll", le);
-    }), g({
-      focusEmojiSelector: Se,
-      focusLastEmoji: ge
-    }), (s, u) => (E(), I("div", Ye, [
-      A("div", {
-        id: "d-emoji-picker-list",
-        ref_key: "listRef",
-        ref: o,
-        class: "d-emoji-picker__list"
-      }, [
-        t.emojiFilter ? (E(), I("p", Qe, z(r.value.length > 0 ? t.searchResultsLabel : t.searchNoResultsLabel), 1)) : (E(), I("div", {
-          key: 1,
-          ref_key: "tabCategoryRef",
-          ref: w,
-          class: "d-emoji-picker__category d-emoji-picker__alignment"
-        }, [
-          A("p", null, z(c.value), 1)
-        ], 512)),
-        (E(!0), I(W, null, G(v.value, (h, p) => te((E(), I("div", {
-          key: p,
-          ref_for: !0,
-          ref: h.ref,
-          class: "d-emoji-picker__alignment"
-        }, [
-          p ? (E(), I("p", Xe, z(h.label), 1)) : Y("", !0),
-          A("div", Ze, [
-            (E(!0), I(W, null, G(k(D)[T.value[p] + t.skinTone] ? k(D)[T.value[p] + t.skinTone] : k(D)[T.value[p]], (b, U) => (E(), I("button", {
-              key: b.shortname,
-              ref_for: !0,
-              ref: (O) => {
-                O && k(m)(O, p, U);
-              },
-              type: "button",
-              "aria-label": b.name,
-              onClick: (O) => X(b, O),
-              onFocusin: (O) => P(b),
-              onFocusout: u[0] || (u[0] = (O) => P(null)),
-              onMouseover: (O) => P(b),
-              onMouseleave: u[1] || (u[1] = (O) => P(null)),
-              onKeydown: (O) => ke(O, p, U, b)
-            }, [
-              A("img", {
-                class: "d-icon d-icon--size-500",
-                alt: b.name,
-                "aria-label": b.name,
-                title: b.name,
-                src: ve(b),
-                onError: be
-              }, null, 40, et)
-            ], 40, xe))), 128))
-          ])
-        ])), [
-          [oe, !t.emojiFilter]
-        ])), 128)),
-        t.emojiFilter ? (E(), I("div", tt, [
-          A("div", ot, [
-            (E(!0), I(W, null, G(r.value, (h, p) => (E(), I("button", {
-              key: h.shortname,
-              ref_for: !0,
-              ref: (b) => {
-                b && k(a)(b, p);
-              },
-              type: "button",
-              "aria-label": h.name,
-              class: ce({
-                "hover-emoji": p === 0 && k(j)
-              }),
-              onClick: (b) => X(h, b),
-              onFocusin: (b) => P(h),
-              onFocusout: u[2] || (u[2] = (b) => P(null)),
-              onMouseover: (b) => ee(h),
-              onMouseleave: u[3] || (u[3] = (b) => ee(null)),
-              onKeydown: (b) => Ee(b, p, h)
-            }, [
-              A("img", {
-                class: "d-icon d-icon--size-500",
-                alt: h.name,
-                "aria-label": h.name,
-                title: h.name,
-                src: `${k(Q) + h.unicode_character}.png`
-              }, null, 8, st)
-            ], 42, lt))), 128))
-          ])
-        ])) : Y("", !0)
-      ], 512)
-    ]));
-  }
-}, it = { "data-qa": "skin-selector" }, at = { class: "d-emoji-picker__skin-list" }, rt = ["onKeydown", "onClick"], ut = ["alt", "aria-label", "title", "src"], ct = { class: "d-emoji-picker__skin-selected" }, ft = ["aria-label"], dt = ["alt", "aria-label", "title", "src"], mt = {
-  __name: "emoji_skin_selector",
-  props: {
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: !0
-    },
-    isHovering: {
-      type: Boolean,
-      default: !1
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: !0
-    }
-  },
-  emits: [
-    /**
-     * The skin tone that was selected
-     * @event skin-tone
-     * @type {Number}
-     */
-    "skin-tone",
-    "focus-tabset",
-    "focus-last-emoji"
-  ],
-  setup(t, { expose: g, emit: y }) {
-    const l = t, f = y, R = [
-      {
-        name: ":wave_tone1:",
-        unicode_output: "1f44b-1f3fb",
-        skinTone: V.LIGHT,
-        skinCode: "_tone1"
-      },
-      {
-        name: ":wave_tone2:",
-        unicode_output: "1f44b-1f3fc",
-        skinTone: V.MEDIUM_LIGHT,
-        skinCode: "_tone2"
-      },
-      {
-        name: ":wave_tone3:",
-        unicode_output: "1f44b-1f3fd",
-        skinTone: V.MEDIUM,
-        skinCode: "_tone3"
-      },
-      {
-        name: ":wave_tone4:",
-        unicode_output: "1f44b-1f3fe",
-        skinTone: V.MEDIUM_DARK,
-        skinCode: "_tone4"
-      },
-      {
-        name: ":wave_tone5:",
-        unicode_output: "1f44b-1f3ff",
-        skinTone: V.DARK,
-        skinCode: "_tone5"
-      },
-      {
-        name: ":wave:",
-        unicode_output: "1f44b",
-        skinTone: V.DEFAULT,
-        skinCode: ""
-      }
-    ], L = S(!1), j = S(null), m = S([]);
-    ae(
-      () => l.isHovering && (L.value = !1)
-    );
-    const a = M(() => R.find((n) => n.skinTone === l.skinTone)), d = S(a.value);
-    ae(() => a.value && (d.value = a.value));
-    function C(n) {
-      m.value.push(n);
-    }
-    function B() {
-      j.value.focus();
-    }
-    function w(n) {
-      d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => B());
-    }
-    const o = (n, v, c) => {
-      var T, r, i;
-      n.preventDefault(), n.key === "ArrowLeft" && (c === 0 && ((T = m.value[m.value.length - 1]) == null || T.focus()), (r = m.value[c - 1]) == null || r.focus()), n.key === "ArrowRight" && ((i = m.value[c + 1]) == null || i.focus()), n.key === "Enter" && (v ? w(v) : e()), n.key === "Tab" && (n.shiftKey ? f("focus-last-emoji") : f("focus-tabset"));
-    };
-    function e() {
-      L.value = !L.value, x(() => m.value[0].focus());
-    }
-    return g({
-      focusSkinSelector: B
-    }), (n, v) => (E(), I("div", it, [
-      te(A("div", at, [
-        (E(), I(W, null, G(R, (c, T) => A("button", {
-          ref_for: !0,
-          ref: (r) => {
-            r && C(r);
-          },
-          key: c.name,
-          class: ce({
-            selected: d.value.skinCode === c.skinCode
-          }),
-          onKeydown: (r) => o(r, c, T),
-          onClick: (r) => w(c)
-        }, [
-          A("img", {
-            class: "d-icon d-icon--size-500",
-            alt: c.name,
-            "aria-label": c.name,
-            title: c.name,
-            src: `${k(Q) + c.unicode_output}.png`
-          }, null, 8, ut)
-        ], 42, rt)), 64))
-      ], 512), [
-        [oe, L.value]
-      ]),
-      te(A("div", ct, [
-        F(k(Je), { placement: "top-end" }, {
-          anchor: N(() => [
-            A("button", {
-              ref_key: "skinSelectorRef",
-              ref: j,
-              "aria-label": t.skinSelectorButtonTooltipLabel,
-              tabindex: "-1",
-              onClick: e,
-              onKeydown: v[0] || (v[0] = (c) => o(c))
-            }, [
-              A("img", {
-                class: "d-icon d-icon--size-500",
-                alt: d.value.name,
-                "aria-label": d.value.name,
-                title: d.value.name,
-                src: `${k(Q) + d.value.unicode_output}.png`
-              }, null, 8, dt)
-            ], 40, ft)
-          ]),
-          default: N(() => [
-            fe(z(t.skinSelectorButtonTooltipLabel) + " ", 1)
-          ]),
-          _: 1
-        })
-      ], 512), [
-        [oe, !L.value]
-      ])
-    ]));
-  }
-}, vt = { class: "d-emoji-picker__data" }, bt = ["alt", "aria-label", "title", "src"], ht = {
-  __name: "emoji_description",
-  props: {
-    /**
-     * Emoji data
-     * @type {Object}
-     * @default null
-     */
-    emoji: {
-      type: Object,
-      default: null
-    }
-  },
-  setup(t) {
-    function g(y) {
-      return y.date_added ? y.image : `${Q + y.unicode_character}.png`;
-    }
-    return (y, l) => {
-      var f;
-      return E(), I("div", vt, [
-        t.emoji ? (E(), I("img", {
-          key: 0,
-          class: "d-icon d-icon--size-500",
-          alt: t.emoji.name,
-          "aria-label": t.emoji.name,
-          title: t.emoji.name,
-          src: g(t.emoji)
-        }, null, 8, bt)) : Y("", !0),
-        A("div", null, z((f = t.emoji) == null ? void 0 : f.name), 1)
-      ]);
-    };
-  }
-}, pt = { class: "d-emoji-picker" }, _t = { class: "d-emoji-picker--header" }, Et = { class: "d-emoji-picker--body" }, kt = { class: "d-emoji-picker--footer" }, Ot = {
-  __name: "emoji_picker",
-  props: {
-    /**
-     * The array with recently used  emoji object
-     * This list is necessary to fill the recently used tab
-     * @type {Array}
-     * @default []
-     * @example
-     * <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
-     */
-    // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
-    recentlyUsedEmojis: {
-      type: Array,
-      default: () => []
-    },
-    /**
-       * The array with custom emojis object
-       * This list is necessary to fill the custom tab
-       * @type {Array}
-       * @default []
-       * @example
-       * <dt-emoji-picker :customEmojis="[emojiObject, emojiObject]" />
-       */
-    customEmojis: {
-      type: Array
-    },
-    /**
-     * The skin tone to show the emojis
-     * This prop gives the possibility to use the skin tone selected by the user previously
-     * @type {String}
-     * @default 'Default'
-     * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'
-     * @example
-     * <dt-emoji-picker :skinTone="'Default'" />
-     */
-    skinTone: {
-      type: String,
-      default: "Default"
-    },
-    /**
-    
-       * Sets the search query that filters emojis.
-       * @type {String}
-       * @example
-       * <dt-emoji-picker search-query="smile" />
-       */
-    searchQuery: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Shows the search input
-     * @type {Boolean}
-     * @example
-     * <dt-emoji-picker :show-search="false" />
-     */
-    showSearch: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-       * Shows the add emoji button in the footer when no emoji is highlighted
-       * @type {Boolean}
-       * @example
-       * <dt-emoji-picker :show-add-emoji-button="true" />
-       */
-    showAddEmojiButton: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * It will emit the selected emoji
-     * @event selected-emoji
-     * @param {Object} emoji - The selected emoji from the emoji selector
-     */
-    "selected-emoji",
-    /**
-    * Emitted when the user reach bottom scroll
-    * This is being handled by handleScroll method
-    * @event scroll-bottom-reached
-    */
-    "scroll-bottom-reached",
-    /**
-     * It will emit the selected skin tone
-     * @event skin-tone
-     * @param {String} skin - The selected skin tone from the skin selector
-     */
-    "skin-tone",
-    /**
-     * Since the keyboard events are encapsulated, we emit this event to close the picker
-     * @event close
-     */
-    "close",
-    /**
-     * Emitted when the user clicks on the add emoji button
-     * @event add-emoji
-     */
-    "add-emoji"
-  ],
-  setup(t, { emit: g }) {
-    const y = t, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), j = S(0), m = M(() => {
-      var r;
-      return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
-    }), a = M(() => {
-      var r;
-      return ((r = y.customEmojis) == null ? void 0 : r.length) > 0;
-    }), d = new Ve(), C = [
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
-      d.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
-    ], B = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"), w = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"), o = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"), e = d.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"), n = d.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
-    K(
-      () => y.searchQuery,
-      (r) => {
-        f.value = r;
-      }
-    );
-    function v(r) {
-      f.value = "", L.value = { ...L.value, tabId: r };
-    }
-    function c(r) {
-      j.value = r;
-    }
-    function T(r) {
-      R.value = r;
-    }
-    return (r, i) => (E(), I("div", pt, [
-      A("div", _t, [
-        F(We, {
-          ref: "tabsetRef",
-          "emoji-filter": f.value,
-          "show-custom-emojis-tab": a.value,
-          "show-recently-used-tab": m.value,
-          "scroll-into-tab": j.value,
-          "tab-set-labels": C,
-          onFocusSkinSelector: i[0] || (i[0] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: i[1] || (i[1] = (_) => t.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onSelectedTabset: v,
-          onKeydown: i[2] || (i[2] = J((_) => l("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab"])
-      ]),
-      A("div", Et, [
-        t.showSearch ? (E(), Z(ze, {
-          key: 0,
-          ref: "searchInputRef",
-          modelValue: f.value,
-          "onUpdate:modelValue": i[3] || (i[3] = (_) => f.value = _),
-          "search-placeholder-label": k(B),
-          onSelectFirstEmoji: i[4] || (i[4] = (_) => l("selected-emoji", R.value)),
-          onFocusTabset: i[5] || (i[5] = (_) => r.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: i[6] || (i[6] = (_) => r.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: i[7] || (i[7] = J((_) => l("close"), ["esc"]))
-        }, null, 8, ["modelValue", "search-placeholder-label"])) : Y("", !0),
-        F(nt, {
-          ref: "emojiSelectorRef",
-          "emoji-filter": f.value,
-          "skin-tone": t.skinTone,
-          "tabset-labels": C,
-          "search-results-label": k(w),
-          "search-no-results-label": k(o),
-          "recently-used-emojis": t.recentlyUsedEmojis,
-          "custom-emojis": t.customEmojis,
-          "selected-tabset": L.value,
-          onScrollIntoTab: c,
-          onHighlightedEmoji: T,
-          onSelectedEmoji: i[8] || (i[8] = (_) => l("selected-emoji", _)),
-          onFocusSkinSelector: i[9] || (i[9] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: i[10] || (i[10] = (_) => t.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
-          onKeydown: i[11] || (i[11] = J((_) => l("close"), ["esc"])),
-          onScrollBottomReached: i[12] || (i[12] = (_) => l("scroll-bottom-reached"))
-        }, null, 8, ["emoji-filter", "skin-tone", "search-results-label", "search-no-results-label", "recently-used-emojis", "custom-emojis", "selected-tabset"])
-      ]),
-      A("div", kt, [
-        t.showAddEmojiButton && !R.value ? (E(), Z(k(de), {
-          key: 0,
-          importance: "outlined",
-          "aria-label": k(n),
-          class: "d-emoji-picker__add-emoji",
-          onClick: i[13] || (i[13] = (_) => l("add-emoji"))
-        }, {
-          default: N(() => [
-            fe(z(k(n)), 1)
-          ]),
-          _: 1
-        }, 8, ["aria-label"])) : Y("", !0),
-        F(ht, { emoji: R.value }, null, 8, ["emoji"]),
-        F(mt, {
-          ref: "skinSelectorRef",
-          "is-hovering": !!R.value,
-          "skin-selector-button-tooltip-label": k(e),
-          "skin-tone": t.skinTone,
-          onSkinTone: i[14] || (i[14] = (_) => l("skin-tone", _)),
-          onFocusTabset: i[15] || (i[15] = (_) => r.$refs.tabsetRef.focusTabset()),
-          onFocusLastEmoji: i[16] || (i[16] = (_) => r.$refs.emojiSelectorRef.focusLastEmoji()),
-          onKeydown: i[17] || (i[17] = J((_) => l("close"), ["esc"]))
-        }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
-      ])
-    ]));
-  }
-};
-export {
-  Ot as default
-};
-//# sourceMappingURL=emoji-picker.js.map
+import { t as e } from "../../emoji_picker-tVHfpHDk.js";
+export { e as default };