npm - @dialpad/dialtone-vue - Versions diffs - 2.159.0-beta.2 → 2.159.0 - Mend

@dialpad/dialtone-vue 2.159.0-beta.2 → 2.159.0

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

Files changed (220) hide show

package/dist/recipes/leftbar/general_row/general_row.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"general_row.vue.cjs","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"leftbarGeneralRowClasses\"\n data-qa=\"dt-leftbar-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div\n class=\"dt-leftbar-row__alpha\"\n >\n <div\n v-if=\"isTyping\"\n class=\"dt-leftbar-row__is-typing\"\n >\n <span /><span /><span />\n </div>\n <slot\n v-else\n name=\"left\"\n >\n <dt-recipe-leftbar-general-row-icon\n :type=\"getIcon\"\n :color=\"color\"\n :icon-size=\"iconSize\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </slot>\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <slot name=\"label\">\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </slot>\n </div>\n </a>\n <div\n v-if=\"hasActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <dt-tooltip\n v-if=\"dndText\"\n placement=\"top\"\n :message=\"dndTextTooltip\"\n >\n <template #anchor>\n <div\n ref=\"dt-leftbar-row-dnd\"\n class=\"dt-leftbar-row__dnd\"\n data-qa=\"dt-leftbar-row-dnd\"\n >\n {{ dndText }}\n </div>\n </template>\n </dt-tooltip>\n <div\n v-if=\"activeVoiceChat\"\n class=\"dt-leftbar-row__active-voice\"\n >\n <dt-icon-waveform\n size=\"300\"\n />\n </div>\n <dt-tooltip\n v-else-if=\"showUnreadCount \|\| showUnreadMentionCount\"\n :message=\"unreadCountTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-badge\n v-if=\"showUnreadCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n :class=\"['dt-leftbar-row__unread-badge', {\n 'dt-leftbar-row__unread-count-badge':\n shouldApplyCustomStyleForCountBadge,\n }]\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-badge\n v-if=\"showUnreadMentionCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-mention-badge\"\n :class=\"['dt-leftbar-row__unread-badge',\n { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n ]\"\n >\n {{ unreadMentionCount }}\n </dt-badge>\n </template>\n </dt-tooltip>\n <div\n v-if=\"hasCallButton\"\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action\"\n >\n <dt-tooltip\n :message=\"callButtonTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n class=\"dt-leftbar-row__action-button\"\n data-qa=\"dt-leftbar-row-action-call-button\"\n :circle=\"true\"\n size=\"xs\"\n kind=\"inverted\"\n :aria-label=\"callButtonTooltip\"\n @focus=\"actionFocused = true\"\n @blur=\"actionFocused = false\"\n @click.stop=\"$emit('call', $event)\"\n >\n <template #icon>\n <dt-icon-phone\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIconPhone, DtIconWaveform } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGeneralRow',\n\n components: {\n DtEmojiTextWrapper,\n DtBadge,\n DtButton,\n DtTooltip,\n DtIconPhone,\n DtIconWaveform,\n DtRecipeLeftbarGeneralRowIcon,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n Determines the icon to show.\n * If type is contact center, the color prop must be provided and will determine the color of the icon\n /\n type: {\n type: String,\n default: 'inbox',\n validator: (type) => {\n return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n },\n },\n\n /\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n * you still must input this as it will be displayed as the \"title\" attribute for the row.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines the color of the contact center icon\n /\n color: {\n type: String,\n default: null,\n validator: (color) => {\n return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n },\n },\n\n /\n The channel setting, either 'mention' or 'always'.\n * @values 'mention', 'always', null.\n /\n channelSetting: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Number of unread mention messages\n /\n unreadMentionCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows styling to represent an active voice chat. This will display over unreadCount.\n /\n activeVoiceChat: {\n type: Boolean,\n default: false,\n },\n\n /\n Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n * unreadCount.\n /\n dndText: {\n type: String,\n default: '',\n },\n\n /\n Text shown in tooltip when you hover the dndText\n /\n dndTextTooltip: {\n type: String,\n default: '',\n },\n\n /\n Whether the row should have a call button. Usually only applicable to individual contact rows.\n /\n hasCallButton: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Sets the size of the icon.\n /\n iconSize: {\n type: String,\n default: '300',\n validator: (size) => {\n return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n },\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'call',\n ],\n\n data () {\n return {\n actionFocused: false,\n labelWidth: '100%',\n };\n },\n\n computed: {\n leftbarGeneralRowClasses () {\n return [\n 'dt-leftbar-row',\n {\n 'dt-leftbar-row--no-action': !this.hasCallButton,\n 'dt-leftbar-row--has-unread': this.hasUnreads,\n 'dt-leftbar-row--unread-count': this.showUnreadCount \|\| this.showUnreadMentionCount,\n 'dt-leftbar-row--selected': this.selected,\n 'dt-leftbar-row--muted': this.muted,\n 'dt-leftbar-row--action-focused': this.actionFocused,\n },\n ];\n },\n\n getIcon () {\n switch (this.type) {\n case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n if (this.hasUnreads) return 'channel unread';\n break;\n case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n if (this.hasUnreads) return 'locked channel unread';\n break;\n }\n return this.type;\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n },\n\n hasActions () {\n return this.dndText \|\| this.activeVoiceChat \|\| this.showUnreadCount \|\| this.hasCallButton \|\|\n this.showUnreadMentionCount;\n },\n\n showUnreadCount () {\n return !!this.unreadCount && this.hasUnreads;\n },\n\n showUnreadMentionCount () {\n return !!this.unreadMentionCount && this.hasUnreads;\n },\n\n hasUnreadCount () {\n return this.unreadCount !== null;\n },\n\n hasUnreadMentionCount () {\n return this.unreadMentionCount !== null;\n },\n\n shouldApplyCustomStyleForCountBadge () {\n return this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n\n /\n When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background\|\|foreground]-strong).\n * @returns {boolean}\n */\n shouldApplyCustomStyleForMentionOnly () {\n return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n async handler () {\n this.validateProps();\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeDestroy: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n validateProps () {\n if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n }\n },\n\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 16;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtIconPhone","DtIconWaveform","DtRecipeLeftbarGeneralRowIcon","LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_ICON_SIZES","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR"],"mappings":"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"}
1	+ {"version":3,"file":"general_row.vue.cjs","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"leftbarGeneralRowClasses\"\n data-qa=\"dt-leftbar-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div\n class=\"dt-leftbar-row__alpha\"\n >\n <div\n v-if=\"isTyping\"\n class=\"dt-leftbar-row__is-typing\"\n >\n <span /><span /><span />\n </div>\n <slot\n v-else\n name=\"left\"\n >\n <dt-recipe-leftbar-general-row-icon\n :type=\"getIcon\"\n :color=\"color\"\n :icon-size=\"iconSize\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </slot>\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <slot name=\"label\">\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </slot>\n </div>\n </a>\n <div\n v-if=\"hasActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <dt-tooltip\n v-if=\"dndText\"\n placement=\"top\"\n :message=\"dndTextTooltip\"\n >\n <template #anchor>\n <div\n ref=\"dt-leftbar-row-dnd\"\n class=\"dt-leftbar-row__dnd\"\n data-qa=\"dt-leftbar-row-dnd\"\n >\n {{ dndText }}\n </div>\n </template>\n </dt-tooltip>\n <div\n v-if=\"activeVoiceChat\"\n class=\"dt-leftbar-row__active-voice\"\n >\n <dt-icon\n size=\"300\"\n name=\"waveform\"\n />\n </div>\n <dt-tooltip\n v-else-if=\"showUnreadCount \|\| showUnreadMentionCount\"\n :message=\"unreadCountTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-badge\n v-if=\"showUnreadCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n :class=\"['dt-leftbar-row__unread-badge', {\n 'dt-leftbar-row__unread-count-badge':\n shouldApplyCustomStyleForCountBadge,\n }]\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-badge\n v-if=\"showUnreadMentionCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-mention-badge\"\n :class=\"['dt-leftbar-row__unread-badge',\n { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n ]\"\n >\n {{ unreadMentionCount }}\n </dt-badge>\n </template>\n </dt-tooltip>\n <div\n v-if=\"hasCallButton\"\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action\"\n >\n <dt-tooltip\n :message=\"callButtonTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n class=\"dt-leftbar-row__action-button\"\n data-qa=\"dt-leftbar-row-action-call-button\"\n :circle=\"true\"\n size=\"xs\"\n kind=\"inverted\"\n :aria-label=\"callButtonTooltip\"\n @focus=\"actionFocused = true\"\n @blur=\"actionFocused = false\"\n @click.stop=\"$emit('call', $event)\"\n >\n <template #icon>\n <dt-icon\n name=\"phone\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGeneralRow',\n\n components: {\n DtEmojiTextWrapper,\n DtBadge,\n DtIcon,\n DtButton,\n DtTooltip,\n DtRecipeLeftbarGeneralRowIcon,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n Determines the icon to show.\n * If type is contact center, the color prop must be provided and will determine the color of the icon\n /\n type: {\n type: String,\n default: 'inbox',\n validator: (type) => {\n return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n },\n },\n\n /\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n * you still must input this as it will be displayed as the \"title\" attribute for the row.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines the color of the contact center icon\n /\n color: {\n type: String,\n default: null,\n validator: (color) => {\n return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n },\n },\n\n /\n The channel setting, either 'mention' or 'always'.\n * @values 'mention', 'always', null.\n /\n channelSetting: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Number of unread mention messages\n /\n unreadMentionCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows styling to represent an active voice chat. This will display over unreadCount.\n /\n activeVoiceChat: {\n type: Boolean,\n default: false,\n },\n\n /\n Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n * unreadCount.\n /\n dndText: {\n type: String,\n default: '',\n },\n\n /\n Text shown in tooltip when you hover the dndText\n /\n dndTextTooltip: {\n type: String,\n default: '',\n },\n\n /\n Whether the row should have a call button. Usually only applicable to individual contact rows.\n /\n hasCallButton: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Sets the size of the icon.\n /\n iconSize: {\n type: String,\n default: '300',\n validator: (size) => {\n return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n },\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'call',\n ],\n\n data () {\n return {\n actionFocused: false,\n labelWidth: '100%',\n };\n },\n\n computed: {\n leftbarGeneralRowClasses () {\n return [\n 'dt-leftbar-row',\n {\n 'dt-leftbar-row--no-action': !this.hasCallButton,\n 'dt-leftbar-row--has-unread': this.hasUnreads,\n 'dt-leftbar-row--unread-count': this.showUnreadCount \|\| this.showUnreadMentionCount,\n 'dt-leftbar-row--selected': this.selected,\n 'dt-leftbar-row--muted': this.muted,\n 'dt-leftbar-row--action-focused': this.actionFocused,\n },\n ];\n },\n\n getIcon () {\n switch (this.type) {\n case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n if (this.hasUnreads) return 'channel unread';\n break;\n case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n if (this.hasUnreads) return 'locked channel unread';\n break;\n }\n return this.type;\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n },\n\n hasActions () {\n return this.dndText \|\| this.activeVoiceChat \|\| this.showUnreadCount \|\| this.hasCallButton \|\|\n this.showUnreadMentionCount;\n },\n\n showUnreadCount () {\n return !!this.unreadCount && this.hasUnreads;\n },\n\n showUnreadMentionCount () {\n return !!this.unreadMentionCount && this.hasUnreads;\n },\n\n hasUnreadCount () {\n return this.unreadCount !== null;\n },\n\n hasUnreadMentionCount () {\n return this.unreadMentionCount !== null;\n },\n\n shouldApplyCustomStyleForCountBadge () {\n return this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n\n /\n When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background\|\|foreground]-strong).\n * @returns {boolean}\n */\n shouldApplyCustomStyleForMentionOnly () {\n return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n async handler () {\n this.validateProps();\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeDestroy: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n validateProps () {\n if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n }\n },\n\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 16;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","DtBadge","DtIcon","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_ICON_SIZES","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR"],"mappings":"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"}

package/dist/recipes/leftbar/general_row/general_row.vue.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { LEFTBAR_GENERAL_ROW_TYPES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR } from "./general_row_constants.js";
-import { DtIconPhone, DtIconWaveform } from "@dialpad/dialtone-icons/vue2";
 import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
 import DtRecipeLeftbarGeneralRowIcon from "./leftbar_general_row_icon.vue.js";
 import { safeConcatStrings } from "../../../common/utils.js";
 /* empty css                 */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtBadge from "../../../components/badge/badge.vue.js";
+import DtIcon from "../../../components/icon/icon.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
 import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
 const _sfc_main = {
@@ -13,10 +13,9 @@ const _sfc_main = {
   components: {
     DtEmojiTextWrapper,
     DtBadge,
+    DtIcon,
     DtButton,
     DtTooltip,
-    DtIconPhone,
-    DtIconWaveform,
     DtRecipeLeftbarGeneralRowIcon
   },
   inheritAttrs: false,
@@ -282,7 +281,7 @@ var _sfc_render = function render() {
     return [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])];
   })], 2)]), _vm.hasActions ? _c("div", { staticClass: "dt-leftbar-row__omega" }, [_vm.dndText ? _c("dt-tooltip", { attrs: { "placement": "top", "message": _vm.dndTextTooltip }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("div", { ref: "dt-leftbar-row-dnd", staticClass: "dt-leftbar-row__dnd", attrs: { "data-qa": "dt-leftbar-row-dnd" } }, [_vm._v(" " + _vm._s(_vm.dndText) + " ")])];
-  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon-waveform", { attrs: { "size": "300" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon", { attrs: { "size": "300", "name": "waveform" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_vm.showUnreadCount ? _c("dt-badge", { class: ["dt-leftbar-row__unread-badge", {
       "dt-leftbar-row__unread-count-badge": _vm.shouldApplyCustomStyleForCountBadge
     }], attrs: { "kind": "count", "type": "bulletin", "data-qa": "dt-leftbar-row-unread-badge" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _vm.showUnreadMentionCount ? _c("dt-badge", { class: [
@@ -299,9 +298,9 @@ var _sfc_render = function render() {
       $event.stopPropagation();
       return _vm.$emit("call", $event);
     } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-phone", { attrs: { "size": "200" } })];
-    }, proxy: true }], null, false, 2193255039) })];
-  }, proxy: true }], null, false, 502128978) })], 1) : _vm._e()], 1) : _vm._e()]);
+      return [_c("dt-icon", { attrs: { "name": "phone", "size": "200" } })];
+    }, proxy: true }], null, false, 990728611) })];
+  }, proxy: true }], null, false, 4239858356) })], 1) : _vm._e()], 1) : _vm._e()]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -310,7 +309,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "5a114d36"
+  "f626c1e7"
 );
 const DtRecipeGeneralRow = __component__.exports;
 export {

package/dist/recipes/leftbar/general_row/general_row.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"general_row.vue.js","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"leftbarGeneralRowClasses\"\n data-qa=\"dt-leftbar-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div\n class=\"dt-leftbar-row__alpha\"\n >\n <div\n v-if=\"isTyping\"\n class=\"dt-leftbar-row__is-typing\"\n >\n <span /><span /><span />\n </div>\n <slot\n v-else\n name=\"left\"\n >\n <dt-recipe-leftbar-general-row-icon\n :type=\"getIcon\"\n :color=\"color\"\n :icon-size=\"iconSize\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </slot>\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <slot name=\"label\">\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </slot>\n </div>\n </a>\n <div\n v-if=\"hasActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <dt-tooltip\n v-if=\"dndText\"\n placement=\"top\"\n :message=\"dndTextTooltip\"\n >\n <template #anchor>\n <div\n ref=\"dt-leftbar-row-dnd\"\n class=\"dt-leftbar-row__dnd\"\n data-qa=\"dt-leftbar-row-dnd\"\n >\n {{ dndText }}\n </div>\n </template>\n </dt-tooltip>\n <div\n v-if=\"activeVoiceChat\"\n class=\"dt-leftbar-row__active-voice\"\n >\n <dt-icon-waveform\n size=\"300\"\n />\n </div>\n <dt-tooltip\n v-else-if=\"showUnreadCount \|\| showUnreadMentionCount\"\n :message=\"unreadCountTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-badge\n v-if=\"showUnreadCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n :class=\"['dt-leftbar-row__unread-badge', {\n 'dt-leftbar-row__unread-count-badge':\n shouldApplyCustomStyleForCountBadge,\n }]\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-badge\n v-if=\"showUnreadMentionCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-mention-badge\"\n :class=\"['dt-leftbar-row__unread-badge',\n { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n ]\"\n >\n {{ unreadMentionCount }}\n </dt-badge>\n </template>\n </dt-tooltip>\n <div\n v-if=\"hasCallButton\"\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action\"\n >\n <dt-tooltip\n :message=\"callButtonTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n class=\"dt-leftbar-row__action-button\"\n data-qa=\"dt-leftbar-row-action-call-button\"\n :circle=\"true\"\n size=\"xs\"\n kind=\"inverted\"\n :aria-label=\"callButtonTooltip\"\n @focus=\"actionFocused = true\"\n @blur=\"actionFocused = false\"\n @click.stop=\"$emit('call', $event)\"\n >\n <template #icon>\n <dt-icon-phone\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIconPhone, DtIconWaveform } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGeneralRow',\n\n components: {\n DtEmojiTextWrapper,\n DtBadge,\n DtButton,\n DtTooltip,\n DtIconPhone,\n DtIconWaveform,\n DtRecipeLeftbarGeneralRowIcon,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n Determines the icon to show.\n * If type is contact center, the color prop must be provided and will determine the color of the icon\n /\n type: {\n type: String,\n default: 'inbox',\n validator: (type) => {\n return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n },\n },\n\n /\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n * you still must input this as it will be displayed as the \"title\" attribute for the row.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines the color of the contact center icon\n /\n color: {\n type: String,\n default: null,\n validator: (color) => {\n return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n },\n },\n\n /\n The channel setting, either 'mention' or 'always'.\n * @values 'mention', 'always', null.\n /\n channelSetting: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Number of unread mention messages\n /\n unreadMentionCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows styling to represent an active voice chat. This will display over unreadCount.\n /\n activeVoiceChat: {\n type: Boolean,\n default: false,\n },\n\n /\n Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n * unreadCount.\n /\n dndText: {\n type: String,\n default: '',\n },\n\n /\n Text shown in tooltip when you hover the dndText\n /\n dndTextTooltip: {\n type: String,\n default: '',\n },\n\n /\n Whether the row should have a call button. Usually only applicable to individual contact rows.\n /\n hasCallButton: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Sets the size of the icon.\n /\n iconSize: {\n type: String,\n default: '300',\n validator: (size) => {\n return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n },\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'call',\n ],\n\n data () {\n return {\n actionFocused: false,\n labelWidth: '100%',\n };\n },\n\n computed: {\n leftbarGeneralRowClasses () {\n return [\n 'dt-leftbar-row',\n {\n 'dt-leftbar-row--no-action': !this.hasCallButton,\n 'dt-leftbar-row--has-unread': this.hasUnreads,\n 'dt-leftbar-row--unread-count': this.showUnreadCount \|\| this.showUnreadMentionCount,\n 'dt-leftbar-row--selected': this.selected,\n 'dt-leftbar-row--muted': this.muted,\n 'dt-leftbar-row--action-focused': this.actionFocused,\n },\n ];\n },\n\n getIcon () {\n switch (this.type) {\n case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n if (this.hasUnreads) return 'channel unread';\n break;\n case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n if (this.hasUnreads) return 'locked channel unread';\n break;\n }\n return this.type;\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n },\n\n hasActions () {\n return this.dndText \|\| this.activeVoiceChat \|\| this.showUnreadCount \|\| this.hasCallButton \|\|\n this.showUnreadMentionCount;\n },\n\n showUnreadCount () {\n return !!this.unreadCount && this.hasUnreads;\n },\n\n showUnreadMentionCount () {\n return !!this.unreadMentionCount && this.hasUnreads;\n },\n\n hasUnreadCount () {\n return this.unreadCount !== null;\n },\n\n hasUnreadMentionCount () {\n return this.unreadMentionCount !== null;\n },\n\n shouldApplyCustomStyleForCountBadge () {\n return this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n\n /\n When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background\|\|foreground]-strong).\n * @returns {boolean}\n */\n shouldApplyCustomStyleForMentionOnly () {\n return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n async handler () {\n this.validateProps();\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeDestroy: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n validateProps () {\n if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n }\n },\n\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 16;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"general_row.vue.js","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"leftbarGeneralRowClasses\"\n data-qa=\"dt-leftbar-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div\n class=\"dt-leftbar-row__alpha\"\n >\n <div\n v-if=\"isTyping\"\n class=\"dt-leftbar-row__is-typing\"\n >\n <span /><span /><span />\n </div>\n <slot\n v-else\n name=\"left\"\n >\n <dt-recipe-leftbar-general-row-icon\n :type=\"getIcon\"\n :color=\"color\"\n :icon-size=\"iconSize\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </slot>\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <slot name=\"label\">\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </slot>\n </div>\n </a>\n <div\n v-if=\"hasActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <dt-tooltip\n v-if=\"dndText\"\n placement=\"top\"\n :message=\"dndTextTooltip\"\n >\n <template #anchor>\n <div\n ref=\"dt-leftbar-row-dnd\"\n class=\"dt-leftbar-row__dnd\"\n data-qa=\"dt-leftbar-row-dnd\"\n >\n {{ dndText }}\n </div>\n </template>\n </dt-tooltip>\n <div\n v-if=\"activeVoiceChat\"\n class=\"dt-leftbar-row__active-voice\"\n >\n <dt-icon\n size=\"300\"\n name=\"waveform\"\n />\n </div>\n <dt-tooltip\n v-else-if=\"showUnreadCount \|\| showUnreadMentionCount\"\n :message=\"unreadCountTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-badge\n v-if=\"showUnreadCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n :class=\"['dt-leftbar-row__unread-badge', {\n 'dt-leftbar-row__unread-count-badge':\n shouldApplyCustomStyleForCountBadge,\n }]\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-badge\n v-if=\"showUnreadMentionCount\"\n kind=\"count\"\n type=\"bulletin\"\n data-qa=\"dt-leftbar-row-unread-mention-badge\"\n :class=\"['dt-leftbar-row__unread-badge',\n { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n ]\"\n >\n {{ unreadMentionCount }}\n </dt-badge>\n </template>\n </dt-tooltip>\n <div\n v-if=\"hasCallButton\"\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action\"\n >\n <dt-tooltip\n :message=\"callButtonTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n class=\"dt-leftbar-row__action-button\"\n data-qa=\"dt-leftbar-row-action-call-button\"\n :circle=\"true\"\n size=\"xs\"\n kind=\"inverted\"\n :aria-label=\"callButtonTooltip\"\n @focus=\"actionFocused = true\"\n @blur=\"actionFocused = false\"\n @click.stop=\"$emit('call', $event)\"\n >\n <template #icon>\n <dt-icon\n name=\"phone\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGeneralRow',\n\n components: {\n DtEmojiTextWrapper,\n DtBadge,\n DtIcon,\n DtButton,\n DtTooltip,\n DtRecipeLeftbarGeneralRowIcon,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n Determines the icon to show.\n * If type is contact center, the color prop must be provided and will determine the color of the icon\n /\n type: {\n type: String,\n default: 'inbox',\n validator: (type) => {\n return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n },\n },\n\n /\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n * you still must input this as it will be displayed as the \"title\" attribute for the row.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines the color of the contact center icon\n /\n color: {\n type: String,\n default: null,\n validator: (color) => {\n return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n },\n },\n\n /\n The channel setting, either 'mention' or 'always'.\n * @values 'mention', 'always', null.\n /\n channelSetting: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Number of unread mention messages\n /\n unreadMentionCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows styling to represent an active voice chat. This will display over unreadCount.\n /\n activeVoiceChat: {\n type: Boolean,\n default: false,\n },\n\n /\n Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n * unreadCount.\n /\n dndText: {\n type: String,\n default: '',\n },\n\n /\n Text shown in tooltip when you hover the dndText\n /\n dndTextTooltip: {\n type: String,\n default: '',\n },\n\n /\n Whether the row should have a call button. Usually only applicable to individual contact rows.\n /\n hasCallButton: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Sets the size of the icon.\n /\n iconSize: {\n type: String,\n default: '300',\n validator: (size) => {\n return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n },\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'call',\n ],\n\n data () {\n return {\n actionFocused: false,\n labelWidth: '100%',\n };\n },\n\n computed: {\n leftbarGeneralRowClasses () {\n return [\n 'dt-leftbar-row',\n {\n 'dt-leftbar-row--no-action': !this.hasCallButton,\n 'dt-leftbar-row--has-unread': this.hasUnreads,\n 'dt-leftbar-row--unread-count': this.showUnreadCount \|\| this.showUnreadMentionCount,\n 'dt-leftbar-row--selected': this.selected,\n 'dt-leftbar-row--muted': this.muted,\n 'dt-leftbar-row--action-focused': this.actionFocused,\n },\n ];\n },\n\n getIcon () {\n switch (this.type) {\n case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n if (this.hasUnreads) return 'channel unread';\n break;\n case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n if (this.hasUnreads) return 'locked channel unread';\n break;\n }\n return this.type;\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n },\n\n hasActions () {\n return this.dndText \|\| this.activeVoiceChat \|\| this.showUnreadCount \|\| this.hasCallButton \|\|\n this.showUnreadMentionCount;\n },\n\n showUnreadCount () {\n return !!this.unreadCount && this.hasUnreads;\n },\n\n showUnreadMentionCount () {\n return !!this.unreadMentionCount && this.hasUnreads;\n },\n\n hasUnreadCount () {\n return this.unreadCount !== null;\n },\n\n hasUnreadMentionCount () {\n return this.unreadMentionCount !== null;\n },\n\n shouldApplyCustomStyleForCountBadge () {\n return this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n\n /\n When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background\|\|foreground]-strong).\n * @returns {boolean}\n */\n shouldApplyCustomStyleForMentionOnly () {\n return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n async handler () {\n this.validateProps();\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeDestroy: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n validateProps () {\n if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n }\n },\n\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 16;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":[],"mappings":"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"}

package/dist/recipes/leftbar/general_row/general_row_constants.cjs CHANGED Viewed

@@ -16,6 +16,22 @@ const LEFTBAR_GENERAL_ROW_TYPES = {
   DIGITAL: "digital",
   SCHEDULED: "scheduled"
 };
+const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: "inbox",
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: "contacts",
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: "hash",
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: "thread",
+  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: "layout-template",
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: "lock",
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: "sparkle",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: "users",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: "external-link",
+  "locked channel unread": "lock-filled",
+  "channel unread": "hash-bold",
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: "at-sign",
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: "laptop-2",
+  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: "calendar-clock"
+};
 const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
   "magenta-200": "d-bgc-magenta-200",
   "green-200": "d-bgc-green-200",
@@ -36,6 +52,7 @@ const LEFTBAR_GENERAL_ROW_ICON_SIZES = [
 ];
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;
+exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING = LEFTBAR_GENERAL_ROW_ICON_MAPPING;
 exports.LEFTBAR_GENERAL_ROW_ICON_SIZES = LEFTBAR_GENERAL_ROW_ICON_SIZES;
 exports.LEFTBAR_GENERAL_ROW_TYPES = LEFTBAR_GENERAL_ROW_TYPES;
 //# sourceMappingURL=general_row_constants.cjs.map

package/dist/recipes/leftbar/general_row/general_row_constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"general_row_constants.cjs","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n INBOX: 'inbox',\n CONTACTS: 'contacts',\n CHANNELS: 'channels',\n THREADS: 'threads',\n LAUNCHPAD: 'launchpad',\n LOCKED_CHANNEL: 'locked channel',\n CONTACT_CENTER: 'contact center',\n QUICK_START: 'quick start',\n COACHING_GROUP: 'coaching group',\n COACHING_CENTER: 'coaching center',\n DIALBOT: 'dialbot',\n ASSIGNED: 'assigned',\n DIGITAL: 'digital',\n SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n 'magenta-200': 'd-bgc-magenta-200',\n 'green-200': 'd-bgc-green-200',\n 'gold-300': 'd-bgc-gold-300',\n 'purple-600': 'd-bgc-purple-600',\n 'magenta-300': 'd-bgc-magenta-300',\n 'purple-300': 'd-bgc-purple-300',\n 'green-500': 'd-bgc-green-500',\n 'purple-100': 'd-bgc-purple-100',\n 'magenta-400': 'd-bgc-magenta-400',\n 'magenta-100': 'd-bgc-magenta-100',\n 'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n 'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n '300',\n '200',\n];\n\nexport default {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF~~;;;;;~~"}
1	+ {"version":3,"file":"general_row_constants.cjs","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n INBOX: 'inbox',\n CONTACTS: 'contacts',\n CHANNELS: 'channels',\n THREADS: 'threads',\n LAUNCHPAD: 'launchpad',\n LOCKED_CHANNEL: 'locked channel',\n CONTACT_CENTER: 'contact center',\n QUICK_START: 'quick start',\n COACHING_GROUP: 'coaching group',\n COACHING_CENTER: 'coaching center',\n DIALBOT: 'dialbot',\n ASSIGNED: 'assigned',\n DIGITAL: 'digital',\n SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n 'locked channel unread': 'lock-filled',\n 'channel unread': 'hash-bold',\n [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: 'calendar-clock',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n 'magenta-200': 'd-bgc-magenta-200',\n 'green-200': 'd-bgc-green-200',\n 'gold-300': 'd-bgc-gold-300',\n 'purple-600': 'd-bgc-purple-600',\n 'magenta-300': 'd-bgc-magenta-300',\n 'purple-300': 'd-bgc-purple-300',\n 'green-500': 'd-bgc-green-500',\n 'purple-100': 'd-bgc-purple-100',\n 'magenta-400': 'd-bgc-magenta-400',\n 'magenta-100': 'd-bgc-magenta-100',\n 'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n 'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n '300',\n '200',\n];\n\nexport default {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,mCAAmC;AAAA,EAC9C,CAAC,0BAA0B,KAAK,GAAG;AAAA,EACnC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AAAA,EACvC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,WAAW,GAAG;AAAA,EACzC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,eAAe,GAAG;AAAA,EAC7C,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AACzC;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;;;;;;"}

package/dist/recipes/leftbar/general_row/general_row_constants.js CHANGED Viewed

@@ -14,6 +14,22 @@ const LEFTBAR_GENERAL_ROW_TYPES = {
   DIGITAL: "digital",
   SCHEDULED: "scheduled"
 };
+const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: "inbox",
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: "contacts",
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: "hash",
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: "thread",
+  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: "layout-template",
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: "lock",
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: "sparkle",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: "users",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: "external-link",
+  "locked channel unread": "lock-filled",
+  "channel unread": "hash-bold",
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: "at-sign",
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: "laptop-2",
+  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: "calendar-clock"
+};
 const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
   "magenta-200": "d-bgc-magenta-200",
   "green-200": "d-bgc-green-200",
@@ -35,6 +51,7 @@ const LEFTBAR_GENERAL_ROW_ICON_SIZES = [
 export {
   LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
   LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
+  LEFTBAR_GENERAL_ROW_ICON_MAPPING,
   LEFTBAR_GENERAL_ROW_ICON_SIZES,
   LEFTBAR_GENERAL_ROW_TYPES
 };

package/dist/recipes/leftbar/general_row/general_row_constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"general_row_constants.js","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n INBOX: 'inbox',\n CONTACTS: 'contacts',\n CHANNELS: 'channels',\n THREADS: 'threads',\n LAUNCHPAD: 'launchpad',\n LOCKED_CHANNEL: 'locked channel',\n CONTACT_CENTER: 'contact center',\n QUICK_START: 'quick start',\n COACHING_GROUP: 'coaching group',\n COACHING_CENTER: 'coaching center',\n DIALBOT: 'dialbot',\n ASSIGNED: 'assigned',\n DIGITAL: 'digital',\n SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n 'magenta-200': 'd-bgc-magenta-200',\n 'green-200': 'd-bgc-green-200',\n 'gold-300': 'd-bgc-gold-300',\n 'purple-600': 'd-bgc-purple-600',\n 'magenta-300': 'd-bgc-magenta-300',\n 'purple-300': 'd-bgc-purple-300',\n 'green-500': 'd-bgc-green-500',\n 'purple-100': 'd-bgc-purple-100',\n 'magenta-400': 'd-bgc-magenta-400',\n 'magenta-100': 'd-bgc-magenta-100',\n 'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n 'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n '300',\n '200',\n];\n\nexport default {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;"}
1	+ {"version":3,"file":"general_row_constants.js","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n INBOX: 'inbox',\n CONTACTS: 'contacts',\n CHANNELS: 'channels',\n THREADS: 'threads',\n LAUNCHPAD: 'launchpad',\n LOCKED_CHANNEL: 'locked channel',\n CONTACT_CENTER: 'contact center',\n QUICK_START: 'quick start',\n COACHING_GROUP: 'coaching group',\n COACHING_CENTER: 'coaching center',\n DIALBOT: 'dialbot',\n ASSIGNED: 'assigned',\n DIGITAL: 'digital',\n SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n 'locked channel unread': 'lock-filled',\n 'channel unread': 'hash-bold',\n [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: 'calendar-clock',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n 'magenta-200': 'd-bgc-magenta-200',\n 'green-200': 'd-bgc-green-200',\n 'gold-300': 'd-bgc-gold-300',\n 'purple-600': 'd-bgc-purple-600',\n 'magenta-300': 'd-bgc-magenta-300',\n 'purple-300': 'd-bgc-purple-300',\n 'green-500': 'd-bgc-green-500',\n 'purple-100': 'd-bgc-purple-100',\n 'magenta-400': 'd-bgc-magenta-400',\n 'magenta-100': 'd-bgc-magenta-100',\n 'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n 'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n '300',\n '200',\n];\n\nexport default {\n LEFTBAR_GENERAL_ROW_TYPES,\n LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,mCAAmC;AAAA,EAC9C,CAAC,0BAA0B,KAAK,GAAG;AAAA,EACnC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AAAA,EACvC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,WAAW,GAAG;AAAA,EACzC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,eAAe,GAAG;AAAA,EAC7C,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AACzC;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;"}

package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.cjs CHANGED Viewed

@@ -1,42 +1,10 @@
 "use strict";
-const vue2 = require("@dialpad/dialtone-icons/vue2");
 const general_row_constants = require("./general_row_constants.cjs");
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
-const typeToIcon = /* @__PURE__ */ new Map([
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.INBOX, vue2.DtIconInbox],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.CONTACTS, vue2.DtIconContacts],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.CHANNELS, vue2.DtIconHash],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.THREADS, vue2.DtIconThread],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD, vue2.DtIconLayoutTemplate],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL, vue2.DtIconLock],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.QUICK_START, vue2.DtIconSparkle],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP, vue2.DtIconUsers],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER, vue2.DtIconExternalLink],
-  ["locked channel unread", vue2.DtIconLockFilled],
-  ["channel unread", vue2.DtIconHashBold],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED, vue2.DtIconAtSign],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.DIGITAL, vue2.DtIconLaptop2],
-  [general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED, vue2.DtIconCalendarClock]
-]);
+const icon = require("../../../components/icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtRecipeLeftbarGeneralRowIcon",
-  components: {
-    DtIconDialbot: vue2.DtIconDialbot,
-    DtIconInbox: vue2.DtIconInbox,
-    DtIconContacts: vue2.DtIconContacts,
-    DtIconHash: vue2.DtIconHash,
-    DtIconThread: vue2.DtIconThread,
-    DtIconLayoutTemplate: vue2.DtIconLayoutTemplate,
-    DtIconLock: vue2.DtIconLock,
-    DtIconSparkle: vue2.DtIconSparkle,
-    DtIconUsers: vue2.DtIconUsers,
-    DtIconExternalLink: vue2.DtIconExternalLink,
-    DtIconLockFilled: vue2.DtIconLockFilled,
-    DtIconHashBold: vue2.DtIconHashBold,
-    DtIconAtSign: vue2.DtIconAtSign,
-    DtIconLaptop2: vue2.DtIconLaptop2,
-    DtIconCalendarClock: vue2.DtIconCalendarClock
-  },
+  components: { DtIcon: icon },
   props: {
     type: {
       type: String,
@@ -62,7 +30,7 @@ const _sfc_main = {
       return this.type === general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.DIALBOT;
     },
     getIconName() {
-      return typeToIcon.get(this.type);
+      return general_row_constants.LEFTBAR_GENERAL_ROW_ICON_MAPPING[this.type];
     },
     contactCenterIconClasses() {
       return [
@@ -81,7 +49,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.isIconType ? _c(_vm.getIconName, { tag: "component", attrs: { "size": _vm.iconSize } }) : _vm.isContactCenterType ? _c("div", { class: _vm.contactCenterIconClasses }) : _vm.isDialbotType ? _c("div", { class: _vm.dialbotClasses, attrs: { "data-qa": "general-row-dialbot" } }, [_c("dt-icon-dialbot", { attrs: { "size": "500" } })], 1) : _vm._e();
+  return _vm.isIconType ? _c("dt-icon", { attrs: { "name": _vm.getIconName, "size": _vm.iconSize } }) : _vm.isContactCenterType ? _c("div", { class: _vm.contactCenterIconClasses }) : _vm.isDialbotType ? _c("div", { class: _vm.dialbotClasses, attrs: { "data-qa": "general-row-dialbot" } }, [_c("dt-icon", { attrs: { "name": "dialbot", "size": "500" } })], 1) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(

package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"leftbar_general_row_icon.vue.cjs","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n <~~component~~\n v-if=\"isIconType\"\n :is=\"getIconName\"\n :size=\"iconSize\"\n />\n <div\n v-else-if=\"isContactCenterType\"\n :class=\"contactCenterIconClasses\"\n />\n <div\n v-else-if=\"isDialbotType\"\n :class=\"dialbotClasses\"\n data-qa=\"general-row-dialbot\"\n >\n <dt-icon-dialbot\n size=\"500\"\n />\n </div>\n</template>\n\n<script>\nimport {\n DtIconDialbot,\n DtIconInbox,\n DtIconContacts,\n DtIconHash,\n DtIconThread,\n DtIconLayoutTemplate,\n DtIconLock,\n DtIconSparkle,\n DtIconUsers,\n DtIconExternalLink,\n DtIconLockFilled,\n DtIconHashBold,\n DtIconAtSign,\n DtIconLaptop2,\n DtIconCalendarClock,\n} from '~~@dialpad~~/~~dialtone-icons/vue2~~';\nimport {\n LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nconst typeToIcon = new Map([\n [TYPES.INBOX, DtIconInbox],\n [TYPES.CONTACTS, DtIconContacts],\n [TYPES.CHANNELS, DtIconHash],\n [TYPES.THREADS, DtIconThread],\n [TYPES.LAUNCHPAD, DtIconLayoutTemplate],\n [TYPES.LOCKED_CHANNEL, DtIconLock],\n [TYPES.QUICK_START, DtIconSparkle],\n [TYPES.COACHING_GROUP, DtIconUsers],\n [TYPES.COACHING_CENTER, DtIconExternalLink],\n ['locked channel unread', DtIconLockFilled],\n ['channel unread', DtIconHashBold],\n [TYPES.ASSIGNED, DtIconAtSign],\n [TYPES.DIGITAL, DtIconLaptop2],\n [TYPES.SCHEDULED, DtIconCalendarClock],\n]);\n\nexport default {\n name: 'DtRecipeLeftbarGeneralRowIcon',\n components: {\n DtIconDialbot,\n DtIconInbox,\n DtIconContacts,\n DtIconHash,\n DtIconThread,\n DtIconLayoutTemplate,\n DtIconLock,\n DtIconSparkle,\n DtIconUsers,\n DtIconExternalLink,\n DtIconLockFilled,\n DtIconHashBold,\n DtIconAtSign,\n DtIconLaptop2,\n DtIconCalendarClock,\n },\n\n props: {\n type: {\n type: String,\n default: null,\n },\n\n color: {\n type: String,\n default: null,\n },\n\n iconSize: {\n type: String,\n default: '300',\n },\n },\n\n computed: {\n isIconType () {\n return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n },\n\n isContactCenterType () {\n return this.type === TYPES.CONTACT_CENTER;\n },\n\n isDialbotType () {\n return this.type === TYPES.DIALBOT;\n },\n\n getIconName () {\n return ~~typeToIcon.get(~~this.type);\n },\n\n contactCenterIconClasses () {\n return [\n 'dt-leftbar-row__icon-cc',\n COLORS[this.color],\n ];\n },\n\n dialbotClasses () {\n return [\n 'd-d-flex',\n 'd-ai-center',\n 'd-jc-center',\n ];\n },\n },\n};\n</script>\n"],"names":["~~TYPES~~","~~DtIconInbox~~","~~DtIconContacts~~","DtIconHash","DtIconThread","DtIconLayoutTemplate","DtIconLock","DtIconSparkle","DtIconUsers","DtIconExternalLink","DtIconLockFilled","DtIconHashBold","DtIconAtSign","DtIconLaptop2","DtIconCalendarClock","DtIconDialbot","COLORS"],"mappings":";;;;~~AA4CA~~,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAAA,sBAAA,0BAAA,OAAAC,gBAAA;AAAA,EACA,CAAAD,sBAAA,0BAAA,UAAAE,mBAAA;AAAA,EACA,CAAAF,sBAAA,0BAAA,UAAAG,eAAA;AAAA,EACA,CAAAH,sBAAA,0BAAA,SAAAI,iBAAA;AAAA,EACA,CAAAJ,sBAAA,0BAAA,WAAAK,yBAAA;AAAA,EACA,CAAAL,sBAAA,0BAAA,gBAAAM,eAAA;AAAA,EACA,CAAAN,sBAAA,0BAAA,aAAAO,kBAAA;AAAA,EACA,CAAAP,sBAAA,0BAAA,gBAAAQ,gBAAA;AAAA,EACA,CAAAR,sBAAA,0BAAA,iBAAAS,uBAAA;AAAA,EACA,CAAA,yBAAAC,KAAAA,gBAAA;AAAA,EACA,CAAA,kBAAAC,KAAAA,cAAA;AAAA,EACA,CAAAX,sBAAA,0BAAA,UAAAY,iBAAA;AAAA,EACA,CAAAZ,sBAAA,0BAAA,SAAAa,kBAAA;AAAA,EACA,CAAAb,sBAAA,0BAAA,WAAAc,wBAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA~~;AAAA~~,~~IACA~~,~~eAAAC~~,KAAA;AAAA,IACA,aAAAd,KAAA;AAAA,IACA,gBAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,IACA,cAAAC,KAAA;AAAA,IACA,sBAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,aAAAC,KAAA;AAAA,IACA,oBAAAC,KAAA;AAAA,IACA,kBAAAC,KAAA;AAAA,IACA,gBAAAC,KAAA;AAAA,IACA,cAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,qBAAAC,KAAA;AAAA,EACA~~;AAAA~~,~~EAEA,~~OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,CAAA,~~CAAAd~~,gDAAA,SAAAA,sBAAA,0BAAA,cAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,SAAAA,sBAAA,0BAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,SAAAA,sBAAA,0BAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,~~aAAA~~,~~WAAA~~,~~IAAA~~,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA;AAAA,QACA;AAAA,~~QACAgB~~,sBAAA,0CAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"leftbar_general_row_icon.vue.cjs","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n <dt-icon\n v-if=\"isIconType\"\n :name=\"getIconName\"\n :size=\"iconSize\"\n />\n <div\n v-else-if=\"isContactCenterType\"\n :class=\"contactCenterIconClasses\"\n />\n <div\n v-else-if=\"isDialbotType\"\n :class=\"dialbotClasses\"\n data-qa=\"general-row-dialbot\"\n >\n <dt-icon\n name=\"dialbot\"\n size=\"500\"\n />\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n name: 'DtRecipeLeftbarGeneralRowIcon',\n components: { DtIcon },\n props: {\n type: {\n type: String,\n default: null,\n },\n\n color: {\n type: String,\n default: null,\n },\n\n iconSize: {\n type: String,\n default: '300',\n },\n },\n\n computed: {\n isIconType () {\n return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n },\n\n isContactCenterType () {\n return this.type === TYPES.CONTACT_CENTER;\n },\n\n isDialbotType () {\n return this.type === TYPES.DIALBOT;\n },\n\n getIconName () {\n return ICON_MAPPING[this.type];\n },\n\n contactCenterIconClasses () {\n return [\n 'dt-leftbar-row__icon-cc',\n COLORS[this.color],\n ];\n },\n\n dialbotClasses () {\n return [\n 'd-d-flex',\n 'd-ai-center',\n 'd-jc-center',\n ];\n },\n },\n};\n</script>\n"],"names":["DtIcon","TYPES","ICON_MAPPING","COLORS"],"mappings":";;;;AA8BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAAA,QAAAA,KAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,CAAA,CAAAC,gDAAA,SAAAA,sBAAA,0BAAA,cAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,SAAAA,sBAAA,0BAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,SAAAA,sBAAA,0BAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,sBAAA,iCAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,sBAAA,0CAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.js CHANGED Viewed

@@ -1,41 +1,9 @@
-import { DtIconDialbot, DtIconInbox, DtIconContacts, DtIconHash, DtIconThread, DtIconLayoutTemplate, DtIconLock, DtIconSparkle, DtIconUsers, DtIconExternalLink, DtIconLockFilled, DtIconHashBold, DtIconAtSign, DtIconLaptop2, DtIconCalendarClock } from "@dialpad/dialtone-icons/vue2";
-import { LEFTBAR_GENERAL_ROW_TYPES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS } from "./general_row_constants.js";
+import { LEFTBAR_GENERAL_ROW_TYPES, LEFTBAR_GENERAL_ROW_ICON_MAPPING, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS } from "./general_row_constants.js";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
-const typeToIcon = /* @__PURE__ */ new Map([
-  [LEFTBAR_GENERAL_ROW_TYPES.INBOX, DtIconInbox],
-  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS, DtIconContacts],
-  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS, DtIconHash],
-  [LEFTBAR_GENERAL_ROW_TYPES.THREADS, DtIconThread],
-  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD, DtIconLayoutTemplate],
-  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL, DtIconLock],
-  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START, DtIconSparkle],
-  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP, DtIconUsers],
-  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER, DtIconExternalLink],
-  ["locked channel unread", DtIconLockFilled],
-  ["channel unread", DtIconHashBold],
-  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED, DtIconAtSign],
-  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL, DtIconLaptop2],
-  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED, DtIconCalendarClock]
-]);
+import DtIcon from "../../../components/icon/icon.vue.js";
 const _sfc_main = {
   name: "DtRecipeLeftbarGeneralRowIcon",
-  components: {
-    DtIconDialbot,
-    DtIconInbox,
-    DtIconContacts,
-    DtIconHash,
-    DtIconThread,
-    DtIconLayoutTemplate,
-    DtIconLock,
-    DtIconSparkle,
-    DtIconUsers,
-    DtIconExternalLink,
-    DtIconLockFilled,
-    DtIconHashBold,
-    DtIconAtSign,
-    DtIconLaptop2,
-    DtIconCalendarClock
-  },
+  components: { DtIcon },
   props: {
     type: {
       type: String,
@@ -61,7 +29,7 @@ const _sfc_main = {
       return this.type === LEFTBAR_GENERAL_ROW_TYPES.DIALBOT;
     },
     getIconName() {
-      return typeToIcon.get(this.type);
+      return LEFTBAR_GENERAL_ROW_ICON_MAPPING[this.type];
     },
     contactCenterIconClasses() {
       return [
@@ -80,7 +48,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.isIconType ? _c(_vm.getIconName, { tag: "component", attrs: { "size": _vm.iconSize } }) : _vm.isContactCenterType ? _c("div", { class: _vm.contactCenterIconClasses }) : _vm.isDialbotType ? _c("div", { class: _vm.dialbotClasses, attrs: { "data-qa": "general-row-dialbot" } }, [_c("dt-icon-dialbot", { attrs: { "size": "500" } })], 1) : _vm._e();
+  return _vm.isIconType ? _c("dt-icon", { attrs: { "name": _vm.getIconName, "size": _vm.iconSize } }) : _vm.isContactCenterType ? _c("div", { class: _vm.contactCenterIconClasses }) : _vm.isDialbotType ? _c("div", { class: _vm.dialbotClasses, attrs: { "data-qa": "general-row-dialbot" } }, [_c("dt-icon", { attrs: { "name": "dialbot", "size": "500" } })], 1) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(

package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"leftbar_general_row_icon.vue.js","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n <~~component~~\n v-if=\"isIconType\"\n :is=\"getIconName\"\n :size=\"iconSize\"\n />\n <div\n v-else-if=\"isContactCenterType\"\n :class=\"contactCenterIconClasses\"\n />\n <div\n v-else-if=\"isDialbotType\"\n :class=\"dialbotClasses\"\n data-qa=\"general-row-dialbot\"\n >\n <dt-icon-dialbot\n size=\"500\"\n />\n </div>\n</template>\n\n<script>\nimport {\n DtIconDialbot,\n DtIconInbox,\n DtIconContacts,\n DtIconHash,\n DtIconThread,\n DtIconLayoutTemplate,\n DtIconLock,\n DtIconSparkle,\n DtIconUsers,\n DtIconExternalLink,\n DtIconLockFilled,\n DtIconHashBold,\n DtIconAtSign,\n DtIconLaptop2,\n DtIconCalendarClock,\n} from '~~@dialpad~~/~~dialtone-icons/vue2~~';\nimport {\n LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nconst typeToIcon = new Map([\n [TYPES.INBOX, DtIconInbox],\n [TYPES.CONTACTS, DtIconContacts],\n [TYPES.CHANNELS, DtIconHash],\n [TYPES.THREADS, DtIconThread],\n [TYPES.LAUNCHPAD, DtIconLayoutTemplate],\n [TYPES.LOCKED_CHANNEL, DtIconLock],\n [TYPES.QUICK_START, DtIconSparkle],\n [TYPES.COACHING_GROUP, DtIconUsers],\n [TYPES.COACHING_CENTER, DtIconExternalLink],\n ['locked channel unread', DtIconLockFilled],\n ['channel unread', DtIconHashBold],\n [TYPES.ASSIGNED, DtIconAtSign],\n [TYPES.DIGITAL, DtIconLaptop2],\n [TYPES.SCHEDULED, DtIconCalendarClock],\n]);\n\nexport default {\n name: 'DtRecipeLeftbarGeneralRowIcon',\n components: {\n DtIconDialbot,\n DtIconInbox,\n DtIconContacts,\n DtIconHash,\n DtIconThread,\n DtIconLayoutTemplate,\n DtIconLock,\n DtIconSparkle,\n DtIconUsers,\n DtIconExternalLink,\n DtIconLockFilled,\n DtIconHashBold,\n DtIconAtSign,\n DtIconLaptop2,\n DtIconCalendarClock,\n },\n\n props: {\n type: {\n type: String,\n default: null,\n },\n\n color: {\n type: String,\n default: null,\n },\n\n iconSize: {\n type: String,\n default: '300',\n },\n },\n\n computed: {\n isIconType () {\n return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n },\n\n isContactCenterType () {\n return this.type === TYPES.CONTACT_CENTER;\n },\n\n isDialbotType () {\n return this.type === TYPES.DIALBOT;\n },\n\n getIconName () {\n return ~~typeToIcon.get(~~this.type);\n },\n\n contactCenterIconClasses () {\n return [\n 'dt-leftbar-row__icon-cc',\n COLORS[this.color],\n ];\n },\n\n dialbotClasses () {\n return [\n 'd-d-flex',\n 'd-ai-center',\n 'd-jc-center',\n ];\n },\n },\n};\n</script>\n"],"names":["TYPES","COLORS"],"mappings":";;;~~AA4CA~~,MAAA,~~aAAA,oBAAA,IAAA;AAAA,EACA,CAAAA,0BAAA,OAAA,WAAA;AAAA,EACA,CAAAA,0BAAA,UAAA,cAAA;AAAA,EACA,CAAAA,0BAAA,UAAA,UAAA;AAAA,EACA,CAAAA,0BAAA,SAAA,~~YAAA;AAAA,EACA,CAAAA,0BAAA,WAAA,oBAAA;AAAA,EACA,CAAAA,0BAAA,gBAAA,UAAA;AAAA,EACA,CAAAA,0BAAA,aAAA,aAAA;AAAA,EACA,CAAAA,0BAAA,gBAAA,WAAA;AAAA,EACA,CAAAA,0BAAA,iBAAA,kBAAA;AAAA,EACA,CAAA,yBAAA,gBAAA;AAAA,EACA,CAAA,kBAAA,cAAA;AAAA,EACA,CAAAA,0BAAA,UAAA,YAAA;AAAA,EACA,CAAAA,0BAAA,SAAA,aAAA;AAAA,EACA,CAAAA,0BAAA,WAAA,mBAAA;AACA,CAAA;AAEA,MAAA~~,YAAA~~;AAAA,EACA,~~MAAA;AAAA,EACA,~~YAAA~~;AAAA~~,~~IACA;AAAA~~,~~IACA~~;AAAA,~~IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,~~EACA~~;AAAA~~,~~EAEA,~~OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,CAAA,CAAAA,0BAAA,SAAAA,0BAAA,cAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,SAAAA,0BAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,SAAAA,0BAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,~~aAAA~~,~~WAAA~~,~~IAAA,~~KAAA,IAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,0CAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"leftbar_general_row_icon.vue.js","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n <dt-icon\n v-if=\"isIconType\"\n :name=\"getIconName\"\n :size=\"iconSize\"\n />\n <div\n v-else-if=\"isContactCenterType\"\n :class=\"contactCenterIconClasses\"\n />\n <div\n v-else-if=\"isDialbotType\"\n :class=\"dialbotClasses\"\n data-qa=\"general-row-dialbot\"\n >\n <dt-icon\n name=\"dialbot\"\n size=\"500\"\n />\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n name: 'DtRecipeLeftbarGeneralRowIcon',\n components: { DtIcon },\n props: {\n type: {\n type: String,\n default: null,\n },\n\n color: {\n type: String,\n default: null,\n },\n\n iconSize: {\n type: String,\n default: '300',\n },\n },\n\n computed: {\n isIconType () {\n return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n },\n\n isContactCenterType () {\n return this.type === TYPES.CONTACT_CENTER;\n },\n\n isDialbotType () {\n return this.type === TYPES.DIALBOT;\n },\n\n getIconName () {\n return ICON_MAPPING[this.type];\n },\n\n contactCenterIconClasses () {\n return [\n 'dt-leftbar-row__icon-cc',\n COLORS[this.color],\n ];\n },\n\n dialbotClasses () {\n return [\n 'd-d-flex',\n 'd-ai-center',\n 'd-jc-center',\n ];\n },\n },\n};\n</script>\n"],"names":["TYPES","ICON_MAPPING","COLORS"],"mappings":";;;AA8BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,CAAA,CAAAA,0BAAA,SAAAA,0BAAA,cAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,SAAAA,0BAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,SAAAA,0BAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,iCAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,0CAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/recipes/leftbar/group_row/group_row.vue.cjs CHANGED Viewed

@@ -1,12 +1,12 @@
 "use strict";
-const vue2 = require("@dialpad/dialtone-icons/vue2");
+const icon = require("../../../components/icon/icon.vue.cjs");
 const common_utils = require("../../../common/utils.cjs");
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const general_row = require("../general_row/general_row.vue.cjs");
 const _sfc_main = {
   name: "DtRecipeGroupRow",
   components: {
-    DtIconUsers: vue2.DtIconUsers,
+    DtIcon: icon,
     DtRecipeGeneralRow: general_row
   },
   inheritAttrs: false,
@@ -80,7 +80,7 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-recipe-general-row", _vm._g(_vm._b({ attrs: { "description": _vm.names, "aria-label": _vm.ariaLabel, "unread-count": _vm.unreadCount, "has-unreads": _vm.hasUnreads, "unread-count-tooltip": _vm.unreadCountTooltip, "selected": _vm.selected, "is-typing": _vm.isTyping }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_c("dt-icon-users", { attrs: { "size": "300" } })];
+    return [_c("dt-icon", { attrs: { "name": "users", "size": "300" } })];
   }, proxy: true }]) }, "dt-recipe-general-row", _vm.$attrs, false), _vm.$listeners));
 };
 var _sfc_staticRenderFns = [];

package/dist/recipes/leftbar/group_row/group_row.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"group_row.vue.cjs","sources":["../../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :description=\"names\"\n :aria-label=\"ariaLabel\"\n :unread-count=\"unreadCount\"\n :has-unreads=\"hasUnreads\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n :selected=\"selected\"\n :is-typing=\"isTyping\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-icon-users\n size=\"300\"\n />\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { ~~DtIconUsers }~~ from '~~@dialpad~~/~~dialtone-icons~~/~~vue2~~';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGroupRow',\n\n components: {\n ~~DtIconUsers~~,\n DtRecipeGeneralRow,\n },\n\n inheritAttrs: false,\n\n props: {\n\n /*\n Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n /\n groupCountText: {\n type: String,\n default: '',\n },\n\n /\n Names of the group members\n /\n names: {\n type: String,\n required: true,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n ariaLabel () {\n return safeConcatStrings([this.groupCountText, this.names]);\n },\n },\n};\n</script>\n"],"names":["~~DtIconUsers~~","DtRecipeGeneralRow","safeConcatStrings"],"mappings":";;;;;~~AAyBA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,~~aAAAA,KAAA~~;~~AAAA~~,IACA,oBAAAC;AAAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAAC,aAAAA,kBAAA,CAAA,KAAA,gBAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"group_row.vue.cjs","sources":["../../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :description=\"names\"\n :aria-label=\"ariaLabel\"\n :unread-count=\"unreadCount\"\n :has-unreads=\"hasUnreads\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n :selected=\"selected\"\n :is-typing=\"isTyping\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-icon\n name=\"users\"\n size=\"300\"\n />\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGroupRow',\n\n components: {\n DtIcon,\n DtRecipeGeneralRow,\n },\n\n inheritAttrs: false,\n\n props: {\n\n /*\n Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n /\n groupCountText: {\n type: String,\n default: '',\n },\n\n /\n Names of the group members\n /\n names: {\n type: String,\n required: true,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n ariaLabel () {\n return safeConcatStrings([this.groupCountText, this.names]);\n },\n },\n};\n</script>\n"],"names":["DtIcon","DtRecipeGeneralRow","safeConcatStrings"],"mappings":";;;;;AA0BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA;AAAAA,IACA,oBAAAC;AAAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAAC,aAAAA,kBAAA,CAAA,KAAA,gBAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/recipes/leftbar/group_row/group_row.vue.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { DtIconUsers } from "@dialpad/dialtone-icons/vue2";
+import DtIcon from "../../../components/icon/icon.vue.js";
 import { safeConcatStrings } from "../../../common/utils.js";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtRecipeGeneralRow from "../general_row/general_row.vue.js";
 const _sfc_main = {
   name: "DtRecipeGroupRow",
   components: {
-    DtIconUsers,
+    DtIcon,
     DtRecipeGeneralRow
   },
   inheritAttrs: false,
@@ -79,7 +79,7 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-recipe-general-row", _vm._g(_vm._b({ attrs: { "description": _vm.names, "aria-label": _vm.ariaLabel, "unread-count": _vm.unreadCount, "has-unreads": _vm.hasUnreads, "unread-count-tooltip": _vm.unreadCountTooltip, "selected": _vm.selected, "is-typing": _vm.isTyping }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_c("dt-icon-users", { attrs: { "size": "300" } })];
+    return [_c("dt-icon", { attrs: { "name": "users", "size": "300" } })];
   }, proxy: true }]) }, "dt-recipe-general-row", _vm.$attrs, false), _vm.$listeners));
 };
 var _sfc_staticRenderFns = [];

package/dist/recipes/leftbar/group_row/group_row.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"group_row.vue.js","sources":["../../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :description=\"names\"\n :aria-label=\"ariaLabel\"\n :unread-count=\"unreadCount\"\n :has-unreads=\"hasUnreads\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n :selected=\"selected\"\n :is-typing=\"isTyping\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-icon-users\n size=\"300\"\n />\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { ~~DtIconUsers }~~ from '~~@dialpad~~/~~dialtone-icons~~/~~vue2~~';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGroupRow',\n\n components: {\n ~~DtIconUsers~~,\n DtRecipeGeneralRow,\n },\n\n inheritAttrs: false,\n\n props: {\n\n /*\n Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n /\n groupCountText: {\n type: String,\n default: '',\n },\n\n /\n Names of the group members\n /\n names: {\n type: String,\n required: true,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n ariaLabel () {\n return safeConcatStrings([this.groupCountText, this.names]);\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;~~AAyBA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,kBAAA,CAAA,KAAA,gBAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"group_row.vue.js","sources":["../../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :description=\"names\"\n :aria-label=\"ariaLabel\"\n :unread-count=\"unreadCount\"\n :has-unreads=\"hasUnreads\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n :selected=\"selected\"\n :is-typing=\"isTyping\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-icon\n name=\"users\"\n size=\"300\"\n />\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeGroupRow',\n\n components: {\n DtIcon,\n DtRecipeGeneralRow,\n },\n\n inheritAttrs: false,\n\n props: {\n\n /*\n Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n /\n groupCountText: {\n type: String,\n default: '',\n },\n\n /\n Names of the group members\n /\n names: {\n type: String,\n required: true,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n ariaLabel () {\n return safeConcatStrings([this.groupCountText, this.names]);\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;AA0BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,kBAAA,CAAA,KAAA,gBAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}