npm - @dialpad/dialtone - Versions diffs - 9.126.6 → 9.127.1 - Mend

@dialpad/dialtone 9.126.6 → 9.127.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (619) hide show

package/dist/vue2/lib/emoji-picker/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/modules/emoji_description.vue","../../../components/emoji_picker/modules/emoji_skin_selector.vue","../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n :selected=\"selectedTab\"\n size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :key=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :label=\"tab.label\"\n :panel-id=\"tab.panelId\"\n :tabindex=\"index + 1\"\n aria-controls=\"d-emoji-picker-list\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n >\n <component\n :is=\"tab.icon\"\n size=\"400\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport {\n DtIconClock,\n DtIconSatisfied,\n DtIconLivingThing,\n DtIconFood,\n DtIconObject,\n DtIconTransportation,\n DtIconLightbulb,\n DtIconHeart,\n DtIconFlag,\n DtIconTiktok,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n },\n\n props: {\n /*\n Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n /\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n showCustomEmojisTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /\n The labels for the aria-label\n * @type {Array}\n * @required\n /\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: this.tabSetLabels[0], icon: DtIconClock },\n { label: this.tabSetLabels[1], icon: DtIconSatisfied },\n { label: this.tabSetLabels[2], icon: DtIconLivingThing },\n { label: this.tabSetLabels[3], icon: DtIconFood },\n { label: this.tabSetLabels[4], icon: DtIconObject },\n { label: this.tabSetLabels[5], icon: DtIconTransportation },\n { label: this.tabSetLabels[6], icon: DtIconLightbulb },\n { label: this.tabSetLabels[7], icon: DtIconHeart },\n { label: this.tabSetLabels[8], icon: DtIconFlag },\n { label: this.tabSetLabels[9], icon: DtIconTiktok },\n ],\n };\n },\n\n computed: {\n tabs () {\n // if showRecentlyUsedTab is false remove first index of TABS_DATA\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n // if showCustomEmojisTab is false remove last index of TABS_DATA\n if (!this.showCustomEmojisTab) {\n tabsData.pop();\n }\n\n return tabsData.map((tab, index) => ({\n ...tab,\n // IDs on dt-tab component need to be on string\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIconSearch,\n DtIconClose,\n DtButton,\n },\n\n props: {\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n modelValue: {\n type: String,\n default: '',\n },\n },\n\n mounted () {\n this.focusSearchInput();\n },\n\n methods: {\n updateModelValue (value) {\n this.$emit('update:model-value', value);\n },\n\n focusEmojiSelector () {\n this.$emit('focus-emoji-selector');\n },\n\n focusTabset () {\n this.$emit('focus-tabset');\n },\n\n selectFirstEmoji () {\n this.$emit('select-first-emoji');\n },\n\n clearSearch () {\n this.$emit('update:model-value', '');\n this.focusSearchInput();\n },\n\n focusSearchInput () {\n this.$refs.searchInputRef.focus();\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-emoji-picker__selector\"\n >\n <div\n id=\"d-emoji-picker-list\"\n ref=\"listRef\"\n class=\"d-emoji-picker__list\"\n >\n <p\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n >\n {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n </p>\n <div\n v-else\n ref=\"tabCategoryRef\"\n class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n >\n <p>\n {{ fixedLabel }}\n </p>\n </div>\n <div\n v-for=\"(tabLabel, indexTab) in tabLabels\"\n v-show=\"!emojiFilter\"\n :key=\"indexTab\"\n :ref=\"`tabLabelRef-${indexTab}`\"\n class=\"d-emoji-picker__alignment\"\n >\n <p\n v-if=\"indexTab\"\n >\n {{ tabLabel.label }}\n </p>\n <div\n class=\"d-emoji-picker__tab\"\n >\n <button\n v-for=\"(emoji, indexEmoji) in\n (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n :key=\"emoji.shortname\"\n :ref=\"`emojiRef-${indexTab}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"$emit('highlighted-emoji', emoji)\"\n @mouseleave=\"$emit('highlighted-emoji', null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"`filteredEmoji-${index}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"hoverEmoji(emoji)\"\n @mouseleave=\"hoverEmoji(null)\"\n @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n >\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/ eslint-disable max-len /\n/ eslint-disable max-lines /\nimport { emojisGrouped as emojisImported } from '@dialpad/dialtone-emojis';\nimport { CDN_URL, EMOJIS_PER_ROW } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSelector',\n\n props: {\n emojiFilter: {\n type: String,\n default: '',\n },\n\n skinTone: {\n type: String,\n required: true,\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n customEmojis: {\n type: Array,\n default: () => [],\n },\n },\n\n data () {\n return {\n tabLabelsRefs: [],\n emojiRefs: [],\n emojiFilteredRefs: [],\n isFiltering: false,\n hoverFirstEmoji: true,\n fixedLabel: '',\n filteredEmojis: [],\n TABS_DATA: ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'],\n tabLabelObserver: null,\n };\n },\n\n computed: {\n / eslint-disable-next-line complexity /\n currentEmojis () {\n return [\n ...this.emojis[`People${this.skinTone}`] \|\| [],\n ...this.emojis.Nature \|\| [],\n ...this.emojis.Food \|\| [],\n ...this.emojis[`Activity${this.skinTone}`] \|\| [],\n ...this.emojis.Travel \|\| [],\n ...this.emojis[`Objects${this.skinTone}`] \|\| [],\n ...this.emojis.Symbols \|\| [],\n ...this.emojis.Flags \|\| [],\n ];\n },\n\n emojis () {\n return emojisImported;\n },\n\n CDN_URL () {\n return CDN_URL;\n },\n\n tabLabels () {\n let updateTabLabels = this.tabSetLabels.map((label) => ({ label }));\n\n if (!this.recentlyUsedEmojis.length) {\n updateTabLabels = this.tabSetLabels.slice(1).map((label) => ({ label }));\n }\n\n if (!this.customEmojis.length) {\n updateTabLabels.pop();\n }\n\n return updateTabLabels;\n },\n\n tabs () {\n const updateTabsOrder = this.recentlyUsedEmojis.length ? this.TABS_DATA.slice() : this.TABS_DATA.slice(1);\n\n if (!this.customEmojis.length) {\n updateTabsOrder.pop();\n }\n\n return updateTabsOrder;\n },\n },\n\n watch: {\n currentEmojis: {\n handler () {\n this.searchByNameAndKeywords();\n },\n\n immediate: true,\n },\n\n recentlyUsedEmojis: {\n handler (newValue) {\n this.emojis['Recently used'] = newValue;\n },\n\n immediate: true,\n },\n\n customEmojis: {\n handler (newValue) {\n this.emojis.Custom = newValue;\n },\n\n immediate: true,\n },\n\n emojiFilter: {\n handler (newFilter) {\n this.resetScroll();\n if (newFilter) {\n this.isFiltering = true;\n } else {\n this.isFiltering = false;\n this.$emit('highlighted-emoji', null);\n }\n\n this.debouncedSearch();\n },\n },\n\n selectedTabset: {\n handler (newValue) {\n this.scrollToTab(newValue.tabId);\n },\n\n deep: true,\n },\n },\n\n created () {\n this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setupEmojiRefs();\n this.setupFilteredRefs();\n this.setupTabLabelRefs();\n this.setTabLabelObserver();\n this.setBottomScrollListener();\n });\n },\n\n beforeDestroy () {\n if (this.tabLabelObserver) {\n this.tabLabelObserver.disconnect();\n }\n\n if (this.$refs.listRef && this.handleScroll) {\n this.$refs.listRef.removeEventListener('scroll', this.handleScroll);\n }\n },\n\n methods: {\n setupTabLabelRefs () {\n this.tabSetLabels?.forEach((_, index) => {\n const refKey = `tabLabelRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabLabelsRefs, index, { ref: this.$refs[refKey] });\n }\n });\n },\n\n setupFilteredRefs () {\n // it is necessary to clean the array before setting the new refs\n this.emojiFilteredRefs = [];\n\n this.filteredEmojis.forEach((emoji, index) => {\n const refKey = `filteredEmoji-${index}`;\n if (this.$refs[refKey]) {\n this.setFilteredRef(this.$refs[refKey], index);\n }\n });\n },\n\n setupEmojiRefs () {\n for (let i = 0; i < this.tabs.length; i++) {\n const refKey = `emojiRef-${i}`;\n if (this.$refs[refKey]) {\n this.$refs[refKey].forEach((el, indexEmoji) => {\n if (el) {\n this.setEmojiRef(el, i, indexEmoji);\n }\n });\n }\n }\n },\n\n searchByNameAndKeywords () {\n const searchStr = this.emojiFilter.toLowerCase();\n this.filteredEmojis = this.currentEmojis.filter(function (obj) {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(function (keyword) {\n return keyword.toLowerCase().includes(searchStr);\n });\n return nameIncludesSearchStr \|\| keywordsIncludeSearchStr;\n });\n this.$nextTick(function () {\n if (searchStr) {\n this.hoverEmoji(this.filteredEmojis[0], true);\n this.setupFilteredRefs();\n }\n });\n },\n\n debounce: function (fn, delay) {\n if (delay === undefined) { delay = 300; }\n let timeout;\n return function () {\n const args = []; let len = arguments.length;\n while (len--) args[len] = arguments[len];\n\n clearTimeout(timeout);\n timeout = setTimeout(function () {\n fn.apply(undefined, args);\n }, delay);\n };\n },\n\n getImgSrc: function (emoji) {\n // TODO Update json structure to have a property for custom emojis and avoid using date_added\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return this.CDN_URL + emoji.unicode_character + '.png';\n }\n },\n\n handleImageError: function (event) {\n event.target.parentNode.style.display = 'none';\n },\n\n scrollToTab: function (tabIndex, focusFirstEmoji) {\n const vm = this;\n if (focusFirstEmoji === undefined) { focusFirstEmoji = true; }\n const tabElement = vm.tabLabelsRefs[tabIndex - 1].ref[0];\n\n vm.$nextTick(function () {\n const container = vm.$refs.listRef;\n const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n vm.focusEmoji(tabIndex - 1, 0);\n }\n });\n },\n\n resetScroll: function () {\n const container = this.$refs.listRef;\n container.scrollTop = 0;\n },\n\n focusEmojiSelector: function () {\n this.focusEmoji(0, 0);\n },\n\n hoverEmoji (emoji, isFirst) {\n if (isFirst === undefined) { isFirst = false; }\n this.hoverFirstEmoji = isFirst;\n this.$emit('highlighted-emoji', emoji);\n },\n\n setEmojiRef: function (el, indexTab, indexEmoji) {\n if (!this.emojiRefs[indexTab]) {\n this.$set(this.emojiRefs, indexTab, []);\n }\n this.$set(this.emojiRefs[indexTab], indexEmoji, el);\n },\n\n setFilteredRef: function (el, index) {\n this.$set(this.emojiFilteredRefs, index, el);\n },\n\n focusEmoji: function (indexTab, indexEmoji) {\n // eslint-disable-next-line max-len\n const emojiRef = this.isFiltering ? this.emojiFilteredRefs[indexEmoji]?.[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown: function (event, indexTab, indexEmoji, emoji) {\n event.preventDefault();\n\n if (event.key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (indexTab === 0) {\n // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n const numberOfMissingEmojis =\n EMOJIS_PER_ROW - (this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);\n }\n return;\n }\n\n // if we are not on the first tab, we should jump to the previous row of the current tab\n if (!this.focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n const emojisInPreviousTab = this.emojiRefs[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!this.focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n // if cannot go down\n\n // Calculate position from cell 0 to cell 8\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n // check if it exists a next row in the current tab\n if (this.emojiRefs?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n // if it exists, we should focus the last emoji of the next row in the current tab\n this.focusEmoji(indexTab, this.emojiRefs[indexTab].length - 1);\n // if we are at the end of the list it will do nothing\n } else {\n // We don't have next row, we are in the last of the tab, then jump\n // to the next tab but in the equal emoji position in row 0.\n\n if (!this.focusEmoji(indexTab + 1, position)) {\n // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n // if it doesn't has, jump to the last\n if (!this.focusEmoji(0, position)) {\n this.focusEmoji(0, this.emojiRefs[0].length - 1);\n }\n }\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n if (this.focusEmoji(indexTab + 1, 0)) {\n this.scrollToTab((indexTab + 1) + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n this.$emit('focus-skin-selector');\n }\n }\n\n if (event.key === 'Tab' && event.shiftKey) {\n if (this.focusEmoji(indexTab, 0) && indexTab > 0) {\n this.scrollToTab(indexTab, true);\n } else {\n this.scrollToTab(1, false);\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n / eslint-disable-next-line complexity /\n handleHorizontalNavigation: function (direction, indexTab, indexEmoji) {\n if (this.isFiltering) {\n if (direction === 'left') {\n this.handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n this.handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRight(indexTab, indexEmoji);\n }\n }\n },\n\n handleArrowLeftFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji - 1)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n },\n\n handleArrowRightFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji + 1)) {\n this.focusEmoji(0, 0);\n }\n },\n\n handleArrowLeft: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji - 1)) {\n if (this.emojiRefs[indexTab - 1]) {\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n } else {\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);\n }\n }\n },\n\n handleArrowRight: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji + 1)) {\n if (!this.focusEmoji(indexTab + 1, 0)) {\n this.focusEmoji(0, 0);\n }\n }\n },\n\n handleEmojiSelection (emoji, event) {\n this.$emit('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n },\n\n / 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 :aria-label=\"addEmojiLabel\"\n class=\"d-emoji-picker__add-emoji\"\n @click=\"$emit('add-emoji')\"\n >\n {{ addEmojiLabel }}\n </dt-button>\n <emoji-description :emoji=\"highlightedEmoji\" />\n <emoji-skin-selector\n ref=\"skinSelectorRef\"\n :is-hovering=\"!!highlightedEmoji\"\n :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n :skin-tone=\"skinTone\"\n @skin-tone=\"$emit('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport { DtButton } from '../button';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n name: 'DtEmojiPicker',\n\n components: {\n EmojiTabset,\n EmojiSearch,\n EmojiSelector,\n EmojiDescription,\n EmojiSkinSelector,\n DtButton,\n },\n\n mixins: [DtLocalizationMixin],\n\n props: {\n /\n The array with recently used emoji object\n * This list is necessary to fill the recently used tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n /\n // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n /\n The array with custom emojis object\n * This list is necessary to fill the custom tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n /\n customEmojis: {\n type: Array,\n },\n\n /\n The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n /\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /\n Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n /\n searchQuery: {\n type: String,\n default: '',\n },\n\n /\n Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n */\n showSearch: {\n type: Boolean,\n default: true,\n },\n },\n\n 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 tabSetLabels () {\n return [\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n ];\n },\n\n searchPlaceholderLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\n },\n\n searchResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\n },\n\n searchNoResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\n },\n\n skinSelectorButtonTooltipLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\n },\n\n addEmojiLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n },\n },\n\n watch: {\n searchQuery (value) {\n this.internalSearchQuery = value;\n },\n },\n\n methods: {\n scrollToSelectedTabset (tabId) {\n this.internalSearchQuery = '';\n this.selectedTabset = { ...this.selectedTabset, tabId };\n },\n\n updateScrollIntoTab (value) {\n this.scrollIntoTab = value;\n },\n\n updateHighlightedEmoji (emoji) {\n this.highlightedEmoji = emoji;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTabGroup","DtTab","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","DtIconTiktok","tabsData","tab","index","newVal","id","parseId","skin","refKey","event","tabId","DtInput","DtIconSearch","DtIconClose","DtButton","value","emojisImported","CDN_URL","updateTabLabels","label","updateTabsOrder","newValue","newFilter","_a","_","emoji","i","el","indexEmoji","searchStr","obj","nameIncludesSearchStr","keywordsIncludeSearchStr","keyword","fn","delay","timeout","args","len","tabIndex","focusFirstEmoji","vm","tabElement","container","offsetTop","isFirst","indexTab","emojiRef","position","EMOJIS_PER_ROW","numberOfMissingEmojis","emojiToJump","previousTab","emojisInPreviousTab","lastEmojiPosition","_b","direction","entries","entry","target","_c","_d","_e","_f","child","DtTooltip","EMOJI_PICKER_SKIN_TONE_MODIFIERS","oldVal","EmojiTabset","EmojiSearch","EmojiSelector","EmojiDescription","EmojiSkinSelector","DtLocalizationMixin"],"mappings":"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"}
1	+ {"version":3,"file":"emoji-picker.js","sources":["../../../components/emoji_picker/modules/emoji_tabset.vue","../../../components/emoji_picker/modules/emoji_search.vue","../../../components/emoji_picker/modules/emoji_selector.vue","../../../components/emoji_picker/modules/emoji_description.vue","../../../components/emoji_picker/modules/emoji_skin_selector.vue","../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n :selected=\"selectedTab\"\n size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :key=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :label=\"tab.label\"\n :panel-id=\"tab.panelId\"\n :tabindex=\"index + 1\"\n aria-controls=\"d-emoji-picker-list\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n >\n <component\n :is=\"tab.icon\"\n size=\"400\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport {\n DtIconClock,\n DtIconSatisfied,\n DtIconLivingThing,\n DtIconFood,\n DtIconObject,\n DtIconTransportation,\n DtIconLightbulb,\n DtIconHeart,\n DtIconFlag,\n DtIconTiktok,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n },\n\n props: {\n /*\n Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n /\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n showCustomEmojisTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /\n The labels for the aria-label\n * @type {Array}\n * @required\n /\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: this.tabSetLabels[0], icon: DtIconClock },\n { label: this.tabSetLabels[1], icon: DtIconSatisfied },\n { label: this.tabSetLabels[2], icon: DtIconLivingThing },\n { label: this.tabSetLabels[3], icon: DtIconFood },\n { label: this.tabSetLabels[4], icon: DtIconObject },\n { label: this.tabSetLabels[5], icon: DtIconTransportation },\n { label: this.tabSetLabels[6], icon: DtIconLightbulb },\n { label: this.tabSetLabels[7], icon: DtIconHeart },\n { label: this.tabSetLabels[8], icon: DtIconFlag },\n { label: this.tabSetLabels[9], icon: DtIconTiktok },\n ],\n };\n },\n\n computed: {\n tabs () {\n // if showRecentlyUsedTab is false remove first index of TABS_DATA\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n // if showCustomEmojisTab is false remove last index of TABS_DATA\n if (!this.showCustomEmojisTab) {\n tabsData.pop();\n }\n\n return tabsData.map((tab, index) => ({\n ...tab,\n // IDs on dt-tab component need to be on string\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIconSearch,\n DtIconClose,\n DtButton,\n },\n\n props: {\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n modelValue: {\n type: String,\n default: '',\n },\n },\n\n mounted () {\n this.focusSearchInput();\n },\n\n methods: {\n updateModelValue (value) {\n this.$emit('update:model-value', value);\n },\n\n focusEmojiSelector () {\n this.$emit('focus-emoji-selector');\n },\n\n focusTabset () {\n this.$emit('focus-tabset');\n },\n\n selectFirstEmoji () {\n this.$emit('select-first-emoji');\n },\n\n clearSearch () {\n this.$emit('update:model-value', '');\n this.focusSearchInput();\n },\n\n focusSearchInput () {\n this.$refs.searchInputRef.focus();\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-emoji-picker__selector\"\n >\n <div\n id=\"d-emoji-picker-list\"\n ref=\"listRef\"\n class=\"d-emoji-picker__list\"\n >\n <p\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n >\n {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n </p>\n <div\n v-else\n ref=\"tabCategoryRef\"\n class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n >\n <p>\n {{ fixedLabel }}\n </p>\n </div>\n <div\n v-for=\"(tabLabel, indexTab) in tabLabels\"\n v-show=\"!emojiFilter\"\n :key=\"indexTab\"\n :ref=\"`tabLabelRef-${indexTab}`\"\n class=\"d-emoji-picker__alignment\"\n >\n <p\n v-if=\"indexTab\"\n >\n {{ tabLabel.label }}\n </p>\n <div\n class=\"d-emoji-picker__tab\"\n >\n <button\n v-for=\"(emoji, indexEmoji) in\n (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n :key=\"emoji.shortname\"\n :ref=\"`emojiRef-${indexTab}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"$emit('highlighted-emoji', emoji)\"\n @mouseleave=\"$emit('highlighted-emoji', null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"`filteredEmoji-${index}`\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"event => handleEmojiSelection(emoji, event)\"\n @focusin=\"$emit('highlighted-emoji', emoji)\"\n @focusout=\"$emit('highlighted-emoji', null)\"\n @mouseover=\"hoverEmoji(emoji)\"\n @mouseleave=\"hoverEmoji(null)\"\n @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n >\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/ eslint-disable max-len /\n/ eslint-disable max-lines /\nimport { emojisGrouped as emojisImported } from '@dialpad/dialtone-emojis';\nimport { CDN_URL, EMOJIS_PER_ROW } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSelector',\n\n props: {\n emojiFilter: {\n type: String,\n default: '',\n },\n\n skinTone: {\n type: String,\n required: true,\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n customEmojis: {\n type: Array,\n default: () => [],\n },\n },\n\n data () {\n return {\n tabLabelsRefs: [],\n emojiRefs: [],\n emojiFilteredRefs: [],\n isFiltering: false,\n hoverFirstEmoji: true,\n fixedLabel: '',\n filteredEmojis: [],\n TABS_DATA: ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'],\n tabLabelObserver: null,\n };\n },\n\n computed: {\n / eslint-disable-next-line complexity /\n currentEmojis () {\n return [\n ...this.emojis[`People${this.skinTone}`] \|\| [],\n ...this.emojis.Nature \|\| [],\n ...this.emojis.Food \|\| [],\n ...this.emojis[`Activity${this.skinTone}`] \|\| [],\n ...this.emojis.Travel \|\| [],\n ...this.emojis[`Objects${this.skinTone}`] \|\| [],\n ...this.emojis.Symbols \|\| [],\n ...this.emojis.Flags \|\| [],\n ];\n },\n\n emojis () {\n return emojisImported;\n },\n\n CDN_URL () {\n return CDN_URL;\n },\n\n tabLabels () {\n let updateTabLabels = this.tabSetLabels.map((label) => ({ label }));\n\n if (!this.recentlyUsedEmojis.length) {\n updateTabLabels = this.tabSetLabels.slice(1).map((label) => ({ label }));\n }\n\n if (!this.customEmojis.length) {\n updateTabLabels.pop();\n }\n\n return updateTabLabels;\n },\n\n tabs () {\n const updateTabsOrder = this.recentlyUsedEmojis.length ? this.TABS_DATA.slice() : this.TABS_DATA.slice(1);\n\n if (!this.customEmojis.length) {\n updateTabsOrder.pop();\n }\n\n return updateTabsOrder;\n },\n },\n\n watch: {\n currentEmojis: {\n handler () {\n this.searchByNameAndKeywords();\n },\n\n immediate: true,\n },\n\n recentlyUsedEmojis: {\n handler (newValue) {\n this.emojis['Recently used'] = newValue;\n },\n\n immediate: true,\n },\n\n customEmojis: {\n handler (newValue) {\n this.emojis.Custom = newValue;\n },\n\n immediate: true,\n },\n\n emojiFilter: {\n handler (newFilter) {\n this.resetScroll();\n if (newFilter) {\n this.isFiltering = true;\n } else {\n this.isFiltering = false;\n this.$emit('highlighted-emoji', null);\n }\n\n this.debouncedSearch();\n },\n },\n\n selectedTabset: {\n handler (newValue) {\n this.scrollToTab(newValue.tabId);\n },\n\n deep: true,\n },\n },\n\n created () {\n this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setupEmojiRefs();\n this.setupFilteredRefs();\n this.setupTabLabelRefs();\n this.setTabLabelObserver();\n this.setBottomScrollListener();\n });\n },\n\n beforeDestroy () {\n if (this.tabLabelObserver) {\n this.tabLabelObserver.disconnect();\n }\n\n if (this.$refs.listRef && this.handleScroll) {\n this.$refs.listRef.removeEventListener('scroll', this.handleScroll);\n }\n },\n\n methods: {\n setupTabLabelRefs () {\n this.tabSetLabels?.forEach((_, index) => {\n const refKey = `tabLabelRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabLabelsRefs, index, { ref: this.$refs[refKey] });\n }\n });\n },\n\n setupFilteredRefs () {\n // it is necessary to clean the array before setting the new refs\n this.emojiFilteredRefs = [];\n\n this.filteredEmojis.forEach((emoji, index) => {\n const refKey = `filteredEmoji-${index}`;\n if (this.$refs[refKey]) {\n this.setFilteredRef(this.$refs[refKey], index);\n }\n });\n },\n\n setupEmojiRefs () {\n for (let i = 0; i < this.tabs.length; i++) {\n const refKey = `emojiRef-${i}`;\n if (this.$refs[refKey]) {\n this.$refs[refKey].forEach((el, indexEmoji) => {\n if (el) {\n this.setEmojiRef(el, i, indexEmoji);\n }\n });\n }\n }\n },\n\n searchByNameAndKeywords () {\n const searchStr = this.emojiFilter.toLowerCase();\n this.filteredEmojis = this.currentEmojis.filter(function (obj) {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(function (keyword) {\n return keyword.toLowerCase().includes(searchStr);\n });\n return nameIncludesSearchStr \|\| keywordsIncludeSearchStr;\n });\n this.$nextTick(function () {\n if (searchStr) {\n this.hoverEmoji(this.filteredEmojis[0], true);\n this.setupFilteredRefs();\n }\n });\n },\n\n debounce: function (fn, delay) {\n if (delay === undefined) { delay = 300; }\n let timeout;\n return function () {\n const args = []; let len = arguments.length;\n while (len--) args[len] = arguments[len];\n\n clearTimeout(timeout);\n timeout = setTimeout(function () {\n fn.apply(undefined, args);\n }, delay);\n };\n },\n\n getImgSrc: function (emoji) {\n // TODO Update json structure to have a property for custom emojis and avoid using date_added\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return this.CDN_URL + emoji.unicode_character + '.png';\n }\n },\n\n handleImageError: function (event) {\n event.target.parentNode.style.display = 'none';\n },\n\n scrollToTab: function (tabIndex, focusFirstEmoji) {\n const vm = this;\n if (focusFirstEmoji === undefined) { focusFirstEmoji = true; }\n const tabElement = vm.tabLabelsRefs[tabIndex - 1].ref[0];\n\n vm.$nextTick(function () {\n const container = vm.$refs.listRef;\n const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n vm.focusEmoji(tabIndex - 1, 0);\n }\n });\n },\n\n resetScroll: function () {\n const container = this.$refs.listRef;\n container.scrollTop = 0;\n },\n\n focusEmojiSelector: function () {\n this.focusEmoji(0, 0);\n },\n\n hoverEmoji (emoji, isFirst) {\n if (isFirst === undefined) { isFirst = false; }\n this.hoverFirstEmoji = isFirst;\n this.$emit('highlighted-emoji', emoji);\n },\n\n setEmojiRef: function (el, indexTab, indexEmoji) {\n if (!this.emojiRefs[indexTab]) {\n this.$set(this.emojiRefs, indexTab, []);\n }\n this.$set(this.emojiRefs[indexTab], indexEmoji, el);\n },\n\n setFilteredRef: function (el, index) {\n this.$set(this.emojiFilteredRefs, index, el);\n },\n\n focusEmoji: function (indexTab, indexEmoji) {\n // eslint-disable-next-line max-len\n const emojiRef = this.isFiltering ? this.emojiFilteredRefs[indexEmoji]?.[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown: function (event, indexTab, indexEmoji, emoji) {\n event.preventDefault();\n\n if (event.key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (indexTab === 0) {\n // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n const numberOfMissingEmojis =\n EMOJIS_PER_ROW - (this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);\n }\n return;\n }\n\n // if we are not on the first tab, we should jump to the previous row of the current tab\n if (!this.focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n const emojisInPreviousTab = this.emojiRefs[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!this.focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n // if cannot go down\n\n // Calculate position from cell 0 to cell 8\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n // check if it exists a next row in the current tab\n if (this.emojiRefs?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n // if it exists, we should focus the last emoji of the next row in the current tab\n this.focusEmoji(indexTab, this.emojiRefs[indexTab].length - 1);\n // if we are at the end of the list it will do nothing\n } else {\n // We don't have next row, we are in the last of the tab, then jump\n // to the next tab but in the equal emoji position in row 0.\n\n if (!this.focusEmoji(indexTab + 1, position)) {\n // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n // if it doesn't has, jump to the last\n if (!this.focusEmoji(0, position)) {\n this.focusEmoji(0, this.emojiRefs[0].length - 1);\n }\n }\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n if (this.focusEmoji(indexTab + 1, 0)) {\n this.scrollToTab((indexTab + 1) + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n this.$emit('focus-skin-selector');\n }\n }\n\n if (event.key === 'Tab' && event.shiftKey) {\n if (this.focusEmoji(indexTab, 0) && indexTab > 0) {\n this.scrollToTab(indexTab, true);\n } else {\n this.scrollToTab(1, false);\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n / eslint-disable-next-line complexity /\n handleHorizontalNavigation: function (direction, indexTab, indexEmoji) {\n if (this.isFiltering) {\n if (direction === 'left') {\n this.handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n this.handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n this.handleArrowRight(indexTab, indexEmoji);\n }\n }\n },\n\n handleArrowLeftFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji - 1)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n },\n\n handleArrowRightFiltered: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(0, indexEmoji + 1)) {\n this.focusEmoji(0, 0);\n }\n },\n\n handleArrowLeft: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji - 1)) {\n if (this.emojiRefs[indexTab - 1]) {\n this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);\n } else {\n this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);\n }\n }\n },\n\n handleArrowRight: function (indexTab, indexEmoji) {\n if (!this.focusEmoji(indexTab, indexEmoji + 1)) {\n if (!this.focusEmoji(indexTab + 1, 0)) {\n this.focusEmoji(0, 0);\n }\n }\n },\n\n handleEmojiSelection (emoji, event) {\n this.$emit('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n },\n\n // @TODO(improvement): Sync with simplified Vue 3 version\n / eslint-disable-next-line complexity /\n handleKeyDownFilteredEmojis (event, indexEmoji, emoji) {\n event.preventDefault();\n this.hoverFirstEmoji = false;\n\n if (event.key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n if (!this.focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n const lastEmojiPosition =\n this.emojiFilteredRefs.length - (this.emojiFilteredRefs.length % EMOJIS_PER_ROW) + position;\n\n this.focusEmoji(0, lastEmojiPosition);\n\n if (!this.focusEmoji(0, lastEmojiPosition)) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n }\n }\n }\n\n if (event.key === 'ArrowDown') {\n if (!this.focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (this.emojiFilteredRefs?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n this.focusEmoji(0, this.emojiFilteredRefs.length - 1);\n } else {\n this.focusEmoji(0, position);\n }\n }\n }\n\n if (event.key === 'ArrowLeft') {\n this.handleHorizontalNavigation('left', 0, indexEmoji);\n }\n\n if (event.key === 'ArrowRight') {\n this.handleHorizontalNavigation('right', 0, indexEmoji);\n }\n\n if (event.key === 'Tab') {\n this.$emit('focus-skin-selector');\n }\n\n if (event.key === 'Enter') {\n this.handleEmojiSelection(emoji, event);\n }\n },\n\n setBottomScrollListener () {\n this.handleScroll = () => {\n const container = this.$refs.listRef;\n if (container.scrollTop + container.clientHeight >= container.scrollHeight) {\n this.$emit('scroll-bottom-reached');\n }\n };\n\n this.$refs.listRef.addEventListener('scroll', this.handleScroll);\n },\n\n setTabLabelObserver () {\n this.tabLabelObserver = new IntersectionObserver(entries => {\n / eslint-disable-next-line complexity /\n entries.forEach(entry => {\n const { target } = entry;\n const index = parseInt(target.dataset.index);\n\n if (entry.isIntersecting && target.offsetTop <= this.$refs.tabCategoryRef?.offsetTop + 50) {\n this.fixedLabel = this.tabLabels[index - 1]?.label ?? this.tabLabels[0]?.label;\n this.$emit('scroll-into-tab', index - 1);\n } else if (entry.boundingClientRect.bottom <= this.$refs.tabCategoryRef?.getBoundingClientRect().bottom) {\n this.$emit('scroll-into-tab', index);\n this.fixedLabel = this.tabLabels[index]?.label;\n } else if (index === 1) {\n this.$emit('scroll-into-tab', index);\n this.fixedLabel = this.tabLabels[0]?.label;\n }\n });\n });\n\n this.tabLabelObserver.observe(this.$refs.tabCategoryRef);\n\n Array.from(this.$refs.listRef.children).forEach((child, index) => {\n this.tabLabelObserver.observe(child);\n child.dataset.index = index;\n });\n },\n\n focusLastEmoji () {\n this.scrollToTab(this.tabs.length, true);\n },\n\n },\n\n};\n</script>\n","<template>\n <div class=\"d-emoji-picker__data\">\n <img\n v-if=\"emoji\"\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n >\n <div>{{ emoji?.name }}</div>\n </div>\n</template>\n\n<script>\nimport { CDN_URL } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiDescription',\n\n props: {\n /\n Emoji data\n * @type {Object}\n * @default null\n /\n emoji: {\n type: Object,\n default: () => null,\n },\n },\n\n data () {\n return {\n CDN_URL,\n };\n },\n\n methods: {\n getImgSrc (emoji) {\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return `${CDN_URL + emoji.unicode_character}.png`;\n }\n },\n },\n};\n</script>\n","<template>\n <div data-qa=\"skin-selector\">\n <div\n v-show=\"isOpen\"\n class=\"d-emoji-picker__skin-list\"\n >\n <button\n v-for=\"(skin, index) in skinList\"\n :key=\"skin.name\"\n :ref=\"`skinRef-${index}`\"\n :class=\"{\n 'selected': skinSelected?.skinCode === skin.skinCode,\n }\"\n @click=\"selectSkin(skin)\"\n @keydown=\"event => handleKeyDown(event, skin, index)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skin.name\"\n :aria-label=\"skin.name\"\n :title=\"skin.name\"\n :src=\"`${cdnUrl + skin.unicode_output}.png`\"\n >\n </button>\n </div>\n <div\n v-show=\"!isOpen\"\n class=\"d-emoji-picker__skin-selected\"\n >\n <dt-tooltip placement=\"top-end\">\n {{ skinSelectorButtonTooltipLabel }}\n <template #anchor>\n <button\n ref=\"skinSelectorRef\"\n :aria-label=\"skinSelectorButtonTooltipLabel\"\n tabindex=\"-1\"\n @click=\"toggleSkinList\"\n @keydown=\"event => handleKeyDown(event)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skinSelected?.name\"\n :aria-label=\"skinSelected?.name\"\n :title=\"skinSelected?.name\"\n :src=\"`${cdnUrl + skinSelected?.unicode_output}.png`\"\n >\n </button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n</template>\n\n<script>\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport default {\n name: 'EmojiSkinSelector',\n\n components: {\n DtTooltip,\n },\n\n props: {\n skinTone: {\n type: String,\n required: true,\n },\n\n isHovering: {\n type: Boolean,\n default: false,\n },\n\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n },\n\n data () {\n return {\n isOpen: false,\n skinSelected: null,\n skinsRef: [],\n cdnUrl: CDN_URL,\n };\n },\n\n computed: {\n skinPassedIn () {\n return this.skinList.find(skin => skin.skinTone === this.skinTone);\n },\n\n skinList () {\n return [\n {\n name: ':wave_tone1:',\n unicode_output: '1f44b-1f3fb',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n skinCode: '_tone1',\n },\n {\n name: ':wave_tone2:',\n unicode_output: '1f44b-1f3fc',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n skinCode: '_tone2',\n },\n {\n name: ':wave_tone3:',\n unicode_output: '1f44b-1f3fd',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n skinCode: '_tone3',\n },\n {\n name: ':wave_tone4:',\n unicode_output: '1f44b-1f3fe',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n skinCode: '_tone4',\n },\n {\n name: ':wave_tone5:',\n unicode_output: '1f44b-1f3ff',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n skinCode: '_tone5',\n },\n {\n name: ':wave:',\n unicode_output: '1f44b',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n skinCode: '',\n },\n ];\n },\n },\n\n watch: {\n isHovering (newVal) {\n if (newVal) {\n this.isOpen = false;\n }\n },\n\n skinTone (newVal, oldVal) {\n if (newVal !== oldVal) {\n this.skinSelected = this.skinPassedIn;\n }\n },\n },\n\n mounted () {\n this.skinSelected = this.skinPassedIn;\n this.$nextTick(() => {\n this.setupSkinRefs();\n });\n },\n\n methods: {\n setupSkinRefs () {\n this.skinList.forEach((skin, index) => {\n const refKey = `skinRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.skinsRef, index, this.$refs[refKey][0]);\n }\n });\n },\n\n focusSkinSelector () {\n if (this.$refs.skinSelectorRef) {\n this.$refs.skinSelectorRef.focus();\n }\n },\n\n selectSkin (skin) {\n this.skinSelected = skin;\n this.isOpen = false;\n this.$emit('skin-tone', skin.skinTone);\n this.$nextTick(() => {\n this.focusSkinSelector();\n });\n },\n\n handleKeyDown (event, skin, index) {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n if (index === 0) this.skinsRef[this.skinsRef.length - 1]?.focus();\n this.skinsRef[index - 1]?.focus();\n }\n\n if (event.key === 'ArrowRight') {\n if (this.skinsRef.length) this.skinsRef[0]?.focus();\n this.skinsRef[index + 1]?.focus();\n }\n\n if (event.key === 'Enter') {\n if (skin) { this.selectSkin(skin); } else {\n this.toggleSkinList();\n }\n }\n\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n this.$emit('focus-last-emoji');\n } else {\n this.$emit('focus-tabset');\n }\n }\n },\n\n toggleSkinList () {\n this.isOpen = !this.isOpen;\n this.$nextTick(() => {\n if (this.skinsRef[0]) {\n this.skinsRef[0].focus();\n }\n });\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-emoji-picker\"\n >\n <div class=\"d-emoji-picker--header\">\n <emoji-tabset\n ref=\"tabsetRef\"\n :emoji-filter=\"internalSearchQuery\"\n :show-custom-emojis-tab=\"showCustomEmojisTab\"\n :show-recently-used-tab=\"showRecentlyUsedTab\"\n :scroll-into-tab=\"scrollIntoTab\"\n :tab-set-labels=\"tabSetLabels\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch\n ? $refs.searchInputRef.focusSearchInput()\n : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc.native=\"$emit('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--body\">\n <emoji-search\n v-if=\"showSearch\"\n ref=\"searchInputRef\"\n :model-value=\"internalSearchQuery\"\n :search-placeholder-label=\"searchPlaceholderLabel\"\n @update:model-value=\"newValue => internalSearchQuery = newValue\"\n @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n <emoji-selector\n ref=\"emojiSelectorRef\"\n :emoji-filter=\"internalSearchQuery\"\n :skin-tone=\"skinTone\"\n :tab-set-labels=\"tabSetLabels\"\n :search-results-label=\"searchResultsLabel\"\n :search-no-results-label=\"searchNoResultsLabel\"\n :recently-used-emojis=\"recentlyUsedEmojis\"\n :custom-emojis=\"customEmojis\"\n :selected-tabset=\"selectedTabset\"\n @scroll-into-tab=\"updateScrollIntoTab\"\n @highlighted-emoji=\"updateHighlightedEmoji\"\n @selected-emoji=\"$emit('selected-emoji', $event)\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n @keydown.esc.native=\"$emit('close')\"\n @scroll-bottom-reached=\"$emit('scroll-bottom-reached')\"\n />\n </div>\n <div class=\"d-emoji-picker--footer\">\n <dt-button\n v-if=\"showCustomEmojisTab && !highlightedEmoji\"\n importance=\"outlined\"\n :aria-label=\"addEmojiLabel\"\n class=\"d-emoji-picker__add-emoji\"\n @click=\"$emit('add-emoji')\"\n >\n {{ addEmojiLabel }}\n </dt-button>\n <emoji-description :emoji=\"highlightedEmoji\" />\n <emoji-skin-selector\n ref=\"skinSelectorRef\"\n :is-hovering=\"!!highlightedEmoji\"\n :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n :skin-tone=\"skinTone\"\n @skin-tone=\"$emit('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc.native=\"$emit('close')\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport { DtButton } from '../button';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtEmojiPicker',\n\n components: {\n EmojiTabset,\n EmojiSearch,\n EmojiSelector,\n EmojiDescription,\n EmojiSkinSelector,\n DtButton,\n },\n\n props: {\n /\n The array with recently used emoji object\n * This list is necessary to fill the recently used tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n /\n // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n /\n The array with custom emojis object\n * This list is necessary to fill the custom tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n /\n customEmojis: {\n type: Array,\n },\n\n /\n The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n /\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /\n Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n /\n searchQuery: {\n type: String,\n default: '',\n },\n\n /\n Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n */\n showSearch: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n internalSearchQuery: this.searchQuery,\n highlightedEmoji: null,\n selectedTabset: {},\n scrollIntoTab: 0,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n showCustomEmojisTab () {\n return this.customEmojis?.length > 0;\n },\n\n showRecentlyUsedTab () {\n return this.recentlyUsedEmojis?.length > 0;\n },\n\n tabSetLabels () {\n return [\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n this.i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n ];\n },\n\n searchPlaceholderLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\n },\n\n searchResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\n },\n\n searchNoResultsLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\n },\n\n skinSelectorButtonTooltipLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\n },\n\n addEmojiLabel () {\n return this.i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n },\n },\n\n watch: {\n searchQuery (value) {\n this.internalSearchQuery = value;\n },\n },\n\n methods: {\n scrollToSelectedTabset (tabId) {\n this.internalSearchQuery = '';\n this.selectedTabset = { ...this.selectedTabset, tabId };\n },\n\n updateScrollIntoTab (value) {\n this.scrollIntoTab = value;\n },\n\n updateHighlightedEmoji (emoji) {\n this.highlightedEmoji = emoji;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTabGroup","DtTab","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","DtIconTiktok","tabsData","tab","index","newVal","id","parseId","skin","refKey","event","tabId","DtInput","DtIconSearch","DtIconClose","DtButton","value","emojisImported","CDN_URL","updateTabLabels","label","updateTabsOrder","newValue","newFilter","_a","_","emoji","i","el","indexEmoji","searchStr","obj","nameIncludesSearchStr","keywordsIncludeSearchStr","keyword","fn","delay","timeout","args","len","tabIndex","focusFirstEmoji","vm","tabElement","container","offsetTop","isFirst","indexTab","emojiRef","position","EMOJIS_PER_ROW","numberOfMissingEmojis","emojiToJump","previousTab","emojisInPreviousTab","lastEmojiPosition","_b","direction","entries","entry","target","_c","_d","_e","_f","child","DtTooltip","EMOJI_PICKER_SKIN_TONE_MODIFIERS","oldVal","EmojiTabset","EmojiSearch","EmojiSelector","EmojiDescription","EmojiSkinSelector","DialtoneLocalization"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./emoji-row-constants.cjs"),s=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../tooltip/tooltip.cjs"),c=require("../button/button.cjs"),m=require("../emoji/emoji.cjs"),l=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),_=require("../../common/mixins/localization.cjs"),d={name:"DtRecipeEmojiRow",components:{DtTooltip:a.default,DtButton:c.default,DtEmoji:m.default,DtEmojiTextWrapper:l.default},mixins:[_.default],props:{reactions:{type:Array,default:()=>[],validator:i=>{for(const e of i)if(!n.REACTIONS_ATTRIBUTES.every(o=>e[o]!==void 0))return!1;return!0}}},emits:["emoji-clicked","emoji-hovered"],methods:{emojiClicked(i){this.$emit("emoji-clicked",i.emojiUnicodeOrShortname)},emojiHovered(i,e){this.$emit("emoji-hovered",{reaction:i.emojiUnicodeOrShortname,state:e})},reactionLabel(i){return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL",{names:i.names,reaction:i.emojiUnicodeOrShortname})}}};var u=function(){var e=this,t=e._self._c;return t("span",{staticClass:"d-recipe-emoji-row"},[e._l(e.reactions,function(o){return t("span",{key:o.unicodeOutput},[t("dt-tooltip",{staticClass:"d-recipe-emoji-row__tooltip",attrs:{"content-class":"d-recipe-emoji-row__tooltip-content",sticky:"popper"},on:{shown:r=>e.emojiHovered(o,r)},scopedSlots:e._u([{key:"anchor",fn:function({attrs:r}){return[t("dt-button",{class:["d-recipe-emoji-row__reaction",o.isSelected?"d-recipe-emoji-row__reaction--selected":""],attrs:{importance:"clear",size:"sm","data-qa":"feed-item-reaction-button","aria-label":e.reactionLabel(o),attrs:r},on:{click:function(v){return e.emojiClicked(o)}}},[t("span",{staticClass:"d-recipe-emoji-row__emoji"},[t("dt-emoji",{attrs:{size:"200",code:o.emojiUnicodeOrShortname}})],1),t("span",{staticClass:"d-recipe-emoji-row__reaction-number"},[e._v(" "+e._s(o.num)+" ")])])]}}],null,!0)},[t("span",{attrs:{"aria-hidden":"true"}},[t("dt-emoji-text-wrapper",{attrs:{size:"200"}},[e._v(" "+e._s(e.reactionLabel(o))+" ")])],1)])],1)}),e._t("picker")],2)},p=[],j=s.n(d,u,p);const f=j.exports;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./emoji-row-constants.cjs"),a=require("../../localization/index.cjs"),s=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c=require("../tooltip/tooltip.cjs"),l=require("../button/button.cjs"),m=require("../emoji/emoji.cjs"),_=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),d={name:"DtRecipeEmojiRow",components:{DtTooltip:c.default,DtButton:l.default,DtEmoji:m.default,DtEmojiTextWrapper:_.default},props:{reactions:{type:Array,default:()=>[],validator:i=>{for(const e of i)if(!n.REACTIONS_ATTRIBUTES.every(o=>e[o]!==void 0))return!1;return!0}}},emits:["emoji-clicked","emoji-hovered"],data(){return{i18n:new a.DialtoneLocalization}},methods:{emojiClicked(i){this.$emit("emoji-clicked",i.emojiUnicodeOrShortname)},emojiHovered(i,e){this.$emit("emoji-hovered",{reaction:i.emojiUnicodeOrShortname,state:e})},reactionLabel(i){return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL",{names:i.names,reaction:i.emojiUnicodeOrShortname})}}};var u=function(){var e=this,t=e._self._c;return t("span",{staticClass:"d-recipe-emoji-row"},[e._l(e.reactions,function(o){return t("span",{key:o.unicodeOutput},[t("dt-tooltip",{staticClass:"d-recipe-emoji-row__tooltip",attrs:{"content-class":"d-recipe-emoji-row__tooltip-content",sticky:"popper"},on:{shown:r=>e.emojiHovered(o,r)},scopedSlots:e._u([{key:"anchor",fn:function({attrs:r}){return[t("dt-button",{class:["d-recipe-emoji-row__reaction",o.isSelected?"d-recipe-emoji-row__reaction--selected":""],attrs:{importance:"clear",size:"sm","data-qa":"feed-item-reaction-button","aria-label":e.reactionLabel(o),attrs:r},on:{click:function(v){return e.emojiClicked(o)}}},[t("span",{staticClass:"d-recipe-emoji-row__emoji"},[t("dt-emoji",{attrs:{size:"200",code:o.emojiUnicodeOrShortname}})],1),t("span",{staticClass:"d-recipe-emoji-row__reaction-number"},[e._v(" "+e._s(o.num)+" ")])])]}}],null,!0)},[t("span",{attrs:{"aria-hidden":"true"}},[t("dt-emoji-text-wrapper",{attrs:{size:"200"}},[e._v(" "+e._s(e.reactionLabel(o))+" ")])],1)])],1)}),e._t("picker")],2)},p=[],j=s.n(d,u,p);const f=j.exports;exports.default=f;
 //# sourceMappingURL=emoji-row.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-row.cjs","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"200\">\n {{ reactionLabel(reaction) }}\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=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n size=\"200\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\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';\nimport { ~~DtLocalizationMixin~~ } from '@/~~common/mixins~~';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n ~~mixins: [DtLocalizationMixin],\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 reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n names: reaction.names,\n reaction: reaction.emojiUnicodeOrShortname,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","~~DtLocalizationMixin","~~reactions","reaction","REACTIONS_ATTRIBUTES","attribute","state"],"mappings":"~~maAyDAA~~,EAAA,CACA,KAAA,mBAEA,WAAA,CAAA,UAAAC,EAAA,QAAA,SAAAC,UAAAC,QAAAA,EAAAA,QAAAC,mBAAAA,EAAAA,OAAA,EAEA,~~OAAA,CAAAC,EAAAA,OAAA,EAEA,~~MAAA,CAIA,UAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAC,GAAA,CACA,UAAAC,KAAAD,EAEA,GAAA,CADAE,uBAAA,MAAAC,GAAAF,EAAAE,CAAA,IAAA,MAAA,EACA,MAAA,GAEA,MAAA,EACA,CACA,CACA,EAEA,MAAA,CACA,gBACA,eACA,EAEA,QAAA,CACA,~~aAAAF~~,EAAA,CACA,KAAA,MAAA,gBAAAA,EAAA,uBAAA,CACA,EAEA,aAAAA,~~EAAAG~~,EAAA,CACA,KAAA,MAAA,gBAAA,CACA,~~SAAAH~~,EAAA,wBACA,~~MAAAG~~,CACA,CAAA,CACA,EAEA,~~cAAAH~~,EAAA,CACA,OAAA,KAAA,KAAA,GAAA,oCAAA,CACA,MAAAA,EAAA,MACA,SAAAA,EAAA,uBACA,CAAA,CACA,CACA,CACA"}
1	+ {"version":3,"file":"emoji-row.cjs","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"200\">\n {{ reactionLabel(reaction) }}\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=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n size=\"200\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\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';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\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 data () {\n return {\n i18n: new DialtoneLocalization(),\n };\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 reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n names: reaction.names,\n reaction: reaction.emojiUnicodeOrShortname,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","DialtoneLocalization","state"],"mappings":"2ZAyDAA,EAAA,CACA,KAAA,mBAEA,WAAA,CAAA,UAAAC,EAAA,QAAA,SAAAC,UAAAC,QAAAA,EAAAA,QAAAC,mBAAAA,EAAAA,OAAA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAC,GAAA,CACA,UAAAC,KAAAD,EAEA,GAAA,CADAE,uBAAA,MAAAC,GAAAF,EAAAE,CAAA,IAAA,MAAA,EACA,MAAA,GAEA,MAAA,EACA,CACA,CACA,EAEA,MAAA,CACA,gBACA,eACA,EAEA,MAAA,CACA,MAAA,CACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,QAAA,CACA,aAAAH,EAAA,CACA,KAAA,MAAA,gBAAAA,EAAA,uBAAA,CACA,EAEA,aAAAA,EAAAI,EAAA,CACA,KAAA,MAAA,gBAAA,CACA,SAAAJ,EAAA,wBACA,MAAAI,CACA,CAAA,CACA,EAEA,cAAAJ,EAAA,CACA,OAAA,KAAA,KAAA,GAAA,oCAAA,CACA,MAAAA,EAAA,MACA,SAAAA,EAAA,uBACA,CAAA,CACA,CACA,CACA"}

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

@@ -1,14 +1,13 @@
 import { REACTIONS_ATTRIBUTES as n } from "./emoji-row-constants.js";
-import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import s from "../tooltip/tooltip.js";
-import m from "../button/button.js";
-import c from "../emoji/emoji.js";
-import p from "../emoji-text-wrapper/emoji-text-wrapper.js";
-import d from "../../common/mixins/localization.js";
+import { DialtoneLocalization as a } from "../../localization/index.js";
+import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import m from "../tooltip/tooltip.js";
+import c from "../button/button.js";
+import p from "../emoji/emoji.js";
+import d from "../emoji-text-wrapper/emoji-text-wrapper.js";
 const _ = {
   name: "DtRecipeEmojiRow",
-  components: { DtTooltip: s, DtButton: m, DtEmoji: c, DtEmojiTextWrapper: p },
-  mixins: [d],
+  components: { DtTooltip: m, DtButton: c, DtEmoji: p, DtEmojiTextWrapper: d },
   props: {
     /**
      * Provide an array of reaction objects to be shown.
@@ -16,8 +15,8 @@ const _ = {
     reactions: {
       type: Array,
       default: () => [],
-      validator: (i) => {
-        for (const e of i)
+      validator: (r) => {
+        for (const e of r)
           if (!n.every((o) => e[o] !== void 0)) return !1;
         return !0;
       }
@@ -27,20 +26,25 @@ const _ = {
     "emoji-clicked",
     "emoji-hovered"
   ],
+  data() {
+    return {
+      i18n: new a()
+    };
+  },
   methods: {
-    emojiClicked(i) {
-      this.$emit("emoji-clicked", i.emojiUnicodeOrShortname);
+    emojiClicked(r) {
+      this.$emit("emoji-clicked", r.emojiUnicodeOrShortname);
     },
-    emojiHovered(i, e) {
+    emojiHovered(r, e) {
       this.$emit("emoji-hovered", {
-        reaction: i.emojiUnicodeOrShortname,
+        reaction: r.emojiUnicodeOrShortname,
         state: e
       });
     },
-    reactionLabel(i) {
+    reactionLabel(r) {
       return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL", {
-        names: i.names,
-        reaction: i.emojiUnicodeOrShortname
+        names: r.names,
+        reaction: r.emojiUnicodeOrShortname
       });
     }
   }
@@ -48,16 +52,16 @@ const _ = {
 var l = function() {
   var e = this, t = e._self._c;
   return t("span", { staticClass: "d-recipe-emoji-row" }, [e._l(e.reactions, function(o) {
-    return t("span", { key: o.unicodeOutput }, [t("dt-tooltip", { staticClass: "d-recipe-emoji-row__tooltip", attrs: { "content-class": "d-recipe-emoji-row__tooltip-content", sticky: "popper" }, on: { shown: (r) => e.emojiHovered(o, r) }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: r }) {
+    return t("span", { key: o.unicodeOutput }, [t("dt-tooltip", { staticClass: "d-recipe-emoji-row__tooltip", attrs: { "content-class": "d-recipe-emoji-row__tooltip-content", sticky: "popper" }, on: { shown: (i) => e.emojiHovered(o, i) }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: i }) {
       return [t("dt-button", { class: [
         "d-recipe-emoji-row__reaction",
         o.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
-      ], attrs: { importance: "clear", size: "sm", "data-qa": "feed-item-reaction-button", "aria-label": e.reactionLabel(o), attrs: r }, on: { click: function(f) {
+      ], attrs: { importance: "clear", size: "sm", "data-qa": "feed-item-reaction-button", "aria-label": e.reactionLabel(o), attrs: i }, on: { click: function(f) {
         return e.emojiClicked(o);
       } } }, [t("span", { staticClass: "d-recipe-emoji-row__emoji" }, [t("dt-emoji", { attrs: { size: "200", code: o.emojiUnicodeOrShortname } })], 1), t("span", { staticClass: "d-recipe-emoji-row__reaction-number" }, [e._v(" " + e._s(o.num) + " ")])])];
     } }], null, !0) }, [t("span", { attrs: { "aria-hidden": "true" } }, [t("dt-emoji-text-wrapper", { attrs: { size: "200" } }, [e._v(" " + e._s(e.reactionLabel(o)) + " ")])], 1)])], 1);
   }), e._t("picker")], 2);
-}, u = [], j = /* @__PURE__ */ a(
+}, u = [], j = /* @__PURE__ */ s(
   _,
   l,
   u

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

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-row.js","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"200\">\n {{ reactionLabel(reaction) }}\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=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n size=\"200\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\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';\nimport { ~~DtLocalizationMixin~~ } from '@/~~common/mixins~~';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n ~~mixins: [DtLocalizationMixin],\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 reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n names: reaction.names,\n reaction: reaction.emojiUnicodeOrShortname,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","~~DtLocalizationMixin","~~reactions","reaction","REACTIONS_ATTRIBUTES","attribute","state"],"mappings":";;;;;;;AAyDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAAC,GAAA,UAAAC,GAAA,SAAAC,GAAA,oBAAAC,EAAA;AAAA,EAEA,~~QAAA,CAAAC,CAAA;AAAA,EAEA,~~OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AACA,mBAAAC,KAAAD;AAEA,cAAA,CADAE,EAAA,MAAA,CAAAC,MAAAF,EAAAE,CAAA,MAAA,MAAA,EACA,QAAA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,~~aAAAF~~,GAAA;AACA,WAAA,MAAA,iBAAAA,EAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAAA,~~GAAAG~~,GAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,~~UAAAH~~,EAAA;AAAA,QACA,~~OAAAG~~;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,~~cAAAH~~,GAAA;AACA,aAAA,KAAA,KAAA,GAAA,qCAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,UAAAA,EAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji-row.js","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"200\">\n {{ reactionLabel(reaction) }}\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=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n size=\"200\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\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';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\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 data () {\n return {\n i18n: new DialtoneLocalization(),\n };\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 reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n names: reaction.names,\n reaction: reaction.emojiUnicodeOrShortname,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","DialtoneLocalization","state"],"mappings":";;;;;;;AAyDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAAC,GAAA,UAAAC,GAAA,SAAAC,GAAA,oBAAAC,EAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AACA,mBAAAC,KAAAD;AAEA,cAAA,CADAE,EAAA,MAAA,CAAAC,MAAAF,EAAAE,CAAA,MAAA,MAAA,EACA,QAAA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,IAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAAH,GAAA;AACA,WAAA,MAAA,iBAAAA,EAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAAA,GAAAI,GAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAAJ,EAAA;AAAA,QACA,OAAAI;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,cAAAJ,GAAA;AACA,aAAA,KAAA,KAAA,GAAA,qCAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,UAAAA,EAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/feed-item-pill/feed-item-pill.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./feed-item-pill-constants.cjs"),o=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../item-layout/item-layout.cjs"),a=require("../collapsible/collapsible.cjs"),u=require("../../common/mixins/localization.cjs"),c={name:"DtRecipeFeedItemPill",components:{DtItemLayout:s.default,DtCollapsible:a.default},mixins:[u.default],props:{title:{type:String,default:()=>""},wrapperClass:{type:[String,Array,Object],default:""},buttonClass:{type:[String,Array,Object],default:""},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:"default",validator:i=>Object.keys(r.FEED_ITEM_PILL_BORDER_COLORS).includes(i)}},data(){return{hover:!1,expanded:this.defaultToggled}},computed:{toggleIcon(){return this.expanded?o.DtIconChevronDown:o.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?"d-recipe-feed-item-pill--toggleable":""},borderClass(){return r.FEED_ITEM_PILL_BORDER_COLORS[this.borderColor]},anchorTitle(){return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL")}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}};var d=function(){var e=this,t=e._self._c;return t("div",{class:["d-recipe-feed-item-pill__border",e.borderClass,e.wrapperClass]},[t("div",{staticClass:"d-recipe-feed-item-pill__wrapper"},[t("dt-collapsible",{attrs:{open:e.expanded},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("button",{class:["d-recipe-feed-item-pill__button",e.toggleableClass,e.buttonClass],attrs:{"data-qa":"dt-recipe-feed-item-pill","aria-label":e.anchorTitle,title:e.anchorTitle},on:{focusin:function(l){e.hover=!0},focusout:function(l){e.hover=!1},mouseenter:function(l){e.hover=!0},mouseleave:function(l){e.hover=!1},click:e.onClick}},[t("dt-item-layout",{staticClass:"d-recipe-feed-item-pill__layout",attrs:{unstyled:""},scopedSlots:e._u([{key:"left",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__icon",attrs:{"data-qa":"dt-recipe-feed-item-pill__icon"}},[e.showChevronIcon?t(e.toggleIcon,{tag:"component",attrs:{size:"300"}}):e._t("leftIcon",null,{iconSize:"300"})],2)]},proxy:!0},e.$slots.subtitle?{key:"subtitle",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__subtitle"},[e._t("subtitle")],2)]},proxy:!0}:null,e.$slots.bottom?{key:"bottom",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__bottom"},[e._t("bottom")],2)]},proxy:!0}:null,e.$slots.right?{key:"right",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__right"},[e._t("right")],2)]},proxy:!0}:null],null,!0)},[e._t("title",function(){return[t("span",{staticClass:"d-recipe-feed-item-pill__title"},[e._v(e._s(e.title))])]})],2)],1)]},proxy:!0},e.$slots.content?{key:"content",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__content"},[e._t("content")],2)]},proxy:!0}:null],null,!0)})],1)])},_=[],p=n.n(c,d,_);const f=p.exports;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./feed-item-pill-constants.cjs"),r=require("@dialpad/dialtone-icons/vue2"),n=require("../../localization/index.cjs"),s=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../item-layout/item-layout.cjs"),u=require("../collapsible/collapsible.cjs"),c={name:"DtRecipeFeedItemPill",components:{DtItemLayout:a.default,DtCollapsible:u.default},props:{title:{type:String,default:()=>""},wrapperClass:{type:[String,Array,Object],default:""},buttonClass:{type:[String,Array,Object],default:""},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:"default",validator:i=>Object.keys(o.FEED_ITEM_PILL_BORDER_COLORS).includes(i)}},data(){return{hover:!1,expanded:this.defaultToggled,i18n:new n.DialtoneLocalization}},computed:{toggleIcon(){return this.expanded?r.DtIconChevronDown:r.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?"d-recipe-feed-item-pill--toggleable":""},borderClass(){return o.FEED_ITEM_PILL_BORDER_COLORS[this.borderColor]},anchorTitle(){return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL")}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}};var d=function(){var e=this,t=e._self._c;return t("div",{class:["d-recipe-feed-item-pill__border",e.borderClass,e.wrapperClass]},[t("div",{staticClass:"d-recipe-feed-item-pill__wrapper"},[t("dt-collapsible",{attrs:{open:e.expanded},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("button",{class:["d-recipe-feed-item-pill__button",e.toggleableClass,e.buttonClass],attrs:{"data-qa":"dt-recipe-feed-item-pill","aria-label":e.anchorTitle,title:e.anchorTitle},on:{focusin:function(l){e.hover=!0},focusout:function(l){e.hover=!1},mouseenter:function(l){e.hover=!0},mouseleave:function(l){e.hover=!1},click:e.onClick}},[t("dt-item-layout",{staticClass:"d-recipe-feed-item-pill__layout",attrs:{unstyled:""},scopedSlots:e._u([{key:"left",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__icon",attrs:{"data-qa":"dt-recipe-feed-item-pill__icon"}},[e.showChevronIcon?t(e.toggleIcon,{tag:"component",attrs:{size:"300"}}):e._t("leftIcon",null,{iconSize:"300"})],2)]},proxy:!0},e.$slots.subtitle?{key:"subtitle",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__subtitle"},[e._t("subtitle")],2)]},proxy:!0}:null,e.$slots.bottom?{key:"bottom",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__bottom"},[e._t("bottom")],2)]},proxy:!0}:null,e.$slots.right?{key:"right",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__right"},[e._t("right")],2)]},proxy:!0}:null],null,!0)},[e._t("title",function(){return[t("span",{staticClass:"d-recipe-feed-item-pill__title"},[e._v(e._s(e.title))])]})],2)],1)]},proxy:!0},e.$slots.content?{key:"content",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__content"},[e._t("content")],2)]},proxy:!0}:null],null,!0)})],1)])},_=[],p=s.n(c,d,_);const f=p.exports;exports.default=f;
 //# sourceMappingURL=feed-item-pill.cjs.map

package/dist/vue2/lib/feed-item-pill/feed-item-pill.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-pill.cjs","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #left>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\nimport { ~~DtLocalizationMixin~~ } from '@/~~common/mixins~~';\n\nexport default {\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n ~~mixins: [DtLocalizationMixin],\n\n~~ props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling around the pill\n /\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional styling for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtItemLayout","DtCollapsible","~~DtLocalizationMixin~~","~~color~~","~~FEED_ITEM_PILL_BORDER_COLORS~~","DtIconChevronDown","DtIconChevronRight"],"mappings":"~~0YAwFAA~~,EAAA,CACA,KAAA,uBAEA,WAAA,CAAA,aAAAC,EAAA,QAAA,cAAAC,SAAA,EAEA,~~OAAA,CAAAC,EAAAA,OAAA,EAEA,~~MAAA,CAIA,MAAA,CACA,KAAA,OACA,QAAA,IAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,IAAA,EACA,EAEA,eAAA,CACA,KAAA,QACA,QAAA,IAAA,EACA,EAMA,YAAA,CACA,KAAA,OACA,QAAA,UACA,UAAAC,GAAA,OAAA,KAAAC,8BAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,MAAA,GACA,SAAA,KAAA,~~cACA~~,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,~~SAAAE~~,EAAA,kBAAAC,oBACA,EAEA,iBAAA,CACA,OAAA,KAAA,YAAA,KAAA,KACA,EAEA,iBAAA,CACA,OAAA,KAAA,WAAA,sCAAA,EACA,EAEA,aAAA,CACA,~~OAAAF~~,EAAA,6BAAA,KAAA,WAAA,CACA,EAEA,aAAA,CACA,OAAA,KAAA,KAAA,GAAA,oCAAA,CACA,CACA,EAEA,QAAA,CACA,SAAA,CACA,KAAA,aAEA,KAAA,SAAA,CAAA,KAAA,SACA,CACA,CACA"}
1	+ {"version":3,"file":"feed-item-pill.cjs","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #left>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling around the pill\n /\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional styling for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight"],"mappings":"kYAwFAA,EAAA,CACA,KAAA,uBAEA,WAAA,CAAA,aAAAC,EAAA,QAAA,cAAAC,SAAA,EAEA,MAAA,CAIA,MAAA,CACA,KAAA,OACA,QAAA,IAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,IAAA,EACA,EAEA,eAAA,CACA,KAAA,QACA,QAAA,IAAA,EACA,EAMA,YAAA,CACA,KAAA,OACA,QAAA,UACA,UAAAC,GAAA,OAAA,KAAAC,8BAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,MAAA,GACA,SAAA,KAAA,eACA,KAAA,IAAAE,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,SAAAC,EAAA,kBAAAC,oBACA,EAEA,iBAAA,CACA,OAAA,KAAA,YAAA,KAAA,KACA,EAEA,iBAAA,CACA,OAAA,KAAA,WAAA,sCAAA,EACA,EAEA,aAAA,CACA,OAAAH,EAAA,6BAAA,KAAA,WAAA,CACA,EAEA,aAAA,CACA,OAAA,KAAA,KAAA,GAAA,oCAAA,CACA,CACA,EAEA,QAAA,CACA,SAAA,CACA,KAAA,aAEA,KAAA,SAAA,CAAA,KAAA,SACA,CACA,CACA"}

package/dist/vue2/lib/feed-item-pill/feed-item-pill.js CHANGED Viewed

@@ -1,13 +1,12 @@
 import { FEED_ITEM_PILL_BORDER_COLORS as r } from "./feed-item-pill-constants.js";
 import { DtIconChevronDown as i, DtIconChevronRight as n } from "@dialpad/dialtone-icons/vue2";
-import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import a from "../item-layout/item-layout.js";
-import c from "../collapsible/collapsible.js";
-import d from "../../common/mixins/localization.js";
+import { DialtoneLocalization as s } from "../../localization/index.js";
+import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import c from "../item-layout/item-layout.js";
+import d from "../collapsible/collapsible.js";
 const u = {
   name: "DtRecipeFeedItemPill",
-  components: { DtItemLayout: a, DtCollapsible: c },
-  mixins: [d],
+  components: { DtItemLayout: c, DtCollapsible: d },
   props: {
     /**
      * Bolded primary text
@@ -54,7 +53,8 @@ const u = {
   data() {
     return {
       hover: !1,
-      expanded: this.defaultToggled
+      expanded: this.defaultToggled,
+      i18n: new s()
     };
   },
   computed: {
@@ -105,7 +105,7 @@ var p = function() {
   }, proxy: !0 }, e.$slots.content ? { key: "content", fn: function() {
     return [t("div", { staticClass: "d-recipe-feed-item-pill__content" }, [e._t("content")], 2)];
   }, proxy: !0 } : null], null, !0) })], 1)]);
-}, f = [], _ = /* @__PURE__ */ s(
+}, f = [], _ = /* @__PURE__ */ a(
   u,
   p,
   f

package/dist/vue2/lib/feed-item-pill/feed-item-pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-pill.js","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #left>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\nimport { ~~DtLocalizationMixin~~ } from '@/~~common/mixins~~';\n\nexport default {\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n ~~mixins: [DtLocalizationMixin],\n\n~~ props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling around the pill\n /\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional styling for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtItemLayout","DtCollapsible","~~DtLocalizationMixin~~","~~color~~","~~FEED_ITEM_PILL_BORDER_COLORS~~","DtIconChevronDown","DtIconChevronRight"],"mappings":";;;;;;AAwFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAAC,GAAA,eAAAC,EAAA;AAAA,EAEA,~~QAAA,CAAAC,CAAA;AAAA,EAEA,~~OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,~~WAAAE~~,IAAAC;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,wCAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,~~aAAAF~~,EAAA,KAAA,WAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,KAAA,GAAA,oCAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,MAAA,KAAA,eAEA,KAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"feed-item-pill.js","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #left>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling around the pill\n /\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional styling for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight"],"mappings":";;;;;;AAwFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAAC,GAAA,eAAAC,EAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,MACA,MAAA,IAAAE,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,WAAAC,IAAAC;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,wCAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAH,EAAA,KAAA,WAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,KAAA,GAAA,oCAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,MAAA,KAAA,eAEA,KAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}