@dialpad/dialtone/dist/vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue.js

Dialpad's Dialtone design system monorepo

import { safeConcatStrings, extractVueListeners, returnFirstEl, removeClassStyleAttrs, addClassStyleAttrs } from "../../../common/utils.js";
import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
import DtIconChevronDown from "@dialpad/dialtone-icons/vue3/chevron-down";
import DtIconHeadphones from "@dialpad/dialtone-icons/vue3/headphones";
import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, toHandlers, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode, withModifiers } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../../../components/button/button.vue.js";
import DtBadge from "../../../components/badge/badge.vue.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeContactCentersRow",
  components: {
    DtButton,
    DtBadge,
    DtEmojiTextWrapper,
    DtIconHeadphones,
    DtIconChevronDown
  },
  inheritAttrs: false,
  props: {
    /**
     * 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.
     */
    description: {
      type: String,
      required: true
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: false
    },
    /**
     * Making this true will hide the unread count badge, the chevron button, and the right slot
     */
    hideActions: {
      type: Boolean,
      default: false
    },
    /**
     * Number of unread messages, could be a string to support '99+'
     */
    unreadCount: {
      type: String,
      default: null
    },
    /**
     * Aria label for the menu button.
     */
    menuButtonAriaLabel: {
      type: String,
      required: true
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Menu button clicked
     *
     * @event call
     * @type {PointerEvent | KeyboardEvent}
     */
    "click-menu"
  ],
  data() {
    return {
      labelWidth: "auto"
    };
  },
  computed: {
    leftbarContactCentersRowClasses() {
      return [
        "d-recipe-leftbar-row",
        "d-recipe-leftbar-row--contact-centers",
        {
          "d-recipe-leftbar-row__unread-count": this.showUnreadCount,
          "d-recipe-leftbar-row--selected": this.selected
        }
      ];
    },
    getAriaLabel() {
      return this.ariaLabel ? this.ariaLabel : safeConcatStrings([this.description, this.unreadCountTooltip]);
    },
    contactRowListeners() {
      return extractVueListeners(this.$attrs);
    },
    showUnreadCount() {
      return !!this.unreadCount;
    }
  },
  watch: {
    $props: {
      deep: true,
      async handler() {
        await this.$nextTick();
        this.adjustLabelWidth();
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);
    this.resizeObserver.observe(returnFirstEl(this.$el));
    this.adjustLabelWidth();
  },
  beforeUnmount: function() {
    this.resizeObserver.disconnect();
  },
  methods: {
    removeClassStyleAttrs,
    addClassStyleAttrs,
    adjustLabelWidth() {
      var _a, _b, _c, _d, _e, _f;
      const labelWidth = ((_b = (_a = returnFirstEl(this.$el)) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
      const omegaWidth = ((_d = (_c = returnFirstEl(this.$el)) == null ? void 0 : _c.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
      const alphaWidth = ((_f = (_e = returnFirstEl(this.$el)) == null ? void 0 : _e.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
      const paddings = 12;
      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
    }
  }
};
const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
const _hoisted_2 = { class: "d-recipe-leftbar-row__alpha" };
const _hoisted_3 = {
  key: 0,
  class: "d-recipe-leftbar-row__omega"
};
const _hoisted_4 = { class: "d-recipe-leftbar-row__action-container" };
const _hoisted_5 = { class: "d-recipe-leftbar-row__bottom" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_icon_headphones = resolveComponent("dt-icon-headphones");
  const _component_dt_emoji_text_wrapper = resolveComponent("dt-emoji-text-wrapper");
  const _component_dt_badge = resolveComponent("dt-badge");
  const _component_dt_icon_chevron_down = resolveComponent("dt-icon-chevron-down");
  const _component_dt_button = resolveComponent("dt-button");
  return openBlock(), createElementBlock("div", mergeProps({
    class: [
      "d-recipe-leftbar-row__container",
      { "d-recipe-leftbar-row__container--off-duty": _ctx.$slots.timer }
    ]
  }, $options.addClassStyleAttrs(_ctx.$attrs)), [
    createElementVNode("div", {
      class: normalizeClass($options.leftbarContactCentersRowClasses),
      "data-qa": "dt-recipe-contact-centers-row"
    }, [
      createElementVNode("a", mergeProps({
        class: "d-recipe-leftbar-row__primary",
        "data-qa": _ctx.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
        "aria-label": $options.getAriaLabel,
        title: $props.description,
        href: _ctx.$attrs.href ?? "javascript:void(0)"
      }, $options.removeClassStyleAttrs(_ctx.$attrs), toHandlers($options.contactRowListeners, true), {
        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
      }), [
        createElementVNode("div", _hoisted_2, [
          createVNode(_component_dt_icon_headphones, {
            size: "300",
            "data-qa": "dt-recipe-leftbar-row-icon"
          })
        ]),
        createElementVNode("div", {
          class: "d-recipe-leftbar-row__label",
          style: normalizeStyle(`flex-basis: ${$data.labelWidth}`)
        }, [
          createVNode(_component_dt_emoji_text_wrapper, {
            class: "d-recipe-leftbar-row__description",
            "data-qa": "dt-recipe-leftbar-row-description",
            size: "200"
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString($props.description), 1)
            ]),
            _: 1
          })
        ], 4)
      ], 16, _hoisted_1),
      !$props.hideActions ? (openBlock(), createElementBlock("div", _hoisted_3, [
        renderSlot(_ctx.$slots, "right"),
        createElementVNode("div", _hoisted_4, [
          $options.showUnreadCount ? (openBlock(), createBlock(_component_dt_badge, {
            key: 0,
            class: "d-recipe-leftbar-row__unread-badge",
            "data-qa": "dt-recipe-leftbar-row-unread-badge",
            kind: "count",
            type: "bulletin"
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString($props.unreadCount), 1)
            ]),
            _: 1
          })) : createCommentVNode("", true),
          createVNode(_component_dt_button, {
            class: "d-recipe-leftbar-row__action",
            "data-qa": "dt-recipe-leftbar-row-action-button",
            "aria-label": $props.menuButtonAriaLabel,
            importance: "clear",
            size: "xs",
            circle: "",
            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("click-menu", $event), ["stop"]))
          }, {
            icon: withCtx(() => [
              createVNode(_component_dt_icon_chevron_down, { size: "100" })
            ]),
            _: 1
          }, 8, ["aria-label"])
        ])
      ])) : createCommentVNode("", true)
    ], 2),
    createElementVNode("div", _hoisted_5, [
      renderSlot(_ctx.$slots, "timer")
    ])
  ], 16);
}
const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  contact_centers_row as default
};
//# sourceMappingURL=contact_centers_row.vue.js.map