@dialpad/dialtone-vue/dist/lib/group-row/group-row.js

Vue component library for Dialpad's design system Dialtone

import { DtIconUsers as r } from "@dialpad/dialtone-icons/vue2";
import { safeConcatStrings as e } from "../../common/utils/index.js";
import { DialtoneLocalization as o } from "../../localization/index.js";
import { n as i } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import s from "../general-row/general-row.js";
const a = {
  name: "DtRecipeGroupRow",
  components: {
    DtIconUsers: r,
    DtRecipeGeneralRow: s
  },
  inheritAttrs: !1,
  props: {
    /**
     * Names of the group members
     */
    names: {
      type: String,
      required: !0
    },
    /**
     * Number of unread messages
     */
    unreadCount: {
      type: String,
      default: null
    },
    /**
     * Number of unread mention messages
     */
    unreadMentionCount: {
      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: !1
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Shows an "is typing" animation over the avatar when true.
     */
    isTyping: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  data() {
    return {
      i18n: new o()
    };
  },
  computed: {
    groupCount() {
      return this.names.split(",").length;
    },
    messageCount() {
      return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
    },
    mentionCount() {
      return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
    },
    unreadCountTooltip() {
      return e([
        this.unreadCount && this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: this.messageCount }),
        this.unreadMentionCount && this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT", { unreadCount: this.mentionCount })
      ]);
    },
    typingTooltip() {
      return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
    },
    ariaLabel() {
      return e([
        this.typingTooltip,
        this.i18n.$t("DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT", { count: this.groupCount }),
        this.names,
        this.unreadCountTooltip
      ]);
    }
  }
};
var u = function() {
  var t = this, n = t._self._c;
  return n("dt-recipe-general-row", t._g(t._b({ attrs: { description: t.names, "aria-label": t.ariaLabel, "unread-count": t.unreadCount, "has-unreads": t.hasUnreads, "unread-mention-count": t.unreadMentionCount, selected: t.selected, "is-typing": t.isTyping }, scopedSlots: t._u([{ key: "left", fn: function() {
    return [n("dt-icon-users", { attrs: { size: "300" } })];
  }, proxy: !0 }]) }, "dt-recipe-general-row", t.$attrs, !1), t.$listeners));
}, l = [], d = /* @__PURE__ */ i(
  a,
  u,
  l
);
const f = d.exports;
export {
  f as default
};
//# sourceMappingURL=group-row.js.map