@dialpad/dialtone-vue 3.108.2 → 3.109.0

package/dist/emoji_picker-9GQGW9jo.js

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