@dialpad/dialtone-vue/dist/recipes/leftbar/callbox/callbox.vue.js

Vue component library for Dialpad's design system Dialtone

import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from "./callbox_constants.js";
import DtAvatar from "../../../components/avatar/avatar.vue.js";
import DtBadge from "../../../components/badge/badge.vue.js";
import { DtIconPause } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
  name: "DtRecipeCallbox",
  components: { DtBadge, DtAvatar, DtIconPause },
  inheritAttrs: false,
  props: {
    /**
     * Text for the badge element
     */
    badgeText: {
      type: String,
      default: ""
    },
    /**
     * Color for the badge element
     * @values null, warning
     */
    badgeColor: {
      type: String,
      default: null,
      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color)
    },
    /**
     * 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: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color)
    },
    /**
     * Makes the callbox avatar and title clickable,
     * emits a click event when clicked.
     */
    clickable: {
      type: Boolean,
      default: false
    },
    /**
     * Controls the avatars overlay icon
     */
    isOnHold: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    /**
     * Callbox click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  computed: {
    shouldShowAvatar() {
      return this.avatarFullName || this.avatarSrc;
    },
    badgeClass() {
      return CALLBOX_BADGE_COLORS[this.badgeColor];
    },
    borderClass() {
      return CALLBOX_BORDER_COLORS[this.borderColor];
    }
  },
  methods: {
    handleClick(e) {
      if (!this.clickable) return;
      this.$emit("click", e);
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("div", { staticClass: "d-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "d-recipe-callbox__video", attrs: { "data-qa": "dt-recipe-callbox__video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["d-recipe-callbox__main-content", _vm.borderClass, { "d-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox__main-content" } }, [_c("div", { staticClass: "d-recipe-callbox__main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "d-recipe-callbox__avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "size": "sm" }, on: { "click": _vm.handleClick }, scopedSlots: _vm._u([_vm.isOnHold ? { key: "overlayIcon", fn: function() {
    return [_c("dt-icon-pause")];
  }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
    return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
  })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "d-recipe-callbox__content-subtitle", attrs: { "data-qa": "dt-recipe-callbox__subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "d-recipe-callbox__right", attrs: { "data-qa": "dt-recipe-callbox__right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "d-recipe-callbox__main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox__bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const callbox = __component__.exports;
export {
  callbox as default
};
//# sourceMappingURL=callbox.vue.js.map