@dialpad/dialtone-vue 3.96.0 → 3.96.2

package/dist/emoji_picker-MrGLDXUn.js

@@ -0,0 +1,921 @@
+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
+};