@dialpad/dialtone 9.29.0 → 9.30.0

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

@@ -1,2 +1,406 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("./emoji-text-wrapper.cjs"),_=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),p=require("./icon.cjs"),T=require("./utils.cjs"),g=require("./badge.cjs"),E=require("./button.cjs"),R=require("./tooltip.cjs");require("../chunks/index-sdfB7Aok.js");require("emoji-regex");require("emoji-toolkit/emoji_strategy.json");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("@dialpad/dialtone-icons/vue2");require("./constants.cjs");require("vue");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"},o={"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"},b="If type is contact center, color must be oneof the following:"+Object.keys(o).join(", "),h=["300","200"],A={name:"DtRecipeLeftbarGeneralRowIcon",components:{DtIcon:p.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",o[this.color]]},dialbotClasses(){return["d-d-flex","d-ai-center","d-jc-center"]}}};var y=function(){var t=this,e=t._self._c;return t.isIconType?e("dt-icon",{attrs:{name:t.getIconName,size:t.iconSize}}):t.isContactCenterType?e("div",{class:t.contactCenterIconClasses}):t.isDialbotType?e("div",{class:t.dialbotClasses,attrs:{"data-qa":"general-row-dialbot"}},[e("dt-icon",{attrs:{name:"dialbot",size:"500"}})],1):t._e()},N=[],O=_.n(A,y,N,!1,null,null,null,null);const m=O.exports,w={name:"DtRecipeGeneralRow",components:{DtEmojiTextWrapper:C.DtEmojiTextWrapper,DtBadge:g.DtBadge,DtIcon:p.DtIcon,DtButton:E.DtButton,DtTooltip:R.DtTooltip,DtRecipeLeftbarGeneralRowIcon:m},inheritAttrs:!1,props:{type:{type:String,default:"inbox",validator:r=>Object.values(a).includes(r)},ariaLabel:{type:String,default:""},description:{type:String,required:!0},color:{type:String,default:null,validator:r=>Object.keys(o).includes(r)},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:r=>h.includes(r)}},emits:["click","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},getAriaLabel(){return this.ariaLabel?this.ariaLabel:T.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()},beforeDestroy:function(){this.resizeObserver.disconnect()},methods:{validateProps(){this.type===a.CONTACT_CENTER&&!Object.keys(o).includes(this.color)&&console.error(b)},adjustLabelWidth(){var i,s,l,c,d,u;const r=((s=(i=this.$el)==null?void 0:i.querySelector(".dt-leftbar-row__primary"))==null?void 0:s.clientWidth)||0,t=((c=(l=this.$el)==null?void 0:l.querySelector(".dt-leftbar-row__omega"))==null?void 0:c.clientWidth)||0,e=((u=(d=this.$el)==null?void 0:d.querySelector(".dt-leftbar-row__alpha"))==null?void 0:u.clientWidth)||0,n=16;this.labelWidth=r-(t+e+n)+"px"}}};var L=function(){var t=this,e=t._self._c;return e("div",{class:t.leftbarGeneralRowClasses,attrs:{"data-qa":"dt-leftbar-row"}},[e("a",t._g(t._b({staticClass:"dt-leftbar-row__primary",attrs:{"data-qa":"data-qa"in t.$attrs?t.$attrs["data-qa"]:"dt-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:"dt-leftbar-row__alpha"},[t.isTyping?e("div",{staticClass:"dt-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-leftbar-row-icon"}})]})],2),e("div",{staticClass:"dt-leftbar-row__label",style:`flex-basis: ${t.labelWidth}`},[t._t("label",function(){return[e("dt-emoji-text-wrapper",{staticClass:"dt-leftbar-row__description",attrs:{"data-qa":"dt-leftbar-row-description",size:"200"}},[t._v(" "+t._s(t.description)+" ")])]})],2)]),t.hasActions?e("div",{staticClass:"dt-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:"dt-leftbar-row-dnd",staticClass:"dt-leftbar-row__dnd",attrs:{"data-qa":"dt-leftbar-row-dnd"}},[t._v(" "+t._s(t.dndText)+" ")])]},proxy:!0}],null,!1,490758222)}):t._e(),t.activeVoiceChat?e("div",{staticClass:"dt-leftbar-row__active-voice"},[e("dt-icon",{attrs:{size:"300",name:"waveform"}})],1):t.showUnreadCount?e("dt-tooltip",{attrs:{message:t.unreadCountTooltip,placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("dt-badge",{staticClass:"dt-leftbar-row__unread-badge",attrs:{kind:"count",type:"bulletin","data-qa":"dt-leftbar-row-unread-badge"}},[t._v(" "+t._s(t.unreadCount)+" ")])]},proxy:!0}],null,!1,462525554)}):t._e(),t.hasCallButton?e("div",{staticClass:"dt-leftbar-row__action",attrs:{"data-qa":"dt-leftbar-row-action"}},[e("dt-tooltip",{attrs:{message:t.callButtonTooltip,placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("dt-button",{staticClass:"dt-leftbar-row__action-button",attrs:{"data-qa":"dt-leftbar-row-action-call-button",circle:!0,size:"xs",kind:"inverted","aria-label":t.callButtonTooltip},on:{focus:function(n){t.actionFocused=!0},blur:function(n){t.actionFocused=!1},click:function(n){return n.stopPropagation(),t.$emit("call",n)}},scopedSlots:t._u([{key:"icon",fn:function(){return[e("dt-icon",{attrs:{name:"phone",size:"200"}})]},proxy:!0}],null,!1,990728611)})]},proxy:!0}],null,!1,4239858356)})],1):t._e()],1):t._e()])},S=[],v=_.n(w,L,S,!1,null,"ca5d7362",null,null);const I=v.exports;exports.DtRecipeGeneralRow=I;exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS=o;exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR=b;exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING=f;exports.LEFTBAR_GENERAL_ROW_ICON_SIZES=h;exports.LEFTBAR_GENERAL_ROW_TYPES=a;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_emojiTextWrapper = require("./emoji-text-wrapper.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.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("emoji-toolkit/emoji_strategy.json");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./emoji.cjs");
+require("./skeleton.cjs");
+require("@dialpad/dialtone-icons/vue2");
+require("../common/constants.cjs");
+require("vue");
+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"
+      ];
+    }
+  }
+};
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _vm.isIconType ? _c("dt-icon", { attrs: { "name": _vm.getIconName, "size": _vm.iconSize } }) : _vm.isContactCenterType ? _c("div", { class: _vm.contactCenterIconClasses }) : _vm.isDialbotType ? _c("div", { class: _vm.dialbotClasses, attrs: { "data-qa": "general-row-dialbot" } }, [_c("dt-icon", { attrs: { "name": "dialbot", "size": "500" } })], 1) : _vm._e();
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtRecipeLeftbarGeneralRowIcon = __component__$1.exports;
+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: [
+    /**
+     * Native click event on the row itself
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * 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;
+    },
+    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();
+  },
+  beforeDestroy: 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";
+    }
+  }
+};
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: _vm.leftbarGeneralRowClasses, attrs: { "data-qa": "dt-leftbar-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": "data-qa" in _vm.$attrs ? _vm.$attrs["data-qa"] : "dt-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": "href" in _vm.$attrs ? _vm.$attrs.href : "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "dt-leftbar-row__alpha" }, [_vm.isTyping ? _c("div", { staticClass: "dt-leftbar-row__is-typing" }, [_c("span"), _c("span"), _c("span")]) : _vm._t("left", function() {
+    return [_c("dt-recipe-leftbar-general-row-icon", { attrs: { "type": _vm.getIcon, "color": _vm.color, "icon-size": _vm.iconSize, "data-qa": "dt-leftbar-row-icon" } })];
+  })], 2), _c("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_vm._t("label", function() {
+    return [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])];
+  })], 2)]), _vm.hasActions ? _c("div", { staticClass: "dt-leftbar-row__omega" }, [_vm.dndText ? _c("dt-tooltip", { attrs: { "placement": "top", "message": _vm.dndTextTooltip }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("div", { ref: "dt-leftbar-row-dnd", staticClass: "dt-leftbar-row__dnd", attrs: { "data-qa": "dt-leftbar-row-dnd" } }, [_vm._v(" " + _vm._s(_vm.dndText) + " ")])];
+  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon", { attrs: { "size": "300", "name": "waveform" } })], 1) : _vm.showUnreadCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { "kind": "count", "type": "bulletin", "data-qa": "dt-leftbar-row-unread-badge" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")])];
+  }, proxy: true }], null, false, 462525554) }) : _vm._e(), _vm.hasCallButton ? _c("div", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action" } }, [_c("dt-tooltip", { attrs: { "message": _vm.callButtonTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { staticClass: "dt-leftbar-row__action-button", attrs: { "data-qa": "dt-leftbar-row-action-call-button", "circle": true, "size": "xs", "kind": "inverted", "aria-label": _vm.callButtonTooltip }, on: { "focus": function($event) {
+      _vm.actionFocused = true;
+    }, "blur": function($event) {
+      _vm.actionFocused = false;
+    }, "click": function($event) {
+      $event.stopPropagation();
+      return _vm.$emit("call", $event);
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": "phone", "size": "200" } })];
+    }, proxy: true }], null, false, 990728611) })];
+  }, proxy: true }], null, false, 4239858356) })], 1) : _vm._e()], 1) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "ca5d7362",
+  null,
+  null
+);
+const DtRecipeGeneralRow = __component__.exports;
+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/vue2/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=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount\"\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 { 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     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;\n    },\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  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["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","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","type","color","size","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"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=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount\"\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 { 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     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;\n    },\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  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["_sfc_main","DtIcon","TYPES","ICON_MAPPING","COLORS","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","safeConcatStrings"],"mappings":"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"}