@dialpad/dialtone-vue 3.176.2 → 3.177.0

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

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