@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
3 lines (2 loc) • 4.2 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue2"),_=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),p=require("../button/button.cjs"),b=require("../badge/badge.cjs"),h=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),f=require("../../common/mixins/localization.cjs"),w={name:"DtRecipeContactCentersRow",components:{DtButton:p.default,DtBadge:b.default,DtEmojiTextWrapper:h.default,DtIconHeadphones:d.DtIconHeadphones,DtIconChevronDown:d.DtIconChevronDown},mixins:[f.default],inheritAttrs:!1,props:{ariaLabel:{type:String,default:""},description:{type:String,required:!0},selected:{type:Boolean,default:!1},hideActions:{type:Boolean,default:!1},unreadCount:{type:String,default:null,validator(r){return r?/^\d+\+?$/.test(r):!0}}},emits:["click","click-menu"],data(){return{labelWidth:"auto"}},computed:{leftbarContactCentersRowClasses(){return["d-recipe-leftbar-row","d-recipe-leftbar-row--contact-centers",{"d-recipe-leftbar-row__unread-count":this.showUnreadCount,"d-recipe-leftbar-row--selected":this.selected}]},getAriaLabel(){const r=isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount);return this.ariaLabel?this.ariaLabel:u.safeConcatStrings([this.description,this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT",{unreadCount:r})])},showUnreadCount(){return!!this.unreadCount},menuButtonLabel(){return this.i18n.$t("DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL")}},watch:{$props:{deep:!0,async handler(){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:{adjustLabelWidth(){var i,s,n,o,c,l;const r=((s=(i=this.$el)==null?void 0:i.querySelector(".d-recipe-leftbar-row__primary"))==null?void 0:s.clientWidth)||0,e=((o=(n=this.$el)==null?void 0:n.querySelector(".d-recipe-leftbar-row__omega"))==null?void 0:o.clientWidth)||0,t=((l=(c=this.$el)==null?void 0:c.querySelector(".d-recipe-leftbar-row__alpha"))==null?void 0:l.clientWidth)||0,a=12;this.labelWidth=r-(e+t+a)+"px"}}};var m=function(){var e=this,t=e._self._c;return t("div",{class:["d-recipe-leftbar-row__container",{"d-recipe-leftbar-row__container--off-duty":e.$slots.timer}]},[t("div",{class:e.leftbarContactCentersRowClasses,attrs:{"data-qa":"dt-recipe-contact-centers-row"}},[t("a",e._g(e._b({staticClass:"d-recipe-leftbar-row__primary",attrs:{"data-qa":e.$attrs["data-qa"]??"d-recipe-leftbar-row-link","aria-label":e.getAriaLabel,title:e.description,href:e.$attrs.href??"javascript:void(0)"}},"a",e.$attrs,!1),e.$listeners),[t("div",{staticClass:"d-recipe-leftbar-row__alpha"},[t("dt-icon-headphones",{attrs:{size:"300","data-qa":"dt-recipe-leftbar-row-icon"}})],1),t("div",{staticClass:"d-recipe-leftbar-row__label",style:`flex-basis: ${e.labelWidth}`},[t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[e._v(" "+e._s(e.description)+" ")])],1)]),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideActions,expression:"!hideActions"}],staticClass:"d-recipe-leftbar-row__omega"},[e._t("right"),t("div",{staticClass:"d-recipe-leftbar-row__action-container"},[e.showUnreadCount?t("dt-badge",{staticClass:"d-recipe-leftbar-row__unread-badge",attrs:{"data-qa":"dt-recipe-leftbar-row-unread-badge",kind:"count",type:"bulletin"}},[e._v(" "+e._s(e.unreadCount)+" ")]):e._e(),t("dt-button",{staticClass:"d-recipe-leftbar-row__action",attrs:{"data-qa":"dt-recipe-leftbar-row-action-button","aria-label":e.menuButtonLabel,title:e.menuButtonLabel,importance:"clear",size:"xs",circle:""},on:{click:function(a){return a.stopPropagation(),e.$emit("click-menu",a)}},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon-chevron-down",{attrs:{size:"100"}})]},proxy:!0}])})],1)],2)]),t("div",{staticClass:"d-recipe-leftbar-row__bottom"},[e._t("timer")],2)])},C=[],v=_.n(w,m,C);const g=v.exports;exports.default=g;
//# sourceMappingURL=contact-centers-row.cjs.map