@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/emoji_picker/composables/useKeyboardNavigation.js

@@ -0,0 +1,153 @@
+import { ref } from "vue";
+import { ARROW_KEYS, EMOJIS_PER_ROW } from "../emoji_picker_constants.js";
+function useKeyboardNavigation() {
+  const emojiRefs = ref([]);
+  const emojiFilteredRefs = ref([]);
+  const isFiltering = ref(false);
+  const hoverFirstEmoji = ref(true);
+  function _handleArrowLeft(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji - 1)) {
+      if (emojiRefs.value[indexTab - 1]) {
+        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+      } else {
+        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+      }
+    }
+  }
+  function _handleArrowRight(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji + 1)) {
+      if (!focusEmoji(indexTab + 1, 0)) {
+        focusEmoji(0, 0);
+      }
+    }
+  }
+  function _handleArrowLeftFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji - 1)) {
+      focusEmoji(0, emojiFilteredRefs.value.length - 1);
+    }
+  }
+  function _handleArrowRightFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji + 1)) {
+      focusEmoji(0, 0);
+    }
+  }
+  function _handleHorizontalNavigation(direction, indexTab, indexEmoji) {
+    if (isFiltering.value) {
+      if (direction === "left") {
+        _handleArrowLeftFiltered(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRightFiltered(indexTab, indexEmoji);
+      }
+    } else {
+      if (direction === "left") {
+        _handleArrowLeft(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRight(indexTab, indexEmoji);
+      }
+    }
+  }
+  function focusEmoji(indexTab, indexEmoji) {
+    var _a, _b, _c;
+    const emojiRef = isFiltering.value ? (_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji] : (_c = (_b = emojiRefs.value) == null ? void 0 : _b[indexTab]) == null ? void 0 : _c[indexEmoji];
+    if (emojiRef) {
+      emojiRef.focus();
+      return true;
+    }
+    return false;
+  }
+  function setEmojiRef(el, indexTab, indexEmoji) {
+    if (!emojiRefs.value[indexTab]) {
+      emojiRefs.value[indexTab] = [];
+    }
+    emojiRefs.value[indexTab][indexEmoji] = el;
+  }
+  function setFilteredRef(el, index) {
+    emojiFilteredRefs.value[index] = el;
+  }
+  function handleArrowNavigationFiltered(key, indexEmoji) {
+    var _a;
+    hoverFirstEmoji.value = false;
+    if (key === ARROW_KEYS.ARROW_UP) {
+      const position = indexEmoji % EMOJIS_PER_ROW;
+      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
+        const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % EMOJIS_PER_ROW + position;
+        focusEmoji(0, lastEmojiPosition);
+        if (!focusEmoji(0, lastEmojiPosition)) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        }
+      }
+    }
+    if (key === ARROW_KEYS.ARROW_DOWN) {
+      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        } else {
+          focusEmoji(0, position);
+        }
+      }
+    }
+    if (key === ARROW_KEYS.ARROW_LEFT) {
+      _handleHorizontalNavigation("left", 0, indexEmoji);
+    }
+    if (key === ARROW_KEYS.ARROW_RIGHT) {
+      _handleHorizontalNavigation("right", 0, indexEmoji);
+    }
+  }
+  function handleArrowNavigation(key, indexTab, indexEmoji) {
+    var _a, _b;
+    if (key === "ArrowUp") {
+      const position = indexEmoji % EMOJIS_PER_ROW;
+      if (indexTab === 0) {
+        const numberOfMissingEmojis = EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW;
+        const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
+        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {
+          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+        }
+        return;
+      }
+      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
+        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
+        const emojisInPreviousTab = emojiRefs.value[previousTab].length;
+        const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
+        if (!focusEmoji(previousTab, lastEmojiPosition)) {
+          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+        }
+      }
+    }
+    if (key === "ArrowDown") {
+      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);
+        } else {
+          if (!focusEmoji(indexTab + 1, position)) {
+            if (!focusEmoji(0, position)) {
+              focusEmoji(0, emojiRefs.value[0].length - 1);
+            }
+          }
+        }
+      }
+    }
+    if (key === "ArrowLeft") {
+      _handleHorizontalNavigation("left", indexTab, indexEmoji);
+    }
+    if (key === "ArrowRight") {
+      _handleHorizontalNavigation("right", indexTab, indexEmoji);
+    }
+  }
+  return {
+    emojiFilteredRefs,
+    isFiltering,
+    hoverFirstEmoji,
+    setEmojiRef,
+    setFilteredRef,
+    focusEmoji,
+    handleArrowNavigationFiltered,
+    handleArrowNavigation
+  };
+}
+export {
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/components/emoji_picker/composables/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../components/emoji_picker/composables/useKeyboardNavigation.js"],"sourcesContent":["import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n  const emojiRefs = ref([]);\n  const emojiFilteredRefs = ref([]);\n  const isFiltering = ref(false);\n  const hoverFirstEmoji = ref(true);\n\n  function _handleArrowLeft (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji - 1)) {\n      if (emojiRefs.value[indexTab - 1]) {\n        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n      } else {\n        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n      }\n    }\n  }\n\n  function _handleArrowRight (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji + 1)) {\n      if (!focusEmoji(indexTab + 1, 0)) {\n        focusEmoji(0, 0);\n      }\n    }\n  }\n\n  function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji - 1)) {\n      focusEmoji(0, emojiFilteredRefs.value.length - 1);\n    }\n  }\n\n  function _handleArrowRightFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji + 1)) {\n      focusEmoji(0, 0);\n    }\n  }\n\n  function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n    if (isFiltering.value) {\n      if (direction === 'left') {\n        _handleArrowLeftFiltered(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRightFiltered(indexTab, indexEmoji);\n      }\n    } else {\n      if (direction === 'left') {\n        _handleArrowLeft(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRight(indexTab, indexEmoji);\n      }\n    }\n  }\n\n  function focusEmoji (indexTab, indexEmoji) {\n    const emojiRef = isFiltering.value\n      ? emojiFilteredRefs.value?.[indexEmoji]\n      : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n    if (emojiRef) {\n      emojiRef.focus();\n      return true;\n    }\n\n    return false;\n  }\n\n  function setEmojiRef (el, indexTab, indexEmoji) {\n    if (!emojiRefs.value[indexTab]) {\n      emojiRefs.value[indexTab] = [];\n    }\n    emojiRefs.value[indexTab][indexEmoji] = el;\n  }\n\n  function setFilteredRef (el, index) {\n    emojiFilteredRefs.value[index] = el;\n  }\n\n  function handleArrowNavigationFiltered (key, indexEmoji) {\n    hoverFirstEmoji.value = false;\n\n    if (key === ARROW_KEYS.ARROW_UP) {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n        const lastEmojiPosition =\n        emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n        focusEmoji(0, lastEmojiPosition);\n\n        if (!focusEmoji(0, lastEmojiPosition)) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_DOWN) {\n      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        } else {\n          focusEmoji(0, position);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_LEFT) {\n      _handleHorizontalNavigation('left', 0, indexEmoji);\n    }\n\n    if (key === ARROW_KEYS.ARROW_RIGHT) {\n      _handleHorizontalNavigation('right', 0, indexEmoji);\n    }\n  }\n\n  function handleArrowNavigation (key, indexTab, indexEmoji) {\n    if (key === 'ArrowUp') {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (indexTab === 0) {\n      // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n        const numberOfMissingEmojis =\n        EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n        const emojiToJump =\n        emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n        }\n        return;\n      }\n\n      // if we are not on the first tab, we should jump to the previous row of the current tab\n      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n      // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n        const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n        const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n        if (!focusEmoji(previousTab, lastEmojiPosition)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n        }\n      }\n    }\n\n    if (key === 'ArrowDown') {\n      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n      // if cannot go down\n\n        // Calculate position from cell 0 to cell 8\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        // check if it exists a next row in the current tab\n        if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n        // if it exists, we should focus the last emoji of the next row in the current tab\n          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n        // if we are at the end of the list it will do nothing\n        } else {\n        // We don't have next row, we are in the last of the tab, then jump\n        // to the next tab but in the equal emoji position in row 0.\n\n          if (!focusEmoji(indexTab + 1, position)) {\n          // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n          // if it doesn't has, jump to the last\n            if (!focusEmoji(0, position)) {\n              focusEmoji(0, emojiRefs.value[0].length - 1);\n            }\n          }\n        }\n      }\n    }\n\n    if (key === 'ArrowLeft') {\n      _handleHorizontalNavigation('left', indexTab, indexEmoji);\n    }\n\n    if (key === 'ArrowRight') {\n      _handleHorizontalNavigation('right', indexTab, indexEmoji);\n    }\n  }\n\n  return {\n    emojiFilteredRefs,\n    isFiltering,\n    hoverFirstEmoji,\n    setEmojiRef,\n    setFilteredRef,\n    focusEmoji,\n    handleArrowNavigationFiltered,\n    handleArrowNavigation,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/emoji_picker/emoji_picker.vue.cjs

@@ -0,0 +1,233 @@
+"use strict";
+const vue = require("vue");
+const emoji_search = require("./modules/emoji_search.vue.cjs");
+const emoji_tabset = require("./modules/emoji_tabset.vue.cjs");
+const emoji_selector = require("./modules/emoji_selector.vue.cjs");
+const emoji_skin_selector = require("./modules/emoji_skin_selector.vue.cjs");
+const emoji_description = require("./modules/emoji_description.vue.cjs");
+const _hoisted_1 = { class: "d-emoji-picker" };
+const _hoisted_2 = { class: "d-emoji-picker--header" };
+const _hoisted_3 = { class: "d-emoji-picker--body" };
+const _hoisted_4 = { class: "d-emoji-picker--footer" };
+const _sfc_main = {
+  __name: "emoji_picker",
+  props: {
+    /**
+     * The array with recently used  emoji object
+     * This list is necessary to fill the recently used tab
+     * @type {Array}
+     * @default []
+     * @example
+     * <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
+     */
+    // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * The placeholder text for the search input
+     * @type {String}
+     * @required
+     * @example
+     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
+     */
+    searchPlaceholderLabel: {
+      type: String,
+      required: 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
+    }
+  },
+  emits: [
+    /**
+     * It will emit the selected emoji
+     * @event selected-emoji
+     * @param {Object} emoji - The selected emoji from the emoji selector
+     */
+    "selected-emoji",
+    /**
+     * It will emit the selected skin tone
+     * @event skin-tone
+     * @param {String} skin - The selected skin tone from the skin selector
+     */
+    "skin-tone",
+    /**
+     * Since the keyboard events are encapsulated, we emit this event to close the picker
+     * @event close
+     */
+    "close"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const internalSearchQuery = vue.ref(props.searchQuery.value);
+    const highlightedEmoji = vue.ref(null);
+    const selectedTabset = vue.ref({});
+    const scrollIntoTab = vue.ref(0);
+    const isScrolling = vue.ref(false);
+    const showRecentlyUsedTab = vue.computed(() => props.recentlyUsedEmojis.length > 0);
+    vue.watch(
+      () => props.searchQuery,
+      (newValue) => {
+        internalSearchQuery.value = newValue;
+      }
+    );
+    function scrollToSelectedTabset(tabId) {
+      internalSearchQuery.value = "";
+      selectedTabset.value = tabId;
+      selectedTabset.value = { ...selectedTabset.value, tabId };
+    }
+    function updateScrollIntoTab(value) {
+      scrollIntoTab.value = value;
+    }
+    function updateIsScrolling(value) {
+      isScrolling.value = value;
+    }
+    function updateHighlightedEmoji(emoji) {
+      highlightedEmoji.value = emoji;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(emoji_tabset, {
+            ref: "tabsetRef",
+            "emoji-filter": internalSearchQuery.value,
+            "show-recently-used-tab": showRecentlyUsedTab.value,
+            "scroll-into-tab": scrollIntoTab.value,
+            "tabset-labels": __props.tabSetLabels,
+            "is-scrolling": isScrolling.value,
+            onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onSelectedTabset: scrollToSelectedTabset,
+            onKeydown: _cache[2] || (_cache[2] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          __props.showSearch ? (vue.openBlock(), vue.createBlock(emoji_search, {
+            key: 0,
+            ref: "searchInputRef",
+            modelValue: internalSearchQuery.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.value = $event),
+            "search-placeholder-label": __props.searchPlaceholderLabel,
+            onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
+            onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onKeydown: _cache[7] || (_cache[7] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["modelValue", "search-placeholder-label"])) : vue.createCommentVNode("", true),
+          vue.createVNode(emoji_selector, {
+            ref: "emojiSelectorRef",
+            "emoji-filter": internalSearchQuery.value,
+            "skin-tone": __props.skinTone,
+            "tabset-labels": __props.tabSetLabels,
+            "search-results-label": __props.searchResultsLabel,
+            "search-no-results-label": __props.searchNoResultsLabel,
+            "recently-used-emojis": __props.recentlyUsedEmojis,
+            "selected-tabset": selectedTabset.value,
+            onScrollIntoTab: updateScrollIntoTab,
+            onIsScrolling: updateIsScrolling,
+            onHighlightedEmoji: updateHighlightedEmoji,
+            onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
+            onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
+            onKeydown: _cache[11] || (_cache[11] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
+        ]),
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.createVNode(emoji_description, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
+          vue.createVNode(emoji_skin_selector, {
+            ref: "skinSelectorRef",
+            "is-hovering": !!highlightedEmoji.value,
+            "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
+            "skin-tone": __props.skinTone,
+            onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
+            onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
+            onKeydown: _cache[15] || (_cache[15] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
+        ])
+      ]);
+    };
+  }
+};
+const DtEmojiPicker = _sfc_main;
+module.exports = DtEmojiPicker;
+//# sourceMappingURL=emoji_picker.vue.cjs.map

package/dist/components/emoji_picker/emoji_picker.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_picker.vue.cjs","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker\"\n  >\n    <div class=\"d-emoji-picker--header\">\n      <emoji-tabset\n        ref=\"tabsetRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :show-recently-used-tab=\"showRecentlyUsedTab\"\n        :scroll-into-tab=\"scrollIntoTab\"\n        :tabset-labels=\"tabSetLabels\"\n        :is-scrolling=\"isScrolling\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        v-model=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc=\"emits('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tabset-labels=\"tabSetLabels\"\n        :search-results-label=\"searchResultsLabel\"\n        :search-no-results-label=\"searchNoResultsLabel\"\n        :recently-used-emojis=\"recentlyUsedEmojis\"\n        :selected-tabset=\"selectedTabset\"\n        @scroll-into-tab=\"updateScrollIntoTab\"\n        @is-scrolling=\"updateIsScrolling\"\n        @highlighted-emoji=\"updateHighlightedEmoji\"\n        @selected-emoji=\"emits('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--footer\">\n      <emoji-description :emoji=\"highlightedEmoji\" />\n      <emoji-skin-selector\n        ref=\"skinSelectorRef\"\n        :is-hovering=\"!!highlightedEmoji\"\n        :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n        :skin-tone=\"skinTone\"\n        @skin-tone=\"emits('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { computed, ref, watch } from 'vue';\n\nconst props = defineProps({\n  /**\n   * The array with recently used  emoji object\n   * This list is necessary to fill the recently used tab\n   * @type {Array}\n   * @default []\n   * @example\n   * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n   */\n  // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => ([]),\n  },\n\n  /**\n   * The placeholder text for the search input\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n   */\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search no results\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n   */\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of tabsets to show, it is necessary to be updated with the correct language\n   * It must respect the provided order.\n   * @type {Array}\n   * @required\n   * @example\n   * <dt-emoji-picker\n   *  :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n   *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n   */\n  tabSetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  /**\n   * The skin tone to show the emojis\n   * This prop gives the possibility to use the skin tone selected by the user previously\n   * @type {String}\n   * @default 'Default'\n   * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n   * @example\n   * <dt-emoji-picker :skinTone=\"'Default'\" />\n   */\n  skinTone: {\n    type: String,\n    default: 'Default',\n  },\n\n  /**\n   * Tooltip shown when skin selector button is hovered.\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n   */\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * Sets the search query that filters emojis.\n   * @type {String}\n   * @example\n   * <dt-emoji-picker search-query=\"smile\" />\n   */\n  searchQuery: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * Shows the search input\n   * @type {Boolean}\n   * @example\n   * <dt-emoji-picker :show-search=\"false\" />\n   */\n  showSearch: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emits = defineEmits(\n  [\n    /**\n     * It will emit the selected emoji\n     * @event selected-emoji\n     * @param {Object} emoji - The selected emoji from the emoji selector\n     */\n    'selected-emoji',\n\n    /**\n     * It will emit the selected skin tone\n     * @event skin-tone\n     * @param {String} skin - The selected skin tone from the skin selector\n     */\n    'skin-tone',\n\n    /**\n     * Since the keyboard events are encapsulated, we emit this event to close the picker\n     * @event close\n     */\n    'close',\n  ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\nconst isScrolling = ref(false);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);\n\nwatch(\n  () => props.searchQuery,\n  (newValue) => {\n    internalSearchQuery.value = newValue;\n  },\n);\n\n/**\n * Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabName {String} - The name of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n  internalSearchQuery.value = '';\n  selectedTabset.value = tabId;\n  selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n  scrollIntoTab.value = value;\n}\n\nfunction updateIsScrolling (value) {\n  isScrolling.value = value;\n}\nfunction updateHighlightedEmoji (emoji) {\n  highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":["ref","computed","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAmHd,UAAM,QAAQ;AAwBd,UAAM,sBAAsBA,IAAAA,IAAI,MAAM,YAAY,KAAK;AACvD,UAAM,mBAAmBA,IAAAA,IAAI,IAAI;AACjC,UAAM,iBAAiBA,IAAAA,IAAI,CAAA,CAAE;AAE7B,UAAM,gBAAgBA,IAAAA,IAAI,CAAC;AAC3B,UAAM,cAAcA,IAAAA,IAAI,KAAK;AAE7B,UAAM,sBAAsBC,IAAQ,SAAC,MAAM,MAAM,mBAAmB,SAAS,CAAC;AAE9EC,QAAK;AAAA,MACH,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AACZ,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAWA,aAAS,uBAAwB,OAAO;AACtC,0BAAoB,QAAQ;AAC5B,qBAAe,QAAQ;AACvB,qBAAe,QAAQ,EAAE,GAAG,eAAe,OAAO,MAAK;AAAA,IACzD;AAEA,aAAS,oBAAqB,OAAO;AACnC,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,kBAAmB,OAAO;AACjC,kBAAY,QAAQ;AAAA,IACtB;AACA,aAAS,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/emoji_picker/emoji_picker.vue.js

@@ -0,0 +1,234 @@
+import { ref, computed, watch, openBlock, createElementBlock, createElementVNode, createVNode, withKeys, createBlock, createCommentVNode } from "vue";
+import _sfc_main$2 from "./modules/emoji_search.vue.js";
+import _sfc_main$1 from "./modules/emoji_tabset.vue.js";
+import _sfc_main$3 from "./modules/emoji_selector.vue.js";
+import _sfc_main$5 from "./modules/emoji_skin_selector.vue.js";
+import _sfc_main$4 from "./modules/emoji_description.vue.js";
+const _hoisted_1 = { class: "d-emoji-picker" };
+const _hoisted_2 = { class: "d-emoji-picker--header" };
+const _hoisted_3 = { class: "d-emoji-picker--body" };
+const _hoisted_4 = { class: "d-emoji-picker--footer" };
+const _sfc_main = {
+  __name: "emoji_picker",
+  props: {
+    /**
+     * The array with recently used  emoji object
+     * This list is necessary to fill the recently used tab
+     * @type {Array}
+     * @default []
+     * @example
+     * <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
+     */
+    // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * The placeholder text for the search input
+     * @type {String}
+     * @required
+     * @example
+     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
+     */
+    searchPlaceholderLabel: {
+      type: String,
+      required: 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
+    }
+  },
+  emits: [
+    /**
+     * It will emit the selected emoji
+     * @event selected-emoji
+     * @param {Object} emoji - The selected emoji from the emoji selector
+     */
+    "selected-emoji",
+    /**
+     * It will emit the selected skin tone
+     * @event skin-tone
+     * @param {String} skin - The selected skin tone from the skin selector
+     */
+    "skin-tone",
+    /**
+     * Since the keyboard events are encapsulated, we emit this event to close the picker
+     * @event close
+     */
+    "close"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const internalSearchQuery = ref(props.searchQuery.value);
+    const highlightedEmoji = ref(null);
+    const selectedTabset = ref({});
+    const scrollIntoTab = ref(0);
+    const isScrolling = ref(false);
+    const showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);
+    watch(
+      () => props.searchQuery,
+      (newValue) => {
+        internalSearchQuery.value = newValue;
+      }
+    );
+    function scrollToSelectedTabset(tabId) {
+      internalSearchQuery.value = "";
+      selectedTabset.value = tabId;
+      selectedTabset.value = { ...selectedTabset.value, tabId };
+    }
+    function updateScrollIntoTab(value) {
+      scrollIntoTab.value = value;
+    }
+    function updateIsScrolling(value) {
+      isScrolling.value = value;
+    }
+    function updateHighlightedEmoji(emoji) {
+      highlightedEmoji.value = emoji;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$1, {
+            ref: "tabsetRef",
+            "emoji-filter": internalSearchQuery.value,
+            "show-recently-used-tab": showRecentlyUsedTab.value,
+            "scroll-into-tab": scrollIntoTab.value,
+            "tabset-labels": __props.tabSetLabels,
+            "is-scrolling": isScrolling.value,
+            onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onSelectedTabset: scrollToSelectedTabset,
+            onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          __props.showSearch ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            ref: "searchInputRef",
+            modelValue: internalSearchQuery.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.value = $event),
+            "search-placeholder-label": __props.searchPlaceholderLabel,
+            onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
+            onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onKeydown: _cache[7] || (_cache[7] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["modelValue", "search-placeholder-label"])) : createCommentVNode("", true),
+          createVNode(_sfc_main$3, {
+            ref: "emojiSelectorRef",
+            "emoji-filter": internalSearchQuery.value,
+            "skin-tone": __props.skinTone,
+            "tabset-labels": __props.tabSetLabels,
+            "search-results-label": __props.searchResultsLabel,
+            "search-no-results-label": __props.searchNoResultsLabel,
+            "recently-used-emojis": __props.recentlyUsedEmojis,
+            "selected-tabset": selectedTabset.value,
+            onScrollIntoTab: updateScrollIntoTab,
+            onIsScrolling: updateIsScrolling,
+            onHighlightedEmoji: updateHighlightedEmoji,
+            onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
+            onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
+            onKeydown: _cache[11] || (_cache[11] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          createVNode(_sfc_main$4, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
+          createVNode(_sfc_main$5, {
+            ref: "skinSelectorRef",
+            "is-hovering": !!highlightedEmoji.value,
+            "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
+            "skin-tone": __props.skinTone,
+            onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
+            onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
+            onKeydown: _cache[15] || (_cache[15] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
+        ])
+      ]);
+    };
+  }
+};
+const DtEmojiPicker = _sfc_main;
+export {
+  DtEmojiPicker as default
+};
+//# sourceMappingURL=emoji_picker.vue.js.map