@dialpad/dialtone 9.120.0 → 9.122.0
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.
- package/dist/css/dialtone-default-theme.css +4 -0
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone.css +4 -0
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/doc.json +35258 -35258
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/lib/emoji-picker/emoji-picker-constants.cjs +1 -1
- package/dist/vue2/lib/emoji-picker/emoji-picker-constants.cjs.map +1 -1
- package/dist/vue2/lib/emoji-picker/emoji-picker-constants.js +10 -9
- package/dist/vue2/lib/emoji-picker/emoji-picker-constants.js.map +1 -1
- package/dist/vue2/lib/emoji-picker/emoji-picker.cjs +1 -1
- package/dist/vue2/lib/emoji-picker/emoji-picker.cjs.map +1 -1
- package/dist/vue2/lib/emoji-picker/emoji-picker.js +123 -65
- package/dist/vue2/lib/emoji-picker/emoji-picker.js.map +1 -1
- package/dist/vue2/types/components/emoji_picker/emoji_picker.vue.d.ts.map +1 -1
- package/dist/vue2/types/components/emoji_picker/emoji_picker_constants.d.ts +1 -0
- package/dist/vue2/types/components/emoji_picker/modules/emoji_description.vue.d.ts +3 -1
- package/dist/vue2/types/components/emoji_picker/modules/emoji_description.vue.d.ts.map +1 -1
- package/dist/vue2/types/components/emoji_picker/modules/emoji_selector.vue.d.ts +11 -1
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/lib/toggle/toggle.cjs +1 -1
- package/dist/vue3/lib/toggle/toggle.cjs.map +1 -1
- package/dist/vue3/lib/toggle/toggle.js +27 -18
- package/dist/vue3/lib/toggle/toggle.js.map +1 -1
- package/dist/vue3/types/components/toggle/toggle.vue.d.ts +9 -0
- package/dist/vue3/types/components/toggle/toggle.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.d.ts +1 -1
- package/package.json +3 -3
|
@@ -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 size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, 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 { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants';\nimport {\n DtIconClock,\n DtIconSatisfied,\n DtIconLivingThing,\n DtIconFood,\n DtIconObject,\n DtIconTransportation,\n DtIconLightbulb,\n DtIconHeart,\n DtIconFlag,\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 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: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n ],\n };\n },\n\n computed: {\n tabs () {\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n return tabsData.map((tab, index) => ({\n ...tab,\n label: this.tabSetLabels[index],\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.unicode_character)\"\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\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'],\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 return this.recentlyUsedEmojis.length\n ? this.tabSetLabels.map((label) => ({ label }))\n : this.tabSetLabels.slice(1).map((label) => ({ label }));\n },\n\n tabs () {\n return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);\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 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 });\n },\n\n beforeDestroy () {\n if (this.tabLabelObserver) {\n this.tabLabelObserver.disconnect();\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 return this.CDN_URL + emoji + '.png';\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 /* 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 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=\"`${CDN_URL + emoji.unicode_character}.png`\"\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</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-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 :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 />\n </div>\n <div class=\"d-emoji-picker--footer\">\n <emoji-description :emoji=\"highlightedEmoji\" />\n <emoji-skin-selector\n ref=\"skinSelectorRef\"\n :is-hovering=\"!!highlightedEmoji\"\n :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n :skin-tone=\"skinTone\"\n @skin-tone=\"$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';\n\nexport default {\n name: 'DtEmojiPicker',\n\n components: {\n EmojiTabset,\n EmojiSearch,\n EmojiSelector,\n EmojiDescription,\n EmojiSkinSelector,\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 },\n\n /**\n * The placeholder text for the search input\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n */\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The label for the search results tab\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n */\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The label for the search no results\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n */\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The list of tabsets to show, it is necessary to be updated with the correct language\n * It must respect the provided order.\n * @type {Array}\n * @required\n * @example\n * <dt-emoji-picker\n * :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n * 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n */\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n /**\n * The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n */\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /**\n * Tooltip shown when skin selector button is hovered.\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n */\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n */\n searchQuery: {\n type: String,\n default: '',\n },\n\n /**\n * Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n */\n showSearch: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n internalSearchQuery: this.searchQuery,\n highlightedEmoji: null,\n selectedTabset: {},\n scrollIntoTab: 0,\n };\n },\n\n computed: {\n showRecentlyUsedTab () {\n return this.recentlyUsedEmojis?.length > 0;\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","EMOJI_PICKER_CATEGORIES","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","tab","index","newVal","id","parseId","skin","refKey","event","tabId","DtInput","DtIconSearch","DtIconClose","DtButton","value","emojisImported","CDN_URL","label","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"],"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 size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, 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 { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants';\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: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\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 true add custom emoji tab\n if (this.showCustomEmojisTab) {\n tabsData.push({ label: EMOJI_PICKER_CATEGORIES.CUSTOM, icon: DtIconTiktok });\n }\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: this.tabSetLabels[index],\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 return this.recentlyUsedEmojis.length\n ? this.tabSetLabels.map((label) => ({ label }))\n : this.tabSetLabels.slice(1).map((label) => ({ label }));\n },\n\n tabs () {\n return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);\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 /* 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=\"showCustomEmojisTab && !highlightedEmoji\"\n importance=\"outlined\"\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';\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 },\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 label for the add emoji button\n * required false because it is still experimental\n * @type {String}\n * @example\n * <dt-emoji-picker :addEmojiLabel=\"'Add emoji'\" />\n */\n addEmojiLabel: {\n type: String,\n required: false,\n default: 'Add emoji',\n },\n\n /**\n * The placeholder text for the search input\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n */\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The label for the search results tab\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n */\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The label for the search no results\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n */\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The list of tabsets to show, it is necessary to be updated with the correct language\n * It must respect the provided order.\n * @type {Array}\n * @required\n * @example\n * <dt-emoji-picker\n * :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n * 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n */\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n /**\n * The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n */\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /**\n * Tooltip shown when skin selector button is hovered.\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n */\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n */\n searchQuery: {\n type: String,\n default: '',\n },\n\n /**\n * Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n */\n showSearch: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n internalSearchQuery: this.searchQuery,\n highlightedEmoji: null,\n selectedTabset: {},\n scrollIntoTab: 0,\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\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","EMOJI_PICKER_CATEGORIES","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","tabsData","DtIconTiktok","tab","index","newVal","id","parseId","skin","refKey","event","tabId","DtInput","DtIconSearch","DtIconClose","DtButton","value","emojisImported","CDN_URL","label","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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_picker.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_picker/emoji_picker.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"emoji_picker.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_picker/emoji_picker.vue"],"names":[],"mappings":"AA0EA;"}
|
|
@@ -2,7 +2,9 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
2
2
|
emoji: Object;
|
|
3
3
|
}, {}, {
|
|
4
4
|
CDN_URL: string;
|
|
5
|
-
}, {}, {
|
|
5
|
+
}, {}, {
|
|
6
|
+
getImgSrc(emoji: any): any;
|
|
7
|
+
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
|
|
6
8
|
emoji: Object;
|
|
7
9
|
}>>, {}>;
|
|
8
10
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_description.vue.d.ts","sourceRoot":"","sources":["../../../../../components/emoji_picker/modules/emoji_description.vue"],"names":[],"mappings":"AAaA;;
|
|
1
|
+
{"version":3,"file":"emoji_description.vue.d.ts","sourceRoot":"","sources":["../../../../../components/emoji_picker/modules/emoji_description.vue"],"names":[],"mappings":"AAaA;;WA2Dc,MAAM;;;;;;WAAN,MAAM"}
|
|
@@ -27,6 +27,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
27
27
|
type: ArrayConstructor;
|
|
28
28
|
default: () => never[];
|
|
29
29
|
};
|
|
30
|
+
customEmojis: {
|
|
31
|
+
type: ArrayConstructor;
|
|
32
|
+
default: () => never[];
|
|
33
|
+
};
|
|
30
34
|
}, {}, {
|
|
31
35
|
tabLabelsRefs: never[];
|
|
32
36
|
emojiRefs: never[];
|
|
@@ -257,7 +261,7 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
257
261
|
setupEmojiRefs(): void;
|
|
258
262
|
searchByNameAndKeywords(): void;
|
|
259
263
|
debounce: (fn: any, delay: any) => (...args: any[]) => void;
|
|
260
|
-
getImgSrc: (emoji: any) =>
|
|
264
|
+
getImgSrc: (emoji: any) => any;
|
|
261
265
|
handleImageError: (event: any) => void;
|
|
262
266
|
scrollToTab: (tabIndex: any, focusFirstEmoji: any) => void;
|
|
263
267
|
resetScroll: () => void;
|
|
@@ -274,6 +278,7 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
274
278
|
handleArrowRight: (indexTab: any, indexEmoji: any) => void;
|
|
275
279
|
handleEmojiSelection(emoji: any, event: any): void;
|
|
276
280
|
handleKeyDownFilteredEmojis(event: any, indexEmoji: any, emoji: any): void;
|
|
281
|
+
setBottomScrollListener(): void;
|
|
277
282
|
setTabLabelObserver(): void;
|
|
278
283
|
focusLastEmoji(): void;
|
|
279
284
|
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
|
|
@@ -305,9 +310,14 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
305
310
|
type: ArrayConstructor;
|
|
306
311
|
default: () => never[];
|
|
307
312
|
};
|
|
313
|
+
customEmojis: {
|
|
314
|
+
type: ArrayConstructor;
|
|
315
|
+
default: () => never[];
|
|
316
|
+
};
|
|
308
317
|
}>>, {
|
|
309
318
|
emojiFilter: string;
|
|
310
319
|
recentlyUsedEmojis: unknown[];
|
|
320
|
+
customEmojis: unknown[];
|
|
311
321
|
}>;
|
|
312
322
|
export default _default;
|
|
313
323
|
//# sourceMappingURL=emoji_selector.vue.d.ts.map
|