npm - @dialpad/dialtone-vue - Versions diffs - 3.135.1 → 3.136.0 - Mend

@dialpad/dialtone-vue 3.135.1 → 3.136.0

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

Files changed (44) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-picker.js","sources":["../../components/emoji_picker/modules/emoji_search.vue","../../components/emoji_picker/modules/emoji_tabset.vue","../../components/emoji_picker/emoji_picker_constants.js","../../components/emoji_picker/composables/useKeyboardNavigation.js","../../components/emoji_picker/modules/emoji_selector.vue","../../components/emoji_picker/modules/emoji_skin_selector.vue","../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\n >\n <template #leftIcon>\n <dt-icon\n name=\"search\"\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"x-circle\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n modelValue: {\n type: String,\n default: '',\n },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n emits('update:modelValue', '');\n focusSearchInput();\n}\n\nfunction focusSearchInput () {\n searchInput.value.focus();\n}\nonMounted(() => {\n focusSearchInput();\n});\n\ndefineExpose({\n focusSearchInput,\n});\n</script>\n","<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"el => { if (el) setTabsetRef(el) }\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n >\n <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n /*\n Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n /\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\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\nconst emits = defineEmits([\n /\n Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n /\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst TABS_DATA = [\n { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n];\n\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: props.tabsetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isScrolling.value && !isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/\n We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n /\nfunction selectTabset (id) {\n if (!isScrolling.value) {\n selectedTab.value = id;\n }\n emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n","export const ARROW_KEYS = {\n ARROW_UP: 'ArrowUp',\n ARROW_DOWN: 'ArrowDown',\n ARROW_LEFT: 'ArrowLeft',\n ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n DEFAULT: 'Default',\n LIGHT: 'Light',\n MEDIUM_LIGHT: 'MediumLight',\n MEDIUM: 'Medium',\n MEDIUM_DARK: 'MediumDark',\n DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n MOST_RECENTLY_USED: 'Most recently used',\n SMILEYS_AND_PEOPLE: 'Smileys and people',\n NATURE: 'Nature',\n FOOD: 'Food',\n ACTIVITY: 'Activity',\n TRAVEL: 'Travel',\n OBJECTS: 'Objects',\n SYMBOLS: 'Symbols',\n FLAGS: 'Flags',\n};\n\nexport default {\n EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n EMOJI_PICKER_CATEGORIES,\n};\n","import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n const emojiRefs = ref([]);\n const emojiFilteredRefs = ref([]);\n const isFiltering = ref(false);\n const hoverFirstEmoji = ref(true);\n\n function _handleArrowLeft (indexTab, indexEmoji) {\n if (!focusEmoji(indexTab, indexEmoji - 1)) {\n if (emojiRefs.value[indexTab - 1]) {\n focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n } else {\n focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n }\n }\n }\n\n function _handleArrowRight (indexTab, indexEmoji) {\n if (!focusEmoji(indexTab, indexEmoji + 1)) {\n if (!focusEmoji(indexTab + 1, 0)) {\n focusEmoji(0, 0);\n }\n }\n }\n\n function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n if (!focusEmoji(0, indexEmoji - 1)) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n }\n }\n\n function _handleArrowRightFiltered (indexTab, indexEmoji) {\n if (!focusEmoji(0, indexEmoji + 1)) {\n focusEmoji(0, 0);\n }\n }\n\n function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n if (isFiltering.value) {\n if (direction === 'left') {\n _handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n _handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n _handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n _handleArrowRight(indexTab, indexEmoji);\n }\n }\n }\n\n function focusEmoji (indexTab, indexEmoji) {\n const emojiRef = isFiltering.value\n ? emojiFilteredRefs.value?.[indexEmoji]\n : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n }\n\n function setEmojiRef (el, indexTab, indexEmoji) {\n if (!emojiRefs.value[indexTab]) {\n emojiRefs.value[indexTab] = [];\n }\n emojiRefs.value[indexTab][indexEmoji] = el;\n }\n\n function setFilteredRef (el, index) {\n emojiFilteredRefs.value[index] = el;\n }\n\n function handleArrowNavigationFiltered (key, indexEmoji) {\n hoverFirstEmoji.value = false;\n\n if (key === ARROW_KEYS.ARROW_UP) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n const lastEmojiPosition =\n emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n focusEmoji(0, lastEmojiPosition);\n\n if (!focusEmoji(0, lastEmojiPosition)) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n }\n }\n }\n\n if (key === ARROW_KEYS.ARROW_DOWN) {\n if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n } else {\n focusEmoji(0, position);\n }\n }\n }\n\n if (key === ARROW_KEYS.ARROW_LEFT) {\n _handleHorizontalNavigation('left', 0, indexEmoji);\n }\n\n if (key === ARROW_KEYS.ARROW_RIGHT) {\n _handleHorizontalNavigation('right', 0, indexEmoji);\n }\n }\n\n function handleArrowNavigation (key, indexTab, indexEmoji) {\n if (key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (indexTab === 0) {\n // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n const numberOfMissingEmojis =\n EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n }\n return;\n }\n\n // if we are not on the first tab, we should jump to the previous row of the current tab\n if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n }\n }\n }\n\n if (key === 'ArrowDown') {\n if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n // if cannot go down\n\n // Calculate position from cell 0 to cell 8\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n // check if it exists a next row in the current tab\n if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n // if it exists, we should focus the last emoji of the next row in the current tab\n focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n // if we are at the end of the list it will do nothing\n } else {\n // We don't have next row, we are in the last of the tab, then jump\n // to the next tab but in the equal emoji position in row 0.\n\n if (!focusEmoji(indexTab + 1, position)) {\n // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n // if it doesn't has, jump to the last\n if (!focusEmoji(0, position)) {\n focusEmoji(0, emojiRefs.value[0].length - 1);\n }\n }\n }\n }\n }\n\n if (key === 'ArrowLeft') {\n _handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (key === 'ArrowRight') {\n _handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n }\n\n return {\n emojiFilteredRefs,\n isFiltering,\n hoverFirstEmoji,\n setEmojiRef,\n setFilteredRef,\n focusEmoji,\n handleArrowNavigationFiltered,\n handleArrowNavigation,\n };\n}\n","<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=\"tabLabel.ref\"\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=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"selectEmoji(emoji)\"\n @focusin=\"highlightEmoji(emoji)\"\n @focusout=\"highlightEmoji(null)\"\n @mouseover=\"highlightEmoji(emoji)\"\n @mouseleave=\"highlightEmoji(null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji.unicode_character)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"selectEmoji(emoji)\"\n @focusin=\"highlightEmoji(emoji)\"\n @focusout=\"highlightEmoji(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 setup>\n// eslint-disable max-len\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n /\n The filter to apply to the emoji list\n * @type {String}\n * @default ''\n /\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /\n The skin tone to apply to the emoji list\n * @type {String}\n * @required\n /\n skinTone: {\n type: String,\n required: true,\n },\n\n /\n The labels for the tabset\n * @type {Array}\n * @required\n /\n tabsetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n /\n The label for the search results tab\n * @type {String}\n * @required\n /\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /\n The list of recently used emojis\n * @type {Array}\n /\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n});\n\nconst emits = defineEmits([\n /\n Emitted when the user hover over an emoji\n * @event highlighted-emoji\n * @param {Object} emoji - The emoji data that was hovered\n /\n 'highlighted-emoji',\n\n /\n Emitted when the user select an emoji\n * @event selected-emoji\n * @param {Object} emoji - The emoji data that was selected\n /\n 'selected-emoji',\n\n /\n Emitted when the user scroll into an emoji tab\n * @event scroll-into-tab\n * @param {Number} tab-index - The tab that was scrolled into\n /\n 'scroll-into-tab',\n\n /\n Emitted when the scrollTo function starts scrolling and stops scrolling\n * @event is-scrolling\n * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to\n /\n 'is-scrolling',\n\n /\n Emitted when the user reach the end of the emoji list\n * @event focus-skin-selector\n /\n 'focus-skin-selector',\n\n /\n Emitted when the user shift tab in first tab of emoji selector\n * @event focus-search-input\n /\n 'focus-search-input',\n]);\n\nconst {\n emojiFilteredRefs,\n isFiltering,\n hoverFirstEmoji,\n setEmojiRef,\n setFilteredRef,\n focusEmoji,\n handleArrowNavigationFiltered,\n handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/\n The ref for the tab category\n * This is used to display the fixed label\n /\nconst tabCategoryRef = ref(null);\n\n/\n The ref for the list\n * This is used to display the tabs\n /\nconst listRef = ref(null);\n\n/\n The ref for the tab label observer\n * This is used to update the fixed label\n /\nconst tabLabelObserver = ref(null);\n\n/\n The list of tabs\n * This is used to display the tabs\n /\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/\n The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n /\nconst tabLabels = computed(() => {\n return props.recentlyUsedEmojis.length\n ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/\n The label of the fixed tab\n * This is used to display the fixed label\n /\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/\n The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n /\nconst tabs = computed(() => {\n return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/\n The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n /\nconst filteredEmojis = ref([]);\n\n/\n The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n /\nconst currentEmojis = computed(() => {\n return [\n ...emojis[`People${props.skinTone}`],\n ...emojis.Nature,\n ...emojis.Food,\n ...emojis[`Activity${props.skinTone}`],\n ...emojis.Travel,\n ...emojis[`Objects${props.skinTone}`],\n ...emojis.Symbols,\n ...emojis.Flags,\n ];\n});\n\n/\n This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n /\nconst debouncedSearch = debounce(() => {\n // We clean the emojiFilteredRefs to have an updated ref list for the search results\n emojiFilteredRefs.value = [];\n searchByNameAndKeywords();\n});\n\n/\n Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n /\nwatch(currentEmojis, () => {\n searchByNameAndKeywords();\n}, { immediate: true });\n\n/\n Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n /\nwatch(() => props.recentlyUsedEmojis,\n () => {\n emojis['Recently used'] = props.recentlyUsedEmojis;\n }, { immediate: true });\n\n/\n Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n /\nwatch(() => props.emojiFilter, () => {\n resetScroll();\n if (props.emojiFilter) {\n isFiltering.value = true;\n } else {\n isFiltering.value = false;\n // If the emoji filter is empty, emit null to remove the highlighted emoji\n // of the previous search\n highlightEmoji(null);\n }\n debouncedSearch();\n});\n\nwatch(\n () => props.selectedTabset,\n (tab) => {\n scrollToTab(tab.tabId);\n },\n { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n hoverFirstEmoji.value = isFirst;\n emits('highlighted-emoji', emoji);\n}\n\n/\n Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n /\nfunction searchByNameAndKeywords () {\n const searchStr = props.emojiFilter.toLowerCase();\n filteredEmojis.value = currentEmojis.value.filter(obj => {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n return nameIncludesSearchStr \|\| keywordsIncludeSearchStr;\n });\n nextTick(() => {\n if (searchStr) {\n hoverEmoji(filteredEmojis.value[0], true);\n }\n });\n}\n\nfunction debounce (fn, delay = 300) {\n let timeout;\n\n return (...args) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => fn(...args), delay);\n };\n}\n\nfunction getImgSrc (emoji) {\n return `${CDN_URL + emoji}.png`;\n}\n\n/\n Handle image error - We hide the entire button if the image is not found\n /\nfunction handleImageError (event) {\n event.target.parentNode.style.display = 'none';\n}\n\n/\n Scroll to the selected tab\n /\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n const tabLabel = tabLabels.value[tabIndex - 1];\n const tabElement = tabLabel.ref.value[0];\n\n nextTick(() => {\n const container = listRef.value;\n const offsetTop = tabIndex === '1' ? 0 : tabElement.offsetTop - 20;\n\n /\n This variable is used to check if the user is scrolling inside the emoji picker\n * This is used to check if the user is scrolling using the scrollTo function\n * This is useful because this flag will prevent to update the fixed label when the user is scrolling\n * using the scrollTo function\n /\n let isScrolling = true;\n\n let prevScrollTop = container.scrollTop;\n emits('is-scrolling', true);\n\n /\n This event listener checks whether the user is scrolling up or down by comparing the current scrollTop\n * to prevScrollTop. If the scrollToTab function is scrolling from bottom to top and has reached the desired\n * position (scrollTop <= offsetTop),or if the scrollToTab function is scrolling from top to bottom and has\n * passed the desired position(scrollTop >= offsetTop), then isScrolling is set to false.\n /\n container.addEventListener('scroll', () => {\n if (isScrolling) {\n const scrollTop = container.scrollTop;\n if (\n (prevScrollTop < scrollTop && scrollTop >= offsetTop) \|\|\n (prevScrollTop > scrollTop && scrollTop <= offsetTop)\n ) {\n isScrolling = false;\n emits('is-scrolling', false);\n }\n prevScrollTop = scrollTop;\n }\n });\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n focusEmoji((tabIndex - 1), 0);\n }\n });\n}\n\nfunction resetScroll () {\n const container = listRef.value;\n\n container.scrollTop = 0;\n}\n\n/\n This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n /\nfunction setTabLabelObserver () {\n /\n The code extracts the target element and its index from the IntersectionObserverEntry object,\n * and checks whether the target intersects with the root and is positioned above or below it.\n /\n tabLabelObserver.value = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n const { target } = entry;\n const index = parseInt(target.dataset.index);\n\n /\n If the target is positioned above the root,\n * the code updates the value of the fixed label to the label of the previous tab,\n * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n * updates the value of the fixed label to the label of the current tab.\n * If the target stops intersecting with the root and its index is 1 (the second tab),\n * the code updates the value of the fixed label to the label of the first tab.\n * NOTES:\n * This last condition is needed because sometimes it is\n * not detect the intersection between the root and the target.\n * We also provide a 50 pixels offset to the root element in the first condition to always get the\n * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n /\n if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n emits('scroll-into-tab', index - 1);\n } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n emits('scroll-into-tab', index);\n fixedLabel.value = tabLabels.value[index]?.label;\n } else if (index === 1) {\n emits('scroll-into-tab', index);\n fixedLabel.value = tabLabels.value[0]?.label;\n }\n });\n });\n\n /\n The tabLabelObserver is set to observe the root element and all its children elements with\n * the IntersectionObserver object, and sets their data-index attribute to their index.\n /\n tabLabelObserver.value.observe(tabCategoryRef.value);\n\n Array.from(listRef.value.children).forEach((child, index) => {\n tabLabelObserver.value.observe(child);\n child.dataset.index = index;\n });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n event.preventDefault();\n\n if (Object.values(ARROW_KEYS).includes(event.key)) {\n handleArrowNavigationFiltered(event.key, indexEmoji);\n return;\n }\n\n switch (event.key) {\n case 'Tab':\n emits('focus-skin-selector');\n break;\n case 'Enter':\n selectEmoji(emoji);\n break;\n default:\n break;\n }\n};\n\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n event.preventDefault();\n\n if (Object.values(ARROW_KEYS).includes(event.key)) {\n handleArrowNavigation(event.key, indexTab, indexEmoji);\n return;\n }\n\n switch (event.key) {\n case 'Tab':\n if (event.shiftKey) {\n if (focusEmoji(indexTab, 0) && indexTab > 0) {\n scrollToTab(indexTab, true);\n } else {\n scrollToTab(1, false);\n emits('focus-search-input');\n }\n } else {\n if (focusEmoji(indexTab + 1, 0)) {\n scrollToTab(indexTab + 1 + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n emits('focus-skin-selector');\n }\n }\n break;\n\n case 'Enter':\n selectEmoji(emoji);\n break;\n\n default:\n break;\n }\n};\n\nfunction selectEmoji (emoji) {\n emits('selected-emoji', emoji);\n}\n\nfunction highlightEmoji (emoji) {\n emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n focusEmoji(tabs.value.length - 1, 0);\n}\n\nonMounted(() => {\n setTabLabelObserver();\n});\n\nonUnmounted(() => {\n tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n focusEmojiSelector,\n focusLastEmoji,\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 :ref=\"el => { if (el) setSkinsRef(el) }\"\n :key=\"skin.name\"\n :class=\"{\n 'selected': skinSelected.skinCode === skin.skinCode,\n }\"\n @keydown=\"event => handleKeyDown(event, skin, index)\"\n @click=\"selectSkin(skin)\"\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=\"`${CDN_URL + 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=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n >\n </button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker';\nimport { DtTooltip } from '@/components/tooltip';\n\nconst props = defineProps({\n /\n The skin tone to apply to the emoji list\n * @type {String}\n * @required\n /\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\nconst emits = defineEmits([\n /\n The skin tone that was selected\n * @event skin-tone\n * @type {Number}\n /\n 'skin-tone',\n 'focus-tabset',\n 'focus-last-emoji',\n]);\n\nconst skinList = [\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\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/\n It will close the skin selector if the user is hovering over the emoji list\n /\nwatchEffect(\n () => props.isHovering && (isOpen.value = false),\n);\n\n/\n It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n /\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n skinSelected.value = skin;\n isOpen.value = false;\n emits('skin-tone', skin.skinTone);\n nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n skinsRef.value[index - 1]?.focus();\n }\n\n if (event.key === 'ArrowRight') {\n skinsRef.value[index + 1]?.focus();\n }\n\n if (event.key === 'Enter') {\n if (skin) { selectSkin(skin); } else {\n toggleSkinList();\n }\n }\n\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n emits('focus-last-emoji');\n } else {\n emits('focus-tabset');\n }\n }\n};\n\nfunction toggleSkinList () {\n isOpen.value = !isOpen.value;\n nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n focusSkinSelector,\n});\n</script>\n","<template>\n <div\n class=\"d-emoji-picker\"\n >\n <div class=\"d-emoji-picker--header\">\n <emoji-tabset\n ref=\"tabsetRef\"\n :emoji-filter=\"internalSearchQuery\"\n :show-recently-used-tab=\"showRecentlyUsedTab\"\n :scroll-into-tab=\"scrollIntoTab\"\n :tabset-labels=\"tabSetLabels\"\n :is-scrolling=\"isScrolling\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--body\">\n <emoji-search\n v-if=\"showSearch\"\n ref=\"searchInputRef\"\n v-model=\"internalSearchQuery\"\n :search-placeholder-label=\"searchPlaceholderLabel\"\n @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n @keydown.esc=\"emits('close')\"\n />\n <emoji-selector\n ref=\"emojiSelectorRef\"\n :emoji-filter=\"internalSearchQuery\"\n :skin-tone=\"skinTone\"\n :tabset-labels=\"tabSetLabels\"\n :search-results-label=\"searchResultsLabel\"\n :search-no-results-label=\"searchNoResultsLabel\"\n :recently-used-emojis=\"recentlyUsedEmojis\"\n :selected-tabset=\"selectedTabset\"\n @scroll-into-tab=\"updateScrollIntoTab\"\n @is-scrolling=\"updateIsScrolling\"\n @highlighted-emoji=\"updateHighlightedEmoji\"\n @selected-emoji=\"emits('selected-emoji', $event)\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--footer\">\n <emoji-description :emoji=\"highlightedEmoji\" />\n <emoji-skin-selector\n ref=\"skinSelectorRef\"\n :is-hovering=\"!!highlightedEmoji\"\n :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n :skin-tone=\"skinTone\"\n @skin-tone=\"emits('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { computed, ref, watch } from 'vue';\n\nconst props = defineProps({\n /\n The array with recently used emoji object\n * This list is necessary to fill the recently used tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n /\n // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n recentlyUsedEmojis: {\n type: Array,\n default: () => ([]),\n },\n\n /\n The placeholder text for the search input\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n /\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n /\n The label for the search results tab\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n /\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n /\n The label for the search no results\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n /\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /\n The list of tabsets to show, it is necessary to be updated with the correct language\n * It must respect the provided order.\n * @type {Array}\n * @required\n * @example\n * <dt-emoji-picker\n * :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n * 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n /\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n /\n The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n /\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /\n Tooltip shown when skin selector button is hovered.\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n /\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n\n /\n Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n /\n searchQuery: {\n type: String,\n default: '',\n },\n\n /\n Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n /\n showSearch: {\n type: Boolean,\n default: true,\n },\n});\n\nconst emits = defineEmits(\n [\n /\n It will emit the selected emoji\n * @event selected-emoji\n * @param {Object} emoji - The selected emoji from the emoji selector\n /\n 'selected-emoji',\n\n /\n It will emit the selected skin tone\n * @event skin-tone\n * @param {String} skin - The selected skin tone from the skin selector\n /\n 'skin-tone',\n\n /\n Since the keyboard events are encapsulated, we emit this event to close the picker\n * @event close\n /\n 'close',\n ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\nconst isScrolling = ref(false);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);\n\nwatch(\n () => props.searchQuery,\n (newValue) => {\n internalSearchQuery.value = newValue;\n },\n);\n\n/\n Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabName {String} - The name of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n internalSearchQuery.value = '';\n selectedTabset.value = tabId;\n selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n scrollIntoTab.value = value;\n}\n\nfunction updateIsScrolling (value) {\n isScrolling.value = value;\n}\nfunction updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":["ref","emojis"],"mappings":"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"}
1	+ {"version":3,"file":"emoji-picker.js","sources":["../../components/emoji_picker/modules/emoji_search.vue","../../components/emoji_picker/modules/emoji_tabset.vue","../../components/emoji_picker/emoji_picker_constants.js","../../components/emoji_picker/composables/useKeyboardNavigation.js","../../components/emoji_picker/modules/emoji_selector.vue","../../components/emoji_picker/modules/emoji_skin_selector.vue","../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\n >\n <template #leftIcon>\n <dt-icon\n name=\"search\"\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"x-circle\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n modelValue: {\n type: String,\n default: '',\n },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n emits('update:modelValue', '');\n focusSearchInput();\n}\n\nfunction focusSearchInput () {\n searchInput.value.focus();\n}\nonMounted(() => {\n focusSearchInput();\n});\n\ndefineExpose({\n focusSearchInput,\n});\n</script>\n","<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"el => { if (el) setTabsetRef(el) }\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n >\n <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n /*\n Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n /\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\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\nconst emits = defineEmits([\n /\n Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n /\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst TABS_DATA = [\n { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n];\n\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: props.tabsetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isScrolling.value && !isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/\n We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n /\nfunction selectTabset (id) {\n if (!isScrolling.value) {\n selectedTab.value = id;\n }\n emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n","export const ARROW_KEYS = {\n ARROW_UP: 'ArrowUp',\n ARROW_DOWN: 'ArrowDown',\n ARROW_LEFT: 'ArrowLeft',\n ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n DEFAULT: 'Default',\n LIGHT: 'Light',\n MEDIUM_LIGHT: 'MediumLight',\n MEDIUM: 'Medium',\n MEDIUM_DARK: 'MediumDark',\n DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n MOST_RECENTLY_USED: 'Most recently used',\n SMILEYS_AND_PEOPLE: 'Smileys and people',\n NATURE: 'Nature',\n FOOD: 'Food',\n ACTIVITY: 'Activity',\n TRAVEL: 'Travel',\n OBJECTS: 'Objects',\n SYMBOLS: 'Symbols',\n FLAGS: 'Flags',\n};\n\nexport default {\n EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n EMOJI_PICKER_CATEGORIES,\n};\n","import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n const emojiRefs = ref([]);\n const emojiFilteredRefs = ref([]);\n const isFiltering = ref(false);\n const hoverFirstEmoji = ref(true);\n\n function _handleArrowLeft (indexTab, indexEmoji) {\n if (!focusEmoji(indexTab, indexEmoji - 1)) {\n if (emojiRefs.value[indexTab - 1]) {\n focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n } else {\n focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n }\n }\n }\n\n function _handleArrowRight (indexTab, indexEmoji) {\n if (!focusEmoji(indexTab, indexEmoji + 1)) {\n if (!focusEmoji(indexTab + 1, 0)) {\n focusEmoji(0, 0);\n }\n }\n }\n\n function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n if (!focusEmoji(0, indexEmoji - 1)) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n }\n }\n\n function _handleArrowRightFiltered (indexTab, indexEmoji) {\n if (!focusEmoji(0, indexEmoji + 1)) {\n focusEmoji(0, 0);\n }\n }\n\n function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n if (isFiltering.value) {\n if (direction === 'left') {\n _handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n _handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n _handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n _handleArrowRight(indexTab, indexEmoji);\n }\n }\n }\n\n function focusEmoji (indexTab, indexEmoji) {\n const emojiRef = isFiltering.value\n ? emojiFilteredRefs.value?.[indexEmoji]\n : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n }\n\n function setEmojiRef (el, indexTab, indexEmoji) {\n if (!emojiRefs.value[indexTab]) {\n emojiRefs.value[indexTab] = [];\n }\n emojiRefs.value[indexTab][indexEmoji] = el;\n }\n\n function setFilteredRef (el, index) {\n emojiFilteredRefs.value[index] = el;\n }\n\n function handleArrowNavigationFiltered (key, indexEmoji) {\n hoverFirstEmoji.value = false;\n\n if (key === ARROW_KEYS.ARROW_UP) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n const lastEmojiPosition =\n emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n focusEmoji(0, lastEmojiPosition);\n\n if (!focusEmoji(0, lastEmojiPosition)) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n }\n }\n }\n\n if (key === ARROW_KEYS.ARROW_DOWN) {\n if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n } else {\n focusEmoji(0, position);\n }\n }\n }\n\n if (key === ARROW_KEYS.ARROW_LEFT) {\n _handleHorizontalNavigation('left', 0, indexEmoji);\n }\n\n if (key === ARROW_KEYS.ARROW_RIGHT) {\n _handleHorizontalNavigation('right', 0, indexEmoji);\n }\n }\n\n function handleArrowNavigation (key, indexTab, indexEmoji) {\n if (key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (indexTab === 0) {\n // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n const numberOfMissingEmojis =\n EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n }\n return;\n }\n\n // if we are not on the first tab, we should jump to the previous row of the current tab\n if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n }\n }\n }\n\n if (key === 'ArrowDown') {\n if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n // if cannot go down\n\n // Calculate position from cell 0 to cell 8\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n // check if it exists a next row in the current tab\n if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n // if it exists, we should focus the last emoji of the next row in the current tab\n focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n // if we are at the end of the list it will do nothing\n } else {\n // We don't have next row, we are in the last of the tab, then jump\n // to the next tab but in the equal emoji position in row 0.\n\n if (!focusEmoji(indexTab + 1, position)) {\n // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n // if it doesn't has, jump to the last\n if (!focusEmoji(0, position)) {\n focusEmoji(0, emojiRefs.value[0].length - 1);\n }\n }\n }\n }\n }\n\n if (key === 'ArrowLeft') {\n _handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (key === 'ArrowRight') {\n _handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n }\n\n return {\n emojiFilteredRefs,\n isFiltering,\n hoverFirstEmoji,\n setEmojiRef,\n setFilteredRef,\n focusEmoji,\n handleArrowNavigationFiltered,\n handleArrowNavigation,\n };\n}\n","<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=\"tabLabel.ref\"\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=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"selectEmoji(emoji)\"\n @focusin=\"highlightEmoji(emoji)\"\n @focusout=\"highlightEmoji(null)\"\n @mouseover=\"highlightEmoji(emoji)\"\n @mouseleave=\"highlightEmoji(null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji.unicode_character)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"selectEmoji(emoji)\"\n @focusin=\"highlightEmoji(emoji)\"\n @focusout=\"highlightEmoji(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 setup>\n/ eslint-disable max-len /\n/ eslint-disable max-lines /\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n /\n The filter to apply to the emoji list\n * @type {String}\n * @default ''\n /\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /\n The skin tone to apply to the emoji list\n * @type {String}\n * @required\n /\n skinTone: {\n type: String,\n required: true,\n },\n\n /\n The labels for the tabset\n * @type {Array}\n * @required\n /\n tabsetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n /\n The label for the search results tab\n * @type {String}\n * @required\n /\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /\n The list of recently used emojis\n * @type {Array}\n /\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n});\n\nconst emits = defineEmits([\n /\n Emitted when the user hover over an emoji\n * @event highlighted-emoji\n * @param {Object} emoji - The emoji data that was hovered\n /\n 'highlighted-emoji',\n\n /\n Emitted when the user select an emoji\n * @event selected-emoji\n * @param {Object} emoji - The emoji data that was selected\n /\n 'selected-emoji',\n\n /\n Emitted when the user scroll into an emoji tab\n * @event scroll-into-tab\n * @param {Number} tab-index - The tab that was scrolled into\n /\n 'scroll-into-tab',\n\n /\n Emitted when the scrollTo function starts scrolling and stops scrolling\n * @event is-scrolling\n * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to\n /\n 'is-scrolling',\n\n /\n Emitted when the user reach the end of the emoji list\n * @event focus-skin-selector\n /\n 'focus-skin-selector',\n\n /\n Emitted when the user shift tab in first tab of emoji selector\n * @event focus-search-input\n /\n 'focus-search-input',\n]);\n\nconst {\n emojiFilteredRefs,\n isFiltering,\n hoverFirstEmoji,\n setEmojiRef,\n setFilteredRef,\n focusEmoji,\n handleArrowNavigationFiltered,\n handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/\n The ref for the tab category\n * This is used to display the fixed label\n /\nconst tabCategoryRef = ref(null);\n\n/\n The ref for the list\n * This is used to display the tabs\n /\nconst listRef = ref(null);\n\n/\n The ref for the tab label observer\n * This is used to update the fixed label\n /\nconst tabLabelObserver = ref(null);\n\n/\n The list of tabs\n * This is used to display the tabs\n /\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/\n The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n /\nconst tabLabels = computed(() => {\n return props.recentlyUsedEmojis.length\n ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/\n The label of the fixed tab\n * This is used to display the fixed label\n /\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/\n The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n /\nconst tabs = computed(() => {\n return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/\n The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n /\nconst filteredEmojis = ref([]);\n\n/\n The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n /\nconst currentEmojis = computed(() => {\n return [\n ...emojis[`People${props.skinTone}`],\n ...emojis.Nature,\n ...emojis.Food,\n ...emojis[`Activity${props.skinTone}`],\n ...emojis.Travel,\n ...emojis[`Objects${props.skinTone}`],\n ...emojis.Symbols,\n ...emojis.Flags,\n ];\n});\n\n/\n This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n /\nconst debouncedSearch = debounce(() => {\n // We clean the emojiFilteredRefs to have an updated ref list for the search results\n emojiFilteredRefs.value = [];\n searchByNameAndKeywords();\n});\n\n/\n Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n /\nwatch(currentEmojis, () => {\n searchByNameAndKeywords();\n}, { immediate: true });\n\n/\n Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n /\nwatch(() => props.recentlyUsedEmojis,\n () => {\n emojis['Recently used'] = props.recentlyUsedEmojis;\n }, { immediate: true });\n\n/\n Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n /\nwatch(() => props.emojiFilter, () => {\n resetScroll();\n if (props.emojiFilter) {\n isFiltering.value = true;\n } else {\n isFiltering.value = false;\n // If the emoji filter is empty, emit null to remove the highlighted emoji\n // of the previous search\n highlightEmoji(null);\n }\n debouncedSearch();\n});\n\nwatch(\n () => props.selectedTabset,\n (tab) => {\n scrollToTab(tab.tabId);\n },\n { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n hoverFirstEmoji.value = isFirst;\n emits('highlighted-emoji', emoji);\n}\n\n/\n Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n /\nfunction searchByNameAndKeywords () {\n const searchStr = props.emojiFilter.toLowerCase();\n filteredEmojis.value = currentEmojis.value.filter(obj => {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n return nameIncludesSearchStr \|\| keywordsIncludeSearchStr;\n });\n nextTick(() => {\n if (searchStr) {\n hoverEmoji(filteredEmojis.value[0], true);\n }\n });\n}\n\nfunction debounce (fn, delay = 300) {\n let timeout;\n\n return (...args) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => fn(...args), delay);\n };\n}\n\nfunction getImgSrc (emoji) {\n return `${CDN_URL + emoji}.png`;\n}\n\n/\n Handle image error - We hide the entire button if the image is not found\n /\nfunction handleImageError (event) {\n event.target.parentNode.style.display = 'none';\n}\n\n/\n Scroll to the selected tab\n /\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n const tabLabel = tabLabels.value[tabIndex - 1];\n const tabElement = tabLabel.ref.value[0];\n\n nextTick(() => {\n const container = listRef.value;\n const offsetTop = tabIndex === '1' ? 0 : tabElement.offsetTop - 20;\n\n /\n This variable is used to check if the user is scrolling inside the emoji picker\n * This is used to check if the user is scrolling using the scrollTo function\n * This is useful because this flag will prevent to update the fixed label when the user is scrolling\n * using the scrollTo function\n /\n let isScrolling = true;\n\n let prevScrollTop = container.scrollTop;\n emits('is-scrolling', true);\n\n /\n This event listener checks whether the user is scrolling up or down by comparing the current scrollTop\n * to prevScrollTop. If the scrollToTab function is scrolling from bottom to top and has reached the desired\n * position (scrollTop <= offsetTop),or if the scrollToTab function is scrolling from top to bottom and has\n * passed the desired position(scrollTop >= offsetTop), then isScrolling is set to false.\n /\n / eslint-disable-next-line complexity /\n container.addEventListener('scroll', () => {\n if (isScrolling) {\n const scrollTop = container.scrollTop;\n if (\n (prevScrollTop < scrollTop && scrollTop >= offsetTop) \|\|\n (prevScrollTop > scrollTop && scrollTop <= offsetTop)\n ) {\n isScrolling = false;\n emits('is-scrolling', false);\n }\n prevScrollTop = scrollTop;\n }\n });\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n focusEmoji((tabIndex - 1), 0);\n }\n });\n}\n\nfunction resetScroll () {\n const container = listRef.value;\n\n container.scrollTop = 0;\n}\n\n/\n This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n /\nfunction setTabLabelObserver () {\n /\n The code extracts the target element and its index from the IntersectionObserverEntry object,\n * and checks whether the target intersects with the root and is positioned above or below it.\n /\n tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n emits('is-scrolling', false);\n // eslint-disable-next-line complexity\n entries.forEach(entry => {\n const { target } = entry;\n const index = parseInt(target.dataset.index);\n\n /\n If the target is positioned above the root,\n * the code updates the value of the fixed label to the label of the previous tab,\n * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n * updates the value of the fixed label to the label of the current tab.\n * If the target stops intersecting with the root and its index is 1 (the second tab),\n * the code updates the value of the fixed label to the label of the first tab.\n * NOTES:\n * This last condition is needed because sometimes it is\n * not detect the intersection between the root and the target.\n * We also provide a 50 pixels offset to the root element in the first condition to always get the\n * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n /\n if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n emits('scroll-into-tab', index - 1);\n } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n emits('scroll-into-tab', index);\n fixedLabel.value = tabLabels.value[index]?.label;\n } else if (index === 1) {\n emits('scroll-into-tab', index);\n fixedLabel.value = tabLabels.value[0]?.label;\n }\n });\n });\n\n /\n The tabLabelObserver is set to observe the root element and all its children elements with\n * the IntersectionObserver object, and sets their data-index attribute to their index.\n /\n tabLabelObserver.value.observe(tabCategoryRef.value);\n\n Array.from(listRef.value.children).forEach((child, index) => {\n tabLabelObserver.value.observe(child);\n child.dataset.index = index;\n });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n event.preventDefault();\n\n if (Object.values(ARROW_KEYS).includes(event.key)) {\n handleArrowNavigationFiltered(event.key, indexEmoji);\n return;\n }\n\n switch (event.key) {\n case 'Tab':\n emits('focus-skin-selector');\n break;\n case 'Enter':\n selectEmoji(emoji);\n break;\n default:\n break;\n }\n};\n\n/ eslint-disable-next-line complexity /\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n event.preventDefault();\n\n if (Object.values(ARROW_KEYS).includes(event.key)) {\n handleArrowNavigation(event.key, indexTab, indexEmoji);\n return;\n }\n\n switch (event.key) {\n case 'Tab':\n if (event.shiftKey) {\n if (focusEmoji(indexTab, 0) && indexTab > 0) {\n scrollToTab(indexTab, true);\n } else {\n scrollToTab(1, false);\n emits('focus-search-input');\n }\n } else {\n if (focusEmoji(indexTab + 1, 0)) {\n scrollToTab(indexTab + 1 + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n emits('focus-skin-selector');\n }\n }\n break;\n\n case 'Enter':\n selectEmoji(emoji);\n break;\n\n default:\n break;\n }\n};\n\nfunction selectEmoji (emoji) {\n emits('selected-emoji', emoji);\n}\n\nfunction highlightEmoji (emoji) {\n emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n focusEmoji(tabs.value.length - 1, 0);\n}\n\nonMounted(() => {\n setTabLabelObserver();\n});\n\nonUnmounted(() => {\n tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n focusEmojiSelector,\n focusLastEmoji,\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 :ref=\"el => { if (el) setSkinsRef(el) }\"\n :key=\"skin.name\"\n :class=\"{\n 'selected': skinSelected.skinCode === skin.skinCode,\n }\"\n @keydown=\"event => handleKeyDown(event, skin, index)\"\n @click=\"selectSkin(skin)\"\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=\"`${CDN_URL + 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=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n >\n </button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker';\nimport { DtTooltip } from '@/components/tooltip';\n\nconst props = defineProps({\n /\n The skin tone to apply to the emoji list\n * @type {String}\n * @required\n /\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\nconst emits = defineEmits([\n /\n The skin tone that was selected\n * @event skin-tone\n * @type {Number}\n /\n 'skin-tone',\n 'focus-tabset',\n 'focus-last-emoji',\n]);\n\nconst skinList = [\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\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/\n It will close the skin selector if the user is hovering over the emoji list\n /\nwatchEffect(\n () => props.isHovering && (isOpen.value = false),\n);\n\n/\n It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n /\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n skinSelected.value = skin;\n isOpen.value = false;\n emits('skin-tone', skin.skinTone);\n nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n skinsRef.value[index - 1]?.focus();\n }\n\n if (event.key === 'ArrowRight') {\n skinsRef.value[index + 1]?.focus();\n }\n\n if (event.key === 'Enter') {\n if (skin) { selectSkin(skin); } else {\n toggleSkinList();\n }\n }\n\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n emits('focus-last-emoji');\n } else {\n emits('focus-tabset');\n }\n }\n};\n\nfunction toggleSkinList () {\n isOpen.value = !isOpen.value;\n nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n focusSkinSelector,\n});\n</script>\n","<template>\n <div\n class=\"d-emoji-picker\"\n >\n <div class=\"d-emoji-picker--header\">\n <emoji-tabset\n ref=\"tabsetRef\"\n :emoji-filter=\"internalSearchQuery\"\n :show-recently-used-tab=\"showRecentlyUsedTab\"\n :scroll-into-tab=\"scrollIntoTab\"\n :tabset-labels=\"tabSetLabels\"\n :is-scrolling=\"isScrolling\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--body\">\n <emoji-search\n v-if=\"showSearch\"\n ref=\"searchInputRef\"\n v-model=\"internalSearchQuery\"\n :search-placeholder-label=\"searchPlaceholderLabel\"\n @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n @keydown.esc=\"emits('close')\"\n />\n <emoji-selector\n ref=\"emojiSelectorRef\"\n :emoji-filter=\"internalSearchQuery\"\n :skin-tone=\"skinTone\"\n :tabset-labels=\"tabSetLabels\"\n :search-results-label=\"searchResultsLabel\"\n :search-no-results-label=\"searchNoResultsLabel\"\n :recently-used-emojis=\"recentlyUsedEmojis\"\n :selected-tabset=\"selectedTabset\"\n @scroll-into-tab=\"updateScrollIntoTab\"\n @is-scrolling=\"updateIsScrolling\"\n @highlighted-emoji=\"updateHighlightedEmoji\"\n @selected-emoji=\"emits('selected-emoji', $event)\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n <div class=\"d-emoji-picker--footer\">\n <emoji-description :emoji=\"highlightedEmoji\" />\n <emoji-skin-selector\n ref=\"skinSelectorRef\"\n :is-hovering=\"!!highlightedEmoji\"\n :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n :skin-tone=\"skinTone\"\n @skin-tone=\"emits('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { computed, ref, watch } from 'vue';\n\nconst props = defineProps({\n /\n The array with recently used emoji object\n * This list is necessary to fill the recently used tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n /\n // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n recentlyUsedEmojis: {\n type: Array,\n default: () => ([]),\n },\n\n /\n The placeholder text for the search input\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n /\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n /\n The label for the search results tab\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n /\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n /\n The label for the search no results\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n /\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /\n The list of tabsets to show, it is necessary to be updated with the correct language\n * It must respect the provided order.\n * @type {Array}\n * @required\n * @example\n * <dt-emoji-picker\n * :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n * 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n /\n tabSetLabels: {\n type: Array,\n required: true,\n },\n\n /\n The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n /\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /\n Tooltip shown when skin selector button is hovered.\n * @type {String}\n * @required\n * @example\n * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n /\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n\n /\n Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n /\n searchQuery: {\n type: String,\n default: '',\n },\n\n /\n Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n /\n showSearch: {\n type: Boolean,\n default: true,\n },\n});\n\nconst emits = defineEmits(\n [\n /\n It will emit the selected emoji\n * @event selected-emoji\n * @param {Object} emoji - The selected emoji from the emoji selector\n /\n 'selected-emoji',\n\n /\n It will emit the selected skin tone\n * @event skin-tone\n * @param {String} skin - The selected skin tone from the skin selector\n /\n 'skin-tone',\n\n /\n Since the keyboard events are encapsulated, we emit this event to close the picker\n * @event close\n /\n 'close',\n ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\nconst isScrolling = ref(false);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);\n\nwatch(\n () => props.searchQuery,\n (newValue) => {\n internalSearchQuery.value = newValue;\n },\n);\n\n/\n Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabName {String} - The name of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n internalSearchQuery.value = '';\n selectedTabset.value = tabId;\n selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n scrollIntoTab.value = value;\n}\n\nfunction updateIsScrolling (value) {\n isScrolling.value = value;\n}\nfunction updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":["ref","emojis"],"mappings":"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"}

package/dist/lib/input.cjs CHANGED Viewed

@@ -47,16 +47,9 @@ const INPUT_SIZE_CLASSES = {
   }
 };
 const INPUT_STATE_CLASSES = {
-  input: {
-    error: "d-input--error",
-    warning: "d-input--warning",
-    success: "d-input--success"
-  },
-  textarea: {
-    error: "d-textarea--error",
-    warning: "d-textarea--warning",
-    success: "d-textarea--success"
-  }
+  error: "d-input--error",
+  warning: "d-input--warning",
+  success: "d-input--success"
 };
 const DESCRIPTION_SIZE_CLASSES = {
   lg: "d-description--lg",
@@ -366,7 +359,7 @@ const _sfc_main = {
       return INPUT_SIZE_CLASSES[this.inputComponent][this.size];
     },
     stateClass() {
-      return [INPUT_STATE_CLASSES[this.inputComponent][this.inputState]];
+      return [INPUT_STATE_CLASSES[this.inputState]];
     }
   },
   watch: {
@@ -392,6 +385,7 @@ const _sfc_main = {
   methods: {
     inputClasses() {
       return [
+        "d-input__input",
         this.inputComponent === "input" ? "d-input" : "d-textarea",
         {
           [this.stateClass]: this.showInputState,
@@ -466,10 +460,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
   return vue.openBlock(), vue.createElementBlock("div", {
     ref: "container",
-    class: vue.normalizeClass({ "d-input--hidden": $props.hidden }),
+    class: vue.normalizeClass(["d-input__root", { "d-input--hidden": $props.hidden }]),
     "data-qa": "dt-input"
   }, [
     vue.createElementVNode("label", {
+      class: "d-input__label",
       "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : void 0,
       "data-qa": "dt-input-label-wrapper"
     }, [
@@ -479,6 +474,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ref: "label",
           "data-qa": "dt-input-label",
           class: vue.normalizeClass([
+            "d-input__label-text",
             "d-label",
             _ctx.labelSizeClasses[$props.size]
           ])
@@ -489,6 +485,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         id: $options.descriptionKey,
         ref: "description",
         class: vue.normalizeClass([
+          "d-input__description",
           "d-description",
           _ctx.descriptionSizeClasses[$props.size]
         ]),

package/dist/lib/input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n TEL: 'tel',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport const INPUT_ICON_SIZES = {\n xs: '100',\n sm: '200',\n md: '200',\n lg: '400',\n xl: '500',\n};\n\nexport const INPUT_SIZE_CLASSES = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n};\n\nexport const INPUT_STATE_CLASSES = {\n input: {\n error: 'd-input--error',\n warning: 'd-input--warning',\n success: 'd-input--success',\n },\n\n textarea: {\n error: 'd-textarea--error',\n warning: 'd-textarea--warning',\n success: 'd-textarea--success',\n },\n};\n\nexport const DESCRIPTION_SIZE_CLASSES = {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n};\n\nexport const LABEL_SIZE_CLASSES = {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n INPUT_ICON_SIZES,\n INPUT_SIZE_CLASSES,\n INPUT_STATE_CLASSES,\n DESCRIPTION_SIZE_CLASSES,\n LABEL_SIZE_CLASSES,\n};\n","<template>\n <div\n ref=\"container\"\n :class=\"{ 'd-input--hidden': hidden }\"\n data-qa=\"dt-input\"\n >\n <label\n :aria-details=\"$slots.description \|\| description ? descriptionKey : undefined\"\n data-qa=\"dt-input-label-wrapper\"\n >\n <!-- @slot Slot for label, defaults to label prop -->\n <slot name=\"labelSlot\">\n <div\n v-if=\"labelVisible && label\"\n ref=\"label\"\n data-qa=\"dt-input-label\"\n :class=\"[\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"hasSlotContent($slots.description) \|\| description \|\| shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"hasSlotContent($slots.description) \|\| description\"\n >\n <!-- @slot Slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled === true ? true : undefined\"\n >\n <span\n class=\"d-input-icon d-input-icon--left\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot\n name=\"leftIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"modelValue\"\n :name=\"name\"\n :disabled=\"disabled\"\n :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n data-qa=\"dt-input-input\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"modelValue\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n data-qa=\"dt-input-input\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n class=\"d-input-icon d-input-icon--right\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot\n name=\"rightIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n </div>\n </label>\n <dt-validation-messages\n :validation-messages=\"validationMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-input-messages\"\n />\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n INPUT_TYPES,\n INPUT_SIZES,\n INPUT_SIZE_CLASSES,\n INPUT_ICON_SIZES,\n INPUT_STATE_CLASSES,\n DESCRIPTION_SIZE_CLASSES,\n LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n hasSlotContent,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/\n An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n /\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /\n Name property of the input element\n /\n name: {\n type: String,\n default: '',\n },\n\n /\n Type of the input.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time, file, tel\n * @default 'text'\n /\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /\n Value of the input\n /\n modelValue: {\n type: [String, Number],\n default: '',\n },\n\n /\n Disables the input\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Label for the input\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n Determines visibility of input label.\n * @values true, false\n /\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /\n Description for the input\n /\n description: {\n type: String,\n default: '',\n },\n\n /\n Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /\n Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n /\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n /\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n /\n currentLength: {\n type: Number,\n default: null,\n },\n\n /\n Whether the input will continue to display a warning validation message even if the input has lost focus.\n /\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /\n Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n /\n validate: {\n type: Object,\n default: null,\n },\n\n /\n hidden allows to use input without the element visually present in DOM\n /\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native input event\n \n @event input\n * @type {String}\n /\n 'input',\n\n /\n Native input blur event\n \n @event blur\n * @type {FocusEvent}\n /\n 'blur',\n\n /\n Input clear event\n \n @event clear\n /\n 'clear',\n\n /\n Native input focus event\n \n @event focus\n * @type {FocusEvent}\n /\n 'focus',\n\n /\n Native input focusin event\n \n @event focusin\n * @type {FocusEvent}\n /\n 'focusin',\n\n /\n Native input focusout event\n \n @event focusout\n * @type {FocusEvent}\n /\n 'focusout',\n\n /\n Event fired to sync the modelValue prop with the parent component\n * @event update:modelValue\n /\n 'update:modelValue',\n\n /\n Length of the input when currentLength prop is not passed\n \n @event update:length\n * @type {Number}\n /\n 'update:length',\n\n /\n Result of the input validation\n \n @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n hasSlotContent,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n iconSize () {\n return INPUT_ICON_SIZES[this.size];\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n input: async event => {\n let val = event.target.value;\n if (this.type === INPUT_TYPES.FILE) {\n const files = Array.from(event.target.files);\n val = files.map(file => file.name);\n }\n this.$emit('input', val);\n this.$emit('update:modelValue', val);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n focusin: event => this.$emit('focusin', event),\n focusout: event => this.$emit('focusout', event),\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.modelValue);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n return !!(\n this.validationProps.length.description &&\n this.validationProps.length.max\n );\n },\n\n shouldLimitMaxLength () {\n return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n },\n\n // eslint-disable-next-line complexity\n showLengthLimitValidation () {\n return (\n this.shouldValidateLength &&\n this.inputLengthState !== null &&\n this.validationProps.length.message &&\n (this.retainWarning \|\| this.isInputFocused \|\| this.isInvalid)\n );\n },\n\n sizeModifierClass () {\n if (this.isDefaultSize \|\| !this.isValidSize) {\n return '';\n }\n\n return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n },\n\n stateClass () {\n return [INPUT_STATE_CLASSES[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n modelValue: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n beforeMount () {\n this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n this.labelSizeClasses = LABEL_SIZE_CLASSES;\n },\n\n methods: {\n inputClasses () {\n return [\n this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n {\n [this.stateClass]: this.showInputState,\n 'd-input-icon--left': this.$slots.leftIcon,\n 'd-input-icon--right': this.$slots.rightIcon,\n },\n this.sizeModifierClass,\n this.inputClass,\n ];\n },\n\n inputWrapperClasses () {\n if (this.hidden) {\n return [];\n }\n return [\n 'd-input__wrapper',\n { [this.stateClass]: this.showInputState },\n this.inputWrapperClass,\n ];\n },\n\n calculateLength (value) {\n if (typeof value !== 'string') {\n return 0;\n }\n\n return [...value].length;\n },\n\n inputLengthErrorMessage () {\n return {\n message: this.validationProps.length.message,\n type: this.inputLengthState,\n };\n },\n\n onBlur (e) {\n // Do not emit a blur event if the target element is a child of this component\n if (!this.$refs.container?.contains(e.relatedTarget)) {\n this.$emit('blur', e);\n }\n },\n\n clear () {\n this.$emit('input', '');\n this.$emit('clear');\n },\n\n blur () {\n this.$refs.input.blur();\n },\n\n focus () {\n this.$refs.input.focus();\n },\n\n select () {\n this.$refs.input.select();\n },\n\n getMessageKey (type, index) {\n return `message-${type}-${index}`;\n },\n\n validateLength (length) {\n this.isInvalid = (length > this.validationProps.length.max);\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","hasSlotContent","DESCRIPTION_SIZE_TYPES","getUniqueString","getValidationState","VALIDATION_MESSAGE_TYPES","_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_openBlock","_toDisplayString","_mergeProps","_toHandlers","_createVNode"],"mappings":"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"}
1	+ {"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n TEL: 'tel',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport const INPUT_ICON_SIZES = {\n xs: '100',\n sm: '200',\n md: '200',\n lg: '400',\n xl: '500',\n};\n\nexport const INPUT_SIZE_CLASSES = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n};\n\nexport const INPUT_STATE_CLASSES = {\n error: 'd-input--error',\n warning: 'd-input--warning',\n success: 'd-input--success',\n};\n\nexport const DESCRIPTION_SIZE_CLASSES = {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n};\n\nexport const LABEL_SIZE_CLASSES = {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n INPUT_ICON_SIZES,\n INPUT_SIZE_CLASSES,\n INPUT_STATE_CLASSES,\n DESCRIPTION_SIZE_CLASSES,\n LABEL_SIZE_CLASSES,\n};\n","<template>\n <div\n ref=\"container\"\n :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"d-input__label\"\n :aria-details=\"$slots.description \|\| description ? descriptionKey : undefined\"\n data-qa=\"dt-input-label-wrapper\"\n >\n <!-- @slot Slot for label, defaults to label prop -->\n <slot name=\"labelSlot\">\n <div\n v-if=\"labelVisible && label\"\n ref=\"label\"\n data-qa=\"dt-input-label\"\n :class=\"[\n 'd-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"hasSlotContent($slots.description) \|\| description \|\| shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'd-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"hasSlotContent($slots.description) \|\| description\"\n >\n <!-- @slot Slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled === true ? true : undefined\"\n >\n <span\n class=\"d-input-icon d-input-icon--left\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot\n name=\"leftIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"modelValue\"\n :name=\"name\"\n :disabled=\"disabled\"\n :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n data-qa=\"dt-input-input\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"modelValue\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n data-qa=\"dt-input-input\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n class=\"d-input-icon d-input-icon--right\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot\n name=\"rightIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n </div>\n </label>\n <dt-validation-messages\n :validation-messages=\"validationMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-input-messages\"\n />\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n INPUT_TYPES,\n INPUT_SIZES,\n INPUT_SIZE_CLASSES,\n INPUT_ICON_SIZES,\n INPUT_STATE_CLASSES,\n DESCRIPTION_SIZE_CLASSES,\n LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n hasSlotContent,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/\n An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n /\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /\n Name property of the input element\n /\n name: {\n type: String,\n default: '',\n },\n\n /\n Type of the input.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time, file, tel\n * @default 'text'\n /\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /\n Value of the input\n /\n modelValue: {\n type: [String, Number],\n default: '',\n },\n\n /\n Disables the input\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Label for the input\n /\n label: {\n type: String,\n default: '',\n },\n\n /\n Determines visibility of input label.\n * @values true, false\n /\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /\n Description for the input\n /\n description: {\n type: String,\n default: '',\n },\n\n /\n Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /\n Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n /\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n /\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n /\n currentLength: {\n type: Number,\n default: null,\n },\n\n /\n Whether the input will continue to display a warning validation message even if the input has lost focus.\n /\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /\n Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n /\n validate: {\n type: Object,\n default: null,\n },\n\n /\n hidden allows to use input without the element visually present in DOM\n /\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native input event\n \n @event input\n * @type {String}\n /\n 'input',\n\n /\n Native input blur event\n \n @event blur\n * @type {FocusEvent}\n /\n 'blur',\n\n /\n Input clear event\n \n @event clear\n /\n 'clear',\n\n /\n Native input focus event\n \n @event focus\n * @type {FocusEvent}\n /\n 'focus',\n\n /\n Native input focusin event\n \n @event focusin\n * @type {FocusEvent}\n /\n 'focusin',\n\n /\n Native input focusout event\n \n @event focusout\n * @type {FocusEvent}\n /\n 'focusout',\n\n /\n Event fired to sync the modelValue prop with the parent component\n * @event update:modelValue\n /\n 'update:modelValue',\n\n /\n Length of the input when currentLength prop is not passed\n \n @event update:length\n * @type {Number}\n /\n 'update:length',\n\n /\n Result of the input validation\n \n @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n hasSlotContent,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n iconSize () {\n return INPUT_ICON_SIZES[this.size];\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n input: async event => {\n let val = event.target.value;\n if (this.type === INPUT_TYPES.FILE) {\n const files = Array.from(event.target.files);\n val = files.map(file => file.name);\n }\n this.$emit('input', val);\n this.$emit('update:modelValue', val);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n focusin: event => this.$emit('focusin', event),\n focusout: event => this.$emit('focusout', event),\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.modelValue);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n return !!(\n this.validationProps.length.description &&\n this.validationProps.length.max\n );\n },\n\n shouldLimitMaxLength () {\n return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n },\n\n // eslint-disable-next-line complexity\n showLengthLimitValidation () {\n return (\n this.shouldValidateLength &&\n this.inputLengthState !== null &&\n this.validationProps.length.message &&\n (this.retainWarning \|\| this.isInputFocused \|\| this.isInvalid)\n );\n },\n\n sizeModifierClass () {\n if (this.isDefaultSize \|\| !this.isValidSize) {\n return '';\n }\n\n return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n },\n\n stateClass () {\n return [INPUT_STATE_CLASSES[this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n modelValue: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n beforeMount () {\n this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n this.labelSizeClasses = LABEL_SIZE_CLASSES;\n },\n\n methods: {\n inputClasses () {\n return [\n 'd-input__input',\n this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n {\n [this.stateClass]: this.showInputState,\n 'd-input-icon--left': this.$slots.leftIcon,\n 'd-input-icon--right': this.$slots.rightIcon,\n },\n this.sizeModifierClass,\n this.inputClass,\n ];\n },\n\n inputWrapperClasses () {\n if (this.hidden) {\n return [];\n }\n return [\n 'd-input__wrapper',\n { [this.stateClass]: this.showInputState },\n this.inputWrapperClass,\n ];\n },\n\n calculateLength (value) {\n if (typeof value !== 'string') {\n return 0;\n }\n\n return [...value].length;\n },\n\n inputLengthErrorMessage () {\n return {\n message: this.validationProps.length.message,\n type: this.inputLengthState,\n };\n },\n\n onBlur (e) {\n // Do not emit a blur event if the target element is a child of this component\n if (!this.$refs.container?.contains(e.relatedTarget)) {\n this.$emit('blur', e);\n }\n },\n\n clear () {\n this.$emit('input', '');\n this.$emit('clear');\n },\n\n blur () {\n this.$refs.input.blur();\n },\n\n focus () {\n this.$refs.input.focus();\n },\n\n select () {\n this.$refs.input.select();\n },\n\n getMessageKey (type, index) {\n return `message-${type}-${index}`;\n },\n\n validateLength (length) {\n this.isInvalid = (length > this.validationProps.length.max);\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","hasSlotContent","DESCRIPTION_SIZE_TYPES","getUniqueString","getValidationState","VALIDATION_MESSAGE_TYPES","_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_openBlock","_toDisplayString","_mergeProps","_toHandlers","_createVNode"],"mappings":"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"}

package/dist/lib/input.js CHANGED Viewed

@@ -45,16 +45,9 @@ const INPUT_SIZE_CLASSES = {
   }
 };
 const INPUT_STATE_CLASSES = {
-  input: {
-    error: "d-input--error",
-    warning: "d-input--warning",
-    success: "d-input--success"
-  },
-  textarea: {
-    error: "d-textarea--error",
-    warning: "d-textarea--warning",
-    success: "d-textarea--success"
-  }
+  error: "d-input--error",
+  warning: "d-input--warning",
+  success: "d-input--success"
 };
 const DESCRIPTION_SIZE_CLASSES = {
   lg: "d-description--lg",
@@ -364,7 +357,7 @@ const _sfc_main = {
       return INPUT_SIZE_CLASSES[this.inputComponent][this.size];
     },
     stateClass() {
-      return [INPUT_STATE_CLASSES[this.inputComponent][this.inputState]];
+      return [INPUT_STATE_CLASSES[this.inputState]];
     }
   },
   watch: {
@@ -390,6 +383,7 @@ const _sfc_main = {
   methods: {
     inputClasses() {
       return [
+        "d-input__input",
         this.inputComponent === "input" ? "d-input" : "d-textarea",
         {
           [this.stateClass]: this.showInputState,
@@ -464,10 +458,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
   return openBlock(), createElementBlock("div", {
     ref: "container",
-    class: normalizeClass({ "d-input--hidden": $props.hidden }),
+    class: normalizeClass(["d-input__root", { "d-input--hidden": $props.hidden }]),
     "data-qa": "dt-input"
   }, [
     createElementVNode("label", {
+      class: "d-input__label",
       "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : void 0,
       "data-qa": "dt-input-label-wrapper"
     }, [
@@ -477,6 +472,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ref: "label",
           "data-qa": "dt-input-label",
           class: normalizeClass([
+            "d-input__label-text",
             "d-label",
             _ctx.labelSizeClasses[$props.size]
           ])
@@ -487,6 +483,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         id: $options.descriptionKey,
         ref: "description",
         class: normalizeClass([
+          "d-input__description",
           "d-description",
           _ctx.descriptionSizeClasses[$props.size]
         ]),