@dialpad/dialtone 9.140.0 → 9.140.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/tokens/doc.json +61544 -61544
  2. package/dist/vue2/lib/emoji-picker/emoji-picker.cjs +1 -1
  3. package/dist/vue2/lib/emoji-picker/emoji-picker.cjs.map +1 -1
  4. package/dist/vue2/lib/emoji-picker/emoji-picker.js +1 -2
  5. package/dist/vue2/lib/emoji-picker/emoji-picker.js.map +1 -1
  6. package/dist/vue3/lib/emoji-picker/emoji-picker.cjs +1 -1
  7. package/dist/vue3/lib/emoji-picker/emoji-picker.cjs.map +1 -1
  8. package/dist/vue3/lib/emoji-picker/emoji-picker.js +26 -26
  9. package/dist/vue3/lib/emoji-picker/emoji-picker.js.map +1 -1
  10. package/package.json +3 -3
package/dist/vue2/lib/emoji-picker/emoji-picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"emoji-picker.js","sources":["../../../components/emoji_picker/modules/emoji_tabset.vue","../../../components/emoji_picker/modules/emoji_search.vue","../../../components/emoji_picker/modules/emoji_selector.vue","../../../components/emoji_picker/modules/emoji_description.vue","../../../components/emoji_picker/modules/emoji_skin_selector.vue","../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n :selected=\"selectedTab\"\n size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :key=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :label=\"tab.label\"\n :panel-id=\"tab.panelId\"\n :tabindex=\"index + 1\"\n aria-controls=\"d-emoji-picker-list\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n >\n <component\n :is=\"tab.icon\"\n size=\"400\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport {\n DtIconClock,\n DtIconSatisfied,\n DtIconLivingThing,\n DtIconFood,\n DtIconObject,\n DtIconTransportation,\n DtIconLightbulb,\n DtIconHeart,\n DtIconFlag,\n DtIconTiktok,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n },\n\n props: {\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n showCustomEmojisTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: this.tabSetLabels[0], icon: DtIconClock },\n { label: this.tabSetLabels[1], icon: DtIconSatisfied },\n { label: this.tabSetLabels[2], icon: DtIconLivingThing },\n { label: this.tabSetLabels[3], icon: DtIconFood },\n { label: this.tabSetLabels[4], icon: DtIconObject },\n { label: this.tabSetLabels[5], icon: DtIconTransportation },\n { label: this.tabSetLabels[6], icon: DtIconLightbulb },\n { label: this.tabSetLabels[7], icon: DtIconHeart },\n { label: this.tabSetLabels[8], icon: DtIconFlag },\n { label: this.tabSetLabels[9], icon: DtIconTiktok },\n ],\n };\n },\n\n computed: {\n tabs () {\n // if showRecentlyUsedTab is false remove first index of TABS_DATA\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n // if showCustomEmojisTab is false remove last index of TABS_DATA\n if (!this.showCustomEmojisTab) {\n tabsData.pop();\n }\n\n return tabsData.map((tab, index) => ({\n ...tab,\n // IDs on dt-tab component need to be on string\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIconSearch,\n DtIconClose,\n DtButton,\n },\n\n props: {\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n modelValue: {\n type: String,\n default: '',\n },\n },\n\n mounted () {\n this.focusSearchInput();\n },\n\n methods: {\n updateModelValue (value) {\n this.$emit('update:model-value', value);\n },\n\n focusEmojiSelector () {\n this.$emit('focus-emoji-selector');\n },\n\n focusTabset () {\n this.$emit('focus-tabset');\n },\n\n selectFirstEmoji () {\n this.$emit('select-first-emoji');\n },\n\n clearSearch () {\n this.$emit('update:model-value', '');\n this.focusSearchInput();\n },\n\n focusSearchInput () {\n this.$refs.searchInputRef.focus();\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-emoji-picker__selector\"\n >\n <div\n id=\"d-emoji-picker-list\"\n ref=\"listRef\"\n class=\"d-emoji-picker__list\"\n >\n <p\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n >\n {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n </p>\n <div\n v-else\n ref=\"tabCategoryRef\"\n class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n >\n <p>\n {{ fixedLabel }}\n </p>\n </div>\n <div\n v-for=\"(tabLabel, indexTab) in tabLabels\"\n v-show=\"!emojiFilter\"\n :key=\"indexTab\"\n :ref=\"`tabLabelRef-${indexTab}`\"\n class=\"d-emoji-picker__alignment\"\n >\n <p\n v-if=\"indexTab\"\n >\n {{ tabLabel.label }}\n </p>\n <div\n class=\"d-emoji-picker__tab\"\n >\n <button\n v-for=\"(emoji, indexEmoji) in\n (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n :key=\"emoji.shortname\"\n :ref=\"`emojiRef-${indexTab}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"$emit('highlighted-emoji', emoji)\"\n @mouseleave=\"$emit('highlighted-emoji', null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"`filteredEmoji-${index}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"hoverEmoji(emoji)\"\n @mouseleave=\"hoverEmoji(null)\"\n @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n >\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojisImported } from '@dialpad/dialtone-emojis';\nimport { CDN_URL, EMOJIS_PER_ROW } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSelector',\n\n props: {\n emojiFilter: {\n type: String,\n default: '',\n },\n\n skinTone: {\n type: String,\n required: true,\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n customEmojis: {\n type: Array,\n default: () => [],\n },\n },\n\n data () {\n return {\n tabLabelsRefs: [],\n emojiRefs: [],\n emojiFilteredRefs: [],\n isFiltering: false,\n hoverFirstEmoji: true,\n fixedLabel: '',\n filteredEmojis: [],\n TABS_DATA: ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'],\n tabLabelObserver: null,\n };\n },\n\n computed: {\n /* eslint-disable-next-line complexity */\n currentEmojis () {\n return [\n ...this.emojis[`People${this.skinTone}`] || [],\n ...this.emojis.Nature || [],\n ...this.emojis.Food || [],\n ...this.emojis[`Activity${this.skinTone}`] || [],\n ...this.emojis.Travel || [],\n ...this.emojis[`Objects${this.skinTone}`] || [],\n ...this.emojis.Symbols || [],\n ...this.emojis.Flags || [],\n ];\n },\n\n emojis () {\n return emojisImported;\n },\n\n CDN_URL () {\n return CDN_URL;\n },\n\n tabLabels () {\n let updateTabLabels = this.tabSetLabels.map((label) => ({ label }));\n\n if (!this.recentlyUsedEmojis.length) {\n updateTabLabels = this.tabSetLabels.slice(1).map((label) => ({ label }));\n }\n\n if (!this.customEmojis.length) {\n updateTabLabels.pop();\n }\n\n return updateTabLabels;\n },\n\n tabs () {\n const updateTabsOrder = this.recentlyUsedEmojis.length ? this.TABS_DATA.slice() : this.TABS_DATA.slice(1);\n\n if (!this.customEmojis.length) {\n updateTabsOrder.pop();\n }\n\n return updateTabsOrder;\n },\n },\n\n watch: {\n currentEmojis: {\n handler () {\n this.searchByNameAndKeywords();\n },\n\n immediate: true,\n },\n\n recentlyUsedEmojis: {\n handler (newValue) {\n this.emojis['Recently used'] = newValue;\n },\n\n immediate: true,\n },\n\n customEmojis: {\n handler (newValue) {\n this.emojis.Custom = newValue;\n },\n\n immediate: true,\n },\n\n emojiFilter: {\n handler (newFilter) {\n this.resetScroll();\n if (newFilter) {\n this.isFiltering = true;\n } else {\n this.isFiltering = false;\n this.$emit('highlighted-emoji', null);\n }\n\n this.debouncedSearch();\n },\n },\n\n selectedTabset: {\n handler (newValue) {\n this.scrollToTab(newValue.tabId);\n },\n\n deep: true,\n },\n },\n\n created () {\n this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setupEmojiRefs();\n this.setupFilteredRefs();\n this.setupTabLabelRefs();\n this.setTabLabelObserver();\n this.setBottomScrollListener();\n });\n },\n\n beforeDestroy () {\n if (this.tabLabelObserver) {\n this.tabLabelObserver.disconnect();\n }\n\n if (this.$refs.listRef && this.handleScroll) {\n this.$refs.listRef.removeEventListener('scroll', this.handleScroll);\n }\n },\n\n methods: {\n setupTabLabelRefs () {\n this.tabSetLabels?.forEach((_, index) => {\n const refKey = `tabLabelRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabLabelsRefs, index, { ref: this.$refs[refKey] });\n }\n });\n },\n\n setupFilteredRefs () {\n // it is necessary to clean the array before setting the new refs\n this.emojiFilteredRefs = [];\n\n this.filteredEmojis.forEach((emoji, index) => {\n const refKey = `filteredEmoji-${index}`;\n if (this.$refs[refKey]) {\n this.setFilteredRef(this.$refs[refKey], index);\n }\n });\n },\n\n setupEmojiRefs () {\n for (let i = 0; i < this.tabs.length; i++) {\n const refKey = `emojiRef-${i}`;\n if (this.$refs[refKey]) {\n this.$refs[refKey].forEach((el, indexEmoji) => {\n if (el) {\n this.setEmojiRef(el, i, indexEmoji);\n }\n });\n }\n }\n },\n\n searchByNameAndKeywords () {\n const searchStr = this.emojiFilter.toLowerCase();\n this.filteredEmojis = this.currentEmojis.filter(function (obj) {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(function (keyword) {\n return keyword.toLowerCase().includes(searchStr);\n });\n return nameIncludesSearchStr || keywordsIncludeSearchStr;\n });\n this.$nextTick(function () {\n if (searchStr) {\n this.hoverEmoji(this.filteredEmojis[0], true);\n this.setupFilteredRefs();\n }\n });\n },\n\n debounce: function (fn, delay) {\n if (delay === undefined) { delay = 300; }\n let timeout;\n return function () {\n const args = []; let len = arguments.length;\n while (len--) args[len] = arguments[len];\n\n clearTimeout(timeout);\n timeout = setTimeout(function () {\n fn.apply(undefined, args);\n }, delay);\n };\n },\n\n getImgSrc: function (emoji) {\n // TODO Update json structure to have a property for custom emojis and avoid using date_added\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return this.CDN_URL + emoji.unicode_character + '.png';\n }\n },\n\n handleImageError: function (event) {\n event.target.parentNode.style.display = 'none';\n },\n\n scrollToTab: function (tabIndex, focusFirstEmoji) {\n const vm = this;\n if (focusFirstEmoji === undefined) { focusFirstEmoji = true; }\n const tabElement = vm.tabLabelsRefs[tabIndex - 1].ref[0];\n\n vm.$nextTick(function () {\n const container = vm.$refs.listRef;\n const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n vm.focusEmoji(tabIndex - 1, 0);\n }\n });\n },\n\n resetScroll: function () {\n const container = this.$refs.listRef;\n container.scrollTop = 0;\n },\n\n focusEmojiSelector: function () {\n this.focusEmoji(0, 0);\n },\n\n hoverEmoji (emoji, isFirst) {\n if (isFirst === undefined) { isFirst = false; }\n this.hoverFirstEmoji = isFirst;\n this.$emit('highlighted-emoji', emoji);\n },\n\n setEmojiRef: function (el, indexTab, indexEmoji) {\n if (!this.emojiRefs[indexTab]) {\n this.$set(this.emojiRefs, indexTab, []);\n }\n this.$set(this.emojiRefs[indexTab], indexEmoji, el);\n },\n\n setFilteredRef: function (el, index) {\n this.$set(this.emojiFilteredRefs, index, el);\n },\n\n focusEmoji: function (indexTab, indexEmoji) {\n // eslint-disable-next-line max-len\n const emojiRef = this.isFiltering ? this.emojiFilteredRefs[indexEmoji]?.[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown: function (event, indexTab, indexEmoji, emoji) {\n event.preventDefault();\n\n if (event.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 - (this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.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 (!this.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 = this.emojiRefs[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!this.focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.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 (this.emojiRefs?.[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 this.focusEmoji(indexTab, this.emojiRefs[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 (!this.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 (!this.focusEmoji(0, position)) {\n this.focusEmoji(0, this.emojiRefs[0].length - 1);\n }\n }\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n if (this.focusEmoji(indexTab + 1, 0)) {\n this.scrollToTab((indexTab + 1) + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n this.$emit('focus-skin-selector');\n }\n }\n\n if (event.key === 'Tab' && event.shiftKey) {\n if (this.focusEmoji(indexTab, 0) && indexTab > 0) {\n this.scrollToTab(indexTab, true);\n } else {\n this.scrollToTab(1, false);\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n /* eslint-disable-next-line complexity */\n handleHorizontalNavigation: function (direction, indexTab, indexEmoji) {\n if (this.isFiltering) {\n if (direction === 'left') {\n this.handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n this.handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRight(indexTab, indexEmoji);\n }\n }\n },\n\n handleArrowLeftFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji - 1)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n },\n\n handleArrowRightFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji + 1)) {\n this.focusEmoji(0, 0);\n }\n },\n\n handleArrowLeft: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji - 1)) {\n if (this.emojiRefs[indexTab - 1]) {\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n } else {\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);\n }\n }\n },\n\n handleArrowRight: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji + 1)) {\n if (!this.focusEmoji(indexTab + 1, 0)) {\n this.focusEmoji(0, 0);\n }\n }\n },\n\n handleEmojiSelection (emoji, event) {\n this.$emit('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n },\n\n // @TODO(improvement): Sync with simplified Vue 3 version\n /* eslint-disable-next-line complexity */\n handleKeyDownFilteredEmojis (event, indexEmoji, emoji) {\n event.preventDefault();\n this.hoverFirstEmoji = false;\n\n if (event.key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n if (!this.focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n const lastEmojiPosition =\n this.emojiFilteredRefs.length - (this.emojiFilteredRefs.length % EMOJIS_PER_ROW) + position;\n\n this.focusEmoji(0, lastEmojiPosition);\n\n if (!this.focusEmoji(0, lastEmojiPosition)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (this.emojiFilteredRefs?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n } else {\n this.focusEmoji(0, position);\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', 0, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', 0, indexEmoji);\n }\n\n if (event.key === 'Tab') {\n this.$emit('focus-skin-selector');\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n setBottomScrollListener () {\n this.handleScroll = () => {\n const container = this.$refs.listRef;\n if (container.scrollTop + container.clientHeight >= container.scrollHeight) {\n this.$emit('scroll-bottom-reached');\n }\n };\n\n this.$refs.listRef.addEventListener('scroll', this.handleScroll);\n },\n\n setTabLabelObserver () {\n this.tabLabelObserver = new IntersectionObserver(entries => {\n /* eslint-disable-next-line complexity */\n entries.forEach(entry => {\n const { target } = entry;\n const index = parseInt(target.dataset.index);\n\n if (entry.isIntersecting && target.offsetTop <= this.$refs.tabCategoryRef?.offsetTop + 50) {\n this.fixedLabel = this.tabLabels[index - 1]?.label ?? this.tabLabels[0]?.label;\n this.$emit('scroll-into-tab', index - 1);\n } else if (entry.boundingClientRect.bottom <= this.$refs.tabCategoryRef?.getBoundingClientRect().bottom) {\n this.$emit('scroll-into-tab', index);\n this.fixedLabel = this.tabLabels[index]?.label;\n } else if (index === 1) {\n this.$emit('scroll-into-tab', index);\n this.fixedLabel = this.tabLabels[0]?.label;\n }\n });\n });\n\n this.tabLabelObserver.observe(this.$refs.tabCategoryRef);\n\n Array.from(this.$refs.listRef.children).forEach((child, index) => {\n this.tabLabelObserver.observe(child);\n child.dataset.index = index;\n });\n },\n\n focusLastEmoji () {\n this.scrollToTab(this.tabs.length, true);\n },\n\n },\n\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__data\">\n <img\n v-if=\"emoji\"\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n >\n <div>{{ emoji?.name }}</div>\n </div>\n</template>\n\n<script>\nimport { CDN_URL } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiDescription',\n\n props: {\n /**\n * Emoji data\n * @type {Object}\n * @default null\n */\n emoji: {\n type: Object,\n default: () => null,\n },\n },\n\n data () {\n return {\n CDN_URL,\n };\n },\n\n methods: {\n getImgSrc (emoji) {\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return `${CDN_URL + emoji.unicode_character}.png`;\n }\n },\n },\n};\n</script>\n","<template>\n <div data-qa=\"skin-selector\">\n <div\n v-show=\"isOpen\"\n class=\"d-emoji-picker__skin-list\"\n >\n <button\n v-for=\"(skin, index) in skinList\"\n :key=\"skin.name\"\n :ref=\"`skinRef-${index}`\"\n :class=\"{\n 'selected': skinSelected?.skinCode === skin.skinCode,\n }\"\n @click=\"selectSkin(skin)\"\n @keydown=\"event => handleKeyDown(event, skin, index)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skin.name\"\n :aria-label=\"skin.name\"\n :title=\"skin.name\"\n :src=\"`${cdnUrl + skin.unicode_output}.png`\"\n >\n </button>\n </div>\n <div\n v-show=\"!isOpen\"\n class=\"d-emoji-picker__skin-selected\"\n >\n <dt-tooltip placement=\"top-end\">\n {{ skinSelectorButtonTooltipLabel }}\n <template #anchor>\n <button\n ref=\"skinSelectorRef\"\n :aria-label=\"skinSelectorButtonTooltipLabel\"\n tabindex=\"-1\"\n @click=\"toggleSkinList\"\n @keydown=\"event => handleKeyDown(event)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skinSelected?.name\"\n :aria-label=\"skinSelected?.name\"\n :title=\"skinSelected?.name\"\n :src=\"`${cdnUrl + skinSelected?.unicode_output}.png`\"\n >\n </button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n</template>\n\n<script>\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSkinSelector',\n\n components: {\n DtTooltip,\n },\n\n props: {\n skinTone: {\n type: String,\n required: true,\n },\n\n isHovering: {\n type: Boolean,\n default: false,\n },\n\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n },\n\n data () {\n return {\n isOpen: false,\n skinSelected: null,\n skinsRef: [],\n cdnUrl: CDN_URL,\n };\n },\n\n computed: {\n skinPassedIn () {\n return this.skinList.find(skin => skin.skinTone === this.skinTone);\n },\n\n skinList () {\n return [\n {\n name: ':wave_tone1:',\n unicode_output: '1f44b-1f3fb',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n skinCode: '_tone1',\n },\n {\n name: ':wave_tone2:',\n unicode_output: '1f44b-1f3fc',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n skinCode: '_tone2',\n },\n {\n name: ':wave_tone3:',\n unicode_output: '1f44b-1f3fd',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n skinCode: '_tone3',\n },\n {\n name: ':wave_tone4:',\n unicode_output: '1f44b-1f3fe',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n skinCode: '_tone4',\n },\n {\n name: ':wave_tone5:',\n unicode_output: '1f44b-1f3ff',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n skinCode: '_tone5',\n },\n {\n name: ':wave:',\n unicode_output: '1f44b',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n skinCode: '',\n },\n ];\n },\n },\n\n watch: {\n isHovering (newVal) {\n if (newVal) {\n this.isOpen = false;\n }\n },\n\n skinTone (newVal, oldVal) {\n if (newVal !== oldVal) {\n this.skinSelected = this.skinPassedIn;\n }\n },\n },\n\n mounted () {\n this.skinSelected = this.skinPassedIn;\n this.$nextTick(() => {\n this.setupSkinRefs();\n });\n },\n\n methods: {\n setupSkinRefs () {\n this.skinList.forEach((skin, index) => {\n const refKey = `skinRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.skinsRef, index, this.$refs[refKey][0]);\n }\n });\n },\n\n focusSkinSelector () {\n if (this.$refs.skinSelectorRef) {\n this.$refs.skinSelectorRef.focus();\n }\n },\n\n selectSkin (skin) {\n this.skinSelected = skin;\n this.isOpen = false;\n this.$emit('skin-tone', skin.skinTone);\n this.$nextTick(() => {\n this.focusSkinSelector();\n });\n },\n\n handleKeyDown (event, skin, index) {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n if (index === 0) this.skinsRef[this.skinsRef.length - 1]?.focus();\n this.skinsRef[index - 1]?.focus();\n }\n\n if (event.key === 'ArrowRight') {\n if (this.skinsRef.length) this.skinsRef[0]?.focus();\n this.skinsRef[index + 1]?.focus();\n }\n\n if (event.key === 'Enter') {\n if (skin) { this.selectSkin(skin); } else {\n this.toggleSkinList();\n }\n }\n\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n this.$emit('focus-last-emoji');\n } else {\n this.$emit('focus-tabset');\n }\n }\n },\n\n toggleSkinList () {\n this.isOpen = !this.isOpen;\n this.$nextTick(() => {\n if (this.skinsRef[0]) {\n this.skinsRef[0].focus();\n }\n });\n },\n },\n};\n</script>\n","<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-custom-emojis-tab=\"showCustomEmojisTab\"\n :show-recently-used-tab=\"showRecentlyUsedTab\"\n :scroll-into-tab=\"scrollIntoTab\"\n :tab-set-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.native=\"$emit('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--body\">\n <emoji-search\n v-if=\"showSearch\"\n ref=\"searchInputRef\"\n :model-value=\"internalSearchQuery\"\n :search-placeholder-label=\"searchPlaceholderLabel\"\n @update:model-value=\"newValue => internalSearchQuery = newValue\"\n @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n <emoji-selector\n ref=\"emojiSelectorRef\"\n :emoji-filter=\"internalSearchQuery\"\n :skin-tone=\"skinTone\"\n :tab-set-labels=\"tabSetLabels\"\n :search-results-label=\"searchResultsLabel\"\n :search-no-results-label=\"searchNoResultsLabel\"\n :recently-used-emojis=\"recentlyUsedEmojis\"\n :custom-emojis=\"customEmojis\"\n :selected-tabset=\"selectedTabset\"\n @scroll-into-tab=\"updateScrollIntoTab\"\n @highlighted-emoji=\"updateHighlightedEmoji\"\n @selected-emoji=\"$emit('selected-emoji', $event)\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n @keydown.esc.native=\"$emit('close')\"\n @scroll-bottom-reached=\"$emit('scroll-bottom-reached')\"\n />\n </div>\n <div class=\"d-emoji-picker--footer\">\n <dt-button\n v-if=\"showAddEmojiButton && !highlightedEmoji\"\n importance=\"outlined\"\n :aria-label=\"addEmojiLabel\"\n class=\"d-emoji-picker__add-emoji\"\n @click=\"$emit('add-emoji')\"\n >\n {{ addEmojiLabel }}\n </dt-button>\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=\"$emit('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport { DtButton } from '../button';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtEmojiPicker',\n\n components: {\n EmojiTabset,\n EmojiSearch,\n EmojiSelector,\n EmojiDescription,\n EmojiSkinSelector,\n DtButton,\n },\n\n props: {\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 array with custom emojis object\n * This list is necessary to fill the custom tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n */\n customEmojis: {\n type: Array,\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 * 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 /**\n * Shows the add emoji button in the footer when no emoji is highlighted\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-add-emoji-button=\"true\" />\n */\n showAddEmojiButton: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n internalSearchQuery: this.searchQuery,\n highlightedEmoji: null,\n selectedTabset: {},\n scrollIntoTab: 0,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n showCustomEmojisTab () {\n return this.customEmojis?.length > 0;\n },\n\n showRecentlyUsedTab () {\n return this.recentlyUsedEmojis?.length > 0;\n },\n\n tabSetLabels () {\n return [\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n ];\n },\n\n searchPlaceholderLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\n },\n\n searchResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\n },\n\n searchNoResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\n },\n\n skinSelectorButtonTooltipLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\n },\n\n addEmojiLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n },\n },\n\n watch: {\n searchQuery (value) {\n this.internalSearchQuery = value;\n },\n },\n\n methods: {\n scrollToSelectedTabset (tabId) {\n this.internalSearchQuery = '';\n this.selectedTabset = { ...this.selectedTabset, tabId };\n },\n\n updateScrollIntoTab (value) {\n this.scrollIntoTab = value;\n },\n\n updateHighlightedEmoji (emoji) {\n this.highlightedEmoji = emoji;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTabGroup","DtTab","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","DtIconTiktok","tabsData","tab","index","newVal","id","parseId","skin","refKey","event","tabId","DtInput","DtIconSearch","DtIconClose","DtButton","value","emojisImported","CDN_URL","updateTabLabels","label","updateTabsOrder","newValue","newFilter","_a","_","emoji","i","el","indexEmoji","searchStr","obj","nameIncludesSearchStr","keywordsIncludeSearchStr","keyword","fn","delay","timeout","args","len","tabIndex","focusFirstEmoji","vm","tabElement","container","offsetTop","isFirst","indexTab","emojiRef","position","EMOJIS_PER_ROW","numberOfMissingEmojis","emojiToJump","previousTab","emojisInPreviousTab","lastEmojiPosition","_b","direction","entries","entry","target","_c","_d","_e","_f","child","DtTooltip","EMOJI_PICKER_SKIN_TONE_MODIFIERS","oldVal","EmojiTabset","EmojiSearch","EmojiSelector","EmojiDescription","EmojiSkinSelector","DialtoneLocalization"],"mappings":"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"}
1
+ {"version":3,"file":"emoji-picker.js","sources":["../../../components/emoji_picker/modules/emoji_tabset.vue","../../../components/emoji_picker/modules/emoji_search.vue","../../../components/emoji_picker/modules/emoji_selector.vue","../../../components/emoji_picker/modules/emoji_description.vue","../../../components/emoji_picker/modules/emoji_skin_selector.vue","../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n :selected=\"selectedTab\"\n size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :key=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :label=\"tab.label\"\n :panel-id=\"tab.panelId\"\n :tabindex=\"index + 1\"\n aria-controls=\"d-emoji-picker-list\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n >\n <component\n :is=\"tab.icon\"\n size=\"400\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport {\n DtIconClock,\n DtIconSatisfied,\n DtIconLivingThing,\n DtIconFood,\n DtIconObject,\n DtIconTransportation,\n DtIconLightbulb,\n DtIconHeart,\n DtIconFlag,\n DtIconDialpadStar,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n },\n\n props: {\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n showCustomEmojisTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: this.tabSetLabels[0], icon: DtIconClock },\n { label: this.tabSetLabels[1], icon: DtIconSatisfied },\n { label: this.tabSetLabels[2], icon: DtIconLivingThing },\n { label: this.tabSetLabels[3], icon: DtIconFood },\n { label: this.tabSetLabels[4], icon: DtIconObject },\n { label: this.tabSetLabels[5], icon: DtIconTransportation },\n { label: this.tabSetLabels[6], icon: DtIconLightbulb },\n { label: this.tabSetLabels[7], icon: DtIconHeart },\n { label: this.tabSetLabels[8], icon: DtIconFlag },\n { label: this.tabSetLabels[9], icon: DtIconDialpadStar },\n ],\n };\n },\n\n computed: {\n tabs () {\n // if showRecentlyUsedTab is false remove first index of TABS_DATA\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n // if showCustomEmojisTab is false remove last index of TABS_DATA\n if (!this.showCustomEmojisTab) {\n tabsData.pop();\n }\n\n return tabsData.map((tab, index) => ({\n ...tab,\n // IDs on dt-tab component need to be on string\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n \n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIconSearch,\n DtIconClose,\n DtButton,\n },\n\n props: {\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n modelValue: {\n type: String,\n default: '',\n },\n },\n\n mounted () {\n this.focusSearchInput();\n },\n\n methods: {\n updateModelValue (value) {\n this.$emit('update:model-value', value);\n },\n\n focusEmojiSelector () {\n this.$emit('focus-emoji-selector');\n },\n\n focusTabset () {\n this.$emit('focus-tabset');\n },\n\n selectFirstEmoji () {\n this.$emit('select-first-emoji');\n },\n\n clearSearch () {\n this.$emit('update:model-value', '');\n this.focusSearchInput();\n },\n\n focusSearchInput () {\n this.$refs.searchInputRef.focus();\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-emoji-picker__selector\"\n >\n <div\n id=\"d-emoji-picker-list\"\n ref=\"listRef\"\n class=\"d-emoji-picker__list\"\n >\n <p\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n >\n {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n </p>\n <div\n v-else\n ref=\"tabCategoryRef\"\n class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n >\n <p>\n {{ fixedLabel }}\n </p>\n </div>\n <div\n v-for=\"(tabLabel, indexTab) in tabLabels\"\n v-show=\"!emojiFilter\"\n :key=\"indexTab\"\n :ref=\"`tabLabelRef-${indexTab}`\"\n class=\"d-emoji-picker__alignment\"\n >\n <p\n v-if=\"indexTab\"\n >\n {{ tabLabel.label }}\n </p>\n <div\n class=\"d-emoji-picker__tab\"\n >\n <button\n v-for=\"(emoji, indexEmoji) in\n (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n :key=\"emoji.shortname\"\n :ref=\"`emojiRef-${indexTab}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"$emit('highlighted-emoji', emoji)\"\n @mouseleave=\"$emit('highlighted-emoji', null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"`filteredEmoji-${index}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"hoverEmoji(emoji)\"\n @mouseleave=\"hoverEmoji(null)\"\n @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n >\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojisImported } from '@dialpad/dialtone-emojis';\nimport { CDN_URL, EMOJIS_PER_ROW } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSelector',\n\n props: {\n emojiFilter: {\n type: String,\n default: '',\n },\n\n skinTone: {\n type: String,\n required: true,\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n customEmojis: {\n type: Array,\n default: () => [],\n },\n },\n\n data () {\n return {\n tabLabelsRefs: [],\n emojiRefs: [],\n emojiFilteredRefs: [],\n isFiltering: false,\n hoverFirstEmoji: true,\n fixedLabel: '',\n filteredEmojis: [],\n TABS_DATA: ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'],\n tabLabelObserver: null,\n };\n },\n\n computed: {\n /* eslint-disable-next-line complexity */\n currentEmojis () {\n return [\n ...this.emojis[`People${this.skinTone}`] || [],\n ...this.emojis.Nature || [],\n ...this.emojis.Food || [],\n ...this.emojis[`Activity${this.skinTone}`] || [],\n ...this.emojis.Travel || [],\n ...this.emojis[`Objects${this.skinTone}`] || [],\n ...this.emojis.Symbols || [],\n ...this.emojis.Flags || [],\n ];\n },\n\n emojis () {\n return emojisImported;\n },\n\n CDN_URL () {\n return CDN_URL;\n },\n\n tabLabels () {\n let updateTabLabels = this.tabSetLabels.map((label) => ({ label }));\n\n if (!this.recentlyUsedEmojis.length) {\n updateTabLabels = this.tabSetLabels.slice(1).map((label) => ({ label }));\n }\n\n if (!this.customEmojis.length) {\n updateTabLabels.pop();\n }\n\n return updateTabLabels;\n },\n\n tabs () {\n const updateTabsOrder = this.recentlyUsedEmojis.length ? this.TABS_DATA.slice() : this.TABS_DATA.slice(1);\n\n if (!this.customEmojis.length) {\n updateTabsOrder.pop();\n }\n\n return updateTabsOrder;\n },\n },\n\n watch: {\n currentEmojis: {\n handler () {\n this.searchByNameAndKeywords();\n },\n\n immediate: true,\n },\n\n recentlyUsedEmojis: {\n handler (newValue) {\n this.emojis['Recently used'] = newValue;\n },\n\n immediate: true,\n },\n\n customEmojis: {\n handler (newValue) {\n this.emojis.Custom = newValue;\n },\n\n immediate: true,\n },\n\n emojiFilter: {\n handler (newFilter) {\n this.resetScroll();\n if (newFilter) {\n this.isFiltering = true;\n } else {\n this.isFiltering = false;\n this.$emit('highlighted-emoji', null);\n }\n\n this.debouncedSearch();\n },\n },\n\n selectedTabset: {\n handler (newValue) {\n this.scrollToTab(newValue.tabId);\n },\n\n deep: true,\n },\n },\n\n created () {\n this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setupEmojiRefs();\n this.setupFilteredRefs();\n this.setupTabLabelRefs();\n this.setTabLabelObserver();\n this.setBottomScrollListener();\n });\n },\n\n beforeDestroy () {\n if (this.tabLabelObserver) {\n this.tabLabelObserver.disconnect();\n }\n\n if (this.$refs.listRef && this.handleScroll) {\n this.$refs.listRef.removeEventListener('scroll', this.handleScroll);\n }\n },\n\n methods: {\n setupTabLabelRefs () {\n this.tabSetLabels?.forEach((_, index) => {\n const refKey = `tabLabelRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabLabelsRefs, index, { ref: this.$refs[refKey] });\n }\n });\n },\n\n setupFilteredRefs () {\n // it is necessary to clean the array before setting the new refs\n this.emojiFilteredRefs = [];\n\n this.filteredEmojis.forEach((emoji, index) => {\n const refKey = `filteredEmoji-${index}`;\n if (this.$refs[refKey]) {\n this.setFilteredRef(this.$refs[refKey], index);\n }\n });\n },\n\n setupEmojiRefs () {\n for (let i = 0; i < this.tabs.length; i++) {\n const refKey = `emojiRef-${i}`;\n if (this.$refs[refKey]) {\n this.$refs[refKey].forEach((el, indexEmoji) => {\n if (el) {\n this.setEmojiRef(el, i, indexEmoji);\n }\n });\n }\n }\n },\n\n searchByNameAndKeywords () {\n const searchStr = this.emojiFilter.toLowerCase();\n this.filteredEmojis = this.currentEmojis.filter(function (obj) {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(function (keyword) {\n return keyword.toLowerCase().includes(searchStr);\n });\n return nameIncludesSearchStr || keywordsIncludeSearchStr;\n });\n this.$nextTick(function () {\n if (searchStr) {\n this.hoverEmoji(this.filteredEmojis[0], true);\n this.setupFilteredRefs();\n }\n });\n },\n\n debounce: function (fn, delay) {\n if (delay === undefined) { delay = 300; }\n let timeout;\n return function () {\n const args = []; let len = arguments.length;\n while (len--) args[len] = arguments[len];\n\n clearTimeout(timeout);\n timeout = setTimeout(function () {\n fn.apply(undefined, args);\n }, delay);\n };\n },\n\n getImgSrc: function (emoji) {\n // TODO Update json structure to have a property for custom emojis and avoid using date_added\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return this.CDN_URL + emoji.unicode_character + '.png';\n }\n },\n\n handleImageError: function (event) {\n event.target.parentNode.style.display = 'none';\n },\n\n scrollToTab: function (tabIndex, focusFirstEmoji) {\n const vm = this;\n if (focusFirstEmoji === undefined) { focusFirstEmoji = true; }\n const tabElement = vm.tabLabelsRefs[tabIndex - 1].ref[0];\n\n vm.$nextTick(function () {\n const container = vm.$refs.listRef;\n const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n vm.focusEmoji(tabIndex - 1, 0);\n }\n });\n },\n\n resetScroll: function () {\n const container = this.$refs.listRef;\n container.scrollTop = 0;\n },\n\n focusEmojiSelector: function () {\n this.focusEmoji(0, 0);\n },\n\n hoverEmoji (emoji, isFirst) {\n if (isFirst === undefined) { isFirst = false; }\n this.hoverFirstEmoji = isFirst;\n this.$emit('highlighted-emoji', emoji);\n },\n\n setEmojiRef: function (el, indexTab, indexEmoji) {\n if (!this.emojiRefs[indexTab]) {\n this.$set(this.emojiRefs, indexTab, []);\n }\n this.$set(this.emojiRefs[indexTab], indexEmoji, el);\n },\n\n setFilteredRef: function (el, index) {\n this.$set(this.emojiFilteredRefs, index, el);\n },\n\n focusEmoji: function (indexTab, indexEmoji) {\n // eslint-disable-next-line max-len\n const emojiRef = this.isFiltering ? this.emojiFilteredRefs[indexEmoji]?.[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown: function (event, indexTab, indexEmoji, emoji) {\n event.preventDefault();\n\n if (event.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 - (this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.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 (!this.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 = this.emojiRefs[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!this.focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.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 (this.emojiRefs?.[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 this.focusEmoji(indexTab, this.emojiRefs[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 (!this.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 (!this.focusEmoji(0, position)) {\n this.focusEmoji(0, this.emojiRefs[0].length - 1);\n }\n }\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n if (this.focusEmoji(indexTab + 1, 0)) {\n this.scrollToTab((indexTab + 1) + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n this.$emit('focus-skin-selector');\n }\n }\n\n if (event.key === 'Tab' && event.shiftKey) {\n if (this.focusEmoji(indexTab, 0) && indexTab > 0) {\n this.scrollToTab(indexTab, true);\n } else {\n this.scrollToTab(1, false);\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n /* eslint-disable-next-line complexity */\n handleHorizontalNavigation: function (direction, indexTab, indexEmoji) {\n if (this.isFiltering) {\n if (direction === 'left') {\n this.handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n this.handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRight(indexTab, indexEmoji);\n }\n }\n },\n\n handleArrowLeftFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji - 1)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n },\n\n handleArrowRightFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji + 1)) {\n this.focusEmoji(0, 0);\n }\n },\n\n handleArrowLeft: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji - 1)) {\n if (this.emojiRefs[indexTab - 1]) {\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n } else {\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);\n }\n }\n },\n\n handleArrowRight: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji + 1)) {\n if (!this.focusEmoji(indexTab + 1, 0)) {\n this.focusEmoji(0, 0);\n }\n }\n },\n\n handleEmojiSelection (emoji, event) {\n this.$emit('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n },\n\n // @TODO(improvement): Sync with simplified Vue 3 version\n /* eslint-disable-next-line complexity */\n handleKeyDownFilteredEmojis (event, indexEmoji, emoji) {\n event.preventDefault();\n this.hoverFirstEmoji = false;\n\n if (event.key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n if (!this.focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n const lastEmojiPosition =\n this.emojiFilteredRefs.length - (this.emojiFilteredRefs.length % EMOJIS_PER_ROW) + position;\n\n this.focusEmoji(0, lastEmojiPosition);\n\n if (!this.focusEmoji(0, lastEmojiPosition)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (this.emojiFilteredRefs?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n } else {\n this.focusEmoji(0, position);\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', 0, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', 0, indexEmoji);\n }\n\n if (event.key === 'Tab') {\n this.$emit('focus-skin-selector');\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n setBottomScrollListener () {\n this.handleScroll = () => {\n const container = this.$refs.listRef;\n if (container.scrollTop + container.clientHeight >= container.scrollHeight) {\n this.$emit('scroll-bottom-reached');\n }\n };\n\n this.$refs.listRef.addEventListener('scroll', this.handleScroll);\n },\n\n setTabLabelObserver () {\n this.tabLabelObserver = new IntersectionObserver(entries => {\n /* eslint-disable-next-line complexity */\n entries.forEach(entry => {\n const { target } = entry;\n const index = parseInt(target.dataset.index);\n\n if (entry.isIntersecting && target.offsetTop <= this.$refs.tabCategoryRef?.offsetTop + 50) {\n this.fixedLabel = this.tabLabels[index - 1]?.label ?? this.tabLabels[0]?.label;\n this.$emit('scroll-into-tab', index - 1);\n } else if (entry.boundingClientRect.bottom <= this.$refs.tabCategoryRef?.getBoundingClientRect().bottom) {\n this.$emit('scroll-into-tab', index);\n this.fixedLabel = this.tabLabels[index]?.label;\n } else if (index === 1) {\n this.$emit('scroll-into-tab', index);\n this.fixedLabel = this.tabLabels[0]?.label;\n }\n });\n });\n\n this.tabLabelObserver.observe(this.$refs.tabCategoryRef);\n\n Array.from(this.$refs.listRef.children).forEach((child, index) => {\n this.tabLabelObserver.observe(child);\n child.dataset.index = index;\n });\n },\n\n focusLastEmoji () {\n this.scrollToTab(this.tabs.length, true);\n },\n\n },\n\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__data\">\n <img\n v-if=\"emoji\"\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n >\n <div>{{ emoji?.name }}</div>\n </div>\n</template>\n\n<script>\nimport { CDN_URL } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiDescription',\n\n props: {\n /**\n * Emoji data\n * @type {Object}\n * @default null\n */\n emoji: {\n type: Object,\n default: () => null,\n },\n },\n\n data () {\n return {\n CDN_URL,\n };\n },\n\n methods: {\n getImgSrc (emoji) {\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return `${CDN_URL + emoji.unicode_character}.png`;\n }\n },\n },\n};\n</script>\n","<template>\n <div data-qa=\"skin-selector\">\n <div\n v-show=\"isOpen\"\n class=\"d-emoji-picker__skin-list\"\n >\n <button\n v-for=\"(skin, index) in skinList\"\n :key=\"skin.name\"\n :ref=\"`skinRef-${index}`\"\n :class=\"{\n 'selected': skinSelected?.skinCode === skin.skinCode,\n }\"\n @click=\"selectSkin(skin)\"\n @keydown=\"event => handleKeyDown(event, skin, index)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skin.name\"\n :aria-label=\"skin.name\"\n :title=\"skin.name\"\n :src=\"`${cdnUrl + skin.unicode_output}.png`\"\n >\n </button>\n </div>\n <div\n v-show=\"!isOpen\"\n class=\"d-emoji-picker__skin-selected\"\n >\n <dt-tooltip placement=\"top-end\">\n {{ skinSelectorButtonTooltipLabel }}\n <template #anchor>\n <button\n ref=\"skinSelectorRef\"\n :aria-label=\"skinSelectorButtonTooltipLabel\"\n tabindex=\"-1\"\n @click=\"toggleSkinList\"\n @keydown=\"event => handleKeyDown(event)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skinSelected?.name\"\n :aria-label=\"skinSelected?.name\"\n :title=\"skinSelected?.name\"\n :src=\"`${cdnUrl + skinSelected?.unicode_output}.png`\"\n >\n </button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n</template>\n\n<script>\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSkinSelector',\n\n components: {\n DtTooltip,\n },\n\n props: {\n skinTone: {\n type: String,\n required: true,\n },\n\n isHovering: {\n type: Boolean,\n default: false,\n },\n\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n },\n\n data () {\n return {\n isOpen: false,\n skinSelected: null,\n skinsRef: [],\n cdnUrl: CDN_URL,\n };\n },\n\n computed: {\n skinPassedIn () {\n return this.skinList.find(skin => skin.skinTone === this.skinTone);\n },\n\n skinList () {\n return [\n {\n name: ':wave_tone1:',\n unicode_output: '1f44b-1f3fb',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n skinCode: '_tone1',\n },\n {\n name: ':wave_tone2:',\n unicode_output: '1f44b-1f3fc',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n skinCode: '_tone2',\n },\n {\n name: ':wave_tone3:',\n unicode_output: '1f44b-1f3fd',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n skinCode: '_tone3',\n },\n {\n name: ':wave_tone4:',\n unicode_output: '1f44b-1f3fe',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n skinCode: '_tone4',\n },\n {\n name: ':wave_tone5:',\n unicode_output: '1f44b-1f3ff',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n skinCode: '_tone5',\n },\n {\n name: ':wave:',\n unicode_output: '1f44b',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n skinCode: '',\n },\n ];\n },\n },\n\n watch: {\n isHovering (newVal) {\n if (newVal) {\n this.isOpen = false;\n }\n },\n\n skinTone (newVal, oldVal) {\n if (newVal !== oldVal) {\n this.skinSelected = this.skinPassedIn;\n }\n },\n },\n\n mounted () {\n this.skinSelected = this.skinPassedIn;\n this.$nextTick(() => {\n this.setupSkinRefs();\n });\n },\n\n methods: {\n setupSkinRefs () {\n this.skinList.forEach((skin, index) => {\n const refKey = `skinRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.skinsRef, index, this.$refs[refKey][0]);\n }\n });\n },\n\n focusSkinSelector () {\n if (this.$refs.skinSelectorRef) {\n this.$refs.skinSelectorRef.focus();\n }\n },\n\n selectSkin (skin) {\n this.skinSelected = skin;\n this.isOpen = false;\n this.$emit('skin-tone', skin.skinTone);\n this.$nextTick(() => {\n this.focusSkinSelector();\n });\n },\n\n handleKeyDown (event, skin, index) {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n if (index === 0) this.skinsRef[this.skinsRef.length - 1]?.focus();\n this.skinsRef[index - 1]?.focus();\n }\n\n if (event.key === 'ArrowRight') {\n if (this.skinsRef.length) this.skinsRef[0]?.focus();\n this.skinsRef[index + 1]?.focus();\n }\n\n if (event.key === 'Enter') {\n if (skin) { this.selectSkin(skin); } else {\n this.toggleSkinList();\n }\n }\n\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n this.$emit('focus-last-emoji');\n } else {\n this.$emit('focus-tabset');\n }\n }\n },\n\n toggleSkinList () {\n this.isOpen = !this.isOpen;\n this.$nextTick(() => {\n if (this.skinsRef[0]) {\n this.skinsRef[0].focus();\n }\n });\n },\n },\n};\n</script>\n","<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-custom-emojis-tab=\"showCustomEmojisTab\"\n :show-recently-used-tab=\"showRecentlyUsedTab\"\n :scroll-into-tab=\"scrollIntoTab\"\n :tab-set-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.native=\"$emit('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--body\">\n <emoji-search\n v-if=\"showSearch\"\n ref=\"searchInputRef\"\n :model-value=\"internalSearchQuery\"\n :search-placeholder-label=\"searchPlaceholderLabel\"\n @update:model-value=\"newValue => internalSearchQuery = newValue\"\n @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n <emoji-selector\n ref=\"emojiSelectorRef\"\n :emoji-filter=\"internalSearchQuery\"\n :skin-tone=\"skinTone\"\n :tab-set-labels=\"tabSetLabels\"\n :search-results-label=\"searchResultsLabel\"\n :search-no-results-label=\"searchNoResultsLabel\"\n :recently-used-emojis=\"recentlyUsedEmojis\"\n :custom-emojis=\"customEmojis\"\n :selected-tabset=\"selectedTabset\"\n @scroll-into-tab=\"updateScrollIntoTab\"\n @highlighted-emoji=\"updateHighlightedEmoji\"\n @selected-emoji=\"$emit('selected-emoji', $event)\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n @keydown.esc.native=\"$emit('close')\"\n @scroll-bottom-reached=\"$emit('scroll-bottom-reached')\"\n />\n </div>\n <div class=\"d-emoji-picker--footer\">\n <dt-button\n v-if=\"showAddEmojiButton && !highlightedEmoji\"\n importance=\"outlined\"\n :aria-label=\"addEmojiLabel\"\n class=\"d-emoji-picker__add-emoji\"\n @click=\"$emit('add-emoji')\"\n >\n {{ addEmojiLabel }}\n </dt-button>\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=\"$emit('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport { DtButton } from '../button';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtEmojiPicker',\n\n components: {\n EmojiTabset,\n EmojiSearch,\n EmojiSelector,\n EmojiDescription,\n EmojiSkinSelector,\n DtButton,\n },\n\n props: {\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 array with custom emojis object\n * This list is necessary to fill the custom tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n */\n customEmojis: {\n type: Array,\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 * 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 /**\n * Shows the add emoji button in the footer when no emoji is highlighted\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-add-emoji-button=\"true\" />\n */\n showAddEmojiButton: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n internalSearchQuery: this.searchQuery,\n highlightedEmoji: null,\n selectedTabset: {},\n scrollIntoTab: 0,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n showCustomEmojisTab () {\n return this.customEmojis?.length > 0;\n },\n\n showRecentlyUsedTab () {\n return this.recentlyUsedEmojis?.length > 0;\n },\n\n tabSetLabels () {\n return [\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n ];\n },\n\n searchPlaceholderLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\n },\n\n searchResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\n },\n\n searchNoResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\n },\n\n skinSelectorButtonTooltipLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\n },\n\n addEmojiLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n },\n },\n\n watch: {\n searchQuery (value) {\n this.internalSearchQuery = value;\n },\n },\n\n methods: {\n scrollToSelectedTabset (tabId) {\n this.internalSearchQuery = '';\n this.selectedTabset = { ...this.selectedTabset, tabId };\n },\n\n updateScrollIntoTab (value) {\n this.scrollIntoTab = value;\n },\n\n updateHighlightedEmoji (emoji) {\n this.highlightedEmoji = emoji;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTabGroup","DtTab","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","DtIconDialpadStar","tabsData","tab","index","newVal","id","parseId","skin","refKey","event","tabId","DtInput","DtIconSearch","DtIconClose","DtButton","value","emojisImported","CDN_URL","updateTabLabels","label","updateTabsOrder","newValue","newFilter","_a","_","emoji","i","el","indexEmoji","searchStr","obj","nameIncludesSearchStr","keywordsIncludeSearchStr","keyword","fn","delay","timeout","args","len","tabIndex","focusFirstEmoji","vm","tabElement","container","offsetTop","isFirst","indexTab","emojiRef","position","EMOJIS_PER_ROW","numberOfMissingEmojis","emojiToJump","previousTab","emojisInPreviousTab","lastEmojiPosition","_b","direction","entries","entry","target","_c","_d","_e","_f","child","DtTooltip","EMOJI_PICKER_SKIN_TONE_MODIFIERS","oldVal","EmojiTabset","EmojiSearch","EmojiSelector","EmojiDescription","EmojiSkinSelector","DialtoneLocalization"],"mappings":"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"}
package/dist/vue3/lib/emoji-picker/emoji-picker.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),x=require("../input/input.cjs"),J=require("../button/button.cjs"),ee=require("../../common/utils/index.cjs"),te=require("../tab/tab-group.cjs"),oe=require("../tab/tab.cjs"),O=require("@dialpad/dialtone-emojis"),E=require("./emoji-picker-constants.cjs"),le=require("../tooltip/tooltip.cjs"),ne=require("../../localization/index.cjs"),se={class:"d-emoji-picker__search d-emoji-picker__alignment"},ie={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(o,{expose:S,emit:I}){const n=I,d=e.ref(null);function j(){n("update:modelValue",""),R()}function R(){d.value.focus()}return e.onMounted(()=>{R()}),S({focusSearchInput:R}),(y,_)=>(e.openBlock(),e.createElementBlock("div",se,[e.createVNode(e.unref(x.default),{id:"searchInput",ref_key:"searchInput",ref:d,placeholder:o.searchPlaceholderLabel,"model-value":o.modelValue,"onUpdate:modelValue":_[0]||(_[0]=a=>y.$emit("update:modelValue",a)),onKeydown:[_[1]||(_[1]=e.withKeys(a=>y.$emit("focus-tabset"),["up"])),_[2]||(_[2]=e.withKeys(e.withModifiers(a=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),_[3]||(_[3]=e.withKeys(a=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconSearch),{size:"200"})]),_:2},[o.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createVNode(e.unref(J.default),{importance:"clear",size:"xs",class:"d-emoji-picker__search-x-button",circle:"",kind:"muted",onClick:j},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconClose),{size:"200"})]),_:1})]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ae={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},showCustomEmojisTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:""},tabSetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(o,{expose:S,emit:I}){const n=o,d=I,j=[{label:n.tabSetLabels[0],icon:w.DtIconClock},{label:n.tabSetLabels[1],icon:w.DtIconSatisfied},{label:n.tabSetLabels[2],icon:w.DtIconLivingThing},{label:n.tabSetLabels[3],icon:w.DtIconFood},{label:n.tabSetLabels[4],icon:w.DtIconObject},{label:n.tabSetLabels[5],icon:w.DtIconTransportation},{label:n.tabSetLabels[6],icon:w.DtIconLightbulb},{label:n.tabSetLabels[7],icon:w.DtIconHeart},{label:n.tabSetLabels[8],icon:w.DtIconFlag},{label:n.tabSetLabels[9],icon:w.DtIconTiktok}],R=e.computed(()=>{const l=n.showRecentlyUsedTab?j:j.slice(1);return n.showCustomEmojisTab||l.pop(),l.map((t,i)=>({...t,id:(i+1).toString(),panelId:(i+1).toString()}))}),y=e.computed(()=>n.emojiFilter.length>0),_=e.ref("1"),a=e.ref([]);e.watch(()=>n.scrollIntoTab,()=>{y.value||(_.value=(n.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(_.value=null)});function m(l){const t=parseInt(l);_.value=l,d("selected-tabset",t)}function A(l){a.value.push(ee.returnFirstEl(l.$el))}function B(){a.value[0].focus()}function L(l,t){l.key==="Enter"&&(m(t),a.value[t-1].blur()),l.key==="Tab"&&(l.preventDefault(),l.shiftKey?d("focus-skin-selector"):d("focus-search-input")),l.key==="ArrowDown"&&d("focus-search-input")}return S({focusTabset:B}),(l,t)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(te.default),{selected:_.value,size:"sm","tab-list-class":"d-emoji-picker__tabset-list"},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,(i,v)=>(e.openBlock(),e.createBlock(e.unref(oe.default),{id:i.id,key:i.id,ref_for:!0,ref:f=>{f&&A(f)},label:i.label,"panel-id":i.panelId,tabindex:v+1,"aria-controls":"d-emoji-picker-list",onKeydown:f=>L(f,i.id),onClickCapture:e.withModifiers(f=>m(i.id),["stop"])},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.icon),{size:"400"}))]),_:2},1032,["id","label","panel-id","tabindex","onKeydown","onClickCapture"]))),128))]),_:1},8,["selected"])]))}};function ce(){const o=e.ref([]),S=e.ref([]),I=e.ref(!1),n=e.ref(!0);function d(l,t){a(l,t-1)||(o.value[l-1]?a(l-1,o.value[l-1].length-1):a(o.value.length-1,o.value[o.value.length-1].length-1))}function j(l,t){a(l,t+1)||a(l+1,0)||a(0,0)}function R(l,t){a(0,t-1)||a(0,S.value.length-1)}function y(l,t){a(0,t+1)||a(0,0)}function _(l,t,i){I.value?l==="left"?R(t,i):l==="right"&&y(t,i):l==="left"?d(t,i):l==="right"&&j(t,i)}function a(l,t){var v,f,g;const i=I.value?(v=S.value)==null?void 0:v[t]:(g=(f=o.value)==null?void 0:f[l])==null?void 0:g[t];return i?(i.focus(),!0):!1}function m(l,t,i){o.value[t]||(o.value[t]=[]),o.value[t][i]=l}function A(l,t){S.value[t]=l}function B(l,t){var i;if(n.value=!1,l===E.ARROW_KEYS.ARROW_UP){const v=t%E.EMOJIS_PER_ROW;if(!a(0,t-E.EMOJIS_PER_ROW)){const f=S.value.length-S.value.length%E.EMOJIS_PER_ROW+v;a(0,f),a(0,f)||a(0,S.value.length-1)}}if(l===E.ARROW_KEYS.ARROW_DOWN&&!a(0,t+E.EMOJIS_PER_ROW)){const v=t%E.EMOJIS_PER_ROW;(i=S.value)!=null&&i[t+(E.EMOJIS_PER_ROW-v)]?a(0,S.value.length-1):a(0,v)}l===E.ARROW_KEYS.ARROW_LEFT&&_("left",0,t),l===E.ARROW_KEYS.ARROW_RIGHT&&_("right",0,t)}function L(l,t,i){var v,f;if(l==="ArrowUp"){const g=i%E.EMOJIS_PER_ROW;if(t===0){const c=E.EMOJIS_PER_ROW-o.value[o.value.length-1].length%E.EMOJIS_PER_ROW,r=o.value[o.value.length-1].length+c-(E.EMOJIS_PER_ROW-g);a(o.value.length-1,r)||a(o.value.length-1,o.value[o.value.length-1].length-1);return}if(!a(t,i-E.EMOJIS_PER_ROW)){const c=t-1<0?0:t-1,r=o.value[c].length,k=r-r%E.EMOJIS_PER_ROW+g;a(c,k)||a(t-1,o.value[t-1].length-1)}}if(l==="ArrowDown"&&!a(t,i+E.EMOJIS_PER_ROW)){const g=i%E.EMOJIS_PER_ROW;(f=(v=o.value)==null?void 0:v[t])!=null&&f[i+(E.EMOJIS_PER_ROW-g)]?a(t,o.value[t].length-1):a(t+1,g)||a(0,g)||a(0,o.value[0].length-1)}l==="ArrowLeft"&&_("left",t,i),l==="ArrowRight"&&_("right",t,i)}return{emojiFilteredRefs:S,isFiltering:I,hoverFirstEmoji:n,setEmojiRef:m,setFilteredRef:A,focusEmoji:a,handleArrowNavigationFiltered:B,handleArrowNavigation:L}}const ue={class:"d-emoji-picker__selector"},fe={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},de={key:0},me={class:"d-emoji-picker__tab"},Ee=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],_e=["alt","aria-label","title","src"],ve={key:2,class:"d-emoji-picker__alignment"},be={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},pe=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],he=["alt","aria-label","title","src"],ke={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","scroll-bottom-reached","focus-skin-selector","focus-search-input"],setup(o,{expose:S,emit:I}){const n=o,d=I,{emojiFilteredRefs:j,isFiltering:R,hoverFirstEmoji:y,setEmojiRef:_,setFilteredRef:a,focusEmoji:m,handleArrowNavigationFiltered:A,handleArrowNavigation:B}=ce(),L=e.ref(null),l=e.ref(null),t=e.ref(null),i=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags","Custom"],v=e.computed(()=>{let s=n.tabsetLabels.map(u=>({label:u,ref:e.ref(null)}));return n.recentlyUsedEmojis&&!n.recentlyUsedEmojis.length&&(s=n.tabsetLabels.slice(1).map(u=>({label:u,ref:e.ref(null)}))),n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),f=e.ref(v.value[0].label),g=e.computed(()=>{const s=n.recentlyUsedEmojis.length?i.slice():i.slice(1);return n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),c=e.ref([]),r=e.computed(()=>[...O.emojisGrouped[`People${n.skinTone}`],...O.emojisGrouped.Nature,...O.emojisGrouped.Food,...O.emojisGrouped[`Activity${n.skinTone}`],...O.emojisGrouped.Travel,...O.emojisGrouped[`Objects${n.skinTone}`],...O.emojisGrouped.Symbols,...O.emojisGrouped.Flags]),k=U(()=>{j.value=[],F()}),M=()=>{const s=l.value;s.scrollTop+s.clientHeight>=s.scrollHeight&&d("scroll-bottom-reached")};e.watch(r,()=>{F()},{immediate:!0}),e.watch(()=>n.recentlyUsedEmojis,()=>{O.emojisGrouped["Recently used"]=n.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>n.customEmojis,()=>{O.emojisGrouped.Custom=n.customEmojis},{immediate:!0}),e.watch(()=>n.emojiFilter,()=>{G(),n.emojiFilter?R.value=!0:(R.value=!1,C(null)),k()}),e.watch(()=>n.selectedTabset,s=>{$(s.tabId)},{deep:!0});function K(s,u=!1){y.value=u,d("highlighted-emoji",s)}function F(){const s=n.emojiFilter.toLowerCase();c.value=r.value.filter(u=>{const p=u.name.toLowerCase().includes(s),h=u.keywords.some(b=>b.toLowerCase().includes(s));return p||h}),e.nextTick(()=>{s&&K(c.value[0],!0)})}function U(s,u=300){let p;return(...h)=>{clearTimeout(p),p=setTimeout(()=>s(...h),u)}}function W(s){return s.date_added?s.image:E.CDN_URL+s.unicode_character+".png"}function q(s){s.target.parentNode.style.display="none"}function $(s,u=!0){const h=v.value[s-1].ref.value[0];e.nextTick(()=>{const b=l.value,N=s===1?0:h.offsetTop-15;b.scrollTop=N,u&&m(s-1,0)})}function G(){const s=l.value;s.scrollTop=0}function z(){l.value.addEventListener("scroll",M)}function H(){t.value=new IntersectionObserver(async s=>{s.forEach(u=>{var b,N,T,P,V;const{target:p}=u,h=parseInt(p.dataset.index);u.isIntersecting&&p.offsetTop<=L.value.offsetTop+50?(f.value=((b=v.value[h-1])==null?void 0:b.label)??((N=v.value[0])==null?void 0:N.label),d("scroll-into-tab",h-1)):u.boundingClientRect.bottom<=((T=L.value)==null?void 0:T.getBoundingClientRect().bottom)?(d("scroll-into-tab",h),f.value=(P=v.value[h])==null?void 0:P.label):h===1&&(d("scroll-into-tab",h),f.value=(V=v.value[0])==null?void 0:V.label)})}),t.value.observe(L.value),Array.from(l.value.children).forEach((s,u)=>{t.value.observe(s),s.dataset.index=u})}const Y=(s,u,p)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){A(s.key,u);return}switch(s.key){case"Tab":d("focus-skin-selector");break;case"Enter":D(p,s);break}},Q=(s,u,p,h)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){B(s.key,u,p);return}switch(s.key){case"Tab":s.shiftKey?m(u,0)&&u>0?$(u,!0):($(1,!1),d("focus-search-input")):m(u+1,0)?$(u+1+1,!1):d("focus-skin-selector");break;case"Enter":D(h,s);break}};function D(s,u){d("selected-emoji",{...s,shift_key:u.shiftKey})}function C(s){d("highlighted-emoji",s)}function X(){m(0,0)}function Z(){$(g.value.length,!0)}return e.onMounted(()=>{H(),z()}),e.onBeforeUnmount(()=>{t.value.disconnect(),l.value.removeEventListener("scroll",M)}),S({focusEmojiSelector:X,focusLastEmoji:Z}),(s,u)=>(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:l,class:"d-emoji-picker__list"},[o.emojiFilter?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(c.value.length>0?o.searchResultsLabel:o.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:L,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(f.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(p,h)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:h,ref_for:!0,ref:p.ref,class:"d-emoji-picker__alignment"},[h?(e.openBlock(),e.createElementBlock("p",de,e.toDisplayString(p.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O.emojisGrouped)[g.value[h]+o.skinTone]?e.unref(O.emojisGrouped)[g.value[h]+o.skinTone]:e.unref(O.emojisGrouped)[g.value[h]],(b,N)=>(e.openBlock(),e.createElementBlock("button",{key:b.shortname,ref_for:!0,ref:T=>{T&&e.unref(_)(T,h,N)},type:"button","aria-label":b.name,onClick:T=>D(b,T),onFocusin:T=>C(b),onFocusout:u[0]||(u[0]=T=>C(null)),onMouseover:T=>C(b),onMouseleave:u[1]||(u[1]=T=>C(null)),onKeydown:T=>Q(T,h,N,b)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.name,"aria-label":b.name,title:b.name,src:W(b),onError:q},null,40,_e)],40,Ee))),128))])])),[[e.vShow,!o.emojiFilter]])),128)),o.emojiFilter?(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(p,h)=>(e.openBlock(),e.createElementBlock("button",{key:p.shortname,ref_for:!0,ref:b=>{b&&e.unref(a)(b,h)},type:"button","aria-label":p.name,class:e.normalizeClass({"hover-emoji":h===0&&e.unref(y)}),onClick:b=>D(p,b),onFocusin:b=>C(p),onFocusout:u[2]||(u[2]=b=>C(null)),onMouseover:b=>K(p),onMouseleave:u[3]||(u[3]=b=>K(null)),onKeydown:b=>Y(b,h,p)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:p.name,"aria-label":p.name,title:p.name,src:`${e.unref(E.CDN_URL)+p.unicode_character}.png`},null,8,he)],42,pe))),128))])])):e.createCommentVNode("",!0)],512)]))}},Se={"data-qa":"skin-selector"},Ie={class:"d-emoji-picker__skin-list"},Re=["onKeydown","onClick"],ge=["alt","aria-label","title","src"],ye={class:"d-emoji-picker__skin-selected"},je=["aria-label"],Le=["alt","aria-label","title","src"],Te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(o,{expose:S,emit:I}){const n=o,d=I,j=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:""}],R=e.ref(!1),y=e.ref(null),_=e.ref([]);e.watchEffect(()=>n.isHovering&&(R.value=!1));const a=e.computed(()=>j.find(i=>i.skinTone===n.skinTone)),m=e.ref(a.value);e.watchEffect(()=>a.value&&(m.value=a.value));function A(i){_.value.push(i)}function B(){y.value.focus()}function L(i){m.value=i,R.value=!1,d("skin-tone",i.skinTone),e.nextTick(()=>B())}const l=(i,v,f)=>{var g,c,r;i.preventDefault(),i.key==="ArrowLeft"&&(f===0&&((g=_.value[_.value.length-1])==null||g.focus()),(c=_.value[f-1])==null||c.focus()),i.key==="ArrowRight"&&((r=_.value[f+1])==null||r.focus()),i.key==="Enter"&&(v?L(v):t()),i.key==="Tab"&&(i.shiftKey?d("focus-last-emoji"):d("focus-tabset"))};function t(){R.value=!R.value,e.nextTick(()=>_.value[0].focus())}return S({focusSkinSelector:B}),(i,v)=>(e.openBlock(),e.createElementBlock("div",Se,[e.withDirectives(e.createElementVNode("div",Ie,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(j,(f,g)=>e.createElementVNode("button",{ref_for:!0,ref:c=>{c&&A(c)},key:f.name,class:e.normalizeClass({selected:m.value.skinCode===f.skinCode}),onKeydown:c=>l(c,f,g),onClick:c=>L(f)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:f.name,"aria-label":f.name,title:f.name,src:`${e.unref(E.CDN_URL)+f.unicode_output}.png`},null,8,ge)],42,Re)),64))],512),[[e.vShow,R.value]]),e.withDirectives(e.createElementVNode("div",ye,[e.createVNode(e.unref(le.default),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":o.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:v[0]||(v[0]=f=>l(f))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.value.name,"aria-label":m.value.name,title:m.value.name,src:`${e.unref(E.CDN_URL)+m.value.unicode_output}.png`},null,8,Le)],40,je)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!R.value]])]))}},Oe={class:"d-emoji-picker__data"},we=["alt","aria-label","title","src"],Ae={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(o){function S(I){return I.date_added?I.image:`${E.CDN_URL+I.unicode_character}.png`}return(I,n)=>{var d;return e.openBlock(),e.createElementBlock("div",Oe,[o.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:o.emoji.name,"aria-label":o.emoji.name,title:o.emoji.name,src:S(o.emoji)},null,8,we)):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString((d=o.emoji)==null?void 0:d.name),1)])}}},Be={class:"d-emoji-picker"},Ce={class:"d-emoji-picker--header"},Ne={class:"d-emoji-picker--body"},$e={class:"d-emoji-picker--footer"},De={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},skinTone:{type:String,default:"Default"},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0},showAddEmojiButton:{type:Boolean,default:!1}},emits:["selected-emoji","scroll-bottom-reached","skin-tone","close","add-emoji"],setup(o,{emit:S}){const I=o,n=S,d=e.ref(I.searchQuery.value),j=e.ref(null),R=e.ref({}),y=e.ref(0),_=e.computed(()=>{var c;return((c=I.recentlyUsedEmojis)==null?void 0:c.length)>0}),a=e.computed(()=>{var c;return((c=I.customEmojis)==null?void 0:c.length)>0}),m=new ne.DialtoneLocalization,A=[m.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")],B=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"),L=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"),l=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"),t=m.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"),i=m.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");e.watch(()=>I.searchQuery,c=>{d.value=c});function v(c){d.value="",R.value={...R.value,tabId:c}}function f(c){y.value=c}function g(c){j.value=c}return(c,r)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",Ce,[e.createVNode(ae,{ref:"tabsetRef","emoji-filter":d.value,"show-custom-emojis-tab":a.value,"show-recently-used-tab":_.value,"scroll-into-tab":y.value,"tab-set-labels":A,onFocusSkinSelector:r[0]||(r[0]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[1]||(r[1]=k=>o.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:v,onKeydown:r[2]||(r[2]=e.withKeys(k=>n("close"),["esc"]))},null,8,["emoji-filter","show-custom-emojis-tab","show-recently-used-tab","scroll-into-tab"])]),e.createElementVNode("div",Ne,[o.showSearch?(e.openBlock(),e.createBlock(ie,{key:0,ref:"searchInputRef",modelValue:d.value,"onUpdate:modelValue":r[3]||(r[3]=k=>d.value=k),"search-placeholder-label":e.unref(B),onSelectFirstEmoji:r[4]||(r[4]=k=>n("selected-emoji",j.value)),onFocusTabset:r[5]||(r[5]=k=>c.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:r[6]||(r[6]=k=>c.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:r[7]||(r[7]=e.withKeys(k=>n("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"])):e.createCommentVNode("",!0),e.createVNode(ke,{ref:"emojiSelectorRef","emoji-filter":d.value,"skin-tone":o.skinTone,"tabset-labels":A,"search-results-label":e.unref(L),"search-no-results-label":e.unref(l),"recently-used-emojis":o.recentlyUsedEmojis,"custom-emojis":o.customEmojis,"selected-tabset":R.value,onScrollIntoTab:f,onHighlightedEmoji:g,onSelectedEmoji:r[8]||(r[8]=k=>n("selected-emoji",k)),onFocusSkinSelector:r[9]||(r[9]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[10]||(r[10]=k=>o.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.tabsetRef.focusTabset()),onKeydown:r[11]||(r[11]=e.withKeys(k=>n("close"),["esc"])),onScrollBottomReached:r[12]||(r[12]=k=>n("scroll-bottom-reached"))},null,8,["emoji-filter","skin-tone","search-results-label","search-no-results-label","recently-used-emojis","custom-emojis","selected-tabset"])]),e.createElementVNode("div",$e,[o.showAddEmojiButton&&!j.value?(e.openBlock(),e.createBlock(e.unref(J.default),{key:0,importance:"outlined","aria-label":e.unref(i),class:"d-emoji-picker__add-emoji",onClick:r[13]||(r[13]=k=>n("add-emoji"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(i)),1)]),_:1},8,["aria-label"])):e.createCommentVNode("",!0),e.createVNode(Ae,{emoji:j.value},null,8,["emoji"]),e.createVNode(Te,{ref:"skinSelectorRef","is-hovering":!!j.value,"skin-selector-button-tooltip-label":e.unref(t),"skin-tone":o.skinTone,onSkinTone:r[14]||(r[14]=k=>n("skin-tone",k)),onFocusTabset:r[15]||(r[15]=k=>c.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:r[16]||(r[16]=k=>c.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:r[17]||(r[17]=e.withKeys(k=>n("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.default=De;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),x=require("../input/input.cjs"),J=require("../button/button.cjs"),ee=require("../../common/utils/index.cjs"),te=require("../tab/tab-group.cjs"),oe=require("../tab/tab.cjs"),O=require("@dialpad/dialtone-emojis"),E=require("./emoji-picker-constants.cjs"),le=require("../tooltip/tooltip.cjs"),ne=require("../../localization/index.cjs"),se={class:"d-emoji-picker__search d-emoji-picker__alignment"},ie={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(o,{expose:S,emit:I}){const n=I,d=e.ref(null);function j(){n("update:modelValue",""),R()}function R(){d.value.focus()}return e.onMounted(()=>{R()}),S({focusSearchInput:R}),(y,_)=>(e.openBlock(),e.createElementBlock("div",se,[e.createVNode(e.unref(x.default),{id:"searchInput",ref_key:"searchInput",ref:d,placeholder:o.searchPlaceholderLabel,"model-value":o.modelValue,"onUpdate:modelValue":_[0]||(_[0]=a=>y.$emit("update:modelValue",a)),onKeydown:[_[1]||(_[1]=e.withKeys(a=>y.$emit("focus-tabset"),["up"])),_[2]||(_[2]=e.withKeys(e.withModifiers(a=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),_[3]||(_[3]=e.withKeys(a=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconSearch),{size:"200"})]),_:2},[o.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createVNode(e.unref(J.default),{importance:"clear",size:"xs",class:"d-emoji-picker__search-x-button",circle:"",kind:"muted",onClick:j},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconClose),{size:"200"})]),_:1})]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ae={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},showCustomEmojisTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:""},tabSetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(o,{expose:S,emit:I}){const n=o,d=I,j=[{label:n.tabSetLabels[0],icon:w.DtIconClock},{label:n.tabSetLabels[1],icon:w.DtIconSatisfied},{label:n.tabSetLabels[2],icon:w.DtIconLivingThing},{label:n.tabSetLabels[3],icon:w.DtIconFood},{label:n.tabSetLabels[4],icon:w.DtIconObject},{label:n.tabSetLabels[5],icon:w.DtIconTransportation},{label:n.tabSetLabels[6],icon:w.DtIconLightbulb},{label:n.tabSetLabels[7],icon:w.DtIconHeart},{label:n.tabSetLabels[8],icon:w.DtIconFlag},{label:n.tabSetLabels[9],icon:w.DtIconDialpadStar}],R=e.computed(()=>{const l=n.showRecentlyUsedTab?j:j.slice(1);return n.showCustomEmojisTab||l.pop(),l.map((t,i)=>({...t,id:(i+1).toString(),panelId:(i+1).toString()}))}),y=e.computed(()=>n.emojiFilter.length>0),_=e.ref("1"),a=e.ref([]);e.watch(()=>n.scrollIntoTab,()=>{y.value||(_.value=(n.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(_.value=null)});function m(l){const t=parseInt(l);_.value=l,d("selected-tabset",t)}function A(l){a.value.push(ee.returnFirstEl(l.$el))}function B(){a.value[0].focus()}function L(l,t){l.key==="Enter"&&(m(t),a.value[t-1].blur()),l.key==="Tab"&&(l.preventDefault(),l.shiftKey?d("focus-skin-selector"):d("focus-search-input")),l.key==="ArrowDown"&&d("focus-search-input")}return S({focusTabset:B}),(l,t)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(te.default),{selected:_.value,size:"sm","tab-list-class":"d-emoji-picker__tabset-list"},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,(i,v)=>(e.openBlock(),e.createBlock(e.unref(oe.default),{id:i.id,key:i.id,ref_for:!0,ref:f=>{f&&A(f)},label:i.label,"panel-id":i.panelId,tabindex:v+1,"aria-controls":"d-emoji-picker-list",onKeydown:f=>L(f,i.id),onClickCapture:e.withModifiers(f=>m(i.id),["stop"])},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.icon),{size:"400"}))]),_:2},1032,["id","label","panel-id","tabindex","onKeydown","onClickCapture"]))),128))]),_:1},8,["selected"])]))}};function ce(){const o=e.ref([]),S=e.ref([]),I=e.ref(!1),n=e.ref(!0);function d(l,t){a(l,t-1)||(o.value[l-1]?a(l-1,o.value[l-1].length-1):a(o.value.length-1,o.value[o.value.length-1].length-1))}function j(l,t){a(l,t+1)||a(l+1,0)||a(0,0)}function R(l,t){a(0,t-1)||a(0,S.value.length-1)}function y(l,t){a(0,t+1)||a(0,0)}function _(l,t,i){I.value?l==="left"?R(t,i):l==="right"&&y(t,i):l==="left"?d(t,i):l==="right"&&j(t,i)}function a(l,t){var v,f,g;const i=I.value?(v=S.value)==null?void 0:v[t]:(g=(f=o.value)==null?void 0:f[l])==null?void 0:g[t];return i?(i.focus(),!0):!1}function m(l,t,i){o.value[t]||(o.value[t]=[]),o.value[t][i]=l}function A(l,t){S.value[t]=l}function B(l,t){var i;if(n.value=!1,l===E.ARROW_KEYS.ARROW_UP){const v=t%E.EMOJIS_PER_ROW;if(!a(0,t-E.EMOJIS_PER_ROW)){const f=S.value.length-S.value.length%E.EMOJIS_PER_ROW+v;a(0,f),a(0,f)||a(0,S.value.length-1)}}if(l===E.ARROW_KEYS.ARROW_DOWN&&!a(0,t+E.EMOJIS_PER_ROW)){const v=t%E.EMOJIS_PER_ROW;(i=S.value)!=null&&i[t+(E.EMOJIS_PER_ROW-v)]?a(0,S.value.length-1):a(0,v)}l===E.ARROW_KEYS.ARROW_LEFT&&_("left",0,t),l===E.ARROW_KEYS.ARROW_RIGHT&&_("right",0,t)}function L(l,t,i){var v,f;if(l==="ArrowUp"){const g=i%E.EMOJIS_PER_ROW;if(t===0){const c=E.EMOJIS_PER_ROW-o.value[o.value.length-1].length%E.EMOJIS_PER_ROW,r=o.value[o.value.length-1].length+c-(E.EMOJIS_PER_ROW-g);a(o.value.length-1,r)||a(o.value.length-1,o.value[o.value.length-1].length-1);return}if(!a(t,i-E.EMOJIS_PER_ROW)){const c=t-1<0?0:t-1,r=o.value[c].length,k=r-r%E.EMOJIS_PER_ROW+g;a(c,k)||a(t-1,o.value[t-1].length-1)}}if(l==="ArrowDown"&&!a(t,i+E.EMOJIS_PER_ROW)){const g=i%E.EMOJIS_PER_ROW;(f=(v=o.value)==null?void 0:v[t])!=null&&f[i+(E.EMOJIS_PER_ROW-g)]?a(t,o.value[t].length-1):a(t+1,g)||a(0,g)||a(0,o.value[0].length-1)}l==="ArrowLeft"&&_("left",t,i),l==="ArrowRight"&&_("right",t,i)}return{emojiFilteredRefs:S,isFiltering:I,hoverFirstEmoji:n,setEmojiRef:m,setFilteredRef:A,focusEmoji:a,handleArrowNavigationFiltered:B,handleArrowNavigation:L}}const ue={class:"d-emoji-picker__selector"},fe={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},de={key:0},me={class:"d-emoji-picker__tab"},Ee=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],_e=["alt","aria-label","title","src"],ve={key:2,class:"d-emoji-picker__alignment"},be={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},pe=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],he=["alt","aria-label","title","src"],ke={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","scroll-bottom-reached","focus-skin-selector","focus-search-input"],setup(o,{expose:S,emit:I}){const n=o,d=I,{emojiFilteredRefs:j,isFiltering:R,hoverFirstEmoji:y,setEmojiRef:_,setFilteredRef:a,focusEmoji:m,handleArrowNavigationFiltered:A,handleArrowNavigation:B}=ce(),L=e.ref(null),l=e.ref(null),t=e.ref(null),i=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags","Custom"],v=e.computed(()=>{let s=n.tabsetLabels.map(u=>({label:u,ref:e.ref(null)}));return n.recentlyUsedEmojis&&!n.recentlyUsedEmojis.length&&(s=n.tabsetLabels.slice(1).map(u=>({label:u,ref:e.ref(null)}))),n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),f=e.ref(v.value[0].label),g=e.computed(()=>{const s=n.recentlyUsedEmojis.length?i.slice():i.slice(1);return n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),c=e.ref([]),r=e.computed(()=>[...O.emojisGrouped[`People${n.skinTone}`],...O.emojisGrouped.Nature,...O.emojisGrouped.Food,...O.emojisGrouped[`Activity${n.skinTone}`],...O.emojisGrouped.Travel,...O.emojisGrouped[`Objects${n.skinTone}`],...O.emojisGrouped.Symbols,...O.emojisGrouped.Flags]),k=U(()=>{j.value=[],F()}),M=()=>{const s=l.value;s.scrollTop+s.clientHeight>=s.scrollHeight&&d("scroll-bottom-reached")};e.watch(r,()=>{F()},{immediate:!0}),e.watch(()=>n.recentlyUsedEmojis,()=>{O.emojisGrouped["Recently used"]=n.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>n.customEmojis,()=>{O.emojisGrouped.Custom=n.customEmojis},{immediate:!0}),e.watch(()=>n.emojiFilter,()=>{G(),n.emojiFilter?R.value=!0:(R.value=!1,C(null)),k()}),e.watch(()=>n.selectedTabset,s=>{$(s.tabId)},{deep:!0});function K(s,u=!1){y.value=u,d("highlighted-emoji",s)}function F(){const s=n.emojiFilter.toLowerCase();c.value=r.value.filter(u=>{const p=u.name.toLowerCase().includes(s),h=u.keywords.some(b=>b.toLowerCase().includes(s));return p||h}),e.nextTick(()=>{s&&K(c.value[0],!0)})}function U(s,u=300){let p;return(...h)=>{clearTimeout(p),p=setTimeout(()=>s(...h),u)}}function W(s){return s.date_added?s.image:E.CDN_URL+s.unicode_character+".png"}function q(s){s.target.parentNode.style.display="none"}function $(s,u=!0){const h=v.value[s-1].ref.value[0];e.nextTick(()=>{const b=l.value,N=s===1?0:h.offsetTop-15;b.scrollTop=N,u&&m(s-1,0)})}function G(){const s=l.value;s.scrollTop=0}function z(){l.value.addEventListener("scroll",M)}function H(){t.value=new IntersectionObserver(async s=>{s.forEach(u=>{var b,N,T,P,V;const{target:p}=u,h=parseInt(p.dataset.index);u.isIntersecting&&p.offsetTop<=L.value.offsetTop+50?(f.value=((b=v.value[h-1])==null?void 0:b.label)??((N=v.value[0])==null?void 0:N.label),d("scroll-into-tab",h-1)):u.boundingClientRect.bottom<=((T=L.value)==null?void 0:T.getBoundingClientRect().bottom)?(d("scroll-into-tab",h),f.value=(P=v.value[h])==null?void 0:P.label):h===1&&(d("scroll-into-tab",h),f.value=(V=v.value[0])==null?void 0:V.label)})}),t.value.observe(L.value),Array.from(l.value.children).forEach((s,u)=>{t.value.observe(s),s.dataset.index=u})}const Y=(s,u,p)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){A(s.key,u);return}switch(s.key){case"Tab":d("focus-skin-selector");break;case"Enter":D(p,s);break}},Q=(s,u,p,h)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){B(s.key,u,p);return}switch(s.key){case"Tab":s.shiftKey?m(u,0)&&u>0?$(u,!0):($(1,!1),d("focus-search-input")):m(u+1,0)?$(u+1+1,!1):d("focus-skin-selector");break;case"Enter":D(h,s);break}};function D(s,u){d("selected-emoji",{...s,shift_key:u.shiftKey})}function C(s){d("highlighted-emoji",s)}function X(){m(0,0)}function Z(){$(g.value.length,!0)}return e.onMounted(()=>{H(),z()}),e.onBeforeUnmount(()=>{t.value.disconnect(),l.value.removeEventListener("scroll",M)}),S({focusEmojiSelector:X,focusLastEmoji:Z}),(s,u)=>(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:l,class:"d-emoji-picker__list"},[o.emojiFilter?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(c.value.length>0?o.searchResultsLabel:o.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:L,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(f.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(p,h)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:h,ref_for:!0,ref:p.ref,class:"d-emoji-picker__alignment"},[h?(e.openBlock(),e.createElementBlock("p",de,e.toDisplayString(p.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O.emojisGrouped)[g.value[h]+o.skinTone]?e.unref(O.emojisGrouped)[g.value[h]+o.skinTone]:e.unref(O.emojisGrouped)[g.value[h]],(b,N)=>(e.openBlock(),e.createElementBlock("button",{key:b.shortname,ref_for:!0,ref:T=>{T&&e.unref(_)(T,h,N)},type:"button","aria-label":b.name,onClick:T=>D(b,T),onFocusin:T=>C(b),onFocusout:u[0]||(u[0]=T=>C(null)),onMouseover:T=>C(b),onMouseleave:u[1]||(u[1]=T=>C(null)),onKeydown:T=>Q(T,h,N,b)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.name,"aria-label":b.name,title:b.name,src:W(b),onError:q},null,40,_e)],40,Ee))),128))])])),[[e.vShow,!o.emojiFilter]])),128)),o.emojiFilter?(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(p,h)=>(e.openBlock(),e.createElementBlock("button",{key:p.shortname,ref_for:!0,ref:b=>{b&&e.unref(a)(b,h)},type:"button","aria-label":p.name,class:e.normalizeClass({"hover-emoji":h===0&&e.unref(y)}),onClick:b=>D(p,b),onFocusin:b=>C(p),onFocusout:u[2]||(u[2]=b=>C(null)),onMouseover:b=>K(p),onMouseleave:u[3]||(u[3]=b=>K(null)),onKeydown:b=>Y(b,h,p)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:p.name,"aria-label":p.name,title:p.name,src:`${e.unref(E.CDN_URL)+p.unicode_character}.png`},null,8,he)],42,pe))),128))])])):e.createCommentVNode("",!0)],512)]))}},Se={"data-qa":"skin-selector"},Ie={class:"d-emoji-picker__skin-list"},Re=["onKeydown","onClick"],ge=["alt","aria-label","title","src"],ye={class:"d-emoji-picker__skin-selected"},je=["aria-label"],Le=["alt","aria-label","title","src"],Te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(o,{expose:S,emit:I}){const n=o,d=I,j=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:""}],R=e.ref(!1),y=e.ref(null),_=e.ref([]);e.watchEffect(()=>n.isHovering&&(R.value=!1));const a=e.computed(()=>j.find(i=>i.skinTone===n.skinTone)),m=e.ref(a.value);e.watchEffect(()=>a.value&&(m.value=a.value));function A(i){_.value.push(i)}function B(){y.value.focus()}function L(i){m.value=i,R.value=!1,d("skin-tone",i.skinTone),e.nextTick(()=>B())}const l=(i,v,f)=>{var g,c,r;i.preventDefault(),i.key==="ArrowLeft"&&(f===0&&((g=_.value[_.value.length-1])==null||g.focus()),(c=_.value[f-1])==null||c.focus()),i.key==="ArrowRight"&&((r=_.value[f+1])==null||r.focus()),i.key==="Enter"&&(v?L(v):t()),i.key==="Tab"&&(i.shiftKey?d("focus-last-emoji"):d("focus-tabset"))};function t(){R.value=!R.value,e.nextTick(()=>_.value[0].focus())}return S({focusSkinSelector:B}),(i,v)=>(e.openBlock(),e.createElementBlock("div",Se,[e.withDirectives(e.createElementVNode("div",Ie,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(j,(f,g)=>e.createElementVNode("button",{ref_for:!0,ref:c=>{c&&A(c)},key:f.name,class:e.normalizeClass({selected:m.value.skinCode===f.skinCode}),onKeydown:c=>l(c,f,g),onClick:c=>L(f)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:f.name,"aria-label":f.name,title:f.name,src:`${e.unref(E.CDN_URL)+f.unicode_output}.png`},null,8,ge)],42,Re)),64))],512),[[e.vShow,R.value]]),e.withDirectives(e.createElementVNode("div",ye,[e.createVNode(e.unref(le.default),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":o.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:v[0]||(v[0]=f=>l(f))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.value.name,"aria-label":m.value.name,title:m.value.name,src:`${e.unref(E.CDN_URL)+m.value.unicode_output}.png`},null,8,Le)],40,je)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!R.value]])]))}},Oe={class:"d-emoji-picker__data"},we=["alt","aria-label","title","src"],Ae={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(o){function S(I){return I.date_added?I.image:`${E.CDN_URL+I.unicode_character}.png`}return(I,n)=>{var d;return e.openBlock(),e.createElementBlock("div",Oe,[o.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:o.emoji.name,"aria-label":o.emoji.name,title:o.emoji.name,src:S(o.emoji)},null,8,we)):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString((d=o.emoji)==null?void 0:d.name),1)])}}},Be={class:"d-emoji-picker"},Ce={class:"d-emoji-picker--header"},Ne={class:"d-emoji-picker--body"},$e={class:"d-emoji-picker--footer"},De={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},skinTone:{type:String,default:"Default"},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0},showAddEmojiButton:{type:Boolean,default:!1}},emits:["selected-emoji","scroll-bottom-reached","skin-tone","close","add-emoji"],setup(o,{emit:S}){const I=o,n=S,d=e.ref(I.searchQuery.value),j=e.ref(null),R=e.ref({}),y=e.ref(0),_=e.computed(()=>{var c;return((c=I.recentlyUsedEmojis)==null?void 0:c.length)>0}),a=e.computed(()=>{var c;return((c=I.customEmojis)==null?void 0:c.length)>0}),m=new ne.DialtoneLocalization,A=[m.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")],B=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"),L=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"),l=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"),t=m.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"),i=m.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");e.watch(()=>I.searchQuery,c=>{d.value=c});function v(c){d.value="",R.value={...R.value,tabId:c}}function f(c){y.value=c}function g(c){j.value=c}return(c,r)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",Ce,[e.createVNode(ae,{ref:"tabsetRef","emoji-filter":d.value,"show-custom-emojis-tab":a.value,"show-recently-used-tab":_.value,"scroll-into-tab":y.value,"tab-set-labels":A,onFocusSkinSelector:r[0]||(r[0]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[1]||(r[1]=k=>o.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:v,onKeydown:r[2]||(r[2]=e.withKeys(k=>n("close"),["esc"]))},null,8,["emoji-filter","show-custom-emojis-tab","show-recently-used-tab","scroll-into-tab"])]),e.createElementVNode("div",Ne,[o.showSearch?(e.openBlock(),e.createBlock(ie,{key:0,ref:"searchInputRef",modelValue:d.value,"onUpdate:modelValue":r[3]||(r[3]=k=>d.value=k),"search-placeholder-label":e.unref(B),onSelectFirstEmoji:r[4]||(r[4]=k=>n("selected-emoji",j.value)),onFocusTabset:r[5]||(r[5]=k=>c.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:r[6]||(r[6]=k=>c.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:r[7]||(r[7]=e.withKeys(k=>n("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"])):e.createCommentVNode("",!0),e.createVNode(ke,{ref:"emojiSelectorRef","emoji-filter":d.value,"skin-tone":o.skinTone,"tabset-labels":A,"search-results-label":e.unref(L),"search-no-results-label":e.unref(l),"recently-used-emojis":o.recentlyUsedEmojis,"custom-emojis":o.customEmojis,"selected-tabset":R.value,onScrollIntoTab:f,onHighlightedEmoji:g,onSelectedEmoji:r[8]||(r[8]=k=>n("selected-emoji",k)),onFocusSkinSelector:r[9]||(r[9]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[10]||(r[10]=k=>o.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.tabsetRef.focusTabset()),onKeydown:r[11]||(r[11]=e.withKeys(k=>n("close"),["esc"])),onScrollBottomReached:r[12]||(r[12]=k=>n("scroll-bottom-reached"))},null,8,["emoji-filter","skin-tone","search-results-label","search-no-results-label","recently-used-emojis","custom-emojis","selected-tabset"])]),e.createElementVNode("div",$e,[o.showAddEmojiButton&&!j.value?(e.openBlock(),e.createBlock(e.unref(J.default),{key:0,importance:"outlined","aria-label":e.unref(i),class:"d-emoji-picker__add-emoji",onClick:r[13]||(r[13]=k=>n("add-emoji"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(i)),1)]),_:1},8,["aria-label"])):e.createCommentVNode("",!0),e.createVNode(Ae,{emoji:j.value},null,8,["emoji"]),e.createVNode(Te,{ref:"skinSelectorRef","is-hovering":!!j.value,"skin-selector-button-tooltip-label":e.unref(t),"skin-tone":o.skinTone,onSkinTone:r[14]||(r[14]=k=>n("skin-tone",k)),onFocusTabset:r[15]||(r[15]=k=>c.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:r[16]||(r[16]=k=>c.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:r[17]||(r[17]=e.withKeys(k=>n("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.default=De;
2
2
  //# sourceMappingURL=emoji-picker.cjs.map