@dialpad/dialtone 9.110.1-beta.2 → 9.110.2

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

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