@dialpad/dialtone-vue/dist/lib/callbox/callbox.js

Vue component library for Dialpad's design system Dialtone

import { CALLBOX_BORDER_COLORS as l, CALLBOX_BADGE_COLORS as r } from "./callbox-constants.js";
import i from "../avatar/avatar.js";
import c from "../badge/badge.js";
import { DtIconPause as o } from "@dialpad/dialtone-icons/vue2";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const d = {
  name: "DtRecipeCallbox",
  components: { DtBadge: c, DtAvatar: i, DtIconPause: o },
  inheritAttrs: !1,
  props: {
    /**
     * Text for the badge element
     */
    badgeText: {
      type: String,
      default: ""
    },
    /**
     * Color for the badge element
     * @values null, warning
     */
    badgeColor: {
      type: String,
      default: null,
      validator: (e) => e === null || Object.keys(r).includes(e)
    },
    /**
     * Optional avatar image url.
     * If not provided it will use the initial of the name.
     */
    avatarSrc: {
      type: String,
      default: ""
    },
    /**
     * Avatar's full name, used to extract initials
     * to display if `avatarSrc` is empty.
     */
    avatarFullName: {
      type: String,
      default: ""
    },
    /**
     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
     */
    avatarSeed: {
      type: String,
      default: ""
    },
    /**
     * Callbox title
     */
    title: {
      type: String,
      default: ""
    },
    /**
     * Callbox border color
     * @values default, ai, critical
     */
    borderColor: {
      type: String,
      default: "default",
      validator: (e) => Object.keys(l).includes(e)
    },
    /**
     * Makes the callbox avatar and title clickable,
     * emits a click event when clicked.
     */
    clickable: {
      type: Boolean,
      default: !1
    },
    /**
     * Controls the avatars overlay icon
     */
    isOnHold: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Callbox click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  computed: {
    shouldShowAvatar() {
      return this.avatarFullName || this.avatarSrc;
    },
    badgeClass() {
      return r[this.badgeColor];
    },
    borderClass() {
      return l[this.borderColor];
    }
  },
  methods: {
    handleClick(e) {
      this.clickable && this.$emit("click", e);
    }
  }
};
var n = function() {
  var t = this, a = t._self._c;
  return a("div", { staticClass: "d-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [t.$slots.video ? a("div", { staticClass: "d-recipe-callbox__video", attrs: { "data-qa": "dt-recipe-callbox__video-wrapper" } }, [t._t("video")], 2) : t._e(), a("div", { class: ["d-recipe-callbox__main-content", t.borderClass, { "d-recipe-callbox--clickable": t.clickable }], attrs: { "data-qa": "dt-recipe-callbox__main-content" } }, [a("div", { staticClass: "d-recipe-callbox__main-content-top" }, [t.shouldShowAvatar ? a("dt-avatar", { attrs: { "avatar-class": "d-recipe-callbox__avatar", "image-src": t.avatarSrc, "image-alt": "", "full-name": t.avatarFullName, seed: t.avatarSeed, clickable: t.clickable, size: "sm" }, on: { click: t.handleClick }, scopedSlots: t._u([t.isOnHold ? { key: "overlayIcon", fn: function() {
    return [a("dt-icon-pause")];
  }, proxy: !0 } : null], null, !0) }) : t._e(), a("div", { staticClass: "d-recipe-callbox__content" }, [a(t.clickable ? "button" : "span", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.title, expression: "title" }], tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title", tabindex: "0" }, on: { click: t.handleClick } }, [t._v(" " + t._s(t.title) + " ")]), t.$slots.badge || t.badgeText ? a("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [t._t("badge", function() {
    return [a("dt-badge", { class: t.badgeClass, attrs: { text: t.badgeText } })];
  })], 2) : t._e(), t.$slots.subtitle ? a("div", { staticClass: "d-recipe-callbox__content-subtitle", attrs: { "data-qa": "dt-recipe-callbox__subtitle-wrapper" } }, [t._t("subtitle")], 2) : t._e()], 1), t.$slots.right ? a("div", { staticClass: "d-recipe-callbox__right", attrs: { "data-qa": "dt-recipe-callbox__right-wrapper" } }, [t._t("right")], 2) : t._e()], 1), t.$slots.bottom ? a("div", { staticClass: "d-recipe-callbox__main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox__bottom-wrapper" } }, [t._t("bottom")], 2) : t._e()])]);
}, _ = [], p = /* @__PURE__ */ s(
  d,
  n,
  _
);
const f = p.exports;
export {
  f as default
};
//# sourceMappingURL=callbox.js.map