import { DtIconClock as _, DtIconSatisfied as b, DtIconLivingThing as p, DtIconFood as E, DtIconObject as j, DtIconTransportation as k, DtIconLightbulb as S, DtIconHeart as g, DtIconFlag as y, DtIconTiktok as R, DtIconSearch as L, DtIconClose as T } from "@dialpad/dialtone-icons/vue2";
import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import $ from "../tab/tab-group.js";
import I from "../tab/tab.js";
import v from "../input/input.js";
import d from "../button/button.js";
import { emojisGrouped as A } from "@dialpad/dialtone-emojis";
import { CDN_URL as m, EMOJIS_PER_ROW as a, EMOJI_PICKER_SKIN_TONE_MODIFIERS as f } from "./emoji-picker-constants.js";
import w from "../tooltip/tooltip.js";
import { DialtoneLocalization as C } from "../../localization/index.js";
const O = {
  name: "EmojiTabset",
  components: {
    DtTabGroup: $,
    DtTab: I
  },
  props: {
    /**
     * Whether to show the recently used tab or not
     * @type {Boolean}
     * @default false
     */
    showRecentlyUsedTab: {
      type: Boolean,
      default: !1
    },
    showCustomEmojisTab: {
      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
    }
  },
  data() {
    return {
      selectedTab: "1",
      tabsetRef: [],
      TABS_DATA: [
        { label: this.tabSetLabels[0], icon: _ },
        { label: this.tabSetLabels[1], icon: b },
        { label: this.tabSetLabels[2], icon: p },
        { label: this.tabSetLabels[3], icon: E },
        { label: this.tabSetLabels[4], icon: j },
        { label: this.tabSetLabels[5], icon: k },
        { label: this.tabSetLabels[6], icon: S },
        { label: this.tabSetLabels[7], icon: g },
        { label: this.tabSetLabels[8], icon: y },
        { label: this.tabSetLabels[9], icon: R }
      ]
    };
  },
  computed: {
    tabs() {
      const t = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
      return this.showCustomEmojisTab || t.pop(), t.map((e, i) => ({
        ...e,
        // IDs on dt-tab component need to be on string
        id: (i + 1).toString(),
        panelId: (i + 1).toString()
      }));
    },
    isSearching() {
      return this.emojiFilter.length > 0;
    }
  },
  watch: {
    scrollIntoTab: function(t) {
      this.isSearching || (this.selectedTab = (t + 1).toString());
    },
    isSearching: function(t) {
      t && (this.selectedTab = null);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setTabsetRef();
    });
  },
  methods: {
    selectTabset(t) {
      const e = parseInt(t);
      this.selectedTab = t, this.$emit("selected-tabset", e);
    },
    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();
    },
    // eslint-disable-next-line complexity
    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 D = function() {
  var e = this, i = e._self._c;
  return i("div", { staticClass: "d-emoji-picker__tabset" }, [i("dt-tab-group", { attrs: { selected: e.selectedTab, size: "sm", "tab-list-class": "d-emoji-picker__tabset-list" }, scopedSlots: e._u([{ key: "tabs", fn: function() {
    return e._l(e.tabs, function(s, o) {
      return i("dt-tab", { key: s.id, ref: `tabsetRef-${o}`, refInFor: !0, attrs: { id: s.id, label: s.label, "panel-id": s.panelId, tabindex: o + 1, "aria-controls": "d-emoji-picker-list" }, on: { keydown: function(r) {
        return e.handleKeyDown(r, s.id);
      }, "!click": function(r) {
        return r.stopPropagation(), e.selectTabset(s.id);
      } } }, [i(s.icon, { tag: "component", attrs: { size: "400" } })], 1);
    });
  }, proxy: !0 }]) })], 1);
}, F = [], B = /* @__PURE__ */ h(
  O,
  D,
  F
);
const N = B.exports, K = {
  name: "EmojiSearch",
  components: {
    DtInput: v,
    DtIconSearch: L,
    DtIconClose: T,
    DtButton: d
  },
  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 P = 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-search", { attrs: { size: "200" } })];
  }, proxy: !0 }, e.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
    return [i("dt-button", { staticClass: "d-emoji-picker__search-x-button", attrs: { importance: "clear", size: "xs", circle: "", kind: "muted" }, on: { click: e.clearSearch }, scopedSlots: e._u([{ key: "icon", fn: function() {
      return [i("dt-icon-close", { attrs: { size: "200" } })];
    }, proxy: !0 }], null, !1, 4156074325) })];
  }, proxy: !0 } : null], null, !0) })], 1);
}, U = [], M = /* @__PURE__ */ h(
  K,
  P,
  U
);
const J = M.exports, H = {
  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: () => []
    },
    customEmojis: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tabLabelsRefs: [],
      emojiRefs: [],
      emojiFilteredRefs: [],
      isFiltering: !1,
      hoverFirstEmoji: !0,
      fixedLabel: "",
      filteredEmojis: [],
      TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"],
      tabLabelObserver: null
    };
  },
  computed: {
    /* eslint-disable-next-line complexity */
    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 A;
    },
    CDN_URL() {
      return m;
    },
    tabLabels() {
      let t = this.tabSetLabels.map((e) => ({ label: e }));
      return this.recentlyUsedEmojis.length || (t = this.tabSetLabels.slice(1).map((e) => ({ label: e }))), this.customEmojis.length || t.pop(), t;
    },
    tabs() {
      const t = this.recentlyUsedEmojis.length ? this.TABS_DATA.slice() : this.TABS_DATA.slice(1);
      return this.customEmojis.length || t.pop(), t;
    }
  },
  watch: {
    currentEmojis: {
      handler() {
        this.searchByNameAndKeywords();
      },
      immediate: !0
    },
    recentlyUsedEmojis: {
      handler(t) {
        this.emojis["Recently used"] = t;
      },
      immediate: !0
    },
    customEmojis: {
      handler(t) {
        this.emojis.Custom = 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(), this.setBottomScrollListener();
    });
  },
  beforeDestroy() {
    this.tabLabelObserver && this.tabLabelObserver.disconnect(), this.$refs.listRef && this.handleScroll && this.$refs.listRef.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    setupTabLabelRefs() {
      var t;
      (t = this.tabSetLabels) == null || t.forEach((e, i) => {
        const s = `tabLabelRef-${i}`;
        this.$refs[s] && this.$set(this.tabLabelsRefs, i, { 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(o) {
          return o.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 o = arguments.length;
        for (; o--; ) s[o] = arguments[o];
        clearTimeout(i), i = setTimeout(function() {
          t.apply(void 0, s);
        }, e);
      };
    },
    getImgSrc: function(t) {
      return t.date_added ? t.image : this.CDN_URL + t.unicode_character + ".png";
    },
    handleImageError: function(t) {
      t.target.parentNode.style.display = "none";
    },
    scrollToTab: function(t, e) {
      const i = this;
      e === void 0 && (e = !0);
      const s = i.tabLabelsRefs[t - 1].ref[0];
      i.$nextTick(function() {
        const o = i.$refs.listRef, r = t === 1 ? 0 : s.offsetTop - 15;
        o.scrollTop = r, 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;
    },
    // eslint-disable-next-line complexity
    handleKeyDown: function(t, e, i, s) {
      var o, r;
      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, u = c - c % a + n;
          this.focusEmoji(l, u) || this.focusEmoji(e - 1, this.emojiRefs[e - 1].length - 1);
        }
      }
      if (t.key === "ArrowDown" && !this.focusEmoji(e, i + a)) {
        const n = i % a;
        (r = (o = this.emojiRefs) == null ? void 0 : o[e]) != null && r[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" && !t.shiftKey && (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.handleEmojiSelection(s, t);
    },
    /* eslint-disable-next-line complexity */
    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);
    },
    handleEmojiSelection(t, e) {
      this.$emit("selected-emoji", { ...t, shift_key: e.shiftKey });
    },
    // @TODO(improvement): Sync with simplified Vue 3 version
    /* eslint-disable-next-line complexity */
    handleKeyDownFilteredEmojis(t, e, i) {
      var s;
      if (t.preventDefault(), this.hoverFirstEmoji = !1, t.key === "ArrowUp") {
        const o = e % a;
        if (!this.focusEmoji(0, e - a)) {
          const r = this.emojiFilteredRefs.length - this.emojiFilteredRefs.length % a + o;
          this.focusEmoji(0, r), this.focusEmoji(0, r) || this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
        }
      }
      if (t.key === "ArrowDown" && !this.focusEmoji(0, e + a)) {
        const o = e % a;
        (s = this.emojiFilteredRefs) != null && s[e + (a - o)] ? this.focusEmoji(0, this.emojiFilteredRefs.length - 1) : this.focusEmoji(0, o);
      }
      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.handleEmojiSelection(i, t);
    },
    setBottomScrollListener() {
      this.handleScroll = () => {
        const t = this.$refs.listRef;
        t.scrollTop + t.clientHeight >= t.scrollHeight && this.$emit("scroll-bottom-reached");
      }, this.$refs.listRef.addEventListener("scroll", this.handleScroll);
    },
    setTabLabelObserver() {
      this.tabLabelObserver = new IntersectionObserver((t) => {
        t.forEach((e) => {
          var o, r, n, l, c, u;
          const { target: i } = e, s = parseInt(i.dataset.index);
          e.isIntersecting && i.offsetTop <= ((o = this.$refs.tabCategoryRef) == null ? void 0 : o.offsetTop) + 50 ? (this.fixedLabel = ((r = this.tabLabels[s - 1]) == null ? void 0 : r.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 = (u = this.tabLabels[0]) == null ? void 0 : u.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.scrollToTab(this.tabs.length, !0);
    }
  }
};
var z = 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, o) {
    return i("div", { directives: [{ name: "show", rawName: "v-show", value: !e.emojiFilter, expression: "!emojiFilter" }], key: o, ref: `tabLabelRef-${o}`, refInFor: !0, staticClass: "d-emoji-picker__alignment" }, [o ? i("p", [e._v(" " + e._s(s.label) + " ")]) : e._e(), i("div", { staticClass: "d-emoji-picker__tab" }, e._l(e.emojis[e.tabs[o] + e.skinTone] ? e.emojis[e.tabs[o] + e.skinTone] : e.emojis[e.tabs[o]], function(r, n) {
      return i("button", { key: r.shortname, ref: `emojiRef-${o}`, refInFor: !0, attrs: { type: "button", "aria-label": r.name }, on: { click: (l) => e.handleEmojiSelection(r, l), focusin: function(l) {
        return e.$emit("highlighted-emoji", r);
      }, focusout: function(l) {
        return e.$emit("highlighted-emoji", null);
      }, mouseover: function(l) {
        return e.$emit("highlighted-emoji", r);
      }, mouseleave: function(l) {
        return e.$emit("highlighted-emoji", null);
      }, keydown: (l) => e.handleKeyDown(l, o, n, r) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: r.name, "aria-label": r.name, title: r.name, src: e.getImgSrc(r) }, 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, o) {
    return i("button", { key: s.shortname, ref: `filteredEmoji-${o}`, refInFor: !0, class: {
      "hover-emoji": o === 0 && e.hoverFirstEmoji
    }, attrs: { type: "button", "aria-label": s.name }, on: { click: (r) => e.handleEmojiSelection(s, r), focusin: function(r) {
      return e.$emit("highlighted-emoji", s);
    }, focusout: function(r) {
      return e.$emit("highlighted-emoji", null);
    }, mouseover: function(r) {
      return e.hoverEmoji(s);
    }, mouseleave: function(r) {
      return e.hoverEmoji(null);
    }, keydown: (r) => e.handleKeyDownFilteredEmojis(r, o, 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)]);
}, q = [], Q = /* @__PURE__ */ h(
  H,
  z,
  q
);
const V = Q.exports, G = {
  name: "EmojiDescription",
  props: {
    /**
     * Emoji data
     * @type {Object}
     * @default null
     */
    emoji: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      CDN_URL: m
    };
  },
  methods: {
    getImgSrc(t) {
      return t.date_added ? t.image : `${m + t.unicode_character}.png`;
    }
  }
};
var Y = 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.getImgSrc(e.emoji) } }) : e._e(), i("div", [e._v(e._s((s = e.emoji) == null ? void 0 : s.name))])]);
}, W = [], X = /* @__PURE__ */ h(
  G,
  Y,
  W
);
const Z = X.exports, x = {
  name: "EmojiSkinSelector",
  components: {
    DtTooltip: w
  },
  props: {
    skinTone: {
      type: String,
      required: !0
    },
    isHovering: {
      type: Boolean,
      default: !1
    },
    skinSelectorButtonTooltipLabel: {
      type: String,
      required: !0
    }
  },
  data() {
    return {
      isOpen: !1,
      skinSelected: null,
      skinsRef: [],
      cdnUrl: m
    };
  },
  computed: {
    skinPassedIn() {
      return this.skinList.find((t) => t.skinTone === this.skinTone);
    },
    skinList() {
      return [
        {
          name: ":wave_tone1:",
          unicode_output: "1f44b-1f3fb",
          skinTone: f.LIGHT,
          skinCode: "_tone1"
        },
        {
          name: ":wave_tone2:",
          unicode_output: "1f44b-1f3fc",
          skinTone: f.MEDIUM_LIGHT,
          skinCode: "_tone2"
        },
        {
          name: ":wave_tone3:",
          unicode_output: "1f44b-1f3fd",
          skinTone: f.MEDIUM,
          skinCode: "_tone3"
        },
        {
          name: ":wave_tone4:",
          unicode_output: "1f44b-1f3fe",
          skinTone: f.MEDIUM_DARK,
          skinCode: "_tone4"
        },
        {
          name: ":wave_tone5:",
          unicode_output: "1f44b-1f3ff",
          skinTone: f.DARK,
          skinCode: "_tone5"
        },
        {
          name: ":wave:",
          unicode_output: "1f44b",
          skinTone: f.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, o, r, n;
      t.preventDefault(), t.key === "ArrowLeft" && (i === 0 && ((s = this.skinsRef[this.skinsRef.length - 1]) == null || s.focus()), (o = this.skinsRef[i - 1]) == null || o.focus()), t.key === "ArrowRight" && (this.skinsRef.length && ((r = this.skinsRef[0]) == null || r.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 ee = 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, o) {
    var r;
    return i("button", { key: s.name, ref: `skinRef-${o}`, refInFor: !0, class: {
      selected: ((r = e.skinSelected) == null ? void 0 : r.skinCode) === s.skinCode
    }, on: { click: function(n) {
      return e.selectSkin(s);
    }, keydown: (n) => e.handleKeyDown(n, s, o) } }, [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, o, r, 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": (o = e.skinSelected) == null ? void 0 : o.name, title: (r = e.skinSelected) == null ? void 0 : r.name, src: `${e.cdnUrl + ((n = e.skinSelected) == null ? void 0 : n.unicode_output)}.png` } })])];
  }, proxy: !0 }]) }, [e._v(" " + e._s(e.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
}, te = [], se = /* @__PURE__ */ h(
  x,
  ee,
  te
);
const ie = se.exports, oe = {
  name: "DtEmojiPicker",
  components: {
    EmojiTabset: N,
    EmojiSearch: J,
    EmojiSelector: V,
    EmojiDescription: Z,
    EmojiSkinSelector: ie,
    DtButton: d
  },
  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 array with custom emojis object
     * This list is necessary to fill the custom tab
     * @type {Array}
     * @default []
     * @example
     * <dt-emoji-picker :customEmojis="[emojiObject, emojiObject]" />
     */
    customEmojis: {
      type: Array
    },
    /**
     * 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"
    },
    /**
     * 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
    }
  },
  data() {
    return {
      internalSearchQuery: this.searchQuery,
      highlightedEmoji: null,
      selectedTabset: {},
      scrollIntoTab: 0,
      i18n: new C()
    };
  },
  computed: {
    showCustomEmojisTab() {
      var t;
      return ((t = this.customEmojis) == null ? void 0 : t.length) > 0;
    },
    showRecentlyUsedTab() {
      var t;
      return ((t = this.recentlyUsedEmojis) == null ? void 0 : t.length) > 0;
    },
    tabSetLabels() {
      return [
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
      ];
    },
    searchPlaceholderLabel() {
      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL");
    },
    searchResultsLabel() {
      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL");
    },
    searchNoResultsLabel() {
      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL");
    },
    skinSelectorButtonTooltipLabel() {
      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL");
    },
    addEmojiLabel() {
      return this.i18n.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
    }
  },
  watch: {
    searchQuery(t) {
      this.internalSearchQuery = t;
    }
  },
  methods: {
    scrollToSelectedTabset(t) {
      this.internalSearchQuery = "", this.selectedTabset = { ...this.selectedTabset, tabId: t };
    },
    updateScrollIntoTab(t) {
      this.scrollIntoTab = t;
    },
    updateHighlightedEmoji(t) {
      this.highlightedEmoji = t;
    }
  }
};
var re = 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.internalSearchQuery, "show-custom-emojis-tab": e.showCustomEmojisTab, "show-recently-used-tab": e.showRecentlyUsedTab, "scroll-into-tab": e.scrollIntoTab, "tab-set-labels": e.tabSetLabels }, on: { "focus-skin-selector": function(s) {
    return e.$refs.skinSelectorRef.focusSkinSelector();
  }, "focus-search-input": function(s) {
    e.showSearch ? e.$refs.searchInputRef.focusSearchInput() : e.$refs.emojiSelectorRef.focusEmojiSelector();
  }, "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" }, [e.showSearch ? i("emoji-search", { ref: "searchInputRef", attrs: { "model-value": e.internalSearchQuery, "search-placeholder-label": e.searchPlaceholderLabel }, on: { "update:model-value": (s) => e.internalSearchQuery = 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");
  } } }) : e._e(), i("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": e.internalSearchQuery, "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, "custom-emojis": e.customEmojis, "selected-tabset": e.selectedTabset }, on: { "scroll-into-tab": e.updateScrollIntoTab, "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) {
    e.showSearch ? e.$refs.searchInputRef.focusSearchInput() : e.$refs.tabsetRef.focusTabset();
  }, "scroll-bottom-reached": function(s) {
    return e.$emit("scroll-bottom-reached");
  } }, 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" }, [e.showCustomEmojisTab && !e.highlightedEmoji ? i("dt-button", { staticClass: "d-emoji-picker__add-emoji", attrs: { importance: "outlined", "aria-label": e.addEmojiLabel }, on: { click: function(s) {
    return e.$emit("add-emoji");
  } } }, [e._v(" " + e._s(e.addEmojiLabel) + " ")]) : e._e(), 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)]);
}, ne = [], le = /* @__PURE__ */ h(
  oe,
  re,
  ne
);
const Ee = le.exports;
export {
  Ee as default
};
//# sourceMappingURL=emoji-picker.js.map
