@dialpad/dialtone-vue 2.157.1-beta.1 → 2.158.0

package/dist/lib/emoji-picker.js

@@ -1,1148 +1,8 @@
-import { DtTabGroup, DtTab } from "../chunks/tab-V4cb44Ry.js";
-import { DtIcon } from "./icon.js";
-import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtInput } from "./input.js";
-import { DtButton } from "./button.js";
-import { emojisGrouped } from "@dialpad/dialtone-emojis";
-import { DtTooltip } from "./tooltip.js";
-import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-import "../common/constants.js";
-import "../common/utils.js";
-import "vue";
-import "../chunks/input-6kbd8Pju.js";
-import "../common/validators.js";
-import "./validation-messages.js";
-import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
-import "tippy.js";
-const _sfc_main$5 = {
-  name: "EmojiTabset",
-  components: {
-    DtTabGroup,
-    DtTab,
-    DtIcon
-  },
-  props: {
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: false
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: true
-    },
-    isScrolling: {
-      type: Boolean,
-      default: false
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    tabSetLabels: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      selectedTab: "1",
-      tabsetRef: [],
-      TABS_DATA: [
-        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
-        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
-        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
-        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
-        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
-        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
-        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
-        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
-      ]
-    };
-  },
-  computed: {
-    tabs() {
-      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
-      return tabsData.map((tab, index) => ({
-        ...tab,
-        label: this.tabSetLabels[index],
-        id: (index + 1).toString(),
-        panelId: (index + 1).toString()
-      }));
-    },
-    isSearching() {
-      return this.emojiFilter.length > 0;
-    }
-  },
-  watch: {
-    scrollIntoTab: function(newVal) {
-      if (!this.isScrolling && !this.isSearching) {
-        this.selectedTab = (newVal + 1).toString();
-      }
-    },
-    isSearching: function(newVal) {
-      if (newVal) {
-        this.selectedTab = null;
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.setTabsetRef();
-    });
-  },
-  methods: {
-    selectTabset(id) {
-      if (!this.isScrolling) {
-        this.selectedTab = id;
-      }
-      this.$emit("selected-tabset", id);
-    },
-    setTabsetRef() {
-      this.tabs.forEach((skin, index) => {
-        const refKey = `tabsetRef-${index}`;
-        if (this.$refs[refKey]) {
-          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);
-        }
-      });
-    },
-    focusTabset() {
-      if (this.tabsetRef[0]) {
-        this.tabsetRef[0].focus();
-      }
-    },
-    // eslint-disable-next-line complexity
-    handleKeyDown(event, tabId) {
-      if (event.key === "Enter") {
-        this.selectTabset(tabId);
-        if (this.tabsetRef[tabId - 1]) {
-          this.tabsetRef[tabId - 1].blur();
-        }
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        if (event.shiftKey) {
-          this.$emit("focus-skin-selector");
-        } else {
-          this.$emit("focus-search-input");
-        }
-      }
-      if (event.key === "ArrowDown") {
-        this.$emit("focus-search-input");
-      }
-    }
-  }
-};
-var _sfc_render$5 = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
-    return _vm._l(_vm.tabs, function(tab, index) {
-      return _c("dt-tab", { key: tab.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab.id, "panel-id": tab.panelId, "label": tab.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
-        $event.stopPropagation();
-        return _vm.selectTabset(tab.id);
-      }, "keydown": function($event) {
-        return _vm.handleKeyDown($event, tab.id);
-      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab.icon } })], 1);
-    });
-  }, proxy: true }]) })], 1);
-};
-var _sfc_staticRenderFns$5 = [];
-var __component__$5 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$5,
-  _sfc_render$5,
-  _sfc_staticRenderFns$5,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const EmojiTabset = __component__$5.exports;
-const _sfc_main$4 = {
-  name: "EmojiSearch",
-  components: {
-    DtInput,
-    DtIcon,
-    DtButton
-  },
-  props: {
-    searchPlaceholderLabel: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: String,
-      default: ""
-    }
-  },
-  mounted() {
-    this.focusSearchInput();
-  },
-  methods: {
-    updateModelValue(value) {
-      this.$emit("update:model-value", value);
-    },
-    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 _sfc_render$4 = function render2() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [_c("dt-input", { ref: "searchInputRef", attrs: { "id": "searchInput", "placeholder": _vm.searchPlaceholderLabel, "value": _vm.modelValue }, on: { "input": _vm.updateModelValue, "keydown": [function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
-      return null;
-    return _vm.focusTabset.apply(null, arguments);
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
-      return null;
-    $event.preventDefault();
-    return _vm.focusEmojiSelector.apply(null, arguments);
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-      return null;
-    return _vm.selectFirstEmoji.apply(null, arguments);
-  }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
-  }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
-    return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": "x-circle", "size": "200" } })];
-    }, proxy: true }], null, false, 1385861752) })];
-  }, proxy: true } : null], null, true) })], 1);
-};
-var _sfc_staticRenderFns$4 = [];
-var __component__$4 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$4,
-  _sfc_render$4,
-  _sfc_staticRenderFns$4,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const EmojiSearch = __component__$4.exports;
-const _sfc_main$3 = {
-  name: "EmojiSelector",
-  props: {
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    skinTone: {
-      type: String,
-      required: true
-    },
-    tabSetLabels: {
-      type: Array,
-      required: true
-    },
-    selectedTabset: {
-      type: Object,
-      required: true
-    },
-    searchResultsLabel: {
-      type: String,
-      required: true
-    },
-    searchNoResultsLabel: {
-      type: String,
-      required: true
-    },
-    recentlyUsedEmojis: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      emojiRefs: [],
-      emojiFilteredRefs: [],
-      isFiltering: false,
-      hoverFirstEmoji: true,
-      fixedLabel: "",
-      filteredEmojis: [],
-      TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"],
-      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 emojisGrouped;
-    },
-    CDN_URL() {
-      return CDN_URL;
-    },
-    tabLabels() {
-      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] })) : this.tabSetLabels.slice(1).map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }));
-    },
-    tabs() {
-      return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);
-    }
-  },
-  watch: {
-    currentEmojis: {
-      handler() {
-        this.searchByNameAndKeywords();
-      },
-      immediate: true
-    },
-    recentlyUsedEmojis: {
-      handler(newValue) {
-        this.emojis["Recently used"] = newValue;
-      },
-      immediate: true
-    },
-    emojiFilter: {
-      handler(newFilter) {
-        this.resetScroll();
-        if (newFilter) {
-          this.isFiltering = true;
-        } else {
-          this.isFiltering = false;
-          this.$emit("highlighted-emoji", null);
-        }
-        this.debouncedSearch();
-      }
-    },
-    selectedTabset: {
-      handler(newValue) {
-        this.scrollToTab(newValue.tabId);
-      },
-      deep: true
-    }
-  },
-  created() {
-    this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.setupEmojiRefs();
-      this.setupFilteredRefs();
-      this.setupTabLabelRefs();
-      this.setTabLabelObserver();
-    });
-  },
-  beforeDestroy() {
-    if (this.tabLabelObserver) {
-      this.tabLabelObserver.disconnect();
-    }
-  },
-  methods: {
-    setupTabLabelRefs() {
-      var _a;
-      (_a = this.tabSetLabels) == null ? void 0 : _a.forEach((label, index) => {
-        const refKey = `tabLabelRef-${index}`;
-        if (this.$refs[refKey]) {
-          this.$set(this.tabLabels, index, { label, ref: this.$refs[refKey] });
-        }
-      });
-    },
-    setupFilteredRefs() {
-      this.emojiFilteredRefs = [];
-      this.filteredEmojis.forEach((emoji, index) => {
-        const refKey = `filteredEmoji-${index}`;
-        if (this.$refs[refKey]) {
-          this.setFilteredRef(this.$refs[refKey], index);
-        }
-      });
-    },
-    setupEmojiRefs() {
-      for (let i = 0; i < this.tabs.length; i++) {
-        const refKey = `emojiRef-${i}`;
-        if (this.$refs[refKey]) {
-          this.$refs[refKey].forEach((el, indexEmoji) => {
-            if (el) {
-              this.setEmojiRef(el, i, indexEmoji);
-            }
-          });
-        }
-      }
-    },
-    searchByNameAndKeywords() {
-      const searchStr = this.emojiFilter.toLowerCase();
-      this.filteredEmojis = this.currentEmojis.filter(function(obj) {
-        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
-        const keywordsIncludeSearchStr = obj.keywords.some(function(keyword) {
-          return keyword.toLowerCase().includes(searchStr);
-        });
-        return nameIncludesSearchStr || keywordsIncludeSearchStr;
-      });
-      this.$nextTick(function() {
-        if (searchStr) {
-          this.hoverEmoji(this.filteredEmojis[0], true);
-          this.setupFilteredRefs();
-        }
-      });
-    },
-    debounce: function(fn, delay) {
-      if (delay === void 0) {
-        delay = 300;
-      }
-      let timeout;
-      return function() {
-        const args = [];
-        let len = arguments.length;
-        while (len--)
-          args[len] = arguments[len];
-        clearTimeout(timeout);
-        timeout = setTimeout(function() {
-          fn.apply(void 0, args);
-        }, delay);
-      };
-    },
-    getImgSrc: function(emoji) {
-      return this.CDN_URL + emoji + ".png";
-    },
-    handleImageError: function(event) {
-      event.target.parentNode.style.display = "none";
-    },
-    scrollToTab: function(tabIndex, focusFirstEmoji) {
-      const vm = this;
-      if (focusFirstEmoji === void 0) {
-        focusFirstEmoji = true;
-      }
-      const tabLabel = vm.tabLabels[tabIndex - 1];
-      const tabElement = tabLabel.ref[0];
-      vm.$nextTick(function() {
-        const container = vm.$refs.listRef;
-        const offsetTop = tabIndex === "1" ? 0 : tabElement.offsetTop - 20;
-        let isScrolling = true;
-        let prevScrollTop = container.scrollTop;
-        vm.$emit("is-scrolling", true);
-        container.addEventListener("scroll", function() {
-          if (isScrolling) {
-            const scrollTop = container.scrollTop;
-            if (prevScrollTop < scrollTop && scrollTop >= offsetTop || prevScrollTop > scrollTop && scrollTop <= offsetTop) {
-              isScrolling = false;
-              vm.$emit("is-scrolling", false);
-            }
-            prevScrollTop = scrollTop;
-          }
-        });
-        container.scrollTop = offsetTop;
-        if (focusFirstEmoji) {
-          vm.focusEmoji(tabIndex - 1, 0);
-        }
-      });
-    },
-    resetScroll: function() {
-      const container = this.$refs.listRef;
-      container.scrollTop = 0;
-    },
-    focusEmojiSelector: function() {
-      this.focusEmoji(0, 0);
-    },
-    hoverEmoji(emoji, isFirst) {
-      if (isFirst === void 0) {
-        isFirst = false;
-      }
-      this.hoverFirstEmoji = isFirst;
-      this.$emit("highlighted-emoji", emoji);
-    },
-    setEmojiRef: function(el, indexTab, indexEmoji) {
-      if (!this.emojiRefs[indexTab]) {
-        this.$set(this.emojiRefs, indexTab, []);
-      }
-      this.$set(this.emojiRefs[indexTab], indexEmoji, el);
-    },
-    setFilteredRef: function(el, index) {
-      this.$set(this.emojiFilteredRefs, index, el);
-    },
-    focusEmoji: function(indexTab, indexEmoji) {
-      var _a;
-      const emojiRef = this.isFiltering ? (_a = this.emojiFilteredRefs[indexEmoji]) == null ? void 0 : _a[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];
-      if (emojiRef) {
-        emojiRef.focus();
-        return true;
-      }
-      return false;
-    },
-    // eslint-disable-next-line complexity
-    handleKeyDown: function(event, indexTab, indexEmoji, emoji) {
-      var _a, _b;
-      event.preventDefault();
-      if (event.key === "ArrowUp") {
-        const position = indexEmoji % EMOJIS_PER_ROW;
-        if (indexTab === 0) {
-          const numberOfMissingEmojis = EMOJIS_PER_ROW - this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW;
-          const emojiToJump = this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
-          if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {
-            this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
-          }
-          return;
-        }
-        if (!this.focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
-          const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
-          const emojisInPreviousTab = this.emojiRefs[previousTab].length;
-          const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
-          if (!this.focusEmoji(previousTab, lastEmojiPosition)) {
-            this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);
-          }
-        }
-      }
-      if (event.key === "ArrowDown") {
-        if (!this.focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
-          const position = indexEmoji % EMOJIS_PER_ROW;
-          if ((_b = (_a = this.emojiRefs) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
-            this.focusEmoji(indexTab, this.emojiRefs[indexTab].length - 1);
-          } else {
-            if (!this.focusEmoji(indexTab + 1, position)) {
-              if (!this.focusEmoji(0, position)) {
-                this.focusEmoji(0, this.emojiRefs[0].length - 1);
-              }
-            }
-          }
-        }
-      }
-      if (event.key === "ArrowLeft") {
-        this.handleHorizontalNavigation("left", indexTab, indexEmoji);
-      }
-      if (event.key === "ArrowRight") {
-        this.handleHorizontalNavigation("right", indexTab, indexEmoji);
-      }
-      if (event.key === "Tab") {
-        if (this.focusEmoji(indexTab + 1, 0)) {
-          this.scrollToTab(indexTab + 1 + 1, false);
-        } else {
-          this.$emit("focus-skin-selector");
-        }
-      }
-      if (event.key === "Tab" && event.shiftKey) {
-        if (this.focusEmoji(indexTab, 0) && indexTab > 0) {
-          this.scrollToTab(indexTab, true);
-        } else {
-          this.scrollToTab(1, false);
-          this.$emit("focus-search-input");
-        }
-      }
-      if (event.key === "Enter") {
-        this.$emit("selected-emoji", emoji);
-      }
-    },
-    /* eslint-disable-next-line complexity */
-    handleHorizontalNavigation: function(direction, indexTab, indexEmoji) {
-      if (this.isFiltering) {
-        if (direction === "left") {
-          this.handleArrowLeftFiltered(indexTab, indexEmoji);
-        } else if (direction === "right") {
-          this.handleArrowRightFiltered(indexTab, indexEmoji);
-        }
-      } else {
-        if (direction === "left") {
-          this.handleArrowLeft(indexTab, indexEmoji);
-        } else if (direction === "right") {
-          this.handleArrowRight(indexTab, indexEmoji);
-        }
-      }
-    },
-    handleArrowLeftFiltered: function(indexTab, indexEmoji) {
-      if (!this.focusEmoji(0, indexEmoji - 1)) {
-        this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
-      }
-    },
-    handleArrowRightFiltered: function(indexTab, indexEmoji) {
-      if (!this.focusEmoji(0, indexEmoji + 1)) {
-        this.focusEmoji(0, 0);
-      }
-    },
-    handleArrowLeft: function(indexTab, indexEmoji) {
-      if (!this.focusEmoji(indexTab, indexEmoji - 1)) {
-        if (this.emojiRefs[indexTab - 1]) {
-          this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);
-        } else {
-          this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
-        }
-      }
-    },
-    handleArrowRight: function(indexTab, indexEmoji) {
-      if (!this.focusEmoji(indexTab, indexEmoji + 1)) {
-        if (!this.focusEmoji(indexTab + 1, 0)) {
-          this.focusEmoji(0, 0);
-        }
-      }
-    },
-    /* eslint-disable-next-line complexity */
-    handleKeyDownFilteredEmojis(event, indexEmoji, emoji) {
-      var _a;
-      event.preventDefault();
-      this.hoverFirstEmoji = false;
-      if (event.key === "ArrowUp") {
-        const position = indexEmoji % EMOJIS_PER_ROW;
-        if (!this.focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
-          const lastEmojiPosition = this.emojiFilteredRefs.length - this.emojiFilteredRefs.length % EMOJIS_PER_ROW + position;
-          this.focusEmoji(0, lastEmojiPosition);
-          if (!this.focusEmoji(0, lastEmojiPosition)) {
-            this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
-          }
-        }
-      }
-      if (event.key === "ArrowDown") {
-        if (!this.focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
-          const position = indexEmoji % EMOJIS_PER_ROW;
-          if ((_a = this.emojiFilteredRefs) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
-            this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
-          } else {
-            this.focusEmoji(0, position);
-          }
-        }
-      }
-      if (event.key === "ArrowLeft") {
-        this.handleHorizontalNavigation("left", 0, indexEmoji);
-      }
-      if (event.key === "ArrowRight") {
-        this.handleHorizontalNavigation("right", 0, indexEmoji);
-      }
-      if (event.key === "Tab") {
-        this.$emit("focus-skin-selector");
-      }
-      if (event.key === "Enter") {
-        this.$emit("selected-emoji", emoji);
-      }
-    },
-    setTabLabelObserver() {
-      this.tabLabelObserver = new IntersectionObserver((entries) => {
-        this.$emit("is-scrolling", false);
-        entries.forEach((entry) => {
-          var _a, _b, _c, _d, _e, _f;
-          const { target } = entry;
-          const index = parseInt(target.dataset.index);
-          if (entry.isIntersecting && target.offsetTop <= ((_a = this.$refs.tabCategoryRef) == null ? void 0 : _a.offsetTop) + 50) {
-            this.fixedLabel = ((_b = this.tabLabels[index - 1]) == null ? void 0 : _b.label) ?? ((_c = this.tabLabels[0]) == null ? void 0 : _c.label);
-            this.$emit("scroll-into-tab", index - 1);
-          } else if (entry.boundingClientRect.bottom <= ((_d = this.$refs.tabCategoryRef) == null ? void 0 : _d.getBoundingClientRect().bottom)) {
-            this.$emit("scroll-into-tab", index);
-            this.fixedLabel = (_e = this.tabLabels[index]) == null ? void 0 : _e.label;
-          } else if (index === 1) {
-            this.$emit("scroll-into-tab", index);
-            this.fixedLabel = (_f = this.tabLabels[0]) == null ? void 0 : _f.label;
-          }
-        });
-      });
-      this.tabLabelObserver.observe(this.$refs.tabCategoryRef);
-      Array.from(this.$refs.listRef.children).forEach((child, index) => {
-        this.tabLabelObserver.observe(child);
-        child.dataset.index = index;
-      });
-    },
-    focusLastEmoji() {
-      this.focusEmoji(this.tabs.length - 1, 0);
-    }
-  }
-};
-var _sfc_render$3 = function render3() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__selector" }, [_c("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { "id": "d-emoji-picker-list" } }, [_vm.emojiFilter ? _c("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
-    return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.emojiFilter, expression: "!emojiFilter" }], key: indexTab, ref: `tabLabelRef-${indexTab}`, refInFor: true, staticClass: "d-emoji-picker__alignment" }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", { staticClass: "d-emoji-picker__tab" }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
-      return _c("button", { key: emoji.shortname, ref: `emojiRef-${indexTab}`, refInFor: true, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
-        return _vm.$emit("selected-emoji", emoji);
-      }, "focusin": function($event) {
-        return _vm.$emit("highlighted-emoji", emoji);
-      }, "focusout": function($event) {
-        return _vm.$emit("highlighted-emoji", null);
-      }, "mouseover": function($event) {
-        return _vm.$emit("highlighted-emoji", emoji);
-      }, "mouseleave": function($event) {
-        return _vm.$emit("highlighted-emoji", null);
-      }, "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": _vm.getImgSrc(emoji.unicode_character) }, on: { "error": _vm.handleImageError } })]);
-    }), 0)]);
-  }), _vm.emojiFilter ? _c("div", { staticClass: "d-emoji-picker__alignment" }, [_c("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
-    return _c("button", { key: emoji.shortname, ref: `filteredEmoji-${index}`, refInFor: true, class: {
-      "hover-emoji": index === 0 && _vm.hoverFirstEmoji
-    }, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
-      return _vm.$emit("selected-emoji", emoji);
-    }, "focusin": function($event) {
-      return _vm.$emit("highlighted-emoji", emoji);
-    }, "focusout": function($event) {
-      return _vm.$emit("highlighted-emoji", null);
-    }, "mouseover": function($event) {
-      return _vm.hoverEmoji(emoji);
-    }, "mouseleave": function($event) {
-      return _vm.hoverEmoji(null);
-    }, "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": `${_vm.CDN_URL + emoji.unicode_character}.png` } })]);
-  }), 0)]) : _vm._e()], 2)]);
-};
-var _sfc_staticRenderFns$3 = [];
-var __component__$3 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$3,
-  _sfc_render$3,
-  _sfc_staticRenderFns$3,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const EmojiSelector = __component__$3.exports;
-const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
-const EMOJIS_PER_ROW = 9;
-const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
-  DEFAULT: "Default",
-  LIGHT: "Light",
-  MEDIUM_LIGHT: "MediumLight",
-  MEDIUM: "Medium",
-  MEDIUM_DARK: "MediumDark",
-  DARK: "Dark"
-};
-const EMOJI_PICKER_CATEGORIES = {
-  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"
-};
-const _sfc_main$2 = {
-  name: "EmojiDescription",
-  props: {
-    /**
-     * Emoji data
-     * @type {Object}
-     * @default null
-     */
-    emoji: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data() {
-    return {
-      CDN_URL
-    };
-  }
-};
-var _sfc_render$2 = function render4() {
-  var _a;
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__data" }, [_vm.emoji ? _c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": _vm.emoji.name, "aria-label": _vm.emoji.name, "title": _vm.emoji.name, "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png` } }) : _vm._e(), _c("div", [_vm._v(_vm._s((_a = _vm.emoji) == null ? void 0 : _a.name))])]);
-};
-var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const EmojiDescription = __component__$2.exports;
-const _sfc_main$1 = {
-  name: "EmojiSkinSelector",
-  components: {
-    DtTooltip
-  },
-  props: {
-    skinTone: {
-      type: String,
-      required: true
-    },
-    isHovering: {
-      type: Boolean,
-      default: false
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      isOpen: false,
-      skinSelected: null,
-      skinsRef: [],
-      cdnUrl: CDN_URL
-    };
-  },
-  computed: {
-    skinPassedIn() {
-      return this.skinList.find((skin) => skin.skinTone === this.skinTone);
-    },
-    skinList() {
-      return [
-        {
-          name: ":wave_tone1:",
-          unicode_output: "1f44b-1f3fb",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-          skinCode: "_tone1"
-        },
-        {
-          name: ":wave_tone2:",
-          unicode_output: "1f44b-1f3fc",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-          skinCode: "_tone2"
-        },
-        {
-          name: ":wave_tone3:",
-          unicode_output: "1f44b-1f3fd",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-          skinCode: "_tone3"
-        },
-        {
-          name: ":wave_tone4:",
-          unicode_output: "1f44b-1f3fe",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-          skinCode: "_tone4"
-        },
-        {
-          name: ":wave_tone5:",
-          unicode_output: "1f44b-1f3ff",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-          skinCode: "_tone5"
-        },
-        {
-          name: ":wave:",
-          unicode_output: "1f44b",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-          skinCode: ""
-        }
-      ];
-    }
-  },
-  watch: {
-    isHovering(newVal) {
-      if (newVal) {
-        this.isOpen = false;
-      }
-    },
-    skinTone(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.skinSelected = this.skinPassedIn;
-      }
-    }
-  },
-  mounted() {
-    this.skinSelected = this.skinPassedIn;
-    this.$nextTick(() => {
-      this.setupSkinRefs();
-    });
-  },
-  methods: {
-    setupSkinRefs() {
-      this.skinList.forEach((skin, index) => {
-        const refKey = `skinRef-${index}`;
-        if (this.$refs[refKey]) {
-          this.$set(this.skinsRef, index, this.$refs[refKey][0]);
-        }
-      });
-    },
-    focusSkinSelector() {
-      if (this.$refs.skinSelectorRef) {
-        this.$refs.skinSelectorRef.focus();
-      }
-    },
-    selectSkin(skin) {
-      this.skinSelected = skin;
-      this.isOpen = false;
-      this.$emit("skin-tone", skin.skinTone);
-      this.$nextTick(() => {
-        this.focusSkinSelector();
-      });
-    },
-    handleKeyDown(event, skin, index) {
-      var _a, _b, _c, _d;
-      event.preventDefault();
-      if (event.key === "ArrowLeft") {
-        if (index === 0)
-          (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
-        (_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
-      }
-      if (event.key === "ArrowRight") {
-        if (this.skinsRef.length)
-          (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
-        (_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
-      }
-      if (event.key === "Enter") {
-        if (skin) {
-          this.selectSkin(skin);
-        } else {
-          this.toggleSkinList();
-        }
-      }
-      if (event.key === "Tab") {
-        if (event.shiftKey) {
-          this.$emit("focus-last-emoji");
-        } else {
-          this.$emit("focus-tabset");
-        }
-      }
-    },
-    toggleSkinList() {
-      this.isOpen = !this.isOpen;
-      this.$nextTick(() => {
-        if (this.skinsRef[0]) {
-          this.skinsRef[0].focus();
-        }
-      });
-    }
-  }
-};
-var _sfc_render$1 = function render5() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
-    var _a;
-    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
-      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
-    }, on: { "click": function($event) {
-      return _vm.selectSkin(skin);
-    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
-  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    var _a, _b, _c2, _d;
-    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
-  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
-};
-var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const EmojiSkinSelector = __component__$1.exports;
-const _sfc_main = {
-  name: "DtEmojiPicker",
-  components: {
-    EmojiTabset,
-    EmojiSearch,
-    EmojiSelector,
-    EmojiDescription,
-    EmojiSkinSelector
-  },
-  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
-    },
-    /**
-     * The placeholder text for the search input
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
-     */
-    searchPlaceholderLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchResultsLabel="'Search results'" />
-     */
-    searchResultsLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The label for the search no results
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchNoResultsLabel="'No results'" />
-     */
-    searchNoResultsLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * 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: true
-    },
-    /**
-     * 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: true
-    },
-    /**
-     * 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: true
-    }
-  },
-  data() {
-    return {
-      internalSearchQuery: this.searchQuery,
-      highlightedEmoji: null,
-      selectedTabset: {},
-      scrollIntoTab: 0,
-      isScrolling: false
-    };
-  },
-  computed: {
-    showRecentlyUsedTab() {
-      var _a;
-      return ((_a = this.recentlyUsedEmojis) == null ? void 0 : _a.length) > 0;
-    }
-  },
-  watch: {
-    searchQuery(value) {
-      this.internalSearchQuery = value;
-    }
-  },
-  methods: {
-    scrollToSelectedTabset(tabId) {
-      this.internalSearchQuery = "";
-      this.selectedTabset = { ...this.selectedTabset, tabId };
-    },
-    updateScrollIntoTab(value) {
-      this.scrollIntoTab = value;
-    },
-    updateIsScrolling(value) {
-      this.isScrolling = value;
-    },
-    updateHighlightedEmoji(emoji) {
-      this.highlightedEmoji = emoji;
-    }
-  }
-};
-var _sfc_render = function render6() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker" }, [_c("div", { staticClass: "d-emoji-picker--header" }, [_c("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "show-recently-used-tab": _vm.showRecentlyUsedTab, "scroll-into-tab": _vm.scrollIntoTab, "tab-set-labels": _vm.tabSetLabels, "is-scrolling": _vm.isScrolling }, on: { "focus-skin-selector": function($event) {
-    return _vm.$refs.skinSelectorRef.focusSkinSelector();
-  }, "focus-search-input": function($event) {
-    _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.emojiSelectorRef.focusEmojiSelector();
-  }, "selected-tabset": _vm.scrollToSelectedTabset }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } })], 1), _c("div", { staticClass: "d-emoji-picker--body" }, [_vm.showSearch ? _c("emoji-search", { ref: "searchInputRef", attrs: { "model-value": _vm.internalSearchQuery, "search-placeholder-label": _vm.searchPlaceholderLabel }, on: { "update:model-value": (newValue) => _vm.internalSearchQuery = newValue, "select-first-emoji": function($event) {
-    return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
-  }, "focus-tabset": function($event) {
-    return _vm.$refs.tabsetRef.focusTabset();
-  }, "focus-emoji-selector": function($event) {
-    return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
-  } }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } }) : _vm._e(), _c("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "skin-tone": _vm.skinTone, "tab-set-labels": _vm.tabSetLabels, "search-results-label": _vm.searchResultsLabel, "search-no-results-label": _vm.searchNoResultsLabel, "recently-used-emojis": _vm.recentlyUsedEmojis, "selected-tabset": _vm.selectedTabset }, on: { "scroll-into-tab": _vm.updateScrollIntoTab, "is-scrolling": _vm.updateIsScrolling, "highlighted-emoji": _vm.updateHighlightedEmoji, "selected-emoji": function($event) {
-    return _vm.$emit("selected-emoji", $event);
-  }, "focus-skin-selector": function($event) {
-    return _vm.$refs.skinSelectorRef.focusSkinSelector();
-  }, "focus-search-input": function($event) {
-    _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.tabsetRef.focusTabset();
-  } }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } })], 1), _c("div", { staticClass: "d-emoji-picker--footer" }, [_c("emoji-description", { attrs: { "emoji": _vm.highlightedEmoji } }), _c("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!_vm.highlightedEmoji, "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel, "skin-tone": _vm.skinTone }, on: { "skin-tone": function($event) {
-    return _vm.$emit("skin-tone", $event);
-  }, "focus-tabset": function($event) {
-    return _vm.$refs.tabsetRef.focusTabset();
-  }, "focus-last-emoji": function($event) {
-    return _vm.$refs.emojiSelectorRef.focusLastEmoji();
-  } }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } })], 1)]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const DtEmojiPicker = __component__.exports;
+import { default as default2 } from "../components/emoji_picker/emoji_picker.vue.js";
+import { CDN_URL, EMOJIS_PER_ROW, EMOJI_PICKER_CATEGORIES, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "../components/emoji_picker/emoji_picker_constants.js";
 export {
   CDN_URL,
-  DtEmojiPicker,
+  default2 as DtEmojiPicker,
   EMOJIS_PER_ROW,
   EMOJI_PICKER_CATEGORIES,
   EMOJI_PICKER_SKIN_TONE_MODIFIERS