@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/general-row.cjs

@@ -1,2 +1,519 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("./emoji-text-wrapper.cjs"),e=require("vue"),C=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),m=require("./icon.cjs"),b=require("./utils.cjs"),y=require("./badge.cjs"),w=require("./button.cjs"),A=require("./tooltip.cjs");require("../chunks/index-IBtQ5jRJ.js");require("emoji-regex");require("@dialpad/dialtone-emojis");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("@dialpad/dialtone-icons/vue3");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");const a={INBOX:"inbox",CONTACTS:"contacts",CHANNELS:"channels",HOME:"home",THREADS:"threads",LOCKED_CHANNEL:"locked channel",CONTACT_CENTER:"contact center",QUICK_START:"quick start",COACHING_GROUP:"coaching group",COACHING_CENTER:"coaching center",DIALBOT:"dialbot",ASSIGNED:"assigned",DIGITAL:"digital"},f={[a.INBOX]:"inbox",[a.CONTACTS]:"contacts",[a.CHANNELS]:"hash",[a.HOME]:"home",[a.THREADS]:"thread",[a.LOCKED_CHANNEL]:"lock",[a.QUICK_START]:"sparkle",[a.COACHING_GROUP]:"users",[a.COACHING_CENTER]:"external-link","locked channel unread":"lock-filled","channel unread":"hash-bold",[a.ASSIGNED]:"at-sign",[a.DIGITAL]:"laptop-2"},d={"magenta-200":"d-bgc-magenta-200","green-200":"d-bgc-green-200","gold-300":"d-bgc-gold-300","purple-600":"d-bgc-purple-600","magenta-300":"d-bgc-magenta-300","purple-300":"d-bgc-purple-300","green-500":"d-bgc-green-500","purple-100":"d-bgc-purple-100","magenta-400":"d-bgc-magenta-400","magenta-100":"d-bgc-magenta-100","black-300":"d-bgc-black-300"},T="If type is contact center, color must be oneof the following:"+Object.keys(d).join(", "),E=["300","200"],O={name:"DtRecipeLeftbarGeneralRowIcon",components:{DtIcon:m.DtIcon},props:{type:{type:String,default:null},color:{type:String,default:null},iconSize:{type:String,default:"300"}},computed:{isIconType(){return![a.DIALBOT,a.CONTACT_CENTER].includes(this.type)},isContactCenterType(){return this.type===a.CONTACT_CENTER},isDialbotType(){return this.type===a.DIALBOT},getIconName(){return f[this.type]},contactCenterIconClasses(){return["dt-leftbar-row__icon-cc",d[this.color]]},dialbotClasses(){return["d-d-flex","d-ai-center","d-jc-center"]}}};function B(t,r,o,_,l,n){const i=e.resolveComponent("dt-icon");return n.isIconType?(e.openBlock(),e.createBlock(i,{key:0,name:n.getIconName,size:o.iconSize},null,8,["name","size"])):n.isContactCenterType?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(n.contactCenterIconClasses)},null,2)):n.isDialbotType?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(n.dialbotClasses),"data-qa":"general-row-dialbot"},[e.createVNode(i,{name:"dialbot",size:"500"})],2)):e.createCommentVNode("",!0)}const S=C._(O,[["render",B]]),L={name:"DtRecipeGeneralRow",components:{DtEmojiTextWrapper:R.DtEmojiTextWrapper,DtBadge:y.DtBadge,DtIcon:m.DtIcon,DtButton:w.DtButton,DtTooltip:A.DtTooltip,DtRecipeLeftbarGeneralRowIcon:S},inheritAttrs:!1,props:{type:{type:String,default:"inbox",validator:t=>Object.values(a).includes(t)},ariaLabel:{type:String,default:""},description:{type:String,required:!0},color:{type:String,default:null,validator:t=>Object.keys(d).includes(t)},hasUnreads:{type:Boolean,default:!1},unreadCount:{type:String,default:null},unreadCountTooltip:{type:String,default:""},selected:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},activeVoiceChat:{type:Boolean,default:!1},dndText:{type:String,default:""},dndTextTooltip:{type:String,default:""},hasCallButton:{type:Boolean,default:!1},callButtonTooltip:{type:String,default:""},isTyping:{type:Boolean,default:!1},iconSize:{type:String,default:"300",validator:t=>E.includes(t)}},emits:["call"],data(){return{actionFocused:!1,labelWidth:"100%"}},computed:{leftbarGeneralRowClasses(){return["dt-leftbar-row",{"dt-leftbar-row--no-action":!this.hasCallButton,"dt-leftbar-row--has-unread":this.hasUnreads,"dt-leftbar-row--unread-count":this.showUnreadCount,"dt-leftbar-row--selected":this.selected,"dt-leftbar-row--muted":this.muted,"dt-leftbar-row--action-focused":this.actionFocused}]},getIcon(){switch(this.type){case a.CHANNELS:if(this.hasUnreads)return"channel unread";break;case a.LOCKED_CHANNEL:if(this.hasUnreads)return"locked channel unread";break}return this.type},generalRowListeners(){return b.extractVueListeners(this.$attrs)},getAriaLabel(){return this.ariaLabel?this.ariaLabel:b.safeConcatStrings([this.description,this.unreadCountTooltip,this.dndTextTooltip])},hasActions(){return this.dndText||this.activeVoiceChat||this.showUnreadCount||this.hasCallButton},showUnreadCount(){return!!this.unreadCount&&this.hasUnreads}},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()},beforeUnmount:function(){this.resizeObserver.disconnect()},methods:{validateProps(){this.type===a.CONTACT_CENTER&&!Object.keys(d).includes(this.color)&&console.error(T)},adjustLabelWidth(){var l,n,i,u,s,c;const t=((n=(l=this.$el)==null?void 0:l.querySelector(".dt-leftbar-row__primary"))==null?void 0:n.clientWidth)||0,r=((u=(i=this.$el)==null?void 0:i.querySelector(".dt-leftbar-row__omega"))==null?void 0:u.clientWidth)||0,o=((c=(s=this.$el)==null?void 0:s.querySelector(".dt-leftbar-row__alpha"))==null?void 0:c.clientWidth)||0,_=16;this.labelWidth=t-(r+o+_)+"px"}}},h=t=>(e.pushScopeId("data-v-49d75ce6"),t=t(),e.popScopeId(),t),k=["data-qa","aria-label","title","href"],I={class:"dt-leftbar-row__alpha"},v={key:0,class:"dt-leftbar-row__is-typing"},q=h(()=>e.createElementVNode("span",null,null,-1)),D=h(()=>e.createElementVNode("span",null,null,-1)),G=h(()=>e.createElementVNode("span",null,null,-1)),V=[q,D,G],W={key:0,class:"dt-leftbar-row__omega"},x={key:1,class:"dt-leftbar-row__active-voice"},z={key:3,class:"dt-leftbar-row__action","data-qa":"dt-leftbar-row-action"};function j(t,r,o,_,l,n){const i=e.resolveComponent("dt-recipe-leftbar-general-row-icon"),u=e.resolveComponent("dt-emoji-text-wrapper"),s=e.resolveComponent("dt-tooltip"),c=e.resolveComponent("dt-icon"),g=e.resolveComponent("dt-badge"),N=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n.leftbarGeneralRowClasses),"data-qa":"dt-leftbar-row"},[e.createElementVNode("a",e.mergeProps({class:"dt-leftbar-row__primary","data-qa":"data-qa"in t.$attrs?t.$attrs["data-qa"]:"dt-leftbar-row-link","aria-label":n.getAriaLabel,title:o.description,href:"href"in t.$attrs?t.$attrs.href:"javascript:void(0)"},t.$attrs,e.toHandlers(n.generalRowListeners,!0)),[e.createElementVNode("div",I,[o.isTyping?(e.openBlock(),e.createElementBlock("div",v,V)):e.renderSlot(t.$slots,"left",{key:1},()=>[e.createVNode(i,{type:n.getIcon,color:o.color,"icon-size":o.iconSize,"data-qa":"dt-leftbar-row-icon"},null,8,["type","color","icon-size"])],!0)]),e.createElementVNode("div",{class:"dt-leftbar-row__label",style:e.normalizeStyle(`flex-basis: ${l.labelWidth}`)},[e.renderSlot(t.$slots,"label",{},()=>[e.createVNode(u,{class:"dt-leftbar-row__description","data-qa":"dt-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.description),1)]),_:1})],!0)],4)],16,k),n.hasActions?(e.openBlock(),e.createElementBlock("div",W,[o.dndText?(e.openBlock(),e.createBlock(s,{key:0,placement:"top",message:o.dndTextTooltip},{anchor:e.withCtx(()=>[e.createElementVNode("div",{ref:"dt-leftbar-row-dnd",class:"dt-leftbar-row__dnd","data-qa":"dt-leftbar-row-dnd"},e.toDisplayString(o.dndText),513)]),_:1},8,["message"])):e.createCommentVNode("",!0),o.activeVoiceChat?(e.openBlock(),e.createElementBlock("div",x,[e.createVNode(c,{size:"300",name:"waveform"})])):n.showUnreadCount?(e.openBlock(),e.createBlock(s,{key:2,message:o.unreadCountTooltip,placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(g,{kind:"count",type:"bulletin","data-qa":"dt-leftbar-row-unread-badge",class:"dt-leftbar-row__unread-badge"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.unreadCount),1)]),_:1})]),_:1},8,["message"])):e.createCommentVNode("",!0),o.hasCallButton?(e.openBlock(),e.createElementBlock("div",z,[e.createVNode(s,{message:o.callButtonTooltip,placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(N,{class:"dt-leftbar-row__action-button","data-qa":"dt-leftbar-row-action-call-button",circle:!0,size:"xs",kind:"inverted","aria-label":o.callButtonTooltip,onFocus:r[0]||(r[0]=p=>l.actionFocused=!0),onBlur:r[1]||(r[1]=p=>l.actionFocused=!1),onClick:r[2]||(r[2]=e.withModifiers(p=>t.$emit("call",p),["stop"]))},{icon:e.withCtx(()=>[e.createVNode(c,{name:"phone",size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2)}const H=C._(L,[["render",j],["__scopeId","data-v-49d75ce6"]]);exports.DtRecipeGeneralRow=H;exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS=d;exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR=T;exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING=f;exports.LEFTBAR_GENERAL_ROW_ICON_SIZES=E;exports.LEFTBAR_GENERAL_ROW_TYPES=a;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_emojiTextWrapper = require("./emoji-text-wrapper.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_icon = require("./icon.cjs");
+const common_utils = require("../common/utils.cjs");
+const lib_badge = require("./badge.cjs");
+const lib_button = require("./button.cjs");
+const lib_tooltip = require("./tooltip.cjs");
+require("../common/emoji.cjs");
+require("emoji-regex");
+require("@dialpad/dialtone-emojis");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./emoji.cjs");
+require("./skeleton.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("./lazy-show.cjs");
+const LEFTBAR_GENERAL_ROW_TYPES = {
+  INBOX: "inbox",
+  CONTACTS: "contacts",
+  CHANNELS: "channels",
+  HOME: "home",
+  THREADS: "threads",
+  LOCKED_CHANNEL: "locked channel",
+  CONTACT_CENTER: "contact center",
+  QUICK_START: "quick start",
+  COACHING_GROUP: "coaching group",
+  COACHING_CENTER: "coaching center",
+  DIALBOT: "dialbot",
+  ASSIGNED: "assigned",
+  DIGITAL: "digital"
+};
+const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: "inbox",
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: "contacts",
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: "hash",
+  [LEFTBAR_GENERAL_ROW_TYPES.HOME]: "home",
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: "thread",
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: "lock",
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: "sparkle",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: "users",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: "external-link",
+  "locked channel unread": "lock-filled",
+  "channel unread": "hash-bold",
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: "at-sign",
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: "laptop-2"
+};
+const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
+  "magenta-200": "d-bgc-magenta-200",
+  "green-200": "d-bgc-green-200",
+  "gold-300": "d-bgc-gold-300",
+  "purple-600": "d-bgc-purple-600",
+  "magenta-300": "d-bgc-magenta-300",
+  "purple-300": "d-bgc-purple-300",
+  "green-500": "d-bgc-green-500",
+  "purple-100": "d-bgc-purple-100",
+  "magenta-400": "d-bgc-magenta-400",
+  "magenta-100": "d-bgc-magenta-100",
+  "black-300": "d-bgc-black-300"
+};
+const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = "If type is contact center, color must be oneof the following:" + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(", ");
+const LEFTBAR_GENERAL_ROW_ICON_SIZES = [
+  "300",
+  "200"
+];
+const _sfc_main$1 = {
+  name: "DtRecipeLeftbarGeneralRowIcon",
+  components: { DtIcon: lib_icon.DtIcon },
+  props: {
+    type: {
+      type: String,
+      default: null
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    iconSize: {
+      type: String,
+      default: "300"
+    }
+  },
+  computed: {
+    isIconType() {
+      return ![LEFTBAR_GENERAL_ROW_TYPES.DIALBOT, LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER].includes(this.type);
+    },
+    isContactCenterType() {
+      return this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER;
+    },
+    isDialbotType() {
+      return this.type === LEFTBAR_GENERAL_ROW_TYPES.DIALBOT;
+    },
+    getIconName() {
+      return LEFTBAR_GENERAL_ROW_ICON_MAPPING[this.type];
+    },
+    contactCenterIconClasses() {
+      return [
+        "dt-leftbar-row__icon-cc",
+        LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS[this.color]
+      ];
+    },
+    dialbotClasses() {
+      return [
+        "d-d-flex",
+        "d-ai-center",
+        "d-jc-center"
+      ];
+    }
+  }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  return $options.isIconType ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+    key: 0,
+    name: $options.getIconName,
+    size: $props.iconSize
+  }, null, 8, ["name", "size"])) : $options.isContactCenterType ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 1,
+    class: vue.normalizeClass($options.contactCenterIconClasses)
+  }, null, 2)) : $options.isDialbotType ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 2,
+    class: vue.normalizeClass($options.dialbotClasses),
+    "data-qa": "general-row-dialbot"
+  }, [
+    vue.createVNode(_component_dt_icon, {
+      name: "dialbot",
+      size: "500"
+    })
+  ], 2)) : vue.createCommentVNode("", true);
+}
+const DtRecipeLeftbarGeneralRowIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "DtRecipeGeneralRow",
+  components: {
+    DtEmojiTextWrapper: lib_emojiTextWrapper.DtEmojiTextWrapper,
+    DtBadge: lib_badge.DtBadge,
+    DtIcon: lib_icon.DtIcon,
+    DtButton: lib_button.DtButton,
+    DtTooltip: lib_tooltip.DtTooltip,
+    DtRecipeLeftbarGeneralRowIcon
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Determines the icon to show.
+     * If type is contact center, the color prop must be provided and will determine the color of the icon
+     */
+    type: {
+      type: String,
+      default: "inbox",
+      validator: (type) => {
+        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);
+      }
+    },
+    /**
+     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot
+     * you still must input this as it will be displayed as the "title" attribute for the row.
+     */
+    description: {
+      type: String,
+      required: true
+    },
+    /**
+     * Determines the color of the contact center icon
+     */
+    color: {
+      type: String,
+      default: null,
+      validator: (color) => {
+        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);
+      }
+    },
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Gives a faded style to be used when muted
+     */
+    muted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Shows styling to represent an active voice chat. This will display over unreadCount.
+     */
+    activeVoiceChat: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Acronym used to represent "Do not Disturb" state. If entered will display the entered text alongside
+     * unreadCount.
+     */
+    dndText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text shown in tooltip when you hover the dndText
+     */
+    dndTextTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the row should have a call button. Usually only applicable to individual contact rows.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Text shown when the call button is hovered.
+     */
+    callButtonTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Sets the size of the icon.
+     */
+    iconSize: {
+      type: String,
+      default: "300",
+      validator: (size) => {
+        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);
+      }
+    }
+  },
+  emits: [
+    /**
+     * Call button clicked
+     *
+     * @event call
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "call"
+  ],
+  data() {
+    return {
+      actionFocused: false,
+      labelWidth: "100%"
+    };
+  },
+  computed: {
+    leftbarGeneralRowClasses() {
+      return [
+        "dt-leftbar-row",
+        {
+          "dt-leftbar-row--no-action": !this.hasCallButton,
+          "dt-leftbar-row--has-unread": this.hasUnreads,
+          "dt-leftbar-row--unread-count": this.showUnreadCount,
+          "dt-leftbar-row--selected": this.selected,
+          "dt-leftbar-row--muted": this.muted,
+          "dt-leftbar-row--action-focused": this.actionFocused
+        }
+      ];
+    },
+    getIcon() {
+      switch (this.type) {
+        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:
+          if (this.hasUnreads)
+            return "channel unread";
+          break;
+        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:
+          if (this.hasUnreads)
+            return "locked channel unread";
+          break;
+      }
+      return this.type;
+    },
+    generalRowListeners() {
+      return common_utils.extractVueListeners(this.$attrs);
+    },
+    getAriaLabel() {
+      return this.ariaLabel ? this.ariaLabel : common_utils.safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
+    },
+    hasActions() {
+      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;
+    },
+    showUnreadCount() {
+      return !!this.unreadCount && this.hasUnreads;
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+      async handler() {
+        this.validateProps();
+        await this.$nextTick();
+        this.adjustLabelWidth();
+      }
+    }
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);
+    this.resizeObserver.observe(this.$el);
+    this.adjustLabelWidth();
+  },
+  beforeUnmount: function() {
+    this.resizeObserver.disconnect();
+  },
+  methods: {
+    validateProps() {
+      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER && !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {
+        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);
+      }
+    },
+    adjustLabelWidth() {
+      var _a, _b, _c, _d, _e, _f;
+      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
+      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
+      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
+      const paddings = 16;
+      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
+    }
+  }
+};
+const _withScopeId = (n) => (vue.pushScopeId("data-v-49d75ce6"), n = n(), vue.popScopeId(), n);
+const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
+const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
+const _hoisted_3 = {
+  key: 0,
+  class: "dt-leftbar-row__is-typing"
+};
+const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", null, null, -1));
+const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", null, null, -1));
+const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", null, null, -1));
+const _hoisted_7 = [
+  _hoisted_4,
+  _hoisted_5,
+  _hoisted_6
+];
+const _hoisted_8 = {
+  key: 0,
+  class: "dt-leftbar-row__omega"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "dt-leftbar-row__active-voice"
+};
+const _hoisted_10 = {
+  key: 3,
+  class: "dt-leftbar-row__action",
+  "data-qa": "dt-leftbar-row-action"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_recipe_leftbar_general_row_icon = vue.resolveComponent("dt-recipe-leftbar-general-row-icon");
+  const _component_dt_emoji_text_wrapper = vue.resolveComponent("dt-emoji-text-wrapper");
+  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_badge = vue.resolveComponent("dt-badge");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass($options.leftbarGeneralRowClasses),
+    "data-qa": "dt-leftbar-row"
+  }, [
+    vue.createElementVNode("a", vue.mergeProps({
+      class: "dt-leftbar-row__primary",
+      "data-qa": "data-qa" in _ctx.$attrs ? _ctx.$attrs["data-qa"] : "dt-leftbar-row-link",
+      "aria-label": $options.getAriaLabel,
+      title: $props.description,
+      href: "href" in _ctx.$attrs ? _ctx.$attrs.href : "javascript:void(0)"
+    }, _ctx.$attrs, vue.toHandlers($options.generalRowListeners, true)), [
+      vue.createElementVNode("div", _hoisted_2, [
+        $props.isTyping ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _hoisted_7)) : vue.renderSlot(_ctx.$slots, "left", { key: 1 }, () => [
+          vue.createVNode(_component_dt_recipe_leftbar_general_row_icon, {
+            type: $options.getIcon,
+            color: $props.color,
+            "icon-size": $props.iconSize,
+            "data-qa": "dt-leftbar-row-icon"
+          }, null, 8, ["type", "color", "icon-size"])
+        ], true)
+      ]),
+      vue.createElementVNode("div", {
+        class: "dt-leftbar-row__label",
+        style: vue.normalizeStyle(`flex-basis: ${$data.labelWidth}`)
+      }, [
+        vue.renderSlot(_ctx.$slots, "label", {}, () => [
+          vue.createVNode(_component_dt_emoji_text_wrapper, {
+            class: "dt-leftbar-row__description",
+            "data-qa": "dt-leftbar-row-description",
+            size: "200"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.description), 1)
+            ]),
+            _: 1
+          })
+        ], true)
+      ], 4)
+    ], 16, _hoisted_1),
+    $options.hasActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+      $props.dndText ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+        key: 0,
+        placement: "top",
+        message: $props.dndTextTooltip
+      }, {
+        anchor: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            ref: "dt-leftbar-row-dnd",
+            class: "dt-leftbar-row__dnd",
+            "data-qa": "dt-leftbar-row-dnd"
+          }, vue.toDisplayString($props.dndText), 513)
+        ]),
+        _: 1
+      }, 8, ["message"])) : vue.createCommentVNode("", true),
+      $props.activeVoiceChat ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+        vue.createVNode(_component_dt_icon, {
+          size: "300",
+          name: "waveform"
+        })
+      ])) : $options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+        key: 2,
+        message: $props.unreadCountTooltip,
+        placement: "top"
+      }, {
+        anchor: vue.withCtx(() => [
+          vue.createVNode(_component_dt_badge, {
+            kind: "count",
+            type: "bulletin",
+            "data-qa": "dt-leftbar-row-unread-badge",
+            class: "dt-leftbar-row__unread-badge"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.unreadCount), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["message"])) : vue.createCommentVNode("", true),
+      $props.hasCallButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+        vue.createVNode(_component_dt_tooltip, {
+          message: $props.callButtonTooltip,
+          placement: "top"
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.createVNode(_component_dt_button, {
+              class: "dt-leftbar-row__action-button",
+              "data-qa": "dt-leftbar-row-action-call-button",
+              circle: true,
+              size: "xs",
+              kind: "inverted",
+              "aria-label": $props.callButtonTooltip,
+              onFocus: _cache[0] || (_cache[0] = ($event) => $data.actionFocused = true),
+              onBlur: _cache[1] || (_cache[1] = ($event) => $data.actionFocused = false),
+              onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => _ctx.$emit("call", $event), ["stop"]))
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon, {
+                  name: "phone",
+                  size: "200"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label"])
+          ]),
+          _: 1
+        }, 8, ["message"])
+      ])) : vue.createCommentVNode("", true)
+    ])) : vue.createCommentVNode("", true)
+  ], 2);
+}
+const DtRecipeGeneralRow = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-49d75ce6"]]);
+exports.DtRecipeGeneralRow = DtRecipeGeneralRow;
+exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
+exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;
+exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING = LEFTBAR_GENERAL_ROW_ICON_MAPPING;
+exports.LEFTBAR_GENERAL_ROW_ICON_SIZES = LEFTBAR_GENERAL_ROW_ICON_SIZES;
+exports.LEFTBAR_GENERAL_ROW_TYPES = LEFTBAR_GENERAL_ROW_TYPES;
 //# sourceMappingURL=general-row.cjs.map

package/dist/lib/general-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"general-row.cjs","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  HOME: 'home',\n  THREADS: 'threads',\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};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.HOME]: 'home',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            class=\"dt-leftbar-row__unread-badge\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * 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     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\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  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_ICON_MAPPING","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","LEFTBAR_GENERAL_ROW_ICON_SIZES","_sfc_main","DtIcon","TYPES","ICON_MAPPING","COLORS","$options","_createBlock","_component_dt_icon","$props","_createElementBlock","_createVNode","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","type","color","size","extractVueListeners","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_2","_createElementVNode","_hoisted_4","_hoisted_5","_hoisted_6","_mergeProps","_ctx","_toHandlers","_openBlock","_hoisted_3","_hoisted_7","_renderSlot","_component_dt_recipe_leftbar_general_row_icon","$data","_component_dt_emoji_text_wrapper","_hoisted_8","_component_dt_tooltip","_hoisted_9","_component_dt_badge","_hoisted_10","_component_dt_button","_cache","_withModifiers","$event"],"mappings":"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"}
+{"version":3,"file":"general-row.cjs","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  HOME: 'home',\n  THREADS: 'threads',\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};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.HOME]: 'home',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            class=\"dt-leftbar-row__unread-badge\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * 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     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\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  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["_sfc_main","DtIcon","TYPES","ICON_MAPPING","COLORS","_createBlock","_createElementBlock","_createVNode","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","extractVueListeners","safeConcatStrings","_createElementVNode","_mergeProps","_toHandlers","_openBlock","_renderSlot","_withModifiers"],"mappings":"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"}