@dialpad/dialtone/dist/vue3/lib/contact-centers-row/contact-centers-row.js

Dialpad's Dialtone design system monorepo

import { safeConcatStrings as k, extractVueListeners as L, returnFirstEl as p, removeClassStyleAttrs as W, addClassStyleAttrs as q } from "../../common/utils/index.js";
import A from "../emoji-text-wrapper/emoji-text-wrapper.js";
import z from "@dialpad/dialtone-icons/vue3/chevron-down";
import $ from "@dialpad/dialtone-icons/vue3/headphones";
import { resolveComponent as i, openBlock as b, createElementBlock as m, mergeProps as w, createElementVNode as o, normalizeClass as B, toHandlers as D, createVNode as u, normalizeStyle as j, withCtx as h, createTextVNode as C, toDisplayString as y, renderSlot as g, createBlock as R, createCommentVNode as v, withModifiers as E } from "vue";
import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import V from "../button/button.js";
import x from "../badge/badge.js";
const N = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeContactCentersRow",
  components: {
    DtButton: V,
    DtBadge: x,
    DtEmojiTextWrapper: A,
    DtIconHeadphones: $,
    DtIconChevronDown: z
  },
  inheritAttrs: !1,
  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: !0
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Making this true will hide the unread count badge, the chevron button, and the right slot
     */
    hideActions: {
      type: Boolean,
      default: !1
    },
    /**
     * 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: !0
    }
  },
  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 : k([this.description, this.unreadCountTooltip]);
    },
    contactRowListeners() {
      return L(this.$attrs);
    },
    showUnreadCount() {
      return !!this.unreadCount;
    }
  },
  watch: {
    $props: {
      deep: !0,
      async handler() {
        await this.$nextTick(), this.adjustLabelWidth();
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(p(this.$el)), this.adjustLabelWidth();
  },
  beforeUnmount: function() {
    this.resizeObserver.disconnect();
  },
  methods: {
    removeClassStyleAttrs: W,
    addClassStyleAttrs: q,
    adjustLabelWidth() {
      var s, t, n, l, d, c;
      const e = ((t = (s = p(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, a = ((l = (n = p(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, r = ((c = (d = p(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, f = 12;
      this.labelWidth = e - (a + r + f) + "px";
    }
  }
}, T = ["data-qa", "aria-label", "title", "href"], U = { class: "d-recipe-leftbar-row__alpha" }, H = {
  key: 0,
  class: "d-recipe-leftbar-row__omega"
}, I = { class: "d-recipe-leftbar-row__action-container" }, M = { class: "d-recipe-leftbar-row__bottom" };
function F(e, a, r, f, s, t) {
  const n = i("dt-icon-headphones"), l = i("dt-emoji-text-wrapper"), d = i("dt-badge"), c = i("dt-icon-chevron-down"), S = i("dt-button");
  return b(), m("div", w({
    class: [
      "d-recipe-leftbar-row__container",
      { "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }
    ]
  }, t.addClassStyleAttrs(e.$attrs)), [
    o("div", {
      class: B(t.leftbarContactCentersRowClasses),
      "data-qa": "dt-recipe-contact-centers-row"
    }, [
      o("a", w({
        class: "d-recipe-leftbar-row__primary",
        "data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
        "aria-label": t.getAriaLabel,
        title: r.description,
        href: e.$attrs.href ?? "javascript:void(0)"
      }, t.removeClassStyleAttrs(e.$attrs), D(t.contactRowListeners, !0), {
        onClick: a[0] || (a[0] = (_) => e.$emit("click", _))
      }), [
        o("div", U, [
          u(n, {
            size: "300",
            "data-qa": "dt-recipe-leftbar-row-icon"
          })
        ]),
        o("div", {
          class: "d-recipe-leftbar-row__label",
          style: j(`flex-basis: ${s.labelWidth}`)
        }, [
          u(l, {
            class: "d-recipe-leftbar-row__description",
            "data-qa": "dt-recipe-leftbar-row-description",
            size: "200"
          }, {
            default: h(() => [
              C(y(r.description), 1)
            ]),
            _: 1
          })
        ], 4)
      ], 16, T),
      r.hideActions ? v("", !0) : (b(), m("div", H, [
        g(e.$slots, "right"),
        o("div", I, [
          t.showUnreadCount ? (b(), R(d, {
            key: 0,
            class: "d-recipe-leftbar-row__unread-badge",
            "data-qa": "dt-recipe-leftbar-row-unread-badge",
            kind: "count",
            type: "bulletin"
          }, {
            default: h(() => [
              C(y(r.unreadCount), 1)
            ]),
            _: 1
          })) : v("", !0),
          u(S, {
            class: "d-recipe-leftbar-row__action",
            "data-qa": "dt-recipe-leftbar-row-action-button",
            "aria-label": r.menuButtonAriaLabel,
            importance: "clear",
            size: "xs",
            circle: "",
            onClick: a[1] || (a[1] = E((_) => e.$emit("click-menu", _), ["stop"]))
          }, {
            icon: h(() => [
              u(c, { size: "100" })
            ]),
            _: 1
          }, 8, ["aria-label"])
        ])
      ]))
    ], 2),
    o("div", M, [
      g(e.$slots, "timer")
    ])
  ], 16);
}
const ee = /* @__PURE__ */ O(N, [["render", F]]);
export {
  ee as default
};
//# sourceMappingURL=contact-centers-row.js.map