@dialpad/dialtone 9.110.0 → 9.110.1-beta.2

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

@@ -1,153 +0,0 @@
-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/vue3/components/emoji_picker/composables/useKeyboardNavigation.js.map

@@ -1 +0,0 @@
-{"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/vue3/components/emoji_picker/emoji_picker.vue.cjs

@@ -1,228 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-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 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 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.default, {
-            ref: "tabsetRef",
-            "emoji-filter": internalSearchQuery.value,
-            "show-recently-used-tab": showRecentlyUsedTab.value,
-            "scroll-into-tab": scrollIntoTab.value,
-            "tabset-labels": __props.tabSetLabels,
-            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"])
-        ]),
-        vue.createElementVNode("div", _hoisted_3, [
-          __props.showSearch ? (vue.openBlock(), vue.createBlock(emoji_search.default, {
-            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.default, {
-            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,
-            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.default, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
-          vue.createVNode(emoji_skin_selector.default, {
-            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;
-exports.default = DtEmojiPicker;
-//# sourceMappingURL=emoji_picker.vue.cjs.map

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

@@ -1 +0,0 @@
-{"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        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch\n          ? $refs.searchInputRef.focusSearchInput()\n          : $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        @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);\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 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;AAE3B,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,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,228 +0,0 @@
-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 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 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,
-            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"])
-        ]),
-        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,
-            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