@dialpad/dialtone-vue 3.96.3 → 3.98.0

package/dist/emoji_picker-_P3IH5Mx.js

@@ -0,0 +1,967 @@
+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 { t as Te, w as ne, x as we, y as Ee, z as I } from "./emoji-64scMQZS.js";
+import { D as $e } from "./tooltip-H27s49LR.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
+};