@dialpad/dialtone-vue 3.73.0 → 3.73.1

package/dist/emoji_picker-8485a649.js

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