@dialpad/dialtone-vue 3.96.3 → 3.98.0

package/dist/emoji_picker-MrGLDXUn.js

@@ -1,921 +0,0 @@
-import { ref as p, onMounted as se, openBlock as y, createElementBlock as j, createVNode as O, unref as T, withKeys as N, withModifiers as ne, createSlots as ge, withCtx as z, createElementVNode as w, computed as V, toRefs as ke, watch as P, Fragment as H, renderList as G, createBlock as ye, nextTick as W, onUnmounted as Se, toDisplayString as Y, withDirectives as X, createCommentVNode as Z, vShow as x, normalizeClass as ie, watchEffect as oe, createTextVNode as ae } from "vue";
-import { t as je, w as ee, x as Te, y as _e, z as M } from "./emoji-64scMQZS.js";
-import { D as $e } from "./tooltip-H27s49LR.js";
-const Re = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, we = ["onKeydown"], Ee = {
-  __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(i, { expose: k, emit: E }) {
-    const n = E, c = p(null);
-    function d() {
-      n("update:modelValue", ""), b();
-    }
-    function b() {
-      c.value.focus();
-    }
-    return se(() => {
-      b();
-    }), k({
-      focusSearchInput: b
-    }), (S, a) => (y(), j("div", Re, [
-      O(T(je), {
-        id: "searchInput",
-        ref_key: "searchInput",
-        ref: c,
-        placeholder: i.searchPlaceholderLabel,
-        "model-value": i.modelValue,
-        "onUpdate:modelValue": a[0] || (a[0] = ($) => S.$emit("update:modelValue", $)),
-        onKeydown: [
-          a[1] || (a[1] = N(($) => S.$emit("focus-tabset"), ["up"])),
-          a[2] || (a[2] = N(ne(($) => S.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          a[3] || (a[3] = N(($) => S.$emit("select-first-emoji"), ["enter"]))
-        ]
-      }, ge({
-        leftIcon: z(() => [
-          O(T(ee), { name: "search" })
-        ]),
-        _: 2
-      }, [
-        i.modelValue.length > 0 ? {
-          name: "rightIcon",
-          fn: z(() => [
-            w("button", {
-              class: "d-emoji-picker__search-button",
-              onClick: d,
-              onKeydown: N(d, ["enter"])
-            }, [
-              O(T(ee), { name: "close" })
-            ], 40, we)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["placeholder", "model-value"])
-    ]));
-  }
-}, Le = { class: "d-emoji-picker__tabset" }, Ie = {
-  __name: "emoji_tabset",
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: !1
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: !0
-    },
-    isScrolling: {
-      type: Boolean,
-      default: !1
-    },
-    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"
-  ],
-  setup(i, { expose: k, emit: E }) {
-    const n = i, c = E, d = [
-      { label: U.MOST_RECENTLY_USED, icon: "clock" },
-      { label: U.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-      { label: U.NATURE, icon: "living-thing" },
-      { label: U.FOOD, icon: "food" },
-      { label: U.ACTIVITY, icon: "object" },
-      { label: U.TRAVEL, icon: "transportation" },
-      { label: U.OBJECTS, icon: "lightbulb" },
-      { label: U.SYMBOLS, icon: "heart" },
-      { label: U.FLAGS, icon: "flag" }
-    ], b = V(() => (n.showRecentlyUsedTab ? d : d.slice(1)).map((l, h) => ({
-      ...l,
-      label: n.tabsetLabels[h],
-      id: (h + 1).toString(),
-      panelId: (h + 1).toString()
-    }))), S = V(() => n.emojiFilter.length > 0), a = p("1"), { isScrolling: $ } = ke(n), R = p([]);
-    P(
-      () => n.scrollIntoTab,
-      () => {
-        !$.value && !S.value && (a.value = (n.scrollIntoTab + 1).toString());
-      }
-    ), P(
-      S,
-      () => {
-        S.value && (a.value = null);
-      }
-    );
-    function F(e) {
-      $.value || (a.value = e), c("selected-tabset", e);
-    }
-    function f(e) {
-      R.value.push(e.$el);
-    }
-    function A() {
-      R.value[0].focus();
-    }
-    function o(e, l) {
-      e.key === "Enter" && (F(l), R.value[l - 1].blur()), e.key === "Tab" && (e.preventDefault(), c("focus-search-input")), e.key === "ArrowDown" && c("focus-search-input");
-    }
-    return k({
-      focusTabset: A
-    }), (e, l) => (y(), j("div", Le, [
-      O(T(Te), {
-        "tab-list-class": "d-emoji-picker__tabset-list",
-        selected: a.value
-      }, {
-        tabs: z(() => [
-          (y(!0), j(H, null, G(b.value, (h, v) => (y(), ye(T(_e), {
-            id: h.id,
-            ref_for: !0,
-            ref: (_) => {
-              _ && f(_);
-            },
-            key: h.id,
-            "panel-id": h.panelId,
-            label: h.label,
-            "aria-controls": "d-emoji-picker-list",
-            tabindex: v + 1,
-            onClickCapture: ne((_) => F(h.id), ["stop"]),
-            onKeydown: (_) => o(_, h.id)
-          }, {
-            default: z(() => [
-              O(T(ee), {
-                size: "400",
-                name: h.icon
-              }, null, 8, ["name"])
-            ]),
-            _: 2
-          }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]))), 128))
-        ]),
-        _: 1
-      }, 8, ["selected"])
-    ]));
-  }
-}, J = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", I = 9, q = {
-  DEFAULT: "Default",
-  LIGHT: "Light",
-  MEDIUM_LIGHT: "MediumLight",
-  MEDIUM: "Medium",
-  MEDIUM_DARK: "MediumDark",
-  DARK: "Dark"
-}, U = {
-  MOST_RECENTLY_USED: "Most recently used",
-  SMILEYS_AND_PEOPLE: "Smileys and people",
-  NATURE: "Nature",
-  FOOD: "Food",
-  ACTIVITY: "Activity",
-  TRAVEL: "Travel",
-  OBJECTS: "Objects",
-  SYMBOLS: "Symbols",
-  FLAGS: "Flags"
-};
-function Ae(i) {
-  const k = p([]), E = p([]), n = p(!1), c = p(!0);
-  function d(o, e = !1) {
-    c.value = e, i("highlighted-emoji", o);
-  }
-  function b(o, e, l) {
-    k.value[e] || (k.value[e] = []), k.value[e][l] = o;
-  }
-  function S(o, e) {
-    E.value[e] = o;
-  }
-  function a(o, e) {
-    var h, v, _;
-    const l = n.value ? (h = E.value) == null ? void 0 : h[e] : (_ = (v = k.value) == null ? void 0 : v[o]) == null ? void 0 : _[e];
-    return l ? (l.focus(), !0) : !1;
-  }
-  function $(o, e) {
-    a(o, e - 1) || (k.value[o - 1] ? a(o - 1, k.value[o - 1].length - 1) : a(k.value.length - 1, k.value[k.value.length - 1].length - 1));
-  }
-  function R(o, e) {
-    a(o, e + 1) || a(o + 1, 0) || a(0, 0);
-  }
-  function F(o, e) {
-    a(0, e - 1) || a(0, E.value.length - 1);
-  }
-  function f(o, e) {
-    a(0, e + 1) || a(0, 0);
-  }
-  function A(o, e, l) {
-    n.value ? o === "left" ? F(e, l) : o === "right" && f(e, l) : o === "left" ? $(e, l) : o === "right" && R(e, l);
-  }
-  return {
-    emojiRefs: k,
-    emojiFilteredRefs: E,
-    isFiltering: n,
-    hoverFirstEmoji: c,
-    setEmojiRef: b,
-    setFilteredRef: S,
-    hoverEmoji: d,
-    focusEmoji: a,
-    handleHorizontalNavigation: A
-  };
-}
-const De = { class: "d-emoji-picker__selector" }, Fe = {
-  key: 0,
-  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, Ce = { key: 0 }, Me = { class: "d-emoji-picker__tab" }, Ke = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Oe = ["alt", "aria-label", "title", "src"], Ue = {
-  key: 2,
-  class: "d-emoji-picker__alignment"
-}, Ne = {
-  class: "d-emoji-picker__tab",
-  "data-qa": "filtered-emojis"
-}, Be = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Ve = ["alt", "aria-label", "title", "src"], qe = {
-  __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: () => []
-    }
-  },
-  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 scrollTo function starts scrolling and stops scrolling
-     * @event is-scrolling
-     * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to
-      */
-    "is-scrolling",
-    /**
-     * 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(i, { expose: k, emit: E }) {
-    const n = i, c = E, {
-      emojiRefs: d,
-      emojiFilteredRefs: b,
-      isFiltering: S,
-      hoverFirstEmoji: a,
-      setEmojiRef: $,
-      setFilteredRef: R,
-      hoverEmoji: F,
-      focusEmoji: f,
-      handleHorizontalNavigation: A
-    } = Ae(c), o = p(null), e = p(null), l = p(null), h = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], v = V(() => n.recentlyUsedEmojis.length ? n.tabsetLabels.map((t) => ({ label: t, ref: p(null) })) : n.tabsetLabels.slice(1).map((t) => ({ label: t, ref: p(null) }))), _ = p(v.value[0].label), C = V(() => n.recentlyUsedEmojis.length ? h : h.slice(1)), B = p([]), te = V(() => [
-      ...M[`People${n.skinTone}`],
-      ...M.Nature,
-      ...M.Food,
-      ...M[`Activity${n.skinTone}`],
-      ...M.Travel,
-      ...M[`Objects${n.skinTone}`],
-      ...M.Symbols,
-      ...M.Flags
-    ]), re = ue(() => {
-      b.value = [], le();
-    });
-    P(te, () => {
-      le();
-    }, { immediate: !0 }), P(
-      () => n.recentlyUsedEmojis,
-      () => {
-        M["Recently used"] = n.recentlyUsedEmojis;
-      },
-      { immediate: !0 }
-    ), P(() => n.emojiFilter, () => {
-      de(), n.emojiFilter ? S.value = !0 : (S.value = !1, c("highlighted-emoji", null)), re();
-    }), P(
-      () => n.selectedTabset,
-      (t) => {
-        Q(t.tabId);
-      },
-      { deep: !0 }
-    );
-    function le() {
-      const t = n.emojiFilter.toLowerCase();
-      B.value = te.value.filter((s) => {
-        const u = s.name.toLowerCase().includes(t), m = s.keywords.some((r) => r.toLowerCase().includes(t));
-        return u || m;
-      }), W(() => {
-        t && F(B.value[0], !0);
-      });
-    }
-    function ue(t, s = 300) {
-      let u;
-      return (...m) => {
-        clearTimeout(u), u = setTimeout(() => t(...m), s);
-      };
-    }
-    function ce(t) {
-      return `${J + t}.png`;
-    }
-    function fe(t) {
-      t.target.parentNode.style.display = "none";
-    }
-    function Q(t, s = !0) {
-      const m = v.value[t - 1].ref.value[0];
-      W(() => {
-        const r = e.value, L = t === "1" ? 0 : m.offsetTop - 20;
-        let g = !0, K = r.scrollTop;
-        c("is-scrolling", !0), r.addEventListener("scroll", () => {
-          if (g) {
-            const D = r.scrollTop;
-            (K < D && D >= L || K > D && D <= L) && (g = !1, c("is-scrolling", !1)), K = D;
-          }
-        }), r.scrollTop = L, s && f(t - 1, 0);
-      });
-    }
-    function de() {
-      const t = e.value;
-      t.scrollTop = 0;
-    }
-    function me() {
-      l.value = new IntersectionObserver((t) => {
-        t.forEach((s) => {
-          var r, L, g, K, D;
-          const { target: u } = s, m = parseInt(u.dataset.index);
-          s.isIntersecting && u.offsetTop <= o.value.offsetTop + 50 ? (_.value = ((r = v.value[m - 1]) == null ? void 0 : r.label) ?? ((L = v.value[0]) == null ? void 0 : L.label), c("scroll-into-tab", m - 1)) : s.boundingClientRect.bottom <= ((g = o.value) == null ? void 0 : g.getBoundingClientRect().bottom) ? (c("scroll-into-tab", m), _.value = (K = v.value[m]) == null ? void 0 : K.label) : m === 1 && (c("scroll-into-tab", m), _.value = (D = v.value[0]) == null ? void 0 : D.label);
-        });
-      }), l.value.observe(o.value), Array.from(e.value.children).forEach((t, s) => {
-        l.value.observe(t), t.dataset.index = s;
-      });
-    }
-    const ve = (t, s, u) => {
-      var m;
-      if (t.preventDefault(), a.value = !1, t.key === "ArrowUp") {
-        const r = s % I;
-        if (!f(0, s - I)) {
-          const L = b.value.length - b.value.length % I + r;
-          f(0, L), f(0, L) || f(0, b.value.length - 1);
-        }
-      }
-      if (t.key === "ArrowDown" && !f(0, s + I)) {
-        const r = s % I;
-        (m = b.value) != null && m[s + (I - r)] ? f(0, b.value.length - 1) : f(0, r);
-      }
-      t.key === "ArrowLeft" && A("left", 0, s), t.key === "ArrowRight" && A("right", 0, s), t.key === "Tab" && c("focus-skin-selector"), t.key === "Enter" && c("selected-emoji", u);
-    }, be = (t, s, u, m) => {
-      var r, L;
-      if (t.preventDefault(), t.key === "ArrowUp") {
-        const g = u % I;
-        if (s === 0) {
-          const K = I - d.value[d.value.length - 1].length % I, D = d.value[d.value.length - 1].length + K - (I - g);
-          f(d.value.length - 1, D) || f(d.value.length - 1, d.value[d.value.length - 1].length - 1);
-          return;
-        }
-        if (!f(s, u - I)) {
-          const K = s - 1 < 0 ? 0 : s - 1, D = d.value[K].length, pe = D - D % I + g;
-          f(K, pe) || f(s - 1, d.value[s - 1].length - 1);
-        }
-      }
-      if (t.key === "ArrowDown" && !f(s, u + I)) {
-        const g = u % I;
-        (L = (r = d.value) == null ? void 0 : r[s]) != null && L[u + (I - g)] ? f(s, d.value[s].length - 1) : f(s + 1, g) || f(0, g) || f(0, d.value[0].length - 1);
-      }
-      t.key === "ArrowLeft" && A("left", s, u), t.key === "ArrowRight" && A("right", s, u), t.key === "Tab" && (f(s + 1, 0) ? Q(s + 1 + 1, !1) : c("focus-skin-selector")), t.key === "Tab" && t.shiftKey && (f(s, 0) && s > 0 ? Q(s, !0) : (Q(1, !1), c("focus-search-input"))), t.key === "Enter" && c("selected-emoji", m);
-    };
-    function he() {
-      f(0, 0);
-    }
-    return se(() => {
-      me();
-    }), Se(() => {
-      l.value.disconnect();
-    }), k({
-      focusEmojiSelector: he
-    }), (t, s) => (y(), j("div", De, [
-      w("div", {
-        id: "d-emoji-picker-list",
-        ref_key: "listRef",
-        ref: e,
-        class: "d-emoji-picker__list"
-      }, [
-        i.emojiFilter ? (y(), j("p", Fe, Y(B.value.length > 0 ? i.searchResultsLabel : i.searchNoResultsLabel), 1)) : (y(), j("div", {
-          key: 1,
-          ref_key: "tabCategoryRef",
-          ref: o,
-          class: "d-emoji-picker__category d-emoji-picker__alignment"
-        }, [
-          w("p", null, Y(_.value), 1)
-        ], 512)),
-        (y(!0), j(H, null, G(v.value, (u, m) => X((y(), j("div", {
-          key: m,
-          ref_for: !0,
-          ref: u.ref,
-          class: "d-emoji-picker__alignment"
-        }, [
-          m ? (y(), j("p", Ce, Y(u.label), 1)) : Z("", !0),
-          w("div", Me, [
-            (y(!0), j(H, null, G(T(M)[C.value[m] + i.skinTone] ? T(M)[C.value[m] + i.skinTone] : T(M)[C.value[m]], (r, L) => (y(), j("button", {
-              key: r.shortname,
-              ref_for: !0,
-              ref: (g) => {
-                g && T($)(g, m, L);
-              },
-              type: "button",
-              "aria-label": r.name,
-              onClick: (g) => t.$emit("selected-emoji", r),
-              onFocusin: (g) => t.$emit("highlighted-emoji", r),
-              onFocusout: s[0] || (s[0] = (g) => t.$emit("highlighted-emoji", null)),
-              onMouseover: (g) => t.$emit("highlighted-emoji", r),
-              onMouseleave: s[1] || (s[1] = (g) => t.$emit("highlighted-emoji", null)),
-              onKeydown: (g) => be(g, m, L, r)
-            }, [
-              w("img", {
-                class: "d-icon d-icon--size-500",
-                alt: r.name,
-                "aria-label": r.name,
-                title: r.name,
-                src: ce(r.unicode_character),
-                onError: fe
-              }, null, 40, Oe)
-            ], 40, Ke))), 128))
-          ])
-        ])), [
-          [x, !i.emojiFilter]
-        ])), 128)),
-        i.emojiFilter ? (y(), j("div", Ue, [
-          w("div", Ne, [
-            (y(!0), j(H, null, G(B.value, (u, m) => (y(), j("button", {
-              key: u.shortname,
-              ref_for: !0,
-              ref: (r) => {
-                r && T(R)(r, m);
-              },
-              type: "button",
-              "aria-label": u.name,
-              class: ie({
-                "hover-emoji": m === 0 && T(a)
-              }),
-              onClick: (r) => t.$emit("selected-emoji", u),
-              onFocusin: (r) => t.$emit("highlighted-emoji", u),
-              onFocusout: s[2] || (s[2] = (r) => t.$emit("highlighted-emoji", null)),
-              onMouseover: (r) => T(F)(u),
-              onMouseleave: s[3] || (s[3] = (r) => T(F)(null)),
-              onKeydown: (r) => ve(r, m, u)
-            }, [
-              w("img", {
-                class: "d-icon d-icon--size-500",
-                alt: u.name,
-                "aria-label": u.name,
-                title: u.name,
-                src: `${T(J) + u.unicode_character}.png`
-              }, null, 8, Ve)
-            ], 42, Be))), 128))
-          ])
-        ])) : Z("", !0)
-      ], 512)
-    ]));
-  }
-}, Pe = { "data-qa": "skin-selector" }, ze = { class: "d-emoji-picker__skin-list" }, He = ["onKeydown", "onClick"], Ge = ["alt", "aria-label", "title", "src"], Ye = { class: "d-emoji-picker__skin-selected" }, Je = ["aria-label"], Qe = ["alt", "aria-label", "title", "src"], We = {
-  __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"
-  ],
-  setup(i, { expose: k, emit: E }) {
-    const n = i, c = E, d = [
-      {
-        name: ":wave_tone1:",
-        unicode_output: "1f44b-1f3fb",
-        skinTone: q.LIGHT,
-        skinCode: "_tone1"
-      },
-      {
-        name: ":wave_tone2:",
-        unicode_output: "1f44b-1f3fc",
-        skinTone: q.MEDIUM_LIGHT,
-        skinCode: "_tone2"
-      },
-      {
-        name: ":wave_tone3:",
-        unicode_output: "1f44b-1f3fd",
-        skinTone: q.MEDIUM,
-        skinCode: "_tone3"
-      },
-      {
-        name: ":wave_tone4:",
-        unicode_output: "1f44b-1f3fe",
-        skinTone: q.MEDIUM_DARK,
-        skinCode: "_tone4"
-      },
-      {
-        name: ":wave_tone5:",
-        unicode_output: "1f44b-1f3ff",
-        skinTone: q.DARK,
-        skinCode: "_tone5"
-      },
-      {
-        name: ":wave:",
-        unicode_output: "1f44b",
-        skinTone: q.DEFAULT,
-        skinCode: ""
-      }
-    ], b = p(!1), S = p(null), a = p([]);
-    oe(
-      () => n.isHovering && (b.value = !1)
-    );
-    const $ = V(() => d.find((l) => l.skinTone === n.skinTone)), R = p($.value);
-    oe(() => $.value && (R.value = $.value));
-    function F(l) {
-      a.value.push(l);
-    }
-    function f() {
-      S.value.focus();
-    }
-    function A(l) {
-      R.value = l, b.value = !1, c("skin-tone", l.skinTone), W(() => f());
-    }
-    const o = (l, h, v) => {
-      var _, C, B;
-      l.preventDefault(), l.key === "ArrowLeft" && (v === 0 && ((_ = a.value[a.value.length - 1]) == null || _.focus()), (C = a.value[v - 1]) == null || C.focus()), l.key === "ArrowRight" && ((B = a.value[v + 1]) == null || B.focus()), l.key === "Enter" && (h ? A(h) : e()), l.key === "Tab" && c("focus-tabset");
-    };
-    function e() {
-      b.value = !b.value, W(() => a.value[0].focus());
-    }
-    return k({
-      focusSkinSelector: f
-    }), (l, h) => (y(), j("div", Pe, [
-      X(w("div", ze, [
-        (y(), j(H, null, G(d, (v, _) => w("button", {
-          ref_for: !0,
-          ref: (C) => {
-            C && F(C);
-          },
-          key: v.name,
-          class: ie({
-            selected: R.value.skinCode === v.skinCode
-          }),
-          onKeydown: (C) => o(C, v, _),
-          onClick: (C) => A(v)
-        }, [
-          w("img", {
-            class: "d-icon d-icon--size-500",
-            alt: v.name,
-            "aria-label": v.name,
-            title: v.name,
-            src: `${T(J) + v.unicode_output}.png`
-          }, null, 8, Ge)
-        ], 42, He)), 64))
-      ], 512), [
-        [x, b.value]
-      ]),
-      X(w("div", Ye, [
-        O(T($e), { placement: "top-end" }, {
-          anchor: z(() => [
-            w("button", {
-              ref_key: "skinSelectorRef",
-              ref: S,
-              "aria-label": i.skinSelectorButtonTooltipLabel,
-              tabindex: "-1",
-              onClick: e,
-              onKeydown: h[0] || (h[0] = (v) => o(v))
-            }, [
-              w("img", {
-                class: "d-icon d-icon--size-500",
-                alt: R.value.name,
-                "aria-label": R.value.name,
-                title: R.value.name,
-                src: `${T(J) + R.value.unicode_output}.png`
-              }, null, 8, Qe)
-            ], 40, Je)
-          ]),
-          default: z(() => [
-            ae(Y(i.skinSelectorButtonTooltipLabel) + " ", 1)
-          ]),
-          _: 1
-        })
-      ], 512), [
-        [x, !b.value]
-      ])
-    ]));
-  }
-}, Xe = { class: "d-emoji-picker__data" }, Ze = ["alt", "aria-label", "title", "src"], xe = {
-  __name: "emoji_description",
-  props: {
-    /**
-     * Emoji data
-     * @type {Object}
-     * @default null
-     */
-    emoji: {
-      type: Object,
-      default: null
-    }
-  },
-  setup(i) {
-    return (k, E) => {
-      var n;
-      return y(), j("div", Xe, [
-        i.emoji ? (y(), j("img", {
-          key: 0,
-          class: "d-icon d-icon--size-500",
-          alt: i.emoji.name,
-          "aria-label": i.emoji.name,
-          title: i.emoji.name,
-          src: `${T(J) + i.emoji.unicode_character}.png`
-        }, null, 8, Ze)) : Z("", !0),
-        ae(" " + Y((n = i.emoji) == null ? void 0 : n.name), 1)
-      ]);
-    };
-  }
-}, et = { class: "d-emoji-picker" }, tt = { class: "d-emoji-picker--header" }, lt = { class: "d-emoji-picker--body" }, ot = { class: "d-emoji-picker--footer" }, at = {
-  __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 placeholder text for the search input
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
-     */
-    searchPlaceholderLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchResultsLabel="'Search results'" />
-     */
-    searchResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The label for the search no results
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchNoResultsLabel="'No results'" />
-     */
-    searchNoResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The list of tabsets to show, it is necessary to be updated with the correct language
-     * It must respect the provided order.
-     * @type {Array}
-     * @required
-     * @example
-     * <dt-emoji-picker
-     *  :tabSetLabels="['Most recently used', 'Smileys and people', 'Nature',
-     *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']" />
-     */
-    tabSetLabels: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * 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"
-    },
-    /**
-     * Tooltip shown when skin selector button is hovered.
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :skin-selector-button-tooltip-label="'Change default skin tone'" />
-     */
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: !0
-    }
-  },
-  emits: [
-    /**
-     * It will emit the selected emoji
-     * @event selected-emoji
-     * @param {Object} emoji - The selected emoji from the emoji selector
-     */
-    "selected-emoji",
-    /**
-     * 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"
-  ],
-  setup(i, { emit: k }) {
-    const E = i, n = k, c = p(""), d = p(null), b = p({}), S = p(0), a = p(!1), $ = V(() => E.recentlyUsedEmojis.length > 0);
-    function R(o) {
-      c.value = "", b.value = o, b.value = { ...b.value, tabId: o };
-    }
-    function F(o) {
-      S.value = o;
-    }
-    function f(o) {
-      a.value = o;
-    }
-    function A(o) {
-      d.value = o;
-    }
-    return (o, e) => (y(), j("div", et, [
-      w("div", tt, [
-        O(Ie, {
-          ref: "tabsetRef",
-          "emoji-filter": c.value,
-          "show-recently-used-tab": $.value,
-          "scroll-into-tab": S.value,
-          "tabset-labels": i.tabSetLabels,
-          "is-scrolling": a.value,
-          onFocusSearchInput: e[0] || (e[0] = (l) => o.$refs.searchInputRef.focusSearchInput()),
-          onSelectedTabset: R,
-          onKeydown: e[1] || (e[1] = N((l) => n("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
-      ]),
-      w("div", lt, [
-        O(Ee, {
-          ref: "searchInputRef",
-          modelValue: c.value,
-          "onUpdate:modelValue": e[2] || (e[2] = (l) => c.value = l),
-          "search-placeholder-label": i.searchPlaceholderLabel,
-          onSelectFirstEmoji: e[3] || (e[3] = (l) => n("selected-emoji", d.value)),
-          onFocusTabset: e[4] || (e[4] = (l) => o.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: e[5] || (e[5] = (l) => o.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: e[6] || (e[6] = N((l) => n("close"), ["esc"]))
-        }, null, 8, ["modelValue", "search-placeholder-label"]),
-        O(qe, {
-          ref: "emojiSelectorRef",
-          "emoji-filter": c.value,
-          "skin-tone": i.skinTone,
-          "tabset-labels": i.tabSetLabels,
-          "search-results-label": i.searchResultsLabel,
-          "search-no-results-label": i.searchNoResultsLabel,
-          "recently-used-emojis": i.recentlyUsedEmojis,
-          "selected-tabset": b.value,
-          onScrollIntoTab: F,
-          onIsScrolling: f,
-          onHighlightedEmoji: A,
-          onSelectedEmoji: e[7] || (e[7] = (l) => n("selected-emoji", l)),
-          onFocusSkinSelector: e[8] || (e[8] = (l) => o.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: e[9] || (e[9] = (l) => o.$refs.searchInputRef.focusSearchInput()),
-          onKeydown: e[10] || (e[10] = N((l) => n("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
-      ]),
-      w("div", ot, [
-        O(xe, { emoji: d.value }, null, 8, ["emoji"]),
-        O(We, {
-          ref: "skinSelectorRef",
-          "is-hovering": !!d.value,
-          "skin-selector-button-tooltip-label": i.skinSelectorButtonTooltipLabel,
-          "skin-tone": i.skinTone,
-          onSkinTone: e[11] || (e[11] = (l) => n("skin-tone", l)),
-          onFocusTabset: e[12] || (e[12] = (l) => o.$refs.tabsetRef.focusTabset()),
-          onKeydown: e[13] || (e[13] = N((l) => n("close"), ["esc"]))
-        }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
-      ])
-    ]));
-  }
-};
-export {
-  J as C,
-  I as E,
-  at as _,
-  q as a,
-  U as b
-};