@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
3 lines (2 loc) • 8.47 kB
JavaScript
"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