@dialpad/dialtone 9.8.0 → 9.10.1

package/dist/vue2/emoji_picker-3cVhhlbr.js

@@ -0,0 +1,782 @@
+import { y as b, z as k, w as p, x as _, A as j } from "./index-NG2T0qK1.js";
+import { n as m, D as g } from "./tooltip-UOWkfPpb.js";
+import "vue";
+const y = {
+  name: "EmojiTabset",
+  components: {
+    DtTabGroup: b,
+    DtTab: k,
+    DtIcon: p
+  },
+  props: {
+    showRecentlyUsedTab: {
+      type: Boolean,
+      default: !1
+    },
+    scrollIntoTab: {
+      type: Number,
+      required: !0
+    },
+    isScrolling: {
+      type: Boolean,
+      default: !1
+    },
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    tabSetLabels: {
+      type: Array,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      selectedTab: "1",
+      tabsetRef: [],
+      TABS_DATA: [
+        { label: u.MOST_RECENTLY_USED, icon: "clock" },
+        { label: u.SMILEYS_AND_PEOPLE, icon: "satisfied" },
+        { label: u.NATURE, icon: "living-thing" },
+        { label: u.FOOD, icon: "food" },
+        { label: u.ACTIVITY, icon: "object" },
+        { label: u.TRAVEL, icon: "transportation" },
+        { label: u.OBJECTS, icon: "lightbulb" },
+        { label: u.SYMBOLS, icon: "heart" },
+        { label: u.FLAGS, icon: "flag" }
+      ]
+    };
+  },
+  computed: {
+    tabs() {
+      return (this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1)).map((e, i) => ({
+        ...e,
+        label: this.tabSetLabels[i],
+        id: (i + 1).toString(),
+        panelId: (i + 1).toString()
+      }));
+    },
+    isSearching() {
+      return this.emojiFilter.length > 0;
+    }
+  },
+  watch: {
+    scrollIntoTab: function(t) {
+      !this.isScrolling && !this.isSearching && (this.selectedTab = (t + 1).toString());
+    },
+    isSearching: function(t) {
+      t && (this.selectedTab = null);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setTabsetRef();
+    });
+  },
+  methods: {
+    selectTabset(t) {
+      this.isScrolling || (this.selectedTab = t), this.$emit("selected-tabset", t);
+    },
+    setTabsetRef() {
+      this.tabs.forEach((t, e) => {
+        const i = `tabsetRef-${e}`;
+        this.$refs[i] && this.$set(this.tabsetRef, e, this.$refs[i][0].$el);
+      });
+    },
+    focusTabset() {
+      this.tabsetRef[0] && this.tabsetRef[0].focus();
+    },
+    handleKeyDown(t, e) {
+      t.key === "Enter" && (this.selectTabset(e), this.tabsetRef[e - 1] && this.tabsetRef[e - 1].blur()), t.key === "Tab" && (t.preventDefault(), t.shiftKey ? this.$emit("focus-skin-selector") : this.$emit("focus-search-input")), t.key === "ArrowDown" && this.$emit("focus-search-input");
+    }
+  }
+};
+var R = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "d-emoji-picker__tabset" }, [i("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", selected: e.selectedTab }, scopedSlots: e._u([{ key: "tabs", fn: function() {
+    return e._l(e.tabs, function(s, r) {
+      return i("dt-tab", { key: s.id, ref: `tabsetRef-${r}`, refInFor: !0, attrs: { id: s.id, "panel-id": s.panelId, label: s.label, "aria-controls": "d-emoji-picker-list", tabindex: r + 1 }, on: { "!click": function(o) {
+        return o.stopPropagation(), e.selectTabset(s.id);
+      }, keydown: function(o) {
+        return e.handleKeyDown(o, s.id);
+      } } }, [i("dt-icon", { attrs: { size: "400", name: s.icon } })], 1);
+    });
+  }, proxy: !0 }]) })], 1);
+}, S = [], E = /* @__PURE__ */ m(
+  y,
+  R,
+  S,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const $ = E.exports, T = {
+  name: "EmojiSearch",
+  components: {
+    DtInput: _,
+    DtIcon: p
+  },
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: !0
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  mounted() {
+    this.focusSearchInput();
+  },
+  methods: {
+    updateModelValue(t) {
+      this.$emit("update:model-value", t);
+    },
+    focusEmojiSelector() {
+      this.$emit("focus-emoji-selector");
+    },
+    focusTabset() {
+      this.$emit("focus-tabset");
+    },
+    selectFirstEmoji() {
+      this.$emit("select-first-emoji");
+    },
+    clearSearch() {
+      this.$emit("update:model-value", ""), this.focusSearchInput();
+    },
+    focusSearchInput() {
+      this.$refs.searchInputRef.focus();
+    }
+  }
+};
+var v = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [i("dt-input", { ref: "searchInputRef", attrs: { id: "searchInput", placeholder: e.searchPlaceholderLabel, value: e.modelValue }, on: { input: e.updateModelValue, keydown: [function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "up", 38, s.key, ["Up", "ArrowUp"]) ? null : e.focusTabset.apply(null, arguments);
+  }, function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "down", 40, s.key, ["Down", "ArrowDown"]) ? null : (s.preventDefault(), e.focusEmojiSelector.apply(null, arguments));
+  }, function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.selectFirstEmoji.apply(null, arguments);
+  }] }, scopedSlots: e._u([{ key: "leftIcon", fn: function() {
+    return [i("dt-icon", { attrs: { name: "search" } })];
+  }, proxy: !0 }, e.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
+    return [i("button", { staticClass: "d-emoji-picker__search-button", on: { click: e.clearSearch, keydown: function(s) {
+      return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.clearSearch.apply(null, arguments);
+    } } }, [i("dt-icon", { attrs: { name: "close" } })], 1)];
+  }, proxy: !0 } : null], null, !0) })], 1);
+}, L = [], w = /* @__PURE__ */ m(
+  T,
+  v,
+  L,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const A = w.exports, D = {
+  name: "EmojiSelector",
+  props: {
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    skinTone: {
+      type: String,
+      required: !0
+    },
+    tabSetLabels: {
+      type: Array,
+      required: !0
+    },
+    selectedTabset: {
+      type: Object,
+      required: !0
+    },
+    searchResultsLabel: {
+      type: String,
+      required: !0
+    },
+    searchNoResultsLabel: {
+      type: String,
+      required: !0
+    },
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      emojiRefs: [],
+      emojiFilteredRefs: [],
+      isFiltering: !1,
+      hoverFirstEmoji: !0,
+      fixedLabel: "",
+      filteredEmojis: [],
+      TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"],
+      tabLabelObserver: null
+    };
+  },
+  computed: {
+    currentEmojis() {
+      return [
+        ...this.emojis[`People${this.skinTone}`] || [],
+        ...this.emojis.Nature || [],
+        ...this.emojis.Food || [],
+        ...this.emojis[`Activity${this.skinTone}`] || [],
+        ...this.emojis.Travel || [],
+        ...this.emojis[`Objects${this.skinTone}`] || [],
+        ...this.emojis.Symbols || [],
+        ...this.emojis.Flags || []
+      ];
+    },
+    emojis() {
+      return j;
+    },
+    CDN_URL() {
+      return d;
+    },
+    tabLabels() {
+      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((t, e) => ({ label: t, ref: this.$refs[`tabLabelRef-${e}`] })) : this.tabSetLabels.slice(1).map((t, e) => ({ label: t, ref: this.$refs[`tabLabelRef-${e}`] }));
+    },
+    tabs() {
+      return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);
+    }
+  },
+  watch: {
+    currentEmojis: {
+      handler() {
+        this.searchByNameAndKeywords();
+      },
+      immediate: !0
+    },
+    recentlyUsedEmojis: {
+      handler(t) {
+        this.emojis["Recently used"] = t;
+      },
+      immediate: !0
+    },
+    emojiFilter: {
+      handler(t) {
+        this.resetScroll(), t ? this.isFiltering = !0 : (this.isFiltering = !1, this.$emit("highlighted-emoji", null)), this.debouncedSearch();
+      }
+    },
+    selectedTabset: {
+      handler(t) {
+        this.scrollToTab(t.tabId);
+      },
+      deep: !0
+    }
+  },
+  created() {
+    this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setupEmojiRefs(), this.setupFilteredRefs(), this.setupTabLabelRefs(), this.setTabLabelObserver();
+    });
+  },
+  beforeDestroy() {
+    this.tabLabelObserver && this.tabLabelObserver.disconnect();
+  },
+  methods: {
+    setupTabLabelRefs() {
+      var t;
+      (t = this.tabSetLabels) == null || t.forEach((e, i) => {
+        const s = `tabLabelRef-${i}`;
+        this.$refs[s] && this.$set(this.tabLabels, i, { label: e, ref: this.$refs[s] });
+      });
+    },
+    setupFilteredRefs() {
+      this.emojiFilteredRefs = [], this.filteredEmojis.forEach((t, e) => {
+        const i = `filteredEmoji-${e}`;
+        this.$refs[i] && this.setFilteredRef(this.$refs[i], e);
+      });
+    },
+    setupEmojiRefs() {
+      for (let t = 0; t < this.tabs.length; t++) {
+        const e = `emojiRef-${t}`;
+        this.$refs[e] && this.$refs[e].forEach((i, s) => {
+          i && this.setEmojiRef(i, t, s);
+        });
+      }
+    },
+    searchByNameAndKeywords() {
+      const t = this.emojiFilter.toLowerCase();
+      this.filteredEmojis = this.currentEmojis.filter(function(e) {
+        const i = e.name.toLowerCase().includes(t), s = e.keywords.some(function(r) {
+          return r.toLowerCase().includes(t);
+        });
+        return i || s;
+      }), this.$nextTick(function() {
+        t && (this.hoverEmoji(this.filteredEmojis[0], !0), this.setupFilteredRefs());
+      });
+    },
+    debounce: function(t, e) {
+      e === void 0 && (e = 300);
+      let i;
+      return function() {
+        const s = [];
+        let r = arguments.length;
+        for (; r--; )
+          s[r] = arguments[r];
+        clearTimeout(i), i = setTimeout(function() {
+          t.apply(void 0, s);
+        }, e);
+      };
+    },
+    getImgSrc: function(t) {
+      return this.CDN_URL + t + ".png";
+    },
+    handleImageError: function(t) {
+      t.target.parentNode.style.display = "none";
+    },
+    scrollToTab: function(t, e) {
+      const i = this;
+      e === void 0 && (e = !0);
+      const r = i.tabLabels[t - 1].ref[0];
+      i.$nextTick(function() {
+        const o = i.$refs.listRef, n = t === "1" ? 0 : r.offsetTop - 20;
+        let l = !0, c = o.scrollTop;
+        i.$emit("is-scrolling", !0), o.addEventListener("scroll", function() {
+          if (l) {
+            const f = o.scrollTop;
+            (c < f && f >= n || c > f && f <= n) && (l = !1, i.$emit("is-scrolling", !1)), c = f;
+          }
+        }), o.scrollTop = n, e && i.focusEmoji(t - 1, 0);
+      });
+    },
+    resetScroll: function() {
+      const t = this.$refs.listRef;
+      t.scrollTop = 0;
+    },
+    focusEmojiSelector: function() {
+      this.focusEmoji(0, 0);
+    },
+    hoverEmoji(t, e) {
+      e === void 0 && (e = !1), this.hoverFirstEmoji = e, this.$emit("highlighted-emoji", t);
+    },
+    setEmojiRef: function(t, e, i) {
+      this.emojiRefs[e] || this.$set(this.emojiRefs, e, []), this.$set(this.emojiRefs[e], i, t);
+    },
+    setFilteredRef: function(t, e) {
+      this.$set(this.emojiFilteredRefs, e, t);
+    },
+    focusEmoji: function(t, e) {
+      var s;
+      const i = this.isFiltering ? (s = this.emojiFilteredRefs[e]) == null ? void 0 : s[0] : this.emojiRefs[t] && this.emojiRefs[t][e];
+      return i ? (i.focus(), !0) : !1;
+    },
+    handleKeyDown: function(t, e, i, s) {
+      var r, o;
+      if (t.preventDefault(), t.key === "ArrowUp") {
+        const n = i % a;
+        if (e === 0) {
+          const l = a - this.emojiRefs[this.emojiRefs.length - 1].length % a, c = this.emojiRefs[this.emojiRefs.length - 1].length + l - (a - n);
+          this.focusEmoji(this.emojiRefs.length - 1, c) || this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+          return;
+        }
+        if (!this.focusEmoji(e, i - a)) {
+          const l = e - 1 < 0 ? 0 : e - 1, c = this.emojiRefs[l].length, f = c - c % a + n;
+          this.focusEmoji(l, f) || this.focusEmoji(e - 1, this.emojiRefs[e - 1].length - 1);
+        }
+      }
+      if (t.key === "ArrowDown" && !this.focusEmoji(e, i + a)) {
+        const n = i % a;
+        (o = (r = this.emojiRefs) == null ? void 0 : r[e]) != null && o[i + (a - n)] ? this.focusEmoji(e, this.emojiRefs[e].length - 1) : this.focusEmoji(e + 1, n) || this.focusEmoji(0, n) || this.focusEmoji(0, this.emojiRefs[0].length - 1);
+      }
+      t.key === "ArrowLeft" && this.handleHorizontalNavigation("left", e, i), t.key === "ArrowRight" && this.handleHorizontalNavigation("right", e, i), t.key === "Tab" && (this.focusEmoji(e + 1, 0) ? this.scrollToTab(e + 1 + 1, !1) : this.$emit("focus-skin-selector")), t.key === "Tab" && t.shiftKey && (this.focusEmoji(e, 0) && e > 0 ? this.scrollToTab(e, !0) : (this.scrollToTab(1, !1), this.$emit("focus-search-input"))), t.key === "Enter" && this.$emit("selected-emoji", s);
+    },
+    handleHorizontalNavigation: function(t, e, i) {
+      this.isFiltering ? t === "left" ? this.handleArrowLeftFiltered(e, i) : t === "right" && this.handleArrowRightFiltered(e, i) : t === "left" ? this.handleArrowLeft(e, i) : t === "right" && this.handleArrowRight(e, i);
+    },
+    handleArrowLeftFiltered: function(t, e) {
+      this.focusEmoji(0, e - 1) || this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+    },
+    handleArrowRightFiltered: function(t, e) {
+      this.focusEmoji(0, e + 1) || this.focusEmoji(0, 0);
+    },
+    handleArrowLeft: function(t, e) {
+      this.focusEmoji(t, e - 1) || (this.emojiRefs[t - 1] ? this.focusEmoji(t - 1, this.emojiRefs[t - 1].length - 1) : this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1));
+    },
+    handleArrowRight: function(t, e) {
+      this.focusEmoji(t, e + 1) || this.focusEmoji(t + 1, 0) || this.focusEmoji(0, 0);
+    },
+    handleKeyDownFilteredEmojis(t, e, i) {
+      var s;
+      if (t.preventDefault(), this.hoverFirstEmoji = !1, t.key === "ArrowUp") {
+        const r = e % a;
+        if (!this.focusEmoji(0, e - a)) {
+          const o = this.emojiFilteredRefs.length - this.emojiFilteredRefs.length % a + r;
+          this.focusEmoji(0, o), this.focusEmoji(0, o) || this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+        }
+      }
+      if (t.key === "ArrowDown" && !this.focusEmoji(0, e + a)) {
+        const r = e % a;
+        (s = this.emojiFilteredRefs) != null && s[e + (a - r)] ? this.focusEmoji(0, this.emojiFilteredRefs.length - 1) : this.focusEmoji(0, r);
+      }
+      t.key === "ArrowLeft" && this.handleHorizontalNavigation("left", 0, e), t.key === "ArrowRight" && this.handleHorizontalNavigation("right", 0, e), t.key === "Tab" && this.$emit("focus-skin-selector"), t.key === "Enter" && this.$emit("selected-emoji", i);
+    },
+    setTabLabelObserver() {
+      this.tabLabelObserver = new IntersectionObserver((t) => {
+        t.forEach((e) => {
+          var r, o, n, l, c, f;
+          const { target: i } = e, s = parseInt(i.dataset.index);
+          e.isIntersecting && i.offsetTop <= ((r = this.$refs.tabCategoryRef) == null ? void 0 : r.offsetTop) + 50 ? (this.fixedLabel = ((o = this.tabLabels[s - 1]) == null ? void 0 : o.label) ?? ((n = this.tabLabels[0]) == null ? void 0 : n.label), this.$emit("scroll-into-tab", s - 1)) : e.boundingClientRect.bottom <= ((l = this.$refs.tabCategoryRef) == null ? void 0 : l.getBoundingClientRect().bottom) ? (this.$emit("scroll-into-tab", s), this.fixedLabel = (c = this.tabLabels[s]) == null ? void 0 : c.label) : s === 1 && (this.$emit("scroll-into-tab", s), this.fixedLabel = (f = this.tabLabels[0]) == null ? void 0 : f.label);
+        });
+      }), this.tabLabelObserver.observe(this.$refs.tabCategoryRef), Array.from(this.$refs.listRef.children).forEach((t, e) => {
+        this.tabLabelObserver.observe(t), t.dataset.index = e;
+      });
+    },
+    focusLastEmoji() {
+      this.focusEmoji(this.tabs.length - 1, 0);
+    }
+  }
+};
+var I = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "d-emoji-picker__selector" }, [i("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { id: "d-emoji-picker-list" } }, [e.emojiFilter ? i("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [e._v(" " + e._s(e.filteredEmojis.length > 0 ? e.searchResultsLabel : e.searchNoResultsLabel) + " ")]) : i("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [i("p", [e._v(" " + e._s(e.fixedLabel) + " ")])]), e._l(e.tabLabels, function(s, r) {
+    return i("div", { directives: [{ name: "show", rawName: "v-show", value: !e.emojiFilter, expression: "!emojiFilter" }], key: r, ref: `tabLabelRef-${r}`, refInFor: !0, staticClass: "d-emoji-picker__alignment" }, [r ? i("p", [e._v(" " + e._s(s.label) + " ")]) : e._e(), i("div", { staticClass: "d-emoji-picker__tab" }, e._l(e.emojis[e.tabs[r] + e.skinTone] ? e.emojis[e.tabs[r] + e.skinTone] : e.emojis[e.tabs[r]], function(o, n) {
+      return i("button", { key: o.shortname, ref: `emojiRef-${r}`, refInFor: !0, attrs: { type: "button", "aria-label": o.name }, on: { click: function(l) {
+        return e.$emit("selected-emoji", o);
+      }, focusin: function(l) {
+        return e.$emit("highlighted-emoji", o);
+      }, focusout: function(l) {
+        return e.$emit("highlighted-emoji", null);
+      }, mouseover: function(l) {
+        return e.$emit("highlighted-emoji", o);
+      }, mouseleave: function(l) {
+        return e.$emit("highlighted-emoji", null);
+      }, keydown: (l) => e.handleKeyDown(l, r, n, o) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: o.name, "aria-label": o.name, title: o.name, src: e.getImgSrc(o.unicode_character) }, on: { error: e.handleImageError } })]);
+    }), 0)]);
+  }), e.emojiFilter ? i("div", { staticClass: "d-emoji-picker__alignment" }, [i("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, e._l(e.filteredEmojis, function(s, r) {
+    return i("button", { key: s.shortname, ref: `filteredEmoji-${r}`, refInFor: !0, class: {
+      "hover-emoji": r === 0 && e.hoverFirstEmoji
+    }, attrs: { type: "button", "aria-label": s.name }, on: { click: function(o) {
+      return e.$emit("selected-emoji", s);
+    }, focusin: function(o) {
+      return e.$emit("highlighted-emoji", s);
+    }, focusout: function(o) {
+      return e.$emit("highlighted-emoji", null);
+    }, mouseover: function(o) {
+      return e.hoverEmoji(s);
+    }, mouseleave: function(o) {
+      return e.hoverEmoji(null);
+    }, keydown: (o) => e.handleKeyDownFilteredEmojis(o, r, s) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: s.name, "aria-label": s.name, title: s.name, src: `${e.CDN_URL + s.unicode_character}.png` } })]);
+  }), 0)]) : e._e()], 2)]);
+}, C = [], F = /* @__PURE__ */ m(
+  D,
+  I,
+  C,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const O = F.exports, d = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", a = 9, h = {
+  DEFAULT: "Default",
+  LIGHT: "Light",
+  MEDIUM_LIGHT: "MediumLight",
+  MEDIUM: "Medium",
+  MEDIUM_DARK: "MediumDark",
+  DARK: "Dark"
+}, u = {
+  MOST_RECENTLY_USED: "Most recently used",
+  SMILEYS_AND_PEOPLE: "Smileys and people",
+  NATURE: "Nature",
+  FOOD: "Food",
+  ACTIVITY: "Activity",
+  TRAVEL: "Travel",
+  OBJECTS: "Objects",
+  SYMBOLS: "Symbols",
+  FLAGS: "Flags"
+}, U = {
+  name: "EmojiDescription",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      CDN_URL: d
+    };
+  }
+};
+var N = function() {
+  var s;
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "d-emoji-picker__data" }, [e.emoji ? i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: e.emoji.name, "aria-label": e.emoji.name, title: e.emoji.name, src: `${e.CDN_URL + e.emoji.unicode_character}.png` } }) : e._e(), e._v(" " + e._s((s = e.emoji) == null ? void 0 : s.name) + " ")]);
+}, M = [], K = /* @__PURE__ */ m(
+  U,
+  N,
+  M,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const B = K.exports, P = {
+  name: "EmojiSkinSelector",
+  components: {
+    DtTooltip: g
+  },
+  props: {
+    skinTone: {
+      type: String,
+      required: !0
+    },
+    isHovering: {
+      type: Boolean,
+      default: !1
+    },
+    skinSelectorButtonTooltipLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      isOpen: !1,
+      skinSelected: null,
+      skinsRef: [],
+      cdnUrl: d
+    };
+  },
+  computed: {
+    skinPassedIn() {
+      return this.skinList.find((t) => t.skinTone === this.skinTone);
+    },
+    skinList() {
+      return [
+        {
+          name: ":wave_tone1:",
+          unicode_output: "1f44b-1f3fb",
+          skinTone: h.LIGHT,
+          skinCode: "_tone1"
+        },
+        {
+          name: ":wave_tone2:",
+          unicode_output: "1f44b-1f3fc",
+          skinTone: h.MEDIUM_LIGHT,
+          skinCode: "_tone2"
+        },
+        {
+          name: ":wave_tone3:",
+          unicode_output: "1f44b-1f3fd",
+          skinTone: h.MEDIUM,
+          skinCode: "_tone3"
+        },
+        {
+          name: ":wave_tone4:",
+          unicode_output: "1f44b-1f3fe",
+          skinTone: h.MEDIUM_DARK,
+          skinCode: "_tone4"
+        },
+        {
+          name: ":wave_tone5:",
+          unicode_output: "1f44b-1f3ff",
+          skinTone: h.DARK,
+          skinCode: "_tone5"
+        },
+        {
+          name: ":wave:",
+          unicode_output: "1f44b",
+          skinTone: h.DEFAULT,
+          skinCode: ""
+        }
+      ];
+    }
+  },
+  watch: {
+    isHovering(t) {
+      t && (this.isOpen = !1);
+    },
+    skinTone(t, e) {
+      t !== e && (this.skinSelected = this.skinPassedIn);
+    }
+  },
+  mounted() {
+    this.skinSelected = this.skinPassedIn, this.$nextTick(() => {
+      this.setupSkinRefs();
+    });
+  },
+  methods: {
+    setupSkinRefs() {
+      this.skinList.forEach((t, e) => {
+        const i = `skinRef-${e}`;
+        this.$refs[i] && this.$set(this.skinsRef, e, this.$refs[i][0]);
+      });
+    },
+    focusSkinSelector() {
+      this.$refs.skinSelectorRef && this.$refs.skinSelectorRef.focus();
+    },
+    selectSkin(t) {
+      this.skinSelected = t, this.isOpen = !1, this.$emit("skin-tone", t.skinTone), this.$nextTick(() => {
+        this.focusSkinSelector();
+      });
+    },
+    handleKeyDown(t, e, i) {
+      var s, r, o, n;
+      t.preventDefault(), t.key === "ArrowLeft" && (i === 0 && ((s = this.skinsRef[this.skinsRef.length - 1]) == null || s.focus()), (r = this.skinsRef[i - 1]) == null || r.focus()), t.key === "ArrowRight" && (this.skinsRef.length && ((o = this.skinsRef[0]) == null || o.focus()), (n = this.skinsRef[i + 1]) == null || n.focus()), t.key === "Enter" && (e ? this.selectSkin(e) : this.toggleSkinList()), t.key === "Tab" && (t.shiftKey ? this.$emit("focus-last-emoji") : this.$emit("focus-tabset"));
+    },
+    toggleSkinList() {
+      this.isOpen = !this.isOpen, this.$nextTick(() => {
+        this.skinsRef[0] && this.skinsRef[0].focus();
+      });
+    }
+  }
+};
+var q = function() {
+  var e = this, i = e._self._c;
+  return i("div", { attrs: { "data-qa": "skin-selector" } }, [i("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, e._l(e.skinList, function(s, r) {
+    var o;
+    return i("button", { key: s.name, ref: `skinRef-${r}`, refInFor: !0, class: {
+      selected: ((o = e.skinSelected) == null ? void 0 : o.skinCode) === s.skinCode
+    }, on: { click: function(n) {
+      return e.selectSkin(s);
+    }, keydown: (n) => e.handleKeyDown(n, s, r) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: s.name, "aria-label": s.name, title: s.name, src: `${e.cdnUrl + s.unicode_output}.png` } })]);
+  }), 0), i("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [i("dt-tooltip", { attrs: { placement: "top-end" }, scopedSlots: e._u([{ key: "anchor", fn: function() {
+    var s, r, o, n;
+    return [i("button", { ref: "skinSelectorRef", attrs: { "aria-label": e.skinSelectorButtonTooltipLabel, tabindex: "-1" }, on: { click: e.toggleSkinList, keydown: (l) => e.handleKeyDown(l) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: (s = e.skinSelected) == null ? void 0 : s.name, "aria-label": (r = e.skinSelected) == null ? void 0 : r.name, title: (o = e.skinSelected) == null ? void 0 : o.name, src: `${e.cdnUrl + ((n = e.skinSelected) == null ? void 0 : n.unicode_output)}.png` } })])];
+  }, proxy: !0 }]) }, [e._v(" " + e._s(e.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
+}, z = [], H = /* @__PURE__ */ m(
+  P,
+  q,
+  z,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const G = H.exports, V = {
+  name: "DtEmojiPicker",
+  components: {
+    EmojiTabset: $,
+    EmojiSearch: A,
+    EmojiSelector: O,
+    EmojiDescription: B,
+    EmojiSkinSelector: G
+  },
+  props: {
+    recentlyUsedEmojis: {
+      type: Array
+    },
+    searchPlaceholderLabel: {
+      type: String,
+      required: !0
+    },
+    searchResultsLabel: {
+      type: String,
+      required: !0
+    },
+    searchNoResultsLabel: {
+      type: String,
+      required: !0
+    },
+    tabSetLabels: {
+      type: Array,
+      required: !0
+    },
+    skinTone: {
+      type: String
+    },
+    skinSelectorButtonTooltipLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      searchQuery: "",
+      highlightedEmoji: null,
+      selectedTabset: {},
+      scrollIntoTab: 0,
+      isScrolling: !1
+    };
+  },
+  computed: {
+    showRecentlyUsedTab() {
+      var t;
+      return ((t = this.recentlyUsedEmojis) == null ? void 0 : t.length) > 0;
+    }
+  },
+  methods: {
+    scrollToSelectedTabset(t) {
+      this.searchQuery = "", this.selectedTabset = { ...this.selectedTabset, tabId: t };
+    },
+    updateScrollIntoTab(t) {
+      this.scrollIntoTab = t;
+    },
+    updateIsScrolling(t) {
+      this.isScrolling = t;
+    },
+    updateHighlightedEmoji(t) {
+      this.highlightedEmoji = t;
+    }
+  }
+};
+var Y = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "d-emoji-picker" }, [i("div", { staticClass: "d-emoji-picker--header" }, [i("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": e.searchQuery, "show-recently-used-tab": e.showRecentlyUsedTab, "scroll-into-tab": e.scrollIntoTab, "tab-set-labels": e.tabSetLabels, "is-scrolling": e.isScrolling }, on: { "focus-search-input": function(s) {
+    return e.$refs.searchInputRef.focusSearchInput();
+  }, "focus-skin-selector": function(s) {
+    return e.$refs.skinSelectorRef.focusSkinSelector();
+  }, "selected-tabset": e.scrollToSelectedTabset }, nativeOn: { keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
+  } } })], 1), i("div", { staticClass: "d-emoji-picker--body" }, [i("emoji-search", { ref: "searchInputRef", attrs: { "model-value": e.searchQuery, "search-placeholder-label": e.searchPlaceholderLabel }, on: { "update:model-value": (s) => e.searchQuery = s, "select-first-emoji": function(s) {
+    return e.$emit("selected-emoji", e.highlightedEmoji);
+  }, "focus-tabset": function(s) {
+    return e.$refs.tabsetRef.focusTabset();
+  }, "focus-emoji-selector": function(s) {
+    return e.$refs.emojiSelectorRef.focusEmojiSelector();
+  } }, nativeOn: { keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
+  } } }), i("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": e.searchQuery, "skin-tone": e.skinTone, "tab-set-labels": e.tabSetLabels, "search-results-label": e.searchResultsLabel, "search-no-results-label": e.searchNoResultsLabel, "recently-used-emojis": e.recentlyUsedEmojis, "selected-tabset": e.selectedTabset }, on: { "scroll-into-tab": e.updateScrollIntoTab, "is-scrolling": e.updateIsScrolling, "highlighted-emoji": e.updateHighlightedEmoji, "selected-emoji": function(s) {
+    return e.$emit("selected-emoji", s);
+  }, "focus-skin-selector": function(s) {
+    return e.$refs.skinSelectorRef.focusSkinSelector();
+  }, "focus-search-input": function(s) {
+    return e.$refs.searchInputRef.focusSearchInput();
+  } }, nativeOn: { keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
+  } } })], 1), i("div", { staticClass: "d-emoji-picker--footer" }, [i("emoji-description", { attrs: { emoji: e.highlightedEmoji } }), i("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!e.highlightedEmoji, "skin-selector-button-tooltip-label": e.skinSelectorButtonTooltipLabel, "skin-tone": e.skinTone }, on: { "skin-tone": function(s) {
+    return e.$emit("skin-tone", s);
+  }, "focus-tabset": function(s) {
+    return e.$refs.tabsetRef.focusTabset();
+  }, "focus-last-emoji": function(s) {
+    return e.$refs.emojiSelectorRef.focusLastEmoji();
+  } }, nativeOn: { keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
+  } } })], 1)]);
+}, J = [], Q = /* @__PURE__ */ m(
+  V,
+  Y,
+  J,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const x = Q.exports;
+export {
+  d as C,
+  x as D,
+  a as E,
+  h as a,
+  u as b
+};