npm - @dialpad/dialtone - Versions diffs - 9.70.1 → 9.71.0-beta.2 - Mend

@dialpad/dialtone 9.70.1 → 9.71.0-beta.2

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 (2403) hide show

package/dist/vue2/lib/emoji-picker.js.map CHANGED Viewed

	@@ -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/emoji_picker_constants.js","../../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 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 <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n DtIcon,\n },\n\n props: {\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\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: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\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 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.isScrolling && !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 if (!this.isScrolling) {\n this.selectedTab = id;\n }\n this.$emit('selected-tabset', id);\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\n name=\"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 kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"x-circle\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIcon,\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=\"$emit('selected-emoji', emoji)\"\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=\"$emit('selected-emoji', emoji)\"\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';\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 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, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }))\n : this.tabSetLabels.slice(1).map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }));\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((label, index) => {\n const refKey = `tabLabelRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabLabels, index, { label, 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 tabLabel = vm.tabLabels[tabIndex - 1];\n const tabElement = tabLabel.ref[0];\n\n vm.$nextTick(function () {\n const container = vm.$refs.listRef;\n const offsetTop = tabIndex === '1' ? 0 : tabElement.offsetTop - 20;\n\n let isScrolling = true;\n let prevScrollTop = container.scrollTop;\n vm.$emit('is-scrolling', true);\n\n / eslint-disable-next-line complexity /\n container.addEventListener('scroll', function () {\n if (isScrolling) {\n const scrollTop = container.scrollTop;\n if (\n (prevScrollTop < scrollTop && scrollTop >= offsetTop) \|\|\n (prevScrollTop > scrollTop && scrollTop <= offsetTop)\n ) {\n isScrolling = false;\n vm.$emit('is-scrolling', false);\n }\n prevScrollTop = scrollTop;\n }\n });\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') {\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.$emit('selected-emoji', emoji);\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 / 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.$emit('selected-emoji', emoji);\n }\n },\n\n setTabLabelObserver () {\n this.tabLabelObserver = new IntersectionObserver(entries => {\n this.$emit('is-scrolling', false);\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.focusEmoji(this.tabs.length - 1, 0);\n },\n\n },\n\n};\n</script>\n","export const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n DEFAULT: 'Default',\n LIGHT: 'Light',\n MEDIUM_LIGHT: 'MediumLight',\n MEDIUM: 'Medium',\n MEDIUM_DARK: 'MediumDark',\n DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n MOST_RECENTLY_USED: 'Most recently used',\n SMILEYS_AND_PEOPLE: 'Smileys and people',\n NATURE: 'Nature',\n FOOD: 'Food',\n ACTIVITY: 'Activity',\n TRAVEL: 'Travel',\n OBJECTS: 'Objects',\n SYMBOLS: 'Symbols',\n FLAGS: 'Flags',\n};\n\nexport default {\n EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n EMOJI_PICKER_CATEGORIES,\n};\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 :is-scrolling=\"isScrolling\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc.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 @is-scrolling=\"updateIsScrolling\"\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 isScrolling: false,\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 updateIsScrolling (value) {\n this.isScrolling = value;\n },\n\n updateHighlightedEmoji (emoji) {\n this.highlightedEmoji = emoji;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","emojisImported"],"mappings":"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"}
1	+ {"version":3,"file":"emoji-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/vue2/lib/emoji-row.cjs CHANGED Viewed

@@ -1,87 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const lib_tooltip = require("./tooltip.cjs");
-const lib_button = require("./button.cjs");
-const lib_emoji = require("./emoji.cjs");
-const lib_emojiTextWrapper = require("./emoji-text-wrapper.cjs");
-require("../chunks/popover_constants-XnGWXaxX.js");
-require("tippy.js");
-require("../common/utils.cjs");
-require("../common/constants.cjs");
-require("vue");
-require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/index-anN_sx1F.js");
-require("emoji-toolkit/emoji_strategy.json");
-require("./skeleton.cjs");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-const REACTIONS_ATTRIBUTES = [
-  "emojiUnicodeOrShortname",
-  "isSelected",
-  "ariaLabel",
-  "tooltip",
-  "num"
-];
-const _sfc_main = {
-  name: "DtRecipeEmojiRow",
-  components: { DtTooltip: lib_tooltip.DtTooltip, DtButton: lib_button.DtButton, DtEmoji: lib_emoji.DtEmoji, DtEmojiTextWrapper: lib_emojiTextWrapper.DtEmojiTextWrapper },
-  mixins: [],
-  props: {
-    /**
-     * Provide an array of reaction objects to be shown.
-     */
-    reactions: {
-      type: Array,
-      default: () => [],
-      validator: (reactions) => {
-        for (const reaction of reactions) {
-          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== void 0);
-          if (!validInput)
-            return false;
-        }
-        return true;
-      }
-    }
-  },
-  emits: [
-    "emoji-clicked",
-    "emoji-hovered"
-  ],
-  methods: {
-    emojiClicked(reaction) {
-      this.$emit("emoji-clicked", reaction.emojiUnicodeOrShortname);
-    },
-    emojiHovered(reaction, state) {
-      this.$emit("emoji-hovered", {
-        reaction: reaction.emojiUnicodeOrShortname,
-        state
-      });
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "dt-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
-    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "dt-emoji-row__tooltip", attrs: { "content-class": "d-wmx464", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
-      return [_c("dt-button", { class: ["dt-emoji-row__reaction", reaction.isSelected ? "dt-emoji-row__reaction--selected" : ""], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
-        return _vm.emojiClicked(reaction);
-      } } }, [_c("span", { staticClass: "dt-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "dt-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
-    } }], null, true) }, [_c("span", { attrs: { "aria-hidden": "true" } }, [_c("dt-emoji-text-wrapper", { attrs: { "size": "200" } }, [_vm._v(" " + _vm._s(reaction.tooltip) + " ")])], 1)])], 1);
-  }), _vm._t("picker")], 2);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const emoji_row = __component__.exports;
+const emoji_row = require("../recipes/conversation_view/emoji_row/emoji_row.vue.cjs");
+const emoji_row_constants = require("../recipes/conversation_view/emoji_row/emoji_row_constants.cjs");
 exports.DtRecipeEmojiRow = emoji_row;
-exports.REACTIONS_ATTRIBUTES = REACTIONS_ATTRIBUTES;
+exports.REACTIONS_ATTRIBUTES = emoji_row_constants.REACTIONS_ATTRIBUTES;
 //# sourceMappingURL=emoji-row.cjs.map

package/dist/vue2/lib/emoji-row.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-row.cjs","sources":[~~"../../recipes/conversation_view/emoji_row/emoji_row_constants.js","../../recipes/conversation_view/emoji_row/emoji_row.vue"~~],"sourcesContent":[~~"export const REACTIONS_ATTRIBUTES = [\n 'emojiUnicodeOrShortname',\n 'isSelected',\n 'ariaLabel',\n 'tooltip',\n 'num',\n~~]~~;\n\nexport default {\n REACTIONS_ATTRIBUTES,\n};\n"~~,"<template>\n <span class=\"dt-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n :reaction=\"reaction\"\n >\n <dt-tooltip\n class=\"dt-emoji-row__tooltip\"\n content-class=\"d-wmx464\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"200\">\n {{ reaction.tooltip }}\n </dt-emoji-text-wrapper>\n </span>\n <template #anchor=\"{ attrs }\">\n <dt-button\n importance=\"clear\"\n size=\"sm\"\n data-qa=\"feed-item-reaction-button\"\n :class=\"['dt-emoji-row__reaction', reaction.isSelected ? 'dt-emoji-row__reaction--selected' : '']\"\n :aria-label=\"reaction.ariaLabel\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"dt-emoji-row__emoji\">\n <dt-emoji\n size=\"200\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"dt-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- @slot Slot for emoji picker component, including the anchor. -->\n <slot name=\"picker\" />\n </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n mixins: [],\n\n props: {\n /*\n Provide an array of reaction objects to be shown.\n */\n reactions: {\n type: Array,\n default: () => [],\n validator: (reactions) => {\n for (const reaction of reactions) {\n const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n if (!validInput) return false;\n }\n return true;\n },\n },\n },\n\n emits: [\n 'emoji-clicked',\n 'emoji-hovered',\n ],\n\n methods: {\n emojiClicked (reaction) {\n this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n },\n\n emojiHovered (reaction, state) {\n this.$emit('emoji-hovered', {\n reaction: reaction.emojiUnicodeOrShortname,\n state,\n });\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-emoji-row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--dt-space-300);\n\n &__tooltip {\n display: inline-block;\n }\n\n &__reaction {\n --emoji-item-color-inset-shadow: transparent;\n --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);\n --emoji-item-color-background: var(--dt-action-color-background-muted-hover);\n\n padding: var(--dt-space-300) var(--dt-space-400);\n border-radius: var(--dt-size-radius-pill);\n border: 0;\n color: var(--emoji-item-color-foreground);\n background-color: var(--emoji-item-color-background);\n box-shadow: inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);\n height: var(--dt-size-550);\n\n &.dt-emoji-row__picker {\n padding: var(--dt-space-200) var(--dt-space-350);\n }\n\n &:hover {\n --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);\n --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);\n }\n\n &:active {\n --emoji-item-color-background: var(--dt-action-color-background-muted-active);\n --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);\n\n transform: scale(.98);\n }\n\n &--selected {\n --emoji-item-color-inset-shadow: var(--dt-color-border-brand);\n --emoji-item-color-foreground: var(--dt-color-link-primary);\n --emoji-item-color-background: var(--dt-action-color-background-base-hover);\n\n .dt-emoji-row__reaction-number {\n font-weight: var(--dt-font-weight-bold);\n }\n\n &:hover {\n --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);\n --emoji-item-color-foreground: var(--dt-color-link-primary-hover);\n }\n\n &:active {\n --emoji-item-color-background: var(--dt-action-color-background-base-active);\n }\n }\n }\n\n &__emoji {\n margin-right: var(--dt-space-300);\n display: inline-flex;\n }\n\n &__reaction-number {\n // set font properties individually to change line height,\n // as font shorthand property will override line-height.\n font-weight: var(--dt-typography-body-sm-font-weight);\n font-size: var(--dt-typography-body-sm-font-size);\n font-family: var(--dt-typography-body-sm-font-family);\n line-height: var(--dt-font-line-height-100);\n font-variant: tabular-nums;\n }\n}\n</style>\n"],"names":[~~"DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper"~~],"mappings":";;;;;;;;;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AC+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAAA,YAAA,WAAA,UAAAC,qBAAAC,SAAAA,UAAAA,SAAAC,oBAAAA,qBAAAA,mBAAA;AAAA,EAEA,QAAA,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAA,cAAA;AACA,mBAAA,YAAA,WAAA;AACA,gBAAA,aAAA,qBAAA,MAAA,CAAA,cAAA,SAAA,SAAA,MAAA,MAAA;AACA,cAAA,CAAA;AAAA,mBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,UAAA;AACA,WAAA,MAAA,iBAAA,SAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAA,UAAA,OAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji-row.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/vue2/lib/emoji-row.js CHANGED Viewed

@@ -1,87 +1,7 @@
-import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtTooltip } from "./tooltip.js";
-import { DtButton } from "./button.js";
-import { DtEmoji } from "./emoji.js";
-import { DtEmojiTextWrapper } from "./emoji-text-wrapper.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
-import "tippy.js";
-import "../common/utils.js";
-import "../common/constants.js";
-import "vue";
-import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/index-ODod4Oj_.js";
-import "emoji-toolkit/emoji_strategy.json";
-import "./skeleton.js";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-const REACTIONS_ATTRIBUTES = [
-  "emojiUnicodeOrShortname",
-  "isSelected",
-  "ariaLabel",
-  "tooltip",
-  "num"
-];
-const _sfc_main = {
-  name: "DtRecipeEmojiRow",
-  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },
-  mixins: [],
-  props: {
-    /**
-     * Provide an array of reaction objects to be shown.
-     */
-    reactions: {
-      type: Array,
-      default: () => [],
-      validator: (reactions) => {
-        for (const reaction of reactions) {
-          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== void 0);
-          if (!validInput)
-            return false;
-        }
-        return true;
-      }
-    }
-  },
-  emits: [
-    "emoji-clicked",
-    "emoji-hovered"
-  ],
-  methods: {
-    emojiClicked(reaction) {
-      this.$emit("emoji-clicked", reaction.emojiUnicodeOrShortname);
-    },
-    emojiHovered(reaction, state) {
-      this.$emit("emoji-hovered", {
-        reaction: reaction.emojiUnicodeOrShortname,
-        state
-      });
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "dt-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
-    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "dt-emoji-row__tooltip", attrs: { "content-class": "d-wmx464", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
-      return [_c("dt-button", { class: ["dt-emoji-row__reaction", reaction.isSelected ? "dt-emoji-row__reaction--selected" : ""], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
-        return _vm.emojiClicked(reaction);
-      } } }, [_c("span", { staticClass: "dt-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "dt-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
-    } }], null, true) }, [_c("span", { attrs: { "aria-hidden": "true" } }, [_c("dt-emoji-text-wrapper", { attrs: { "size": "200" } }, [_vm._v(" " + _vm._s(reaction.tooltip) + " ")])], 1)])], 1);
-  }), _vm._t("picker")], 2);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const emoji_row = __component__.exports;
+import { default as default2 } from "../recipes/conversation_view/emoji_row/emoji_row.vue.js";
+import { REACTIONS_ATTRIBUTES } from "../recipes/conversation_view/emoji_row/emoji_row_constants.js";
 export {
-  emoji_row as DtRecipeEmojiRow,
+  default2 as DtRecipeEmojiRow,
   REACTIONS_ATTRIBUTES
 };
 //# sourceMappingURL=emoji-row.js.map

package/dist/vue2/lib/emoji-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-row.js","sources":[~~"../../recipes/conversation_view/emoji_row/emoji_row_constants.js","../../recipes/conversation_view/emoji_row/emoji_row.vue"~~],"sourcesContent":[~~"export const REACTIONS_ATTRIBUTES = [\n 'emojiUnicodeOrShortname',\n 'isSelected',\n 'ariaLabel',\n 'tooltip',\n 'num',\n~~]~~;\n\nexport default {\n REACTIONS_ATTRIBUTES,\n};\n"~~,"<template>\n <span class=\"dt-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n :reaction=\"reaction\"\n >\n <dt-tooltip\n class=\"dt-emoji-row__tooltip\"\n content-class=\"d-wmx464\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"200\">\n {{ reaction.tooltip }}\n </dt-emoji-text-wrapper>\n </span>\n <template #anchor=\"{ attrs }\">\n <dt-button\n importance=\"clear\"\n size=\"sm\"\n data-qa=\"feed-item-reaction-button\"\n :class=\"['dt-emoji-row__reaction', reaction.isSelected ? 'dt-emoji-row__reaction--selected' : '']\"\n :aria-label=\"reaction.ariaLabel\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"dt-emoji-row__emoji\">\n <dt-emoji\n size=\"200\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"dt-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- @slot Slot for emoji picker component, including the anchor. -->\n <slot name=\"picker\" />\n </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n mixins: [],\n\n props: {\n /*\n Provide an array of reaction objects to be shown.\n */\n reactions: {\n type: Array,\n default: () => [],\n validator: (reactions) => {\n for (const reaction of reactions) {\n const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n if (!validInput) return false;\n }\n return true;\n },\n },\n },\n\n emits: [\n 'emoji-clicked',\n 'emoji-hovered',\n ],\n\n methods: {\n emojiClicked (reaction) {\n this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n },\n\n emojiHovered (reaction, state) {\n this.$emit('emoji-hovered', {\n reaction: reaction.emojiUnicodeOrShortname,\n state,\n });\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-emoji-row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--dt-space-300);\n\n &__tooltip {\n display: inline-block;\n }\n\n &__reaction {\n --emoji-item-color-inset-shadow: transparent;\n --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);\n --emoji-item-color-background: var(--dt-action-color-background-muted-hover);\n\n padding: var(--dt-space-300) var(--dt-space-400);\n border-radius: var(--dt-size-radius-pill);\n border: 0;\n color: var(--emoji-item-color-foreground);\n background-color: var(--emoji-item-color-background);\n box-shadow: inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);\n height: var(--dt-size-550);\n\n &.dt-emoji-row__picker {\n padding: var(--dt-space-200) var(--dt-space-350);\n }\n\n &:hover {\n --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);\n --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);\n }\n\n &:active {\n --emoji-item-color-background: var(--dt-action-color-background-muted-active);\n --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);\n\n transform: scale(.98);\n }\n\n &--selected {\n --emoji-item-color-inset-shadow: var(--dt-color-border-brand);\n --emoji-item-color-foreground: var(--dt-color-link-primary);\n --emoji-item-color-background: var(--dt-action-color-background-base-hover);\n\n .dt-emoji-row__reaction-number {\n font-weight: var(--dt-font-weight-bold);\n }\n\n &:hover {\n --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);\n --emoji-item-color-foreground: var(--dt-color-link-primary-hover);\n }\n\n &:active {\n --emoji-item-color-background: var(--dt-action-color-background-base-active);\n }\n }\n }\n\n &__emoji {\n margin-right: var(--dt-space-300);\n display: inline-flex;\n }\n\n &__reaction-number {\n // set font properties individually to change line height,\n // as font shorthand property will override line-height.\n font-weight: var(--dt-typography-body-sm-font-weight);\n font-size: var(--dt-typography-body-sm-font-size);\n font-family: var(--dt-typography-body-sm-font-family);\n line-height: var(--dt-font-line-height-100);\n font-variant: tabular-nums;\n }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AC+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAA,UAAA,SAAA,mBAAA;AAAA,EAEA,QAAA,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAA,cAAA;AACA,mBAAA,YAAA,WAAA;AACA,gBAAA,aAAA,qBAAA,MAAA,CAAA,cAAA,SAAA,SAAA,MAAA,MAAA;AACA,cAAA,CAAA;AAAA,mBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,UAAA;AACA,WAAA,MAAA,iBAAA,SAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAA,UAAA,OAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji-row.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/vue2/lib/emoji-text-wrapper.cjs CHANGED Viewed

@@ -1,112 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const common_emoji = require("../chunks/index-anN_sx1F.js");
-const icon_constants = require("../chunks/icon_constants-da57m7BZ.js");
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const lib_emoji = require("./emoji.cjs");
-require("emoji-toolkit/emoji_strategy.json");
-require("@dialpad/dialtone-icons/icons.js");
-require("./skeleton.cjs");
-const _sfc_main = {
-  name: "DtEmojiTextWrapper",
-  components: {
-    DtEmoji: lib_emoji.DtEmoji
-  },
-  props: {
-    /**
-     * Element type (tag name) to use for the wrapper.
-     */
-    elementType: {
-      type: String,
-      default: "div"
-    },
-    /**
-     * The icon size to render the emojis at: 100 to 800
-     */
-    size: {
-      type: String,
-      default: "500",
-      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
-    }
-  },
-  data() {
-    return {
-      loadingEmojiJson: true
-    };
-  },
-  async created() {
-    this.loadingEmojiJson = false;
-  },
-  methods: {
-    /**
-     * Replaces the valid codes from the text content with a DtEmoji component.
-     * @returns {Array<VNode|string>}
-     */
-    replaceDtEmojis(replaceList, textContent) {
-      if (!replaceList.length)
-        return textContent;
-      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
-      const items = textContent.split(regexp);
-      return items.filter((item) => item.trim() !== "").map((item) => {
-        if (replaceList.includes(item)) {
-          return this.$createElement(lib_emoji.DtEmoji, {
-            props: { code: item, size: this.size }
-          });
-        }
-        return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
-      });
-    },
-    /**
-     * Recursively search the Vue virtual DOM to find text
-     * @param VNode
-     * @returns {VNode|*}
-     */
-    searchVNodes(VNode) {
-      if (!VNode.tag && VNode.text) {
-        return this.searchCodes(VNode.text);
-      }
-      const children = VNode.children ? VNode.children.map((VNodeChild) => this.searchVNodes(VNodeChild)) : [];
-      return this.$createElement(VNode.tag, VNode.data, children);
-    },
-    // TODO: Find a way to crawl vue components
-    replaceVueComponentVNodeContent(VNode) {
-    },
-    /**
-     * Find codes in text.
-     * @param textContent string
-     * @returns {Array<VNode|string>|string}
-     */
-    searchCodes(textContent) {
-      const shortcodes = common_emoji.findShortCodes(textContent);
-      const emojis = common_emoji.findEmojis(textContent);
-      const replaceList = [...shortcodes, ...emojis];
-      return this.replaceDtEmojis(replaceList, textContent);
-    }
-  },
-  render(h) {
-    const defaultSlotContent = this.$slots.default || [];
-    return h(
-      this.elementType,
-      {
-        "data-qa": "emoji-text-wrapper",
-        class: "d-emoji-text-wrapper"
-      },
-      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
-    );
-  }
-};
-const _sfc_render = null;
-const _sfc_staticRenderFns = null;
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const DtEmojiTextWrapper = __component__.exports;
-exports.DtEmojiTextWrapper = DtEmojiTextWrapper;
+const emoji_text_wrapper = require("../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
+exports.DtEmojiTextWrapper = emoji_text_wrapper;
 //# sourceMappingURL=emoji-text-wrapper.cjs.map

package/dist/vue2/lib/emoji-text-wrapper.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-text-wrapper.cjs","sources":[~~"../../components/emoji_text_wrapper/emoji_text_wrapper.vue"~~],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at: 100 to 800\n /\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${replaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return this.$createElement(DtEmoji, {\n props: { code: item, size: this.size },\n });\n }\n return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n // If VNode has no tag, it is a text node\n if (!VNode.tag && VNode.text) {\n return this.searchCodes(VNode.text);\n }\n\n const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : []~~;\n return this.$createElement(VNode.tag~~, VNode.data, children);\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render (h) {\n const defaultSlotContent = this.$slots.default \|\| [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"~~],"~~names":[~~"DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","findEmojis"~~],"mappings":";;;;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA;AAAA,eAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,mBAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,SAAAC,wBAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji-text-wrapper.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/vue2/lib/emoji-text-wrapper.js CHANGED Viewed

@@ -1,112 +1,5 @@
-import { findShortCodes, findEmojis } from "../chunks/index-ODod4Oj_.js";
-import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-H9ahUVCG.js";
-import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtEmoji } from "./emoji.js";
-import "emoji-toolkit/emoji_strategy.json";
-import "@dialpad/dialtone-icons/icons.js";
-import "./skeleton.js";
-const _sfc_main = {
-  name: "DtEmojiTextWrapper",
-  components: {
-    DtEmoji
-  },
-  props: {
-    /**
-     * Element type (tag name) to use for the wrapper.
-     */
-    elementType: {
-      type: String,
-      default: "div"
-    },
-    /**
-     * The icon size to render the emojis at: 100 to 800
-     */
-    size: {
-      type: String,
-      default: "500",
-      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
-    }
-  },
-  data() {
-    return {
-      loadingEmojiJson: true
-    };
-  },
-  async created() {
-    this.loadingEmojiJson = false;
-  },
-  methods: {
-    /**
-     * Replaces the valid codes from the text content with a DtEmoji component.
-     * @returns {Array<VNode|string>}
-     */
-    replaceDtEmojis(replaceList, textContent) {
-      if (!replaceList.length)
-        return textContent;
-      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
-      const items = textContent.split(regexp);
-      return items.filter((item) => item.trim() !== "").map((item) => {
-        if (replaceList.includes(item)) {
-          return this.$createElement(DtEmoji, {
-            props: { code: item, size: this.size }
-          });
-        }
-        return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
-      });
-    },
-    /**
-     * Recursively search the Vue virtual DOM to find text
-     * @param VNode
-     * @returns {VNode|*}
-     */
-    searchVNodes(VNode) {
-      if (!VNode.tag && VNode.text) {
-        return this.searchCodes(VNode.text);
-      }
-      const children = VNode.children ? VNode.children.map((VNodeChild) => this.searchVNodes(VNodeChild)) : [];
-      return this.$createElement(VNode.tag, VNode.data, children);
-    },
-    // TODO: Find a way to crawl vue components
-    replaceVueComponentVNodeContent(VNode) {
-    },
-    /**
-     * Find codes in text.
-     * @param textContent string
-     * @returns {Array<VNode|string>|string}
-     */
-    searchCodes(textContent) {
-      const shortcodes = findShortCodes(textContent);
-      const emojis = findEmojis(textContent);
-      const replaceList = [...shortcodes, ...emojis];
-      return this.replaceDtEmojis(replaceList, textContent);
-    }
-  },
-  render(h) {
-    const defaultSlotContent = this.$slots.default || [];
-    return h(
-      this.elementType,
-      {
-        "data-qa": "emoji-text-wrapper",
-        class: "d-emoji-text-wrapper"
-      },
-      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
-    );
-  }
-};
-const _sfc_render = null;
-const _sfc_staticRenderFns = null;
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const DtEmojiTextWrapper = __component__.exports;
+import { default as default2 } from "../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
 export {
-  DtEmojiTextWrapper
+  default2 as DtEmojiTextWrapper
 };
 //# sourceMappingURL=emoji-text-wrapper.js.map

package/dist/vue2/lib/emoji-text-wrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-text-wrapper.js","sources":[~~"../../components/emoji_text_wrapper/emoji_text_wrapper.vue"~~],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at: 100 to 800\n /\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${replaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return this.$createElement(DtEmoji, {\n props: { code: item, size: this.size },\n });\n }\n return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n // If VNode has no tag, it is a text node\n if (!VNode.tag && VNode.text) {\n return this.searchCodes(VNode.text);\n }\n\n const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : []~~;\n return this.$createElement(VNode.tag~~, VNode.data, children);\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render (h) {\n const defaultSlotContent = this.$slots.default \|\| [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"~~],"~~names":[],"mappings":"~~;;;;;;;AASA,MAAA,YAAA~~;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA;AAAA,eAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji-text-wrapper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}