npm - @dialpad/dialtone - Versions diffs - 9.83.2 → 9.84.1 - Mend

@dialpad/dialtone 9.83.2 → 9.84.1

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

Files changed (76) hide show

package/dist/vue3/components/emoji_picker/emoji_picker.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji_picker.vue.cjs","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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 @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 @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);\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 updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":["ref","computed","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqEA~~,UAAM,QAAQ;AAmHd,UAAM,QAAQ;AAwBd,UAAM,sBAAsBA,IAAAA,IAAI,MAAM,YAAY,KAAK;AACvD,UAAM,mBAAmBA,IAAAA,IAAI,IAAI;AACjC,UAAM,iBAAiBA,IAAAA,IAAI,CAAA,CAAE;AAE7B,UAAM,gBAAgBA,IAAAA,IAAI,CAAC;AAE3B,UAAM,sBAAsBC,IAAQ,SAAC,MAAM,MAAM,mBAAmB,SAAS,CAAC;AAE9EC,QAAK;AAAA,MACH,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AACZ,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAWA,aAAS,uBAAwB,OAAO;AACtC,0BAAoB,QAAQ;AAC5B,qBAAe,QAAQ;AACvB,qBAAe,QAAQ,EAAE,GAAG,eAAe,OAAO,MAAK;AAAA,IACzD;AAEA,aAAS,oBAAqB,OAAO;AACnC,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji_picker.vue.cjs","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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 @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch\n ? $refs.searchInputRef.focusSearchInput()\n : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc=\"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 @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);\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 updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":["ref","computed","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAmHd,UAAM,QAAQ;AAwBd,UAAM,sBAAsBA,IAAAA,IAAI,MAAM,YAAY,KAAK;AACvD,UAAM,mBAAmBA,IAAAA,IAAI,IAAI;AACjC,UAAM,iBAAiBA,IAAAA,IAAI,CAAA,CAAE;AAE7B,UAAM,gBAAgBA,IAAAA,IAAI,CAAC;AAE3B,UAAM,sBAAsBC,IAAQ,SAAC,MAAM,MAAM,mBAAmB,SAAS,CAAC;AAE9EC,QAAK;AAAA,MACH,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AACZ,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAWA,aAAS,uBAAwB,OAAO;AACtC,0BAAoB,QAAQ;AAC5B,qBAAe,QAAQ;AACvB,qBAAe,QAAQ,EAAE,GAAG,eAAe,OAAO,MAAK;AAAA,IACzD;AAEA,aAAS,oBAAqB,OAAO;AACnC,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/emoji_picker.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji_picker.vue.js","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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 @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 @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);\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 updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqEA~~,UAAM,QAAQ;AAmHd,UAAM,QAAQ;AAwBd,UAAM,sBAAsB,IAAI,MAAM,YAAY,KAAK;AACvD,UAAM,mBAAmB,IAAI,IAAI;AACjC,UAAM,iBAAiB,IAAI,CAAA,CAAE;AAE7B,UAAM,gBAAgB,IAAI,CAAC;AAE3B,UAAM,sBAAsB,SAAS,MAAM,MAAM,mBAAmB,SAAS,CAAC;AAE9E;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AACZ,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAWA,aAAS,uBAAwB,OAAO;AACtC,0BAAoB,QAAQ;AAC5B,qBAAe,QAAQ;AACvB,qBAAe,QAAQ,EAAE,GAAG,eAAe,OAAO,MAAK;AAAA,IACzD;AAEA,aAAS,oBAAqB,OAAO;AACnC,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"emoji_picker.vue.js","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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 @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch\n ? $refs.searchInputRef.focusSearchInput()\n : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc=\"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 @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);\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 updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAmHd,UAAM,QAAQ;AAwBd,UAAM,sBAAsB,IAAI,MAAM,YAAY,KAAK;AACvD,UAAM,mBAAmB,IAAI,IAAI;AACjC,UAAM,iBAAiB,IAAI,CAAA,CAAE;AAE7B,UAAM,gBAAgB,IAAI,CAAC;AAE3B,UAAM,sBAAsB,SAAS,MAAM,MAAM,mBAAmB,SAAS,CAAC;AAE9E;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AACZ,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAWA,aAAS,uBAAwB,OAAO;AACtC,0BAAoB,QAAQ;AAC5B,qBAAe,QAAQ;AACvB,qBAAe,QAAQ,EAAE,GAAG,eAAe,OAAO,MAAK;AAAA,IACzD;AAEA,aAAS,oBAAqB,OAAO;AACnC,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs CHANGED Viewed

@@ -35,7 +35,6 @@ const _sfc_main = {
       focusSearchInput
     });
     return (_ctx, _cache) => {
-      const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createVNode(vue.unref(input.default), {
           id: "searchInput",
@@ -61,13 +60,13 @@ const _sfc_main = {
               vue.createVNode(vue.unref(button.default), {
                 importance: "clear",
                 size: "xs",
-                class: "d-mrn4",
+                class: "d-emoji-picker__search-x-button",
                 circle: "",
                 kind: "muted",
                 onClick: clearSearch
               }, {
                 icon: vue.withCtx(() => [
-                  vue.createVNode(_component_dt_icon_close, { size: "200" })
+                  vue.createVNode(vue.unref(vue3.DtIconClose), { size: "200" })
                 ]),
                 _: 1
               })

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.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-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-~~mrn4~~\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, ~~DtIconXCircle~~ } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\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"],"names":["ref","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAEd,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACAC,QAAAA,UAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.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-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\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"],"names":["ref","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAEd,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACAC,QAAAA,UAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ref, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx } from "vue";
-import { DtIconSearch } from "@dialpad/dialtone-icons/vue3";
+import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx } from "vue";
+import { DtIconSearch, DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import DtInput from "../../input/input.vue.js";
 import DtButton from "../../button/button.vue.js";
 const _hoisted_1 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
@@ -33,7 +33,6 @@ const _sfc_main = {
       focusSearchInput
     });
     return (_ctx, _cache) => {
-      const _component_dt_icon_close = resolveComponent("dt-icon-close");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(DtInput), {
           id: "searchInput",
@@ -59,13 +58,13 @@ const _sfc_main = {
               createVNode(unref(DtButton), {
                 importance: "clear",
                 size: "xs",
-                class: "d-mrn4",
+                class: "d-emoji-picker__search-x-button",
                 circle: "",
                 kind: "muted",
                 onClick: clearSearch
               }, {
                 icon: withCtx(() => [
-                  createVNode(_component_dt_icon_close, { size: "200" })
+                  createVNode(unref(DtIconClose), { size: "200" })
                 ]),
                 _: 1
               })

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.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-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-~~mrn4~~\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, ~~DtIconXCircle~~ } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAEd,UAAM,cAAc,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACA,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.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-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAEd,UAAM,cAAc,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACA,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs CHANGED Viewed

@@ -3,7 +3,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const common_emoji = require("../../common/emoji.cjs");
 const vue = require("vue");
 const icon_constants = require("../icon/icon_constants.cjs");
-const regexCombinedEmojis = require("regex-combined-emojis");
 const emoji = require("../emoji/emoji.vue.cjs");
 const _sfc_main = {
   name: "DtEmojiTextWrapper",
@@ -42,11 +41,13 @@ const _sfc_main = {
      */
     replaceDtEmojis(replaceList, textContent) {
       if (!replaceList.length) return textContent;
-      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const escapedReplaceList = replaceList.map(
+        (item) => item.replace(/\*/g, "\\*")
+      );
+      const regexp = new RegExp(`(${escapedReplaceList.join("|")})`, "g");
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
-        regexp.lastIndex = 0;
-        if (replaceList.includes(item) || regexp.test(item)) {
+        if (replaceList.includes(item)) {
           return vue.h(emoji.default, { code: item, size: this.size });
         }
         return vue.h("span", { class: "d-emoji-text-wrapper__text" }, item);
@@ -75,7 +76,8 @@ const _sfc_main = {
      */
     searchCodes(textContent) {
       const shortcodes = common_emoji.findShortCodes(textContent);
-      const replaceList = [...shortcodes, regexCombinedEmojis.emojiPattern];
+      const emojis = common_emoji.findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
       if (replaceList.length === 0) return textContent;
       return this.replaceDtEmojis(replaceList, textContent);
     }

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji_text_wrapper.vue.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\~~nimport { emojiPattern } from 'regex-combined-emojis';\~~n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at: 100 to 800\n /\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${~~replaceList~~.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n ~~// Reset the regexp index to 0 to start from the beginning\n // Otherwise, it will start from the last index\n regexp.lastIndex = 0;\n~~ if (replaceList.includes(item) ~~\|\| regexp.test(item~~)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n\n const replaceList = [...shortcodes, ~~emojiPattern~~];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","h","findShortCodes","~~emojiPattern~~"],"mappings":"~~;;;;;;;AAWA~~,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,SAAAA,MAAO;AAAA,EACR;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,kCAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY,OAAQ,QAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,~~YAAY~~,KAAK,GAAG,CAAC,KAAK,GAAG;~~AAC3D~~,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;~~AAGb~~,~~eAAO,YAAY;AACnB,~~YAAI,YAAY,SAAS,IAAI,~~KAAK,OAAO,KAAK,IAAI,~~GAAG;~~AACnD~~,iBAAOC,IAAC,EAACF,MAAO,SAAE,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAOE,IAAAA,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU,SAAU,QAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS,SAAU,QAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa,UAAW,QAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAOA,IAAC,EAAC,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAaC,4BAAe,WAAW;~~AAE7C~~,YAAM,cAAc,CAAC,GAAG,~~YAAYC~~,~~oBAAY~~,~~YAAA~~;~~AAChD~~,UAAI,YAAY,WAAW,EAAG,QAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAOF,IAAC;AAAA,MACN,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;;"}
1	+ {"version":3,"file":"emoji_text_wrapper.vue.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at: 100 to 800\n /\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n const escapedReplaceList = replaceList.map(item =>\n item.replace(/\\/g, '\\\\'),\n );\n\n const regexp = new RegExp(`(${escapedReplaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","h","findShortCodes","findEmojis"],"mappings":";;;;;;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,SAAAA,MAAO;AAAA,EACR;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,kCAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY,OAAQ,QAAO;AAEhC,YAAM,qBAAqB,YAAY;AAAA,QAAI,UACzC,KAAK,QAAQ,OAAO,KAAK;AAAA;AAG3B,YAAM,SAAS,IAAI,OAAO,IAAI,mBAAmB,KAAK,GAAG,CAAC,KAAK,GAAG;AAClE,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAOC,IAAC,EAACF,MAAO,SAAE,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAOE,IAAAA,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU,SAAU,QAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS,SAAU,QAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa,UAAW,QAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAOA,IAAC,EAAC,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAaC,4BAAe,WAAW;AAC7C,YAAM,SAASC,wBAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW,EAAG,QAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAOF,IAAC;AAAA,MACN,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;;"}

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.js CHANGED Viewed

@@ -1,7 +1,6 @@
-import { findShortCodes } from "../../common/emoji.js";
+import { findShortCodes, findEmojis } from "../../common/emoji.js";
 import { h } from "vue";
 import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
-import { emojiPattern } from "regex-combined-emojis";
 import DtEmoji from "../emoji/emoji.vue.js";
 const _sfc_main = {
   name: "DtEmojiTextWrapper",
@@ -40,11 +39,13 @@ const _sfc_main = {
      */
     replaceDtEmojis(replaceList, textContent) {
       if (!replaceList.length) return textContent;
-      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const escapedReplaceList = replaceList.map(
+        (item) => item.replace(/\*/g, "\\*")
+      );
+      const regexp = new RegExp(`(${escapedReplaceList.join("|")})`, "g");
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
-        regexp.lastIndex = 0;
-        if (replaceList.includes(item) || regexp.test(item)) {
+        if (replaceList.includes(item)) {
           return h(DtEmoji, { code: item, size: this.size });
         }
         return h("span", { class: "d-emoji-text-wrapper__text" }, item);
@@ -73,7 +74,8 @@ const _sfc_main = {
      */
     searchCodes(textContent) {
       const shortcodes = findShortCodes(textContent);
-      const replaceList = [...shortcodes, emojiPattern];
+      const emojis = findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
       if (replaceList.length === 0) return textContent;
       return this.replaceDtEmojis(replaceList, textContent);
     }

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\~~nimport { emojiPattern } from 'regex-combined-emojis';\~~n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at: 100 to 800\n /\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${~~replaceList~~.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n ~~// Reset the regexp index to 0 to start from the beginning\n // Otherwise, it will start from the last index\n regexp.lastIndex = 0;\n~~ if (replaceList.includes(item) ~~\|\| regexp.test(item~~)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n\n const replaceList = [...shortcodes, ~~emojiPattern~~];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":[],"mappings":"~~;;;;;AAWA~~,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,mBAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY,OAAQ,QAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,~~YAAY~~,KAAK,GAAG,CAAC,KAAK,GAAG;~~AAC3D~~,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;~~AAGb~~,~~eAAO,YAAY;AACnB,~~YAAI,YAAY,SAAS,IAAI,~~KAAK,OAAO,KAAK,IAAI,~~GAAG;~~AACnD~~,iBAAO,EAAE,SAAS,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAO,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU,SAAU,QAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS,SAAU,QAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa,UAAW,QAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAO,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAa,eAAe,WAAW;~~AAE7C~~,YAAM,cAAc,CAAC,GAAG,YAAY,~~YAAY~~;~~AAChD~~,UAAI,YAAY,WAAW,EAAG,QAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;"}
1	+ {"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at: 100 to 800\n /\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n const escapedReplaceList = replaceList.map(item =>\n item.replace(/\\/g, '\\\\'),\n );\n\n const regexp = new RegExp(`(${escapedReplaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":[],"mappings":";;;;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,mBAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY,OAAQ,QAAO;AAEhC,YAAM,qBAAqB,YAAY;AAAA,QAAI,UACzC,KAAK,QAAQ,OAAO,KAAK;AAAA;AAG3B,YAAM,SAAS,IAAI,OAAO,IAAI,mBAAmB,KAAK,GAAG,CAAC,KAAK,GAAG;AAClE,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAO,EAAE,SAAS,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAO,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU,SAAU,QAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS,SAAU,QAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa,UAAW,QAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAO,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAa,eAAe,WAAW;AAC7C,YAAM,SAAS,WAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW,EAAG,QAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;"}

package/dist/vue3/components/illustration/illustration.vue.cjs CHANGED Viewed

@@ -3,7 +3,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vue3 = require("@dialpad/dialtone-icons/vue3");
 const illustration_constants = require("./illustration_constants.cjs");
-const _sfc_main = {
+const _sfc_main = /* @__PURE__ */ Object.assign({
+  name: "DtIllustration"
+}, {
   __name: "illustration",
   props: {
     /**
@@ -25,7 +27,7 @@ const _sfc_main = {
       }, null, 8, ["data-qa"])) : vue.createCommentVNode("", true);
     };
   }
-};
+});
 const _sfc_main$1 = _sfc_main;
 exports.default = _sfc_main$1;
 //# sourceMappingURL=illustration.vue.cjs.map

package/dist/vue3/components/illustration/illustration.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"illustration.vue.cjs","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n <component\n :is=\"illustration\"\n v-if=\"illustration\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\nconst props = defineProps({\n /*\n The illustration name in kebab-case\n */\n name: {\n type: String,\n required: true,\n validator: (name) => ILLUSTRATION_NAMES.includes(name),\n },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["computed","illustrations"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAaA~~,UAAM,QAAQ;AAWd,UAAM,eAAeA,IAAAA,SAAS,MAAMC,KAAAA,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;;;"}
1	+ {"version":3,"file":"illustration.vue.cjs","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n <component\n :is=\"illustration\"\n v-if=\"illustration\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n name: 'DtIllustration',\n});\n\nconst props = defineProps({\n /*\n The illustration name in kebab-case\n */\n name: {\n type: String,\n required: true,\n validator: (name) => ILLUSTRATION_NAMES.includes(name),\n },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["computed","illustrations"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQ;AAWd,UAAM,eAAeA,IAAAA,SAAS,MAAMC,KAAAA,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;;;"}

package/dist/vue3/components/illustration/illustration.vue.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import { computed, openBlock, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
 import { illustrations } from "@dialpad/dialtone-icons/vue3";
 import { ILLUSTRATION_NAMES } from "./illustration_constants.js";
-const _sfc_main = {
+const _sfc_main = /* @__PURE__ */ Object.assign({
+  name: "DtIllustration"
+}, {
   __name: "illustration",
   props: {
     /**
@@ -23,7 +25,7 @@ const _sfc_main = {
       }, null, 8, ["data-qa"])) : createCommentVNode("", true);
     };
   }
-};
+});
 const _sfc_main$1 = _sfc_main;
 export {
   _sfc_main$1 as default

package/dist/vue3/components/illustration/illustration.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"illustration.vue.js","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n <component\n :is=\"illustration\"\n v-if=\"illustration\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\nconst props = defineProps({\n /*\n The illustration name in kebab-case\n */\n name: {\n type: String,\n required: true,\n validator: (name) => ILLUSTRATION_NAMES.includes(name),\n },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;AAaA~~,UAAM,QAAQ;AAWd,UAAM,eAAe,SAAS,MAAM,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;;"}
1	+ {"version":3,"file":"illustration.vue.js","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n <component\n :is=\"illustration\"\n v-if=\"illustration\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n name: 'DtIllustration',\n});\n\nconst props = defineProps({\n /*\n The illustration name in kebab-case\n */\n name: {\n type: String,\n required: true,\n validator: (name) => ILLUSTRATION_NAMES.includes(name),\n },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQ;AAWd,UAAM,eAAe,SAAS,MAAM,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;;"}

package/dist/vue3/components/item_layout/item_layout.vue.cjs CHANGED Viewed

@@ -68,7 +68,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $options.hasSlotContent(_ctx.$slots.subtitle) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
-          class: vue.normalizeClass(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }])
+          class: vue.normalizeClass([
+            "dt-item-layout--subtitle",
+            { "dt-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
+          ])
         }, [
           vue.renderSlot(_ctx.$slots, "subtitle")
         ], 2)) : vue.createCommentVNode("", true),

package/dist/vue3/components/item_layout/item_layout.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"dt-item-layout--left\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n class=\"dt-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"dt-item-layout--title\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) }]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n class=\"dt-item-layout--bottom\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n class=\"dt-item-layout--right\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n class=\"dt-item-layout--selected\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/*\n Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n /\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n name: 'DtItemLayout',\n props: {\n /\n Set this prop to render layout as a specific HTML element.\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n },\n\n methods: { hasSlotContent },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;;;~~AAqEA~~,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAEA,gBAAAA,aAAAA,eAAgB;AAC7B;;~~EA3FA~~,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,~~EAmCQ~~,WAAQ;AAAA,EACR,OAAM;;;~~EApCd~~,KAAA;AAAA,~~EA4CM~~,WAAQ;AAAA,EACR,OAAM;;;~~EA7CZ~~,KAAA;AAAA,~~EAoDM~~,WAAQ;AAAA,EACR,OAAM;;;~~0BApDVC~~,~~IAyDY~~,~~YA1DdC~~,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAGY,OAAQ,WAAA,2BAAA,gBAAA;AAAA;IAHpB,SAAAC,IAAA,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAaIC,IAAA,~~mBA4BU~~,~~WA5BV~~,~~YA4BU~~;AAAA,~~QAvBA~~,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,IAAA,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,sBADtCF,~~IAOM~~,mBAAA,OAAA;AAAA,~~UAhCZ~~,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,~~IA4BuF~~,eAAA,~~CAAA~~,~~4BAAA~~,~~EAAA~~,~~wCAAA~~,~~SAAA,eAAe,KAAA,~~OAAO,~~OAAO,~~EAAA~~,CAAA,CAAA~~;AAAA~~;UAG5GI~~,eAAwB,KAAA,QAAA,UAAA;AAAA,~~iBA/BhCC~~,IAAA,mBAAA,IAAA,IAAA;AAAA,~~QAkCc~~,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAsB,KAAA,QAAA,QAAA;AAAA,~~cAvC9BC~~,IAAA,mBAAA,IAAA,IAAA;AAAA;~~MA2CY~~,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAqB,KAAA,QAAA,OAAA;AAAA,~~YAhD3BC~~,IAAA,mBAAA,IAAA,IAAA;AAAA,~~MAmDY~~,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAwB,KAAA,QAAA,UAAA;AAAA,~~YAxD9BC~~,IAAA,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;;"}
1	+ {"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"dt-item-layout--left\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n class=\"dt-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"dt-item-layout--title\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n 'dt-item-layout--subtitle',\n { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n class=\"dt-item-layout--bottom\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n class=\"dt-item-layout--right\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n class=\"dt-item-layout--selected\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/*\n Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n /\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n name: 'DtItemLayout',\n props: {\n /\n Set this prop to render layout as a specific HTML element.\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n },\n\n methods: { hasSlotContent },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;;;AAwEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAEA,gBAAAA,aAAAA,eAAgB;AAC7B;;EA9FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;0BAvDVC,IA4DY,YA7DdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAGY,OAAQ,WAAA,2BAAA,gBAAA;AAAA;IAHpB,SAAAC,IAAA,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAaIC,IAAA,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,IAAA,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,sBADtCF,IAUM,mBAAA,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,IAAAA,eAAA;AAAA;sDA4B4G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAMjII,eAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,IAAA,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;;"}

package/dist/vue3/components/item_layout/item_layout.vue.js CHANGED Viewed

@@ -66,7 +66,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $options.hasSlotContent(_ctx.$slots.subtitle) ? (openBlock(), createElementBlock("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
-          class: normalizeClass(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }])
+          class: normalizeClass([
+            "dt-item-layout--subtitle",
+            { "dt-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
+          ])
         }, [
           renderSlot(_ctx.$slots, "subtitle")
         ], 2)) : createCommentVNode("", true),

package/dist/vue3/components/item_layout/item_layout.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"dt-item-layout--left\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n class=\"dt-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"dt-item-layout--title\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) }]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n class=\"dt-item-layout--bottom\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n class=\"dt-item-layout--right\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n class=\"dt-item-layout--selected\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/*\n Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n /\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n name: 'DtItemLayout',\n props: {\n /\n Set this prop to render layout as a specific HTML element.\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n },\n\n methods: { hasSlotContent },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;~~AAqEA~~,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAE,eAAgB;AAC7B;;~~EA3FA~~,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,~~EAmCQ~~,WAAQ;AAAA,EACR,OAAM;;;~~EApCd~~,KAAA;AAAA,~~EA4CM~~,WAAQ;AAAA,EACR,OAAM;;;~~EA7CZ~~,KAAA;AAAA,~~EAoDM~~,WAAQ;AAAA,EACR,OAAM;;;~~sBApDVA~~,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAGY,OAAQ,WAAA,2BAAA,gBAAA;AAAA;IAHpB,SAAAC,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,mBAAA,IAAA,IAAA;AAAA,MAaIC,~~mBA4BU~~,~~WA5BV~~,~~YA4BU~~;AAAA,~~QAvBA~~,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,kBADtCF,~~mBAOM~~,OAAA;AAAA,~~UAhCZ~~,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,~~eA4BuF~~,~~CAAA~~,~~4BAAA~~,~~EAAA~~,~~wCAAA~~,~~SAAA,eAAe,KAAA,~~OAAO,~~OAAO,~~EAAA~~,CAAA,CAAA~~;AAAA~~;UAG5GI~~,WAAwB,KAAA,QAAA,UAAA;AAAA,~~iBA/BhCC~~,mBAAA,IAAA,IAAA;AAAA,~~QAkCc~~,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAsB,KAAA,QAAA,QAAA;AAAA,~~cAvC9BC~~,mBAAA,IAAA,IAAA;AAAA;~~MA2CY~~,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAqB,KAAA,QAAA,OAAA;AAAA,~~YAhD3BC~~,mBAAA,IAAA,IAAA;AAAA,~~MAmDY~~,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAwB,KAAA,QAAA,UAAA;AAAA,~~YAxD9BC~~,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}
1	+ {"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"dt-item-layout--left\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n class=\"dt-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"dt-item-layout--title\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n 'dt-item-layout--subtitle',\n { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n class=\"dt-item-layout--bottom\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n class=\"dt-item-layout--right\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n class=\"dt-item-layout--selected\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/*\n Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n /\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n name: 'DtItemLayout',\n props: {\n /\n Set this prop to render layout as a specific HTML element.\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n },\n\n methods: { hasSlotContent },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;AAwEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAE,eAAgB;AAC7B;;EA9FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;sBAvDVA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAGY,OAAQ,WAAA,2BAAA,gBAAA;AAAA;IAHpB,SAAAC,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,mBAAA,IAAA,IAAA;AAAA,MAaIC,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,kBADtCF,mBAUM,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,eAAA;AAAA;sDA4B4G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAMjII,WAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n ~~:is=\"icons[item]\"\n~~ size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAASA,KAAgB;AAAA,EACzB,iBAAiBC,KAAgB;AAAA,EACjC,gBAAgBC,KAAe;AAAA,EAC/B,cAAcC,KAAa;AAAA,EAC3B,gBAAgBC,KAAe;AAAA,EAC/B,SAASC,KAAa;AACxB;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAL,KAAgB;AAAA,IAChB,kBAAAC,KAAgB;AAAA,IAChB,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,gBACbC,KAAU;AAAA,EACX;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAUA,KAAU;AAAA;IAEvB;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAhJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;0BAEEC,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAHLC,IAAAA,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,IAAA,mBAAA,IAAA,IAAA;AAAA,KAcIC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAwBWK,oBAtCfC,IAe0B,WAAA,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,cAAA,GAAAJ,uBAAAK,IAAAA,UAAA,MAAA;AAAA,~~QAkBc~~,SAAA,MAAM,IAAI,~~KADlBD~~,IAAA,UAAA,GAAAG,IAAAA,YAUEC,IA3BR,~~wBAoBa~~,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,~~UADd~~,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,~~UAElB~~,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,IAAAA,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;oDAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,IAAAA,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;;"}
1	+ {"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAASA,KAAgB;AAAA,EACzB,iBAAiBC,KAAgB;AAAA,EACjC,gBAAgBC,KAAe;AAAA,EAC/B,cAAcC,KAAa;AAAA,EAC3B,gBAAgBC,KAAe;AAAA,EAC/B,SAASC,KAAa;AACxB;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAL,KAAgB;AAAA,IAChB,kBAAAC,KAAgB;AAAA,IAChB,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,gBACbC,KAAU;AAAA,EACX;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAUA,KAAU;AAAA;IAEvB;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAhJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;0BAEEC,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAHLC,IAAAA,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,IAAA,mBAAA,IAAA,IAAA;AAAA,KAcIC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAwBWK,oBAtCfC,IAe0B,WAAA,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,cAAA,GAAAJ,uBAAAK,IAAAA,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,IAAA,UAAA,GAAAG,IAAAA,YAUEC,IA3BR,wBAkBa,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,IAAAA,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;oDAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,IAAAA,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;;"}

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n ~~:is=\"icons[item]\"\n~~ size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAhJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;sBAEEA,mBAqCM,OAAA;AAAA,IApCH,OAHLC,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,mBAAA,IAAA,IAAA;AAAA,KAcIC,UAAA,IAAA,GAAAJ,mBAwBWK,gBAtCfC,WAe0B,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,UAAA,GAAAJ,mBAAAK,UAAA,MAAA;AAAA,~~QAkBc~~,SAAA,MAAM,IAAI,~~KADlBD~~,UAAA,GAAAG,YAUEC,~~wBAPK~~,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,~~UADd~~,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,~~UAElB~~,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;"}
1	+ {"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAhJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;sBAEEA,mBAqCM,OAAA;AAAA,IApCH,OAHLC,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,mBAAA,IAAA,IAAA;AAAA,KAcIC,UAAA,IAAA,GAAAJ,mBAwBWK,gBAtCfC,WAe0B,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,UAAA,GAAAJ,mBAAAK,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,UAAA,GAAAG,YAUEC,wBATK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;"}

package/dist/vue3/dialtone-vue.cjs CHANGED Viewed

@@ -178,6 +178,7 @@ exports.emojiRegex = common_emoji.emojiRegex;
 exports.emojiShortCodeRegex = common_emoji.emojiShortCodeRegex;
 exports.emojiVersion = common_emoji.emojiVersion;
 exports.filterValidShortCodes = common_emoji.filterValidShortCodes;
+exports.findEmojis = common_emoji.findEmojis;
 exports.findShortCodes = common_emoji.findShortCodes;
 exports.getEmojiData = common_emoji.getEmojiData;
 exports.setCustomEmojiJson = common_emoji.setCustomEmojiJson;

package/dist/vue3/dialtone-vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/dialtone-vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { DEFAULT_VALIDATION_MESSAGE_TYPE, DESCRIPTION_SIZE_TYPES, VALIDATION_MES
 import { validationMessageValidator } from "./common/validators.js";
 import { disableRootScrolling, enableRootScrolling, filterFormattedMessages, formatMessages, getUniqueString, getValidationState } from "./common/utils.js";
 import { durationInHHMM, getDateMedium, relativeDate, setDateLocale } from "./common/dates.js";
-import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
+import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
 import { CheckableMixin, GroupableMixin, InputMixin } from "./common/mixins/input.js";
 import { InputGroupMixin } from "./common/mixins/input_group.js";
 import { default as default2 } from "./common/mixins/keyboard_list_navigation.js";
@@ -361,6 +361,7 @@ export {
   enableRootScrolling,
   filterFormattedMessages,
   filterValidShortCodes,
+  findEmojis,
   findShortCodes,
   formatLong,
   formatMedium,