@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/recipes/leftbar/general_row/general_row.vue.cjs

@@ -0,0 +1,441 @@
+"use strict";
+const general_row_constants = require("./general_row_constants.cjs");
+const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
+const leftbar_general_row_icon = require("./leftbar_general_row_icon.vue.cjs");
+const common_utils = require("../../../common/utils.cjs");
+const vue = require("vue");
+;/* empty css                   */
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const badge = require("../../../components/badge/badge.vue.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
+const button = require("../../../components/button/button.vue.cjs");
+const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
+const _sfc_main = {
+  name: "DtRecipeGeneralRow",
+  components: {
+    DtEmojiTextWrapper: emoji_text_wrapper,
+    DtBadge: badge,
+    DtIcon: icon,
+    DtButton: button,
+    DtTooltip: tooltip,
+    DtRecipeLeftbarGeneralRowIcon: leftbar_general_row_icon
+  },
+  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(general_row_constants.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(general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);
+      }
+    },
+    /**
+     * The channel setting, either 'mention' or 'always'.
+     * @values 'mention', 'always', null.
+     */
+    channelSetting: {
+      type: String,
+      default: null
+    },
+    /**
+     * 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
+    },
+    /**
+     * Number of unread mention messages
+     */
+    unreadMentionCount: {
+      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 general_row_constants.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 || this.showUnreadMentionCount,
+          "dt-leftbar-row--selected": this.selected,
+          "dt-leftbar-row--muted": this.muted,
+          "dt-leftbar-row--action-focused": this.actionFocused
+        }
+      ];
+    },
+    getIcon() {
+      switch (this.type) {
+        case general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:
+          if (this.hasUnreads) return "channel unread";
+          break;
+        case general_row_constants.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 || this.showUnreadMentionCount;
+    },
+    showUnreadCount() {
+      return !!this.unreadCount && this.hasUnreads;
+    },
+    showUnreadMentionCount() {
+      return !!this.unreadMentionCount && this.hasUnreads;
+    },
+    hasUnreadCount() {
+      return this.unreadCount !== null;
+    },
+    hasUnreadMentionCount() {
+      return this.unreadMentionCount !== null;
+    },
+    shouldApplyCustomStyleForCountBadge() {
+      return this.hasUnreadCount && this.hasUnreadMentionCount;
+    },
+    /**
+     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,
+     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).
+     * @returns {boolean}
+     */
+    shouldApplyCustomStyleForMentionOnly() {
+      return this.channelSetting === "always" && !this.hasUnreadCount && this.hasUnreadMentionCount;
+    }
+  },
+  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 === general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER && !Object.keys(general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {
+        console.error(general_row_constants.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-b6629526"), 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 || $options.showUnreadMentionCount ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+        key: 2,
+        message: $props.unreadCountTooltip,
+        placement: "top"
+      }, {
+        anchor: vue.withCtx(() => [
+          $options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
+            key: 0,
+            kind: "count",
+            type: "bulletin",
+            "data-qa": "dt-leftbar-row-unread-badge",
+            class: vue.normalizeClass(["dt-leftbar-row__unread-badge", {
+              "dt-leftbar-row__unread-count-badge": $options.shouldApplyCustomStyleForCountBadge
+            }])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.unreadCount), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : vue.createCommentVNode("", true),
+          $options.showUnreadMentionCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
+            key: 1,
+            kind: "count",
+            type: "bulletin",
+            "data-qa": "dt-leftbar-row-unread-mention-badge",
+            class: vue.normalizeClass([
+              "dt-leftbar-row__unread-badge",
+              { "dt-leftbar-row__unread-mention-count-badge": $options.shouldApplyCustomStyleForCountBadge },
+              { "dt-leftbar-row__unread-mention-only-count-badge": $options.shouldApplyCustomStyleForMentionOnly }
+            ])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.unreadMentionCount), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 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(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b6629526"]]);
+module.exports = DtRecipeGeneralRow;
+//# sourceMappingURL=general_row.vue.cjs.map

package/dist/recipes/leftbar/general_row/general_row.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"general_row.vue.cjs","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<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 || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"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     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * 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 || this.showUnreadMentionCount,\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        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\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":["DtEmojiTextWrapper","DtBadge","DtIcon","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_ICON_SIZES","extractVueListeners","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","_createElementVNode","_createElementBlock","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createVNode","_createBlock","_normalizeClass","_withModifiers"],"mappings":"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"}