npm - @dialpad/dialtone - Versions diffs - 9.130.0 → 9.131.1 - Mend

@dialpad/dialtone 9.130.0 → 9.131.1

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

Files changed (1131) hide show

package/dist/vue2/lib/empty-state/empty-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.js","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-empty-state__illustration\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n class=\"d-empty-state__icon\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"450\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text', headlineClass]\">\n {{ headerText }}\n </div>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text', bodyClass]\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script>\nimport {\n EMPTY_STATE_BODY_SIZE_MODIFIERS,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n name: 'DtEmptyState',\n\n components: {\n DtStack,\n },\n\n props: {\n /*\n The empty state size.\n * @values 'sm', 'md', 'lg'\n /\n size: {\n type: String,\n default: 'lg',\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n },\n\n computed: {\n hasIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon();\n },\n\n hasIllustration () {\n return this.$scopedSlots.illustration && this.$scopedSlots.illustration();\n },\n\n isSmallSize () {\n return this.size === 'sm';\n },\n\n /\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\n showIcon () {\n return this.hasIcon && (!this.hasIllustration \|\| this.isSmallSize);\n },\n\n /\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\n showIllustration () {\n return this.hasIllustration && !this.isSmallSize;\n },\n\n sizeClass () {\n return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n },\n\n emptyStateClasses () {\n return ['d-empty-state', this.sizeClass];\n },\n\n contentClass () {\n return EMPTY_STATE_CONTENT_SIZE_MODIFIERS[this.size];\n },\n\n headlineClass () {\n return EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[this.size];\n },\n\n bodyClass () {\n return EMPTY_STATE_BODY_SIZE_MODIFIERS[this.size];\n },\n },\n\n mounted () {\n if (!this.bodyText && !this.$slots.body) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n },\n};\n</script>\n"],"names":["_sfc_main","DtStack","s","EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS"],"mappings":";;;AAoDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,aAAA,QAAA,KAAA,aAAA;IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA,KAAA,aAAA;IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,YAAA,CAAA,KAAA,mBAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AACA,aAAA,KAAA,mBAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,CAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,OAAA,QACA,QAAA,MAAA,2EAAA;AAAA,EAEA;AACA;;;;;;;;;;"}
1	+ {"version":3,"file":"empty-state.js","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-empty-state__illustration\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n class=\"d-empty-state__icon\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"450\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text', headlineClass]\">\n {{ headerText }}\n </div>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text', bodyClass]\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script>\nimport {\n EMPTY_STATE_BODY_SIZE_MODIFIERS,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n name: 'DtEmptyState',\n\n components: {\n DtStack,\n },\n\n props: {\n /*\n The empty state size.\n * @values 'sm', 'md', 'lg'\n /\n size: {\n type: String,\n default: 'lg',\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n },\n\n computed: {\n hasIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon();\n },\n\n hasIllustration () {\n return this.$scopedSlots.illustration && this.$scopedSlots.illustration();\n },\n\n isSmallSize () {\n return this.size === 'sm';\n },\n\n /\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\n showIcon () {\n return this.hasIcon && (!this.hasIllustration \|\| this.isSmallSize);\n },\n\n /\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\n showIllustration () {\n return this.hasIllustration && !this.isSmallSize;\n },\n\n sizeClass () {\n return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n },\n\n emptyStateClasses () {\n return ['d-empty-state', this.sizeClass];\n },\n\n contentClass () {\n return EMPTY_STATE_CONTENT_SIZE_MODIFIERS[this.size];\n },\n\n headlineClass () {\n return EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[this.size];\n },\n\n bodyClass () {\n return EMPTY_STATE_BODY_SIZE_MODIFIERS[this.size];\n },\n },\n\n mounted () {\n if (!this.bodyText && !this.$slots.body) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n },\n};\n</script>\n"],"names":["_sfc_main","DtStack","s","EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS"],"mappings":";;;AAoDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,aAAA,QAAA,KAAA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA,KAAA,aAAA,aAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,YAAA,CAAA,KAAA,mBAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AACA,aAAA,KAAA,mBAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,CAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,OAAA,QACA,QAAA,MAAA,2EAAA;AAAA,EAEA;AACA;;;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-pill-constants.cjs","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n default: 'd-recipe-feed-item-pill__border--default',\n ai: 'd-recipe-feed-item-pill__border--ai',\n critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","feed_item_pill_constants"],"mappings":"4GAAY,MAACA,EAA+B,CAC1C,QAAS,2CACT,GAAI,sCACJ,SAAU,2CACZ,~~EAEeC~~,~~EAAA~~,CACb,6BAAAD,CACF"}
1	+ {"version":3,"file":"feed-item-pill-constants.cjs","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n default: 'd-recipe-feed-item-pill__border--default',\n ai: 'd-recipe-feed-item-pill__border--ai',\n critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","feed_item_pill_constants"],"mappings":"4GAAY,MAACA,EAA+B,CAC1C,QAAS,2CACT,GAAI,sCACJ,SAAU,2CACZ,EAEAC,EAAe,CACb,6BAAAD,CACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-pill-constants.js","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n default: 'd-recipe-feed-item-pill__border--default',\n ai: 'd-recipe-feed-item-pill__border--ai',\n critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","feed_item_pill_constants"],"mappings":"AAAY,MAACA,IAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ,~~GAEeC~~,~~IAAA~~;AAAA,EACb,8BAAAD;AACF;"}
1	+ {"version":3,"file":"feed-item-pill-constants.js","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n default: 'd-recipe-feed-item-pill__border--default',\n ai: 'd-recipe-feed-item-pill__border--ai',\n critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","feed_item_pill_constants"],"mappings":"AAAY,MAACA,IAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ,GAEAC,IAAe;AAAA,EACb,8BAAAD;AACF;"}

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

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

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

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

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

@@ -2,11 +2,11 @@ import { FEED_ITEM_PILL_BORDER_COLORS as r } from "./feed-item-pill-constants.js
 import { DtIconChevronDown as i, DtIconChevronRight as n } from "@dialpad/dialtone-icons/vue2";
 import { DialtoneLocalization as s } from "../../localization/index.js";
 import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import c from "../item-layout/item-layout.js";
-import d from "../collapsible/collapsible.js";
+import c from "../collapsible/collapsible.js";
+import d from "../item-layout/item-layout.js";
 const u = {
   name: "DtRecipeFeedItemPill",
-  components: { DtItemLayout: c, DtCollapsible: d },
+  components: { DtItemLayout: d, DtCollapsible: c },
   props: {
     /**
      * Bolded primary text

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-row-constants.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n NORMAL: '',\n SEARCHED: 'd-recipe-feed-item-row__state--searched',\n ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n FEED_ROW_STATE_BACKGROUND_COLOR,\n DEFAULT_FEED_ROW_STATE,\n};\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","feed_item_row_constants"],"mappings":"4GAAY,MAACA,EAAkC,CAC7C,OAAQ,GACR,SAAU,0CACV,MAAO,sCACT,EAEaC,EAAyB,~~SAEvBC~~,~~EAAA~~,CACb,gCAAAF,EACA,uBAAAC,CACF"}
1	+ {"version":3,"file":"feed-item-row-constants.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n NORMAL: '',\n SEARCHED: 'd-recipe-feed-item-row__state--searched',\n ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n FEED_ROW_STATE_BACKGROUND_COLOR,\n DEFAULT_FEED_ROW_STATE,\n};\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","feed_item_row_constants"],"mappings":"4GAAY,MAACA,EAAkC,CAC7C,OAAQ,GACR,SAAU,0CACV,MAAO,sCACT,EAEaC,EAAyB,SAEtCC,EAAe,CACb,gCAAAF,EACA,uBAAAC,CACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-row-constants.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n NORMAL: '',\n SEARCHED: 'd-recipe-feed-item-row__state--searched',\n ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n FEED_ROW_STATE_BACKGROUND_COLOR,\n DEFAULT_FEED_ROW_STATE,\n};\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","feed_item_row_constants"],"mappings":"AAAY,MAACA,IAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT,GAEaC,IAAyB,~~UAEvBC~~,~~IAAA~~;AAAA,EACb,iCAAAF;AAAA,EACA,wBAAAC;AACF;"}
1	+ {"version":3,"file":"feed-item-row-constants.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n NORMAL: '',\n SEARCHED: 'd-recipe-feed-item-row__state--searched',\n ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n FEED_ROW_STATE_BACKGROUND_COLOR,\n DEFAULT_FEED_ROW_STATE,\n};\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","feed_item_row_constants"],"mappings":"AAAY,MAACA,IAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT,GAEaC,IAAyB,UAEtCC,IAAe;AAAA,EACb,iCAAAF;AAAA,EACA,wBAAAC;AACF;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./feed-item-row-constants.cjs"),r=require("../../common/mixins/modal.cjs"),o=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../avatar/avatar.cjs"),c=require("../lazy-show/lazy-show.cjs"),l=require("../list-item/list-item.cjs"),_=require("../badge/badge.cjs"),u={name:"DtRecipeFeedItemRow",components:{DtAvatar:d.default,DtLazyShow:c.default,DtListItem:l.default,DtBadge:_.default,DtIconUser:o.DtIconUser},mixins:[r.default],inheritAttrs:!1,props:{avatarSeed:{type:String,default:null},showHeader:{type:Boolean,default:!1},avatarImageUrl:{type:String,default:""},displayName:{type:String,default:""},noInitials:{type:Boolean,default:!1},time:{type:String,default:""},shortTime:{type:String,default:""},labelText:{type:String,default:""},isActive:{type:Boolean,default:!1},state:{type:String,default:i.DEFAULT_FEED_ROW_STATE,validator:a=>Object.keys(i.FEED_ROW_STATE_BACKGROUND_COLOR).includes(a)}},emits:["hover","focus","keydown"],data(){return{transitionActive:!1}},computed:{feedListeners(){return{...this.$listeners,mouseenter:()=>this.setHover(!0),mouseleave:()=>this.setHover(!1),focusin:()=>this.setFocus(!0),focusout:()=>this.setFocus(!1),transitionend:()=>this.transitionComplete(),keydown:a=>{switch(a.code){case"Tab":this.trapFocus(a);break}this.$emit("keydown",a)}}},listItemClasses(){return["d-recipe-feed-item-row",{"d-recipe-feed-item-row--active":this.isActive&&this.state===i.DEFAULT_FEED_ROW_STATE},{"d-recipe-feed-item-row__state-transition":this.transitionActive},i.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]]}},watch:{state:{immediate:!0,handler:function(a,e){a!==i.DEFAULT_FEED_ROW_STATE&&(this.transitionActive=!0)}}},methods:{transitionComplete(){this.state===i.DEFAULT_FEED_ROW_STATE&&(this.transitionActive=!1)},trapFocus(a){this.focusTrappedTabPress(a)},setFocus(a){this.$emit("focus",a)},setHover(a){this.$emit("hover",a)}}};var m=function(){var e=this,t=e._self._c;return t("dt-list-item",e._g(e._b({ref:"FeedItemRef",class:e.listItemClasses,attrs:{"navigation-type":"none","data-qa":"dt-recipe-feed-item-row"},scopedSlots:e._u([{key:"left",fn:function(){return[e.showHeader?t("div",{staticClass:"d-recipe-feed-item-row__avatar-container"},[e._t("avatar",function(){return[t("dt-avatar",{attrs:{"full-name":e.displayName,"image-src":e.avatarImageUrl,"image-alt":"",seed:e.avatarSeed},scopedSlots:e._u([e.noInitials?{key:"icon",fn:function({iconSize:s}){return[t("dt-icon-user",{attrs:{size:s}})]}}:null],null,!0)})]})],2):e._e(),e.showHeader?e._e():t("span",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"d-recipe-feed-item-row__left-time",attrs:{"data-qa":"dt-recipe-feed-item-row--left-time"}},[e._v(" "+e._s(e.shortTime)+" ")])]},proxy:!0},{key:"bottom",fn:function(){return[e.$slots.reactions?t("div",{staticClass:"d-recipe-feed-item-row__reactions",attrs:{"data-qa":"dt-recipe-feed-item-row--reactions"}},[e._t("reactions")],2):e._e(),e.$slots.threading?t("div",{staticClass:"d-recipe-feed-item-row__threading"},[e._t("threading")],2):e._e(),t("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"d-recipe-feed-item-row__menu",attrs:{"data-qa":"dt-recipe-feed-item-row--menu"}},[t("dt-lazy-show",{attrs:{appear:!0,transition:"fade",show:e.isActive}},[e._t("menu")],2)],1)]},proxy:!0}],null,!0)},"dt-list-item",e.$attrs,!1),e.feedListeners),[t("article",{staticClass:"d-recipe-feed-item-row__content"},[e.showHeader?t("div",{staticClass:"d-recipe-feed-item-row__header",attrs:{"data-qa":"dt-recipe-feed-item-row--header"}},[e._t("displayName",function(){return[t("p",{staticClass:"d-recipe-feed-item-row__header-name"},[e._v(" "+e._s(e.displayName)+" ")])]}),t("time",{staticClass:"d-recipe-feed-item-row__header-time"},[e._v(" "+e._s(e.time)+" ")]),e.labelText?t("dt-badge",{attrs:{text:e.labelText}}):e._e()],2):e._e(),t("span",{attrs:{"data-qa":"dt-recipe-feed-item-row--content"}},[e._t("default")],2),e.$slots.attachment?t("div",{staticClass:"d-recipe-feed-item-row__attachment",attrs:{"data-qa":"dt-recipe-feed-item-row--attachment"}},[e._t("attachment")],2):e._e()])])},f=[],p=n.n(u,m,f);const h=p.exports;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./feed-item-row-constants.cjs"),r=require("../../common/mixins/modal.cjs"),o=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../badge/badge.cjs"),c=require("../list-item/list-item.cjs"),l=require("../lazy-show/lazy-show.cjs"),_=require("../avatar/avatar.cjs"),u={name:"DtRecipeFeedItemRow",components:{DtAvatar:_.default,DtLazyShow:l.default,DtListItem:c.default,DtBadge:d.default,DtIconUser:o.DtIconUser},mixins:[r.default],inheritAttrs:!1,props:{avatarSeed:{type:String,default:null},showHeader:{type:Boolean,default:!1},avatarImageUrl:{type:String,default:""},displayName:{type:String,default:""},noInitials:{type:Boolean,default:!1},time:{type:String,default:""},shortTime:{type:String,default:""},labelText:{type:String,default:""},isActive:{type:Boolean,default:!1},state:{type:String,default:i.DEFAULT_FEED_ROW_STATE,validator:a=>Object.keys(i.FEED_ROW_STATE_BACKGROUND_COLOR).includes(a)}},emits:["hover","focus","keydown"],data(){return{transitionActive:!1}},computed:{feedListeners(){return{...this.$listeners,mouseenter:()=>this.setHover(!0),mouseleave:()=>this.setHover(!1),focusin:()=>this.setFocus(!0),focusout:()=>this.setFocus(!1),transitionend:()=>this.transitionComplete(),keydown:a=>{switch(a.code){case"Tab":this.trapFocus(a);break}this.$emit("keydown",a)}}},listItemClasses(){return["d-recipe-feed-item-row",{"d-recipe-feed-item-row--active":this.isActive&&this.state===i.DEFAULT_FEED_ROW_STATE},{"d-recipe-feed-item-row__state-transition":this.transitionActive},i.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]]}},watch:{state:{immediate:!0,handler:function(a){a!==i.DEFAULT_FEED_ROW_STATE&&(this.transitionActive=!0)}}},methods:{transitionComplete(){this.state===i.DEFAULT_FEED_ROW_STATE&&(this.transitionActive=!1)},trapFocus(a){this.focusTrappedTabPress(a)},setFocus(a){this.$emit("focus",a)},setHover(a){this.$emit("hover",a)}}};var m=function(){var e=this,t=e._self._c;return t("dt-list-item",e._g(e._b({ref:"FeedItemRef",class:e.listItemClasses,attrs:{"navigation-type":"none","data-qa":"dt-recipe-feed-item-row"},scopedSlots:e._u([{key:"left",fn:function(){return[e.showHeader?t("div",{staticClass:"d-recipe-feed-item-row__avatar-container"},[e._t("avatar",function(){return[t("dt-avatar",{attrs:{"full-name":e.displayName,"image-src":e.avatarImageUrl,"image-alt":"",seed:e.avatarSeed},scopedSlots:e._u([e.noInitials?{key:"icon",fn:function({iconSize:s}){return[t("dt-icon-user",{attrs:{size:s}})]}}:null],null,!0)})]})],2):e._e(),e.showHeader?e._e():t("span",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"d-recipe-feed-item-row__left-time",attrs:{"data-qa":"dt-recipe-feed-item-row--left-time"}},[e._v(" "+e._s(e.shortTime)+" ")])]},proxy:!0},{key:"bottom",fn:function(){return[e.$slots.reactions?t("div",{staticClass:"d-recipe-feed-item-row__reactions",attrs:{"data-qa":"dt-recipe-feed-item-row--reactions"}},[e._t("reactions")],2):e._e(),e.$slots.threading?t("div",{staticClass:"d-recipe-feed-item-row__threading"},[e._t("threading")],2):e._e(),t("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"d-recipe-feed-item-row__menu",attrs:{"data-qa":"dt-recipe-feed-item-row--menu"}},[t("dt-lazy-show",{attrs:{appear:!0,transition:"fade",show:e.isActive}},[e._t("menu")],2)],1)]},proxy:!0}],null,!0)},"dt-list-item",e.$attrs,!1),e.feedListeners),[t("article",{staticClass:"d-recipe-feed-item-row__content"},[e.showHeader?t("div",{staticClass:"d-recipe-feed-item-row__header",attrs:{"data-qa":"dt-recipe-feed-item-row--header"}},[e._t("displayName",function(){return[t("p",{staticClass:"d-recipe-feed-item-row__header-name"},[e._v(" "+e._s(e.displayName)+" ")])]}),t("time",{staticClass:"d-recipe-feed-item-row__header-time"},[e._v(" "+e._s(e.time)+" ")]),e.labelText?t("dt-badge",{attrs:{text:e.labelText}}):e._e()],2):e._e(),t("span",{attrs:{"data-qa":"dt-recipe-feed-item-row--content"}},[e._t("default")],2),e.$slots.attachment?t("div",{staticClass:"d-recipe-feed-item-row__attachment",attrs:{"data-qa":"dt-recipe-feed-item-row--attachment"}},[e._t("attachment")],2):e._e()])])},f=[],p=n.n(u,m,f);const h=p.exports;exports.default=h;
 //# sourceMappingURL=feed-item-row.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-row.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n <dt-list-item\n ref=\"FeedItemRef\"\n navigation-type=\"none\"\n v-bind=\"$attrs\"\n :class=\"listItemClasses\"\n data-qa=\"dt-recipe-feed-item-row\"\n v-on=\"feedListeners\"\n >\n <!-- Avatar or time -->\n <template #left>\n <div\n v-if=\"showHeader\"\n class=\"d-recipe-feed-item-row__avatar-container\"\n >\n <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n <slot\n name=\"avatar\"\n >\n <dt-avatar\n :full-name=\"displayName\"\n :image-src=\"avatarImageUrl\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n >\n <template\n v-if=\"noInitials\"\n #icon=\"{ iconSize }\"\n >\n <dt-icon-user\n :size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </slot>\n </div>\n <!-- show time instead of avatar when headers not present -->\n <span\n v-if=\"!showHeader\"\n v-show=\"isActive\"\n class=\"d-recipe-feed-item-row__left-time\"\n data-qa=\"dt-recipe-feed-item-row--left-time\"\n >\n {{ shortTime }}\n </span>\n </template>\n\n <article class=\"d-recipe-feed-item-row__content\">\n <!-- Feed Item -->\n <div\n v-if=\"showHeader\"\n data-qa=\"dt-recipe-feed-item-row--header\"\n class=\"d-recipe-feed-item-row__header\"\n >\n <!-- @slot Slot for display name -->\n <slot name=\"displayName\">\n <p class=\"d-recipe-feed-item-row__header-name\">\n {{ displayName }}\n </p>\n </slot>\n <time\n class=\"d-recipe-feed-item-row__header-time\"\n >\n {{ time }}\n </time>\n <dt-badge\n v-if=\"labelText\"\n :text=\"labelText\"\n />\n </div>\n <!-- @slot Default content slot for feed item row -->\n <span\n data-qa=\"dt-recipe-feed-item-row--content\"\n >\n <slot />\n </span>\n <div\n v-if=\"$slots.attachment\"\n data-qa=\"dt-recipe-feed-item-row--attachment\"\n class=\"d-recipe-feed-item-row__attachment\"\n >\n <slot name=\"attachment\" />\n </div>\n </article>\n\n <template #bottom>\n <!-- Reactions -->\n <div\n v-if=\"$slots.reactions\"\n class=\"d-recipe-feed-item-row__reactions\"\n data-qa=\"dt-recipe-feed-item-row--reactions\"\n >\n <!-- @slot Slot for reactions row component -->\n <slot name=\"reactions\" />\n </div>\n\n <!-- Threading -->\n <div\n v-if=\"$slots.threading\"\n class=\"d-recipe-feed-item-row__threading\"\n >\n <!-- @slot Slot for threading row component -->\n <slot name=\"threading\" />\n </div>\n\n <!-- Action menu -->\n <div\n v-show=\"isActive\"\n data-qa=\"dt-recipe-feed-item-row--menu\"\n class=\"d-recipe-feed-item-row__menu\"\n >\n <dt-lazy-show\n :appear=\"true\"\n transition=\"fade\"\n :show=\"isActive\"\n >\n <!-- @slot Slot for actions hover menu component -->\n <slot name=\"menu\" />\n </dt-lazy-show>\n </div>\n </template>\n </dt-list-item>\n</template>\n\n<script>\~~n/* eslint-disable max-lines /\~~nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n DtIconUser,\n },\n\n mixins: [Modal],\n\n inheritAttrs: false,\n\n props: {\n /\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Show avatar, show header text or dont show left time and vice versa\n /\n showHeader: {\n type: Boolean,\n default: false,\n },\n\n /\n Optional avatar image url.\n * If not provided it will use extracted initials from displayName.\n /\n avatarImageUrl: {\n type: String,\n default: '',\n },\n\n /\n The display name of the sender\n /\n displayName: {\n type: String,\n default: '',\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n listItemClasses () {\n return [\n 'd-recipe-feed-item-row',\n { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState~~, oldState~~) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","newState","~~oldState","~~e","bool"],"mappings":"~~4bAsIAA~~,EAAA,CACA,KAAA,sBAEA,WAAA,CACA,SAAAC,~~EAAA~~,QACA,WAAAC,~~EAAA~~,QACA,WAAAC,~~EAAA~~,QACA,QAAAC,~~EAAA~~,QACA,WAAAC,~~EAAA~~,UACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,aAAA,GAEA,MAAA,CAIA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,MAAA,CACA,KAAA,OACA,QAAAC,~~EAAA~~,uBACA,UAAAC,GAAA,OAAA,KAAAC,EAAAA,+BAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CAOA,QAQA,QAQA,SACA,EAEA,MAAA,CACA,MAAA,CACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,WAAA,IAAA,KAAA,SAAA,EAAA,EACA,WAAA,IAAA,KAAA,SAAA,EAAA,EACA,QAAA,IAAA,KAAA,SAAA,EAAA,EACA,SAAA,IAAA,KAAA,SAAA,EAAA,EACA,cAAA,IAAA,KAAA,mBAAA,EACA,QAAAE,GAAA,CACA,OAAAA,EAAA,KAAA,CACA,IAAA,MACA,KAAA,UAAAA,CAAA,EACA,KACA,CACA,KAAA,MAAA,UAAAA,CAAA,CACA,CACA,CACA,EAEA,iBAAA,CACA,MAAA,CACA,yBACA,CAAA,iCAAA,KAAA,UAAA,KAAA,QAAAH,EAAAA,sBAAA,EACA,CAAA,2CAAA,KAAA,gBAAA,EACAE,~~EAAA~~,gCAAA,KAAA,KAAA,CAEA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,GACA,QAAA,SAAAE,~~EAAAC,~~EAAA,~~CACAD~~,IAAAJ,EAAAA,yBACA,KAAA,iBAAA,GAEA,CACA,CACA,EAEA,QAAA,CACA,oBAAA,CACA,KAAA,QAAAA,2BACA,KAAA,iBAAA,GAEA,EAEA,~~UAAAM~~,EAAA,CACA,KAAA,qBAAAA,CAAA,CACA,EAEA,SAAAC,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,SAAAA,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,CACA"}
1	+ {"version":3,"file":"feed-item-row.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n <dt-list-item\n ref=\"FeedItemRef\"\n navigation-type=\"none\"\n v-bind=\"$attrs\"\n :class=\"listItemClasses\"\n data-qa=\"dt-recipe-feed-item-row\"\n v-on=\"feedListeners\"\n >\n <!-- Avatar or time -->\n <template #left>\n <div\n v-if=\"showHeader\"\n class=\"d-recipe-feed-item-row__avatar-container\"\n >\n <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n <slot\n name=\"avatar\"\n >\n <dt-avatar\n :full-name=\"displayName\"\n :image-src=\"avatarImageUrl\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n >\n <template\n v-if=\"noInitials\"\n #icon=\"{ iconSize }\"\n >\n <dt-icon-user\n :size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </slot>\n </div>\n <!-- show time instead of avatar when headers not present -->\n <span\n v-if=\"!showHeader\"\n v-show=\"isActive\"\n class=\"d-recipe-feed-item-row__left-time\"\n data-qa=\"dt-recipe-feed-item-row--left-time\"\n >\n {{ shortTime }}\n </span>\n </template>\n\n <article class=\"d-recipe-feed-item-row__content\">\n <!-- Feed Item -->\n <div\n v-if=\"showHeader\"\n data-qa=\"dt-recipe-feed-item-row--header\"\n class=\"d-recipe-feed-item-row__header\"\n >\n <!-- @slot Slot for display name -->\n <slot name=\"displayName\">\n <p class=\"d-recipe-feed-item-row__header-name\">\n {{ displayName }}\n </p>\n </slot>\n <time\n class=\"d-recipe-feed-item-row__header-time\"\n >\n {{ time }}\n </time>\n <dt-badge\n v-if=\"labelText\"\n :text=\"labelText\"\n />\n </div>\n <!-- @slot Default content slot for feed item row -->\n <span\n data-qa=\"dt-recipe-feed-item-row--content\"\n >\n <slot />\n </span>\n <div\n v-if=\"$slots.attachment\"\n data-qa=\"dt-recipe-feed-item-row--attachment\"\n class=\"d-recipe-feed-item-row__attachment\"\n >\n <slot name=\"attachment\" />\n </div>\n </article>\n\n <template #bottom>\n <!-- Reactions -->\n <div\n v-if=\"$slots.reactions\"\n class=\"d-recipe-feed-item-row__reactions\"\n data-qa=\"dt-recipe-feed-item-row--reactions\"\n >\n <!-- @slot Slot for reactions row component -->\n <slot name=\"reactions\" />\n </div>\n\n <!-- Threading -->\n <div\n v-if=\"$slots.threading\"\n class=\"d-recipe-feed-item-row__threading\"\n >\n <!-- @slot Slot for threading row component -->\n <slot name=\"threading\" />\n </div>\n\n <!-- Action menu -->\n <div\n v-show=\"isActive\"\n data-qa=\"dt-recipe-feed-item-row--menu\"\n class=\"d-recipe-feed-item-row__menu\"\n >\n <dt-lazy-show\n :appear=\"true\"\n transition=\"fade\"\n :show=\"isActive\"\n >\n <!-- @slot Slot for actions hover menu component -->\n <slot name=\"menu\" />\n </dt-lazy-show>\n </div>\n </template>\n </dt-list-item>\n</template>\n\n<script>\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n DtIconUser,\n },\n\n mixins: [Modal],\n\n inheritAttrs: false,\n\n props: {\n /*\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Show avatar, show header text or dont show left time and vice versa\n /\n showHeader: {\n type: Boolean,\n default: false,\n },\n\n /\n Optional avatar image url.\n * If not provided it will use extracted initials from displayName.\n /\n avatarImageUrl: {\n type: String,\n default: '',\n },\n\n /\n The display name of the sender\n /\n displayName: {\n type: String,\n default: '',\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n listItemClasses () {\n return [\n 'd-recipe-feed-item-row',\n { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","newState","e","bool"],"mappings":"4bAqIAA,EAAA,CACA,KAAA,sBAEA,WAAA,CACA,SAAAC,EAAAA,QACA,WAAAC,EAAAA,QACA,WAAAC,EAAAA,QACA,QAAAC,EAAAA,QACA,WAAAC,EAAAA,UACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,aAAA,GAEA,MAAA,CAIA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,MAAA,CACA,KAAA,OACA,QAAAC,EAAAA,uBACA,UAAAC,GAAA,OAAA,KAAAC,EAAAA,+BAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CAOA,QAQA,QAQA,SACA,EAEA,MAAA,CACA,MAAA,CACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,WAAA,IAAA,KAAA,SAAA,EAAA,EACA,WAAA,IAAA,KAAA,SAAA,EAAA,EACA,QAAA,IAAA,KAAA,SAAA,EAAA,EACA,SAAA,IAAA,KAAA,SAAA,EAAA,EACA,cAAA,IAAA,KAAA,mBAAA,EACA,QAAAE,GAAA,CACA,OAAAA,EAAA,KAAA,CACA,IAAA,MACA,KAAA,UAAAA,CAAA,EACA,KACA,CACA,KAAA,MAAA,UAAAA,CAAA,CACA,CACA,CACA,EAEA,iBAAA,CACA,MAAA,CACA,yBACA,CAAA,iCAAA,KAAA,UAAA,KAAA,QAAAH,EAAAA,sBAAA,EACA,CAAA,2CAAA,KAAA,gBAAA,EACAE,EAAAA,gCAAA,KAAA,KAAA,CAEA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,GACA,QAAA,SAAAE,EAAA,CACAA,IAAAJ,EAAAA,yBACA,KAAA,iBAAA,GAEA,CACA,CACA,EAEA,QAAA,CACA,oBAAA,CACA,KAAA,QAAAA,2BACA,KAAA,iBAAA,GAEA,EAEA,UAAAK,EAAA,CACA,KAAA,qBAAAA,CAAA,CACA,EAEA,SAAAC,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,SAAAA,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,CACA"}

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

@@ -2,17 +2,17 @@ import { DEFAULT_FEED_ROW_STATE as i, FEED_ROW_STATE_BACKGROUND_COLOR as s } fro
 import o from "../../common/mixins/modal.js";
 import { DtIconUser as n } from "@dialpad/dialtone-icons/vue2";
 import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import c from "../avatar/avatar.js";
-import m from "../lazy-show/lazy-show.js";
-import l from "../list-item/list-item.js";
-import f from "../badge/badge.js";
+import c from "../badge/badge.js";
+import m from "../list-item/list-item.js";
+import l from "../lazy-show/lazy-show.js";
+import f from "../avatar/avatar.js";
 const p = {
   name: "DtRecipeFeedItemRow",
   components: {
-    DtAvatar: c,
-    DtLazyShow: m,
-    DtListItem: l,
-    DtBadge: f,
+    DtAvatar: f,
+    DtLazyShow: l,
+    DtListItem: m,
+    DtBadge: c,
     DtIconUser: n
   },
   mixins: [o],
@@ -152,7 +152,7 @@ const p = {
   watch: {
     state: {
       immediate: !0,
-      handler: function(a, e) {
+      handler: function(a) {
         a !== i && (this.transitionActive = !0);
       }
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-row.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n <dt-list-item\n ref=\"FeedItemRef\"\n navigation-type=\"none\"\n v-bind=\"$attrs\"\n :class=\"listItemClasses\"\n data-qa=\"dt-recipe-feed-item-row\"\n v-on=\"feedListeners\"\n >\n <!-- Avatar or time -->\n <template #left>\n <div\n v-if=\"showHeader\"\n class=\"d-recipe-feed-item-row__avatar-container\"\n >\n <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n <slot\n name=\"avatar\"\n >\n <dt-avatar\n :full-name=\"displayName\"\n :image-src=\"avatarImageUrl\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n >\n <template\n v-if=\"noInitials\"\n #icon=\"{ iconSize }\"\n >\n <dt-icon-user\n :size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </slot>\n </div>\n <!-- show time instead of avatar when headers not present -->\n <span\n v-if=\"!showHeader\"\n v-show=\"isActive\"\n class=\"d-recipe-feed-item-row__left-time\"\n data-qa=\"dt-recipe-feed-item-row--left-time\"\n >\n {{ shortTime }}\n </span>\n </template>\n\n <article class=\"d-recipe-feed-item-row__content\">\n <!-- Feed Item -->\n <div\n v-if=\"showHeader\"\n data-qa=\"dt-recipe-feed-item-row--header\"\n class=\"d-recipe-feed-item-row__header\"\n >\n <!-- @slot Slot for display name -->\n <slot name=\"displayName\">\n <p class=\"d-recipe-feed-item-row__header-name\">\n {{ displayName }}\n </p>\n </slot>\n <time\n class=\"d-recipe-feed-item-row__header-time\"\n >\n {{ time }}\n </time>\n <dt-badge\n v-if=\"labelText\"\n :text=\"labelText\"\n />\n </div>\n <!-- @slot Default content slot for feed item row -->\n <span\n data-qa=\"dt-recipe-feed-item-row--content\"\n >\n <slot />\n </span>\n <div\n v-if=\"$slots.attachment\"\n data-qa=\"dt-recipe-feed-item-row--attachment\"\n class=\"d-recipe-feed-item-row__attachment\"\n >\n <slot name=\"attachment\" />\n </div>\n </article>\n\n <template #bottom>\n <!-- Reactions -->\n <div\n v-if=\"$slots.reactions\"\n class=\"d-recipe-feed-item-row__reactions\"\n data-qa=\"dt-recipe-feed-item-row--reactions\"\n >\n <!-- @slot Slot for reactions row component -->\n <slot name=\"reactions\" />\n </div>\n\n <!-- Threading -->\n <div\n v-if=\"$slots.threading\"\n class=\"d-recipe-feed-item-row__threading\"\n >\n <!-- @slot Slot for threading row component -->\n <slot name=\"threading\" />\n </div>\n\n <!-- Action menu -->\n <div\n v-show=\"isActive\"\n data-qa=\"dt-recipe-feed-item-row--menu\"\n class=\"d-recipe-feed-item-row__menu\"\n >\n <dt-lazy-show\n :appear=\"true\"\n transition=\"fade\"\n :show=\"isActive\"\n >\n <!-- @slot Slot for actions hover menu component -->\n <slot name=\"menu\" />\n </dt-lazy-show>\n </div>\n </template>\n </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n DtIconUser,\n },\n\n mixins: [Modal],\n\n inheritAttrs: false,\n\n props: {\n /\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Show avatar, show header text or dont show left time and vice versa\n /\n showHeader: {\n type: Boolean,\n default: false,\n },\n\n /\n Optional avatar image url.\n * If not provided it will use extracted initials from displayName.\n /\n avatarImageUrl: {\n type: String,\n default: '',\n },\n\n /\n The display name of the sender\n /\n displayName: {\n type: String,\n default: '',\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n listItemClasses () {\n return [\n 'd-recipe-feed-item-row',\n { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState, oldState) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","newState","oldState","e","bool"],"mappings":"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"}
1	+ {"version":3,"file":"feed-item-row.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n <dt-list-item\n ref=\"FeedItemRef\"\n navigation-type=\"none\"\n v-bind=\"$attrs\"\n :class=\"listItemClasses\"\n data-qa=\"dt-recipe-feed-item-row\"\n v-on=\"feedListeners\"\n >\n <!-- Avatar or time -->\n <template #left>\n <div\n v-if=\"showHeader\"\n class=\"d-recipe-feed-item-row__avatar-container\"\n >\n <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n <slot\n name=\"avatar\"\n >\n <dt-avatar\n :full-name=\"displayName\"\n :image-src=\"avatarImageUrl\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n >\n <template\n v-if=\"noInitials\"\n #icon=\"{ iconSize }\"\n >\n <dt-icon-user\n :size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </slot>\n </div>\n <!-- show time instead of avatar when headers not present -->\n <span\n v-if=\"!showHeader\"\n v-show=\"isActive\"\n class=\"d-recipe-feed-item-row__left-time\"\n data-qa=\"dt-recipe-feed-item-row--left-time\"\n >\n {{ shortTime }}\n </span>\n </template>\n\n <article class=\"d-recipe-feed-item-row__content\">\n <!-- Feed Item -->\n <div\n v-if=\"showHeader\"\n data-qa=\"dt-recipe-feed-item-row--header\"\n class=\"d-recipe-feed-item-row__header\"\n >\n <!-- @slot Slot for display name -->\n <slot name=\"displayName\">\n <p class=\"d-recipe-feed-item-row__header-name\">\n {{ displayName }}\n </p>\n </slot>\n <time\n class=\"d-recipe-feed-item-row__header-time\"\n >\n {{ time }}\n </time>\n <dt-badge\n v-if=\"labelText\"\n :text=\"labelText\"\n />\n </div>\n <!-- @slot Default content slot for feed item row -->\n <span\n data-qa=\"dt-recipe-feed-item-row--content\"\n >\n <slot />\n </span>\n <div\n v-if=\"$slots.attachment\"\n data-qa=\"dt-recipe-feed-item-row--attachment\"\n class=\"d-recipe-feed-item-row__attachment\"\n >\n <slot name=\"attachment\" />\n </div>\n </article>\n\n <template #bottom>\n <!-- Reactions -->\n <div\n v-if=\"$slots.reactions\"\n class=\"d-recipe-feed-item-row__reactions\"\n data-qa=\"dt-recipe-feed-item-row--reactions\"\n >\n <!-- @slot Slot for reactions row component -->\n <slot name=\"reactions\" />\n </div>\n\n <!-- Threading -->\n <div\n v-if=\"$slots.threading\"\n class=\"d-recipe-feed-item-row__threading\"\n >\n <!-- @slot Slot for threading row component -->\n <slot name=\"threading\" />\n </div>\n\n <!-- Action menu -->\n <div\n v-show=\"isActive\"\n data-qa=\"dt-recipe-feed-item-row--menu\"\n class=\"d-recipe-feed-item-row__menu\"\n >\n <dt-lazy-show\n :appear=\"true\"\n transition=\"fade\"\n :show=\"isActive\"\n >\n <!-- @slot Slot for actions hover menu component -->\n <slot name=\"menu\" />\n </dt-lazy-show>\n </div>\n </template>\n </dt-list-item>\n</template>\n\n<script>\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n DtIconUser,\n },\n\n mixins: [Modal],\n\n inheritAttrs: false,\n\n props: {\n /*\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Show avatar, show header text or dont show left time and vice versa\n /\n showHeader: {\n type: Boolean,\n default: false,\n },\n\n /\n Optional avatar image url.\n * If not provided it will use extracted initials from displayName.\n /\n avatarImageUrl: {\n type: String,\n default: '',\n },\n\n /\n The display name of the sender\n /\n displayName: {\n type: String,\n default: '',\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n listItemClasses () {\n return [\n 'd-recipe-feed-item-row',\n { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","newState","e","bool"],"mappings":"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"}

package/dist/vue2/lib/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-100': 'd-recipe-leftbar-general-row__contact-center--magenta-100',\n 'magenta-200': 'd-recipe-leftbar-general-row__contact-center--magenta-200',\n 'magenta-300': 'd-recipe-leftbar-general-row__contact-center--magenta-300',\n 'magenta-400': 'd-recipe-leftbar-general-row__contact-center--magenta-400',\n 'green-200': 'd-recipe-leftbar-general-row__contact-center--green-200',\n 'green-500': 'd-recipe-leftbar-general-row__contact-center--green-500',\n 'gold-300': 'd-recipe-leftbar-general-row__contact-center--gold-300',\n 'purple-100': 'd-recipe-leftbar-general-row__contact-center--purple-100',\n 'purple-300': 'd-recipe-leftbar-general-row__contact-center--purple-300',\n 'purple-600': 'd-recipe-leftbar-general-row__contact-center--purple-600',\n 'black-300': 'd-recipe-leftbar-general-row__contact-center--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":["LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","LEFTBAR_GENERAL_ROW_ICON_SIZES","general_row_constants"],"mappings":"4GAAY,MAACA,EAA4B,CACvC,MAAO,QACP,SAAU,WACV,SAAU,WACV,QAAS,UACT,UAAW,YACX,eAAgB,iBAChB,eAAgB,iBAChB,YAAa,cACb,eAAgB,iBAChB,gBAAiB,kBACjB,QAAS,UACT,SAAU,WACV,QAAS,UACT,UAAW,WACb,EAEaC,EAA4C,CACvD,cAAe,4DACf,cAAe,4DACf,cAAe,4DACf,cAAe,4DACf,YAAa,0DACb,YAAa,0DACb,WAAY,yDACZ,aAAc,2DACd,aAAc,2DACd,aAAc,2DACd,YAAa,yDACf,EAEaC,EAAsD,gEACzC,OAAO,KAAKD,CAAyC,EAAE,KAAK,IAAI,EAE7EE,EAAiC,CAC5C,MACA,KACF,~~EAEeC~~,~~EAAA~~,CACb,0BAAAJ,EACA,0CAAAC,EACA,oDAAAC,EACA,+BAAAC,CACF"}
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-100': 'd-recipe-leftbar-general-row__contact-center--magenta-100',\n 'magenta-200': 'd-recipe-leftbar-general-row__contact-center--magenta-200',\n 'magenta-300': 'd-recipe-leftbar-general-row__contact-center--magenta-300',\n 'magenta-400': 'd-recipe-leftbar-general-row__contact-center--magenta-400',\n 'green-200': 'd-recipe-leftbar-general-row__contact-center--green-200',\n 'green-500': 'd-recipe-leftbar-general-row__contact-center--green-500',\n 'gold-300': 'd-recipe-leftbar-general-row__contact-center--gold-300',\n 'purple-100': 'd-recipe-leftbar-general-row__contact-center--purple-100',\n 'purple-300': 'd-recipe-leftbar-general-row__contact-center--purple-300',\n 'purple-600': 'd-recipe-leftbar-general-row__contact-center--purple-600',\n 'black-300': 'd-recipe-leftbar-general-row__contact-center--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":["LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","LEFTBAR_GENERAL_ROW_ICON_SIZES","general_row_constants"],"mappings":"4GAAY,MAACA,EAA4B,CACvC,MAAO,QACP,SAAU,WACV,SAAU,WACV,QAAS,UACT,UAAW,YACX,eAAgB,iBAChB,eAAgB,iBAChB,YAAa,cACb,eAAgB,iBAChB,gBAAiB,kBACjB,QAAS,UACT,SAAU,WACV,QAAS,UACT,UAAW,WACb,EAEaC,EAA4C,CACvD,cAAe,4DACf,cAAe,4DACf,cAAe,4DACf,cAAe,4DACf,YAAa,0DACb,YAAa,0DACb,WAAY,yDACZ,aAAc,2DACd,aAAc,2DACd,aAAc,2DACd,YAAa,yDACf,EAEaC,EAAsD,gEACzC,OAAO,KAAKD,CAAyC,EAAE,KAAK,IAAI,EAE7EE,EAAiC,CAC5C,MACA,KACF,EAEAC,EAAe,CACb,0BAAAJ,EACA,0CAAAC,EACA,oDAAAC,EACA,+BAAAC,CACF"}

package/dist/vue2/lib/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-100': 'd-recipe-leftbar-general-row__contact-center--magenta-100',\n 'magenta-200': 'd-recipe-leftbar-general-row__contact-center--magenta-200',\n 'magenta-300': 'd-recipe-leftbar-general-row__contact-center--magenta-300',\n 'magenta-400': 'd-recipe-leftbar-general-row__contact-center--magenta-400',\n 'green-200': 'd-recipe-leftbar-general-row__contact-center--green-200',\n 'green-500': 'd-recipe-leftbar-general-row__contact-center--green-500',\n 'gold-300': 'd-recipe-leftbar-general-row__contact-center--gold-300',\n 'purple-100': 'd-recipe-leftbar-general-row__contact-center--purple-100',\n 'purple-300': 'd-recipe-leftbar-general-row__contact-center--purple-300',\n 'purple-600': 'd-recipe-leftbar-general-row__contact-center--purple-600',\n 'black-300': 'd-recipe-leftbar-general-row__contact-center--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":["LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","LEFTBAR_GENERAL_ROW_ICON_SIZES","general_row_constants"],"mappings":"AAAY,MAACA,IAA4B;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,GAEaC,IAA4C;AAAA,EACvD,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AACf,GAEaC,IAAsD,kEACzC,OAAO,KAAKD,CAAyC,EAAE,KAAK,IAAI,GAE7EE,IAAiC;AAAA,EAC5C;AAAA,EACA;AACF,~~GAEeC~~,~~IAAA~~;AAAA,EACb,2BAAAJ;AAAA,EACA,2CAAAC;AAAA,EACA,qDAAAC;AAAA,EACA,gCAAAC;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_CONTACT_CENTER_COLORS = {\n 'magenta-100': 'd-recipe-leftbar-general-row__contact-center--magenta-100',\n 'magenta-200': 'd-recipe-leftbar-general-row__contact-center--magenta-200',\n 'magenta-300': 'd-recipe-leftbar-general-row__contact-center--magenta-300',\n 'magenta-400': 'd-recipe-leftbar-general-row__contact-center--magenta-400',\n 'green-200': 'd-recipe-leftbar-general-row__contact-center--green-200',\n 'green-500': 'd-recipe-leftbar-general-row__contact-center--green-500',\n 'gold-300': 'd-recipe-leftbar-general-row__contact-center--gold-300',\n 'purple-100': 'd-recipe-leftbar-general-row__contact-center--purple-100',\n 'purple-300': 'd-recipe-leftbar-general-row__contact-center--purple-300',\n 'purple-600': 'd-recipe-leftbar-general-row__contact-center--purple-600',\n 'black-300': 'd-recipe-leftbar-general-row__contact-center--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":["LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","LEFTBAR_GENERAL_ROW_ICON_SIZES","general_row_constants"],"mappings":"AAAY,MAACA,IAA4B;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,GAEaC,IAA4C;AAAA,EACvD,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AACf,GAEaC,IAAsD,kEACzC,OAAO,KAAKD,CAAyC,EAAE,KAAK,IAAI,GAE7EE,IAAiC;AAAA,EAC5C;AAAA,EACA;AACF,GAEAC,IAAe;AAAA,EACb,2BAAAJ;AAAA,EACA,2CAAAC;AAAA,EACA,qDAAAC;AAAA,EACA,gCAAAC;AACF;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./general-row-constants.cjs"),c=require("@dialpad/dialtone-icons/vue2"),_=require("./leftbar-general-row-icon.cjs"),p=require("../../common/utils/index.cjs"),h=require("../../localization/index.cjs"),f=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),C=require("../badge/badge.cjs"),T=require("../button/button.cjs"),E=require("../tooltip/tooltip.cjs"),w={name:"DtRecipeGeneralRow",components:{DtEmojiTextWrapper:b.default,DtBadge:C.default,DtButton:T.default,DtTooltip:E.default,DtIconPhone:c.DtIconPhone,DtIconWaveform:c.DtIconWaveform,DtRecipeLeftbarGeneralRowIcon:_.default},inheritAttrs:!1,props:{type:{type:String,default:"inbox",validator:a=>Object.values(n.LEFTBAR_GENERAL_ROW_TYPES).includes(a)},ariaLabel:{type:String,default:""},description:{type:String,required:!0},color:{type:String,default:null,validator:a=>Object.keys(n.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(a)},channelSetting:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},unreadCount:{type:String,default:null},unreadMentionCount:{type:String,default:null},selected:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},activeVoiceChat:{type:Boolean,default:!1},dndText:{type:String,default:""},hasCallButton:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},iconSize:{type:String,default:"300",validator:a=>n.LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(a)}},emits:["click","call"],data(){return{actionFocused:!1,labelWidth:"100%",i18n:new h.DialtoneLocalization}},computed:{leftbarGeneralRowClasses(){return["d-recipe-leftbar-row",{"d-recipe-leftbar-row--no-action":!this.hasCallButton,"d-recipe-leftbar-row--has-unread":this.hasUnreads,"d-recipe-leftbar-row__unread-count":this.showUnreadCount||this.showUnreadMentionCount,"d-recipe-leftbar-row--selected":this.selected,"d-recipe-leftbar-row--muted":this.muted,"d-recipe-leftbar-row--action-focused":this.actionFocused}]},getIcon(){switch(this.type){case n.LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:if(this.hasUnreads)return"channel unread";break;case n.LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:if(this.hasUnreads)return"locked channel unread";break}return this.type},getAriaLabel(){return this.ariaLabel?this.ariaLabel:p.safeConcatStrings([this.typingTooltip,this.description,this.unreadCountTooltip,this.dndTextTooltip,this.activeVoiceChatTooltip])},hasActions(){return this.dndText||this.activeVoiceChat||this.showUnreadCount||this.hasCallButton||this.showUnreadMentionCount},showUnreadCount(){return!!this.unreadCount&&this.hasUnreads},showUnreadMentionCount(){return!!this.unreadMentionCount&&this.hasUnreads},hasUnreadCount(){return this.unreadCount!==null},hasUnreadMentionCount(){return this.unreadMentionCount!==null},shouldApplyCustomStyleForCountBadge(){return this.hasUnreadCount&&this.hasUnreadMentionCount},shouldApplyCustomStyleForMentionOnly(){return this.channelSetting==="always"&&!this.hasUnreadCount&&this.hasUnreadMentionCount},messageCount(){return isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount)},mentionCount(){return isNaN(this.unreadMentionCount)?this.unreadMentionCount:Number(this.unreadMentionCount)},unreadCountTooltip(){return p.safeConcatStrings([this.unreadCount&&this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT",{unreadCount:this.messageCount}),this.unreadMentionCount&&this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT",{unreadCount:this.mentionCount})])},dndTextTooltip(){return this.dndText&&this.i18n.$t("DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP")},activeVoiceChatTooltip(){return this.activeVoiceChat&&this.i18n.$t("DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT")},callButtonTooltip(){return this.i18n.$t("DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP")},typingTooltip(){return this.isTyping&&this.i18n.$t("DIALTONE_TYPING_TEXT")}},watch:{$props:{immediate:!0,deep:!0,async handler(){this.validateProps(),await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(this.$el),this.adjustLabelWidth()},beforeDestroy:function(){this.resizeObserver.disconnect()},methods:{validateProps(){this.type===n.LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER&&!Object.keys(n.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)&&console.error(n.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR)},adjustLabelWidth(){var i,o,s,l,d,u;const a=((o=(i=this.$el)==null?void 0:i.querySelector(".d-recipe-leftbar-row__primary"))==null?void 0:o.clientWidth)||0,t=((l=(s=this.$el)==null?void 0:s.querySelector(".d-recipe-leftbar-row__omega"))==null?void 0:l.clientWidth)||0,e=((u=(d=this.$el)==null?void 0:d.querySelector(".d-recipe-leftbar-row__alpha"))==null?void 0:u.clientWidth)||0,r=16;this.labelWidth=a-(t+e+r)+"px"}}};var y=function(){var t=this,e=t._self._c;return e("div",{class:t.leftbarGeneralRowClasses,attrs:{"data-qa":"dt-recipe-leftbar-row"}},[e("a",t._g(t._b({staticClass:"d-recipe-leftbar-row__primary",attrs:{"data-qa":"data-qa"in t.$attrs?t.$attrs["data-qa"]:"d-recipe-leftbar-row-link","aria-label":t.getAriaLabel,title:t.description,href:"href"in t.$attrs?t.$attrs.href:"javascript:void(0)"}},"a",t.$attrs,!1),t.$listeners),[e("div",{staticClass:"d-recipe-leftbar-row__alpha"},[t.isTyping?e("div",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.typingTooltip,expression:"typingTooltip"}],staticClass:"d-recipe-leftbar-row__is-typing"},[e("span"),e("span"),e("span")]):t._t("left",function(){return[e("dt-recipe-leftbar-general-row-icon",{attrs:{type:t.getIcon,color:t.color,"icon-size":t.iconSize,"data-qa":"dt-recipe-leftbar-row-icon"}})]})],2),e("div",{staticClass:"d-recipe-leftbar-row__label",style:`flex-basis: ${t.labelWidth}`},[t._t("label",function(){return[e("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[t._v(" "+t._s(t.description)+" ")])]})],2)]),t.hasActions?e("div",{staticClass:"d-recipe-leftbar-row__omega"},[t.dndText?e("dt-tooltip",{attrs:{placement:"top",message:t.dndTextTooltip},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("div",{ref:"d-recipe-leftbar-row-dnd",staticClass:"d-recipe-leftbar-row__dnd",attrs:{"data-qa":"dt-recipe-leftbar-row-dnd"}},[t._v(" "+t._s(t.dndText)+" ")])]},proxy:!0}],null,!1,3247296267)}):t._e(),t.activeVoiceChat?e("div",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.activeVoiceChatTooltip,expression:"activeVoiceChatTooltip"}],staticClass:"d-recipe-leftbar-row__active-voice"},[e("dt-icon-waveform",{attrs:{size:"300"}})],1):t.showUnreadCount||t.showUnreadMentionCount?e("dt-tooltip",{attrs:{message:t.unreadCountTooltip,placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[t.showUnreadCount?e("dt-badge",{class:["d-recipe-leftbar-row__unread-badge",{"d-recipe-leftbar-row__unread-count-badge":t.shouldApplyCustomStyleForCountBadge}],attrs:{kind:"count",type:"bulletin","data-qa":"dt-recipe-leftbar-row-unread-badge"}},[t._v(" "+t._s(t.unreadCount)+" ")]):t._e(),t.showUnreadMentionCount?e("dt-badge",{class:["d-recipe-leftbar-row__unread-badge",{"d-recipe-leftbar-row__unread-mention-count-badge":t.shouldApplyCustomStyleForCountBadge},{"d-recipe-leftbar-row__unread-mention-only-count-badge":t.shouldApplyCustomStyleForMentionOnly}],attrs:{kind:"count",type:"bulletin","data-qa":"dt-recipe-leftbar-row-unread-mention-badge"}},[t._v(" "+t._s(t.unreadMentionCount)+" ")]):t._e()]},proxy:!0}],null,!1,715135836)}):t._e(),t.hasCallButton?e("div",{staticClass:"d-recipe-leftbar-row__action",attrs:{"data-qa":"dt-recipe-leftbar-row-action"}},[e("dt-tooltip",{attrs:{message:t.callButtonTooltip,placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("dt-button",{staticClass:"d-recipe-leftbar-row__action-button",attrs:{"data-qa":"dt-recipe-leftbar-row-action-call-button",circle:"",size:"xs",kind:"inverted","aria-label":t.callButtonTooltip},on:{focus:function(r){t.actionFocused=!0},blur:function(r){t.actionFocused=!1},click:function(r){return r.stopPropagation(),t.$emit("call",r)}},scopedSlots:t._u([{key:"icon",fn:function(){return[e("dt-icon-phone",{attrs:{size:"200"}})]},proxy:!0}],null,!1,2193255039)})]},proxy:!0}],null,!1,3837984112)})],1):t._e()],1):t._e()])},g=[],m=f.n(w,y,g);const R=m.exports;exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./general-row-constants.cjs"),c=require("@dialpad/dialtone-icons/vue2"),_=require("./leftbar-general-row-icon.cjs"),p=require("../../common/utils/index.cjs"),h=require("../../localization/index.cjs"),f=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b=require("../tooltip/tooltip.cjs"),C=require("../button/button.cjs"),T=require("../badge/badge.cjs"),E=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),w={name:"DtRecipeGeneralRow",components:{DtEmojiTextWrapper:E.default,DtBadge:T.default,DtButton:C.default,DtTooltip:b.default,DtIconPhone:c.DtIconPhone,DtIconWaveform:c.DtIconWaveform,DtRecipeLeftbarGeneralRowIcon:_.default},inheritAttrs:!1,props:{type:{type:String,default:"inbox",validator:a=>Object.values(n.LEFTBAR_GENERAL_ROW_TYPES).includes(a)},ariaLabel:{type:String,default:""},description:{type:String,required:!0},color:{type:String,default:null,validator:a=>Object.keys(n.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(a)},channelSetting:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},unreadCount:{type:String,default:null},unreadMentionCount:{type:String,default:null},selected:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},activeVoiceChat:{type:Boolean,default:!1},dndText:{type:String,default:""},hasCallButton:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},iconSize:{type:String,default:"300",validator:a=>n.LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(a)}},emits:["click","call"],data(){return{actionFocused:!1,labelWidth:"100%",i18n:new h.DialtoneLocalization}},computed:{leftbarGeneralRowClasses(){return["d-recipe-leftbar-row",{"d-recipe-leftbar-row--no-action":!this.hasCallButton,"d-recipe-leftbar-row--has-unread":this.hasUnreads,"d-recipe-leftbar-row__unread-count":this.showUnreadCount||this.showUnreadMentionCount,"d-recipe-leftbar-row--selected":this.selected,"d-recipe-leftbar-row--muted":this.muted,"d-recipe-leftbar-row--action-focused":this.actionFocused}]},getIcon(){switch(this.type){case n.LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:if(this.hasUnreads)return"channel unread";break;case n.LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:if(this.hasUnreads)return"locked channel unread";break}return this.type},getAriaLabel(){return this.ariaLabel?this.ariaLabel:p.safeConcatStrings([this.typingTooltip,this.description,this.unreadCountTooltip,this.dndTextTooltip,this.activeVoiceChatTooltip])},hasActions(){return this.dndText||this.activeVoiceChat||this.showUnreadCount||this.hasCallButton||this.showUnreadMentionCount},showUnreadCount(){return!!this.unreadCount&&this.hasUnreads},showUnreadMentionCount(){return!!this.unreadMentionCount&&this.hasUnreads},hasUnreadCount(){return this.unreadCount!==null},hasUnreadMentionCount(){return this.unreadMentionCount!==null},shouldApplyCustomStyleForCountBadge(){return this.hasUnreadCount&&this.hasUnreadMentionCount},shouldApplyCustomStyleForMentionOnly(){return this.channelSetting==="always"&&!this.hasUnreadCount&&this.hasUnreadMentionCount},messageCount(){return isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount)},mentionCount(){return isNaN(this.unreadMentionCount)?this.unreadMentionCount:Number(this.unreadMentionCount)},unreadCountTooltip(){return p.safeConcatStrings([this.unreadCount&&this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT",{unreadCount:this.messageCount}),this.unreadMentionCount&&this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT",{unreadCount:this.mentionCount})])},dndTextTooltip(){return this.dndText&&this.i18n.$t("DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP")},activeVoiceChatTooltip(){return this.activeVoiceChat&&this.i18n.$t("DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT")},callButtonTooltip(){return this.i18n.$t("DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP")},typingTooltip(){return this.isTyping&&this.i18n.$t("DIALTONE_TYPING_TEXT")}},watch:{$props:{immediate:!0,deep:!0,async handler(){this.validateProps(),await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(this.$el),this.adjustLabelWidth()},beforeDestroy:function(){this.resizeObserver.disconnect()},methods:{validateProps(){this.type===n.LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER&&!Object.keys(n.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)&&console.error(n.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR)},adjustLabelWidth(){var i,o,s,l,d,u;const a=((o=(i=this.$el)==null?void 0:i.querySelector(".d-recipe-leftbar-row__primary"))==null?void 0:o.clientWidth)||0,t=((l=(s=this.$el)==null?void 0:s.querySelector(".d-recipe-leftbar-row__omega"))==null?void 0:l.clientWidth)||0,e=((u=(d=this.$el)==null?void 0:d.querySelector(".d-recipe-leftbar-row__alpha"))==null?void 0:u.clientWidth)||0,r=16;this.labelWidth=a-(t+e+r)+"px"}}};var y=function(){var t=this,e=t._self._c;return e("div",{class:t.leftbarGeneralRowClasses,attrs:{"data-qa":"dt-recipe-leftbar-row"}},[e("a",t._g(t._b({staticClass:"d-recipe-leftbar-row__primary",attrs:{"data-qa":"data-qa"in t.$attrs?t.$attrs["data-qa"]:"d-recipe-leftbar-row-link","aria-label":t.getAriaLabel,title:t.description,href:"href"in t.$attrs?t.$attrs.href:"javascript:void(0)"}},"a",t.$attrs,!1),t.$listeners),[e("div",{staticClass:"d-recipe-leftbar-row__alpha"},[t.isTyping?e("div",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.typingTooltip,expression:"typingTooltip"}],staticClass:"d-recipe-leftbar-row__is-typing"},[e("span"),e("span"),e("span")]):t._t("left",function(){return[e("dt-recipe-leftbar-general-row-icon",{attrs:{type:t.getIcon,color:t.color,"icon-size":t.iconSize,"data-qa":"dt-recipe-leftbar-row-icon"}})]})],2),e("div",{staticClass:"d-recipe-leftbar-row__label",style:`flex-basis: ${t.labelWidth}`},[t._t("label",function(){return[e("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[t._v(" "+t._s(t.description)+" ")])]})],2)]),t.hasActions?e("div",{staticClass:"d-recipe-leftbar-row__omega"},[t.dndText?e("dt-tooltip",{attrs:{placement:"top",message:t.dndTextTooltip},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("div",{ref:"d-recipe-leftbar-row-dnd",staticClass:"d-recipe-leftbar-row__dnd",attrs:{"data-qa":"dt-recipe-leftbar-row-dnd"}},[t._v(" "+t._s(t.dndText)+" ")])]},proxy:!0}],null,!1,3247296267)}):t._e(),t.activeVoiceChat?e("div",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.activeVoiceChatTooltip,expression:"activeVoiceChatTooltip"}],staticClass:"d-recipe-leftbar-row__active-voice"},[e("dt-icon-waveform",{attrs:{size:"300"}})],1):t.showUnreadCount||t.showUnreadMentionCount?e("dt-tooltip",{attrs:{message:t.unreadCountTooltip,placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[t.showUnreadCount?e("dt-badge",{class:["d-recipe-leftbar-row__unread-badge",{"d-recipe-leftbar-row__unread-count-badge":t.shouldApplyCustomStyleForCountBadge}],attrs:{kind:"count",type:"bulletin","data-qa":"dt-recipe-leftbar-row-unread-badge"}},[t._v(" "+t._s(t.unreadCount)+" ")]):t._e(),t.showUnreadMentionCount?e("dt-badge",{class:["d-recipe-leftbar-row__unread-badge",{"d-recipe-leftbar-row__unread-mention-count-badge":t.shouldApplyCustomStyleForCountBadge},{"d-recipe-leftbar-row__unread-mention-only-count-badge":t.shouldApplyCustomStyleForMentionOnly}],attrs:{kind:"count",type:"bulletin","data-qa":"dt-recipe-leftbar-row-unread-mention-badge"}},[t._v(" "+t._s(t.unreadMentionCount)+" ")]):t._e()]},proxy:!0}],null,!1,715135836)}):t._e(),t.hasCallButton?e("div",{staticClass:"d-recipe-leftbar-row__action",attrs:{"data-qa":"dt-recipe-leftbar-row-action"}},[e("dt-tooltip",{attrs:{message:t.callButtonTooltip,placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("dt-button",{staticClass:"d-recipe-leftbar-row__action-button",attrs:{"data-qa":"dt-recipe-leftbar-row-action-call-button",circle:"",size:"xs",kind:"inverted","aria-label":t.callButtonTooltip},on:{focus:function(r){t.actionFocused=!0},blur:function(r){t.actionFocused=!1},click:function(r){return r.stopPropagation(),t.$emit("call",r)}},scopedSlots:t._u([{key:"icon",fn:function(){return[e("dt-icon-phone",{attrs:{size:"200"}})]},proxy:!0}],null,!1,2193255039)})]},proxy:!0}],null,!1,3837984112)})],1):t._e()],1):t._e()])},g=[],m=f.n(w,y,g);const R=m.exports;exports.default=R;
 //# sourceMappingURL=general-row.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"general-row.cjs","sources":["../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"leftbarGeneralRowClasses\"\n data-qa=\"dt-recipe-leftbar-row\"\n >\n <a\n class=\"d-recipe-leftbar-row__primary\"\n :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'd-recipe-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=\"d-recipe-leftbar-row__alpha\"\n >\n <div\n v-if=\"isTyping\"\n v-dt-tooltip=\"typingTooltip\"\n class=\"d-recipe-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-recipe-leftbar-row-icon\"\n />\n </slot>\n </div>\n <div\n class=\"d-recipe-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <slot name=\"label\">\n <dt-emoji-text-wrapper\n class=\"d-recipe-leftbar-row__description\"\n data-qa=\"dt-recipe-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=\"d-recipe-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=\"d-recipe-leftbar-row-dnd\"\n class=\"d-recipe-leftbar-row__dnd\"\n data-qa=\"dt-recipe-leftbar-row-dnd\"\n >\n {{ dndText }}\n </div>\n </template>\n </dt-tooltip>\n <div\n v-if=\"activeVoiceChat\"\n v-dt-tooltip=\"activeVoiceChatTooltip\"\n class=\"d-recipe-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-recipe-leftbar-row-unread-badge\"\n :class=\"['d-recipe-leftbar-row__unread-badge', {\n 'd-recipe-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-recipe-leftbar-row-unread-mention-badge\"\n :class=\"['d-recipe-leftbar-row__unread-badge',\n { 'd-recipe-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n { 'd-recipe-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=\"d-recipe-leftbar-row__action\"\n data-qa=\"dt-recipe-leftbar-row-action\"\n >\n <dt-tooltip\n :message=\"callButtonTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n class=\"d-recipe-leftbar-row__action-button\"\n data-qa=\"dt-recipe-leftbar-row-action-call-button\"\n circle\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';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\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 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 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 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 i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n leftbarGeneralRowClasses () {\n return [\n 'd-recipe-leftbar-row',\n {\n 'd-recipe-leftbar-row--no-action': !this.hasCallButton,\n 'd-recipe-leftbar-row--has-unread': this.hasUnreads,\n 'd-recipe-leftbar-row__unread-count': this.showUnreadCount \|\| this.showUnreadMentionCount,\n 'd-recipe-leftbar-row--selected': this.selected,\n 'd-recipe-leftbar-row--muted': this.muted,\n 'd-recipe-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 if (this.ariaLabel) return this.ariaLabel;\n\n return safeConcatStrings([\n this.typingTooltip,\n this.description,\n this.unreadCountTooltip,\n this.dndTextTooltip,\n this.activeVoiceChatTooltip,\n ]);\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 messageCount () {\n return isNaN(this.unreadCount)\n ? this.unreadCount\n : Number(this.unreadCount);\n },\n\n mentionCount () {\n return isNaN(this.unreadMentionCount)\n ? this.unreadMentionCount\n : Number(this.unreadMentionCount);\n },\n\n unreadCountTooltip () {\n return safeConcatStrings([\n this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n ]);\n },\n\n dndTextTooltip () {\n return this.dndText && this.i18n.$t('DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP');\n },\n\n activeVoiceChatTooltip () {\n return this.activeVoiceChat && this.i18n.$t('DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT');\n },\n\n callButtonTooltip () {\n return this.i18n.$t('DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP');\n },\n\n typingTooltip () {\n return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\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('.d-recipe-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 16;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtIconPhone","DtIconWaveform","DtRecipeLeftbarGeneralRowIcon","type","LEFTBAR_GENERAL_ROW_TYPES","color","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","size","LEFTBAR_GENERAL_ROW_ICON_SIZES","DialtoneLocalization","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":"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"}
1	+ {"version":3,"file":"general-row.cjs","sources":["../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"leftbarGeneralRowClasses\"\n data-qa=\"dt-recipe-leftbar-row\"\n >\n <a\n class=\"d-recipe-leftbar-row__primary\"\n :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'd-recipe-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=\"d-recipe-leftbar-row__alpha\"\n >\n <div\n v-if=\"isTyping\"\n v-dt-tooltip=\"typingTooltip\"\n class=\"d-recipe-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-recipe-leftbar-row-icon\"\n />\n </slot>\n </div>\n <div\n class=\"d-recipe-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <slot name=\"label\">\n <dt-emoji-text-wrapper\n class=\"d-recipe-leftbar-row__description\"\n data-qa=\"dt-recipe-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=\"d-recipe-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=\"d-recipe-leftbar-row-dnd\"\n class=\"d-recipe-leftbar-row__dnd\"\n data-qa=\"dt-recipe-leftbar-row-dnd\"\n >\n {{ dndText }}\n </div>\n </template>\n </dt-tooltip>\n <div\n v-if=\"activeVoiceChat\"\n v-dt-tooltip=\"activeVoiceChatTooltip\"\n class=\"d-recipe-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-recipe-leftbar-row-unread-badge\"\n :class=\"['d-recipe-leftbar-row__unread-badge', {\n 'd-recipe-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-recipe-leftbar-row-unread-mention-badge\"\n :class=\"['d-recipe-leftbar-row__unread-badge',\n { 'd-recipe-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n { 'd-recipe-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=\"d-recipe-leftbar-row__action\"\n data-qa=\"dt-recipe-leftbar-row-action\"\n >\n <dt-tooltip\n :message=\"callButtonTooltip\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n class=\"d-recipe-leftbar-row__action-button\"\n data-qa=\"dt-recipe-leftbar-row-action-call-button\"\n circle\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';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\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 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 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 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 i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n leftbarGeneralRowClasses () {\n return [\n 'd-recipe-leftbar-row',\n {\n 'd-recipe-leftbar-row--no-action': !this.hasCallButton,\n 'd-recipe-leftbar-row--has-unread': this.hasUnreads,\n 'd-recipe-leftbar-row__unread-count': this.showUnreadCount \|\| this.showUnreadMentionCount,\n 'd-recipe-leftbar-row--selected': this.selected,\n 'd-recipe-leftbar-row--muted': this.muted,\n 'd-recipe-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 if (this.ariaLabel) return this.ariaLabel;\n\n return safeConcatStrings([\n this.typingTooltip,\n this.description,\n this.unreadCountTooltip,\n this.dndTextTooltip,\n this.activeVoiceChatTooltip,\n ]);\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 messageCount () {\n return isNaN(this.unreadCount)\n ? this.unreadCount\n : Number(this.unreadCount);\n },\n\n mentionCount () {\n return isNaN(this.unreadMentionCount)\n ? this.unreadMentionCount\n : Number(this.unreadMentionCount);\n },\n\n unreadCountTooltip () {\n return safeConcatStrings([\n this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n ]);\n },\n\n dndTextTooltip () {\n return this.dndText && this.i18n.$t('DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP');\n },\n\n activeVoiceChatTooltip () {\n return this.activeVoiceChat && this.i18n.$t('DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT');\n },\n\n callButtonTooltip () {\n return this.i18n.$t('DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP');\n },\n\n typingTooltip () {\n return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\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('.d-recipe-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 16;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtIconPhone","DtIconWaveform","DtRecipeLeftbarGeneralRowIcon","type","LEFTBAR_GENERAL_ROW_TYPES","color","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","size","LEFTBAR_GENERAL_ROW_ICON_SIZES","DialtoneLocalization","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":"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"}

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

@@ -1,22 +1,22 @@
-import { LEFTBAR_GENERAL_ROW_TYPES as n, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as c, LEFTBAR_GENERAL_ROW_ICON_SIZES as h, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR as _ } from "./general-row-constants.js";
-import { DtIconPhone as f, DtIconWaveform as C } from "@dialpad/dialtone-icons/vue2";
+import { LEFTBAR_GENERAL_ROW_TYPES as n, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as c, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR as h, LEFTBAR_GENERAL_ROW_ICON_SIZES as _ } from "./general-row-constants.js";
+import { DtIconWaveform as f, DtIconPhone as C } from "@dialpad/dialtone-icons/vue2";
 import b from "./leftbar-general-row-icon.js";
 import { safeConcatStrings as p } from "../../common/utils/index.js";
 import { DialtoneLocalization as T } from "../../localization/index.js";
 import { n as m } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import y from "../emoji-text-wrapper/emoji-text-wrapper.js";
-import w from "../badge/badge.js";
-import v from "../button/button.js";
-import g from "../tooltip/tooltip.js";
+import y from "../tooltip/tooltip.js";
+import w from "../button/button.js";
+import v from "../badge/badge.js";
+import g from "../emoji-text-wrapper/emoji-text-wrapper.js";
 const E = {
   name: "DtRecipeGeneralRow",
   components: {
-    DtEmojiTextWrapper: y,
-    DtBadge: w,
-    DtButton: v,
-    DtTooltip: g,
-    DtIconPhone: f,
-    DtIconWaveform: C,
+    DtEmojiTextWrapper: g,
+    DtBadge: v,
+    DtButton: w,
+    DtTooltip: y,
+    DtIconPhone: C,
+    DtIconWaveform: f,
     DtRecipeLeftbarGeneralRowIcon: b
   },
   inheritAttrs: !1,
@@ -132,7 +132,7 @@ const E = {
     iconSize: {
       type: String,
       default: "300",
-      validator: (a) => h.includes(a)
+      validator: (a) => _.includes(a)
     }
   },
   emits: [
@@ -260,7 +260,7 @@ const E = {
   },
   methods: {
     validateProps() {
-      this.type === n.CONTACT_CENTER && !Object.keys(c).includes(this.color) && console.error(_);
+      this.type === n.CONTACT_CENTER && !Object.keys(c).includes(this.color) && console.error(h);
     },
     adjustLabelWidth() {
       var o, i, s, l, d, u;