@dialpad/dialtone/dist/vue3/lib/callbox/callbox.js

Dialpad's Dialtone design system monorepo

import { CALLBOX_BORDER_COLORS as n, CALLBOX_BADGE_COLORS as _ } from "./callbox-constants.js";
import h from "../avatar/avatar.js";
import k from "../badge/badge.js";
import { DtIconPause as C } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as r, resolveDirective as y, createElementBlock as l, openBlock as a, normalizeStyle as x, normalizeClass as s, createCommentVNode as o, createElementVNode as d, renderSlot as i, createBlock as b, createSlots as S, withCtx as m, createVNode as u, withDirectives as O, resolveDynamicComponent as D, createTextVNode as B, toDisplayString as w } from "vue";
import { _ as q } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const A = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeCallbox",
  components: { DtBadge: k, DtAvatar: h, DtIconPause: C },
  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(_).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(n).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 _[this.badgeColor];
    },
    borderClass() {
      return n[this.borderColor];
    }
  },
  methods: {
    handleClick(e) {
      this.clickable && this.$emit("click", e);
    }
  }
}, N = {
  key: 0,
  "data-qa": "dt-recipe-callbox__video-wrapper",
  class: "d-recipe-callbox__video"
}, L = { class: "d-recipe-callbox__main-content-top" }, E = { class: "d-recipe-callbox__content" }, R = {
  key: 0,
  "data-qa": "dt-recipe-callbox__badge-wrapper",
  class: "d-recipe-callbox__content-badge"
}, T = {
  key: 1,
  "data-qa": "dt-recipe-callbox__subtitle-wrapper",
  class: "d-recipe-callbox__content-subtitle"
}, V = {
  key: 1,
  "data-qa": "dt-recipe-callbox__right-wrapper",
  class: "d-recipe-callbox__right"
}, z = {
  key: 0,
  "data-qa": "dt-recipe-callbox__bottom-wrapper",
  class: "d-recipe-callbox__main-content-bottom"
};
function F(e, j, t, H, I, c) {
  const p = r("dt-icon-pause"), v = r("dt-avatar"), f = r("dt-badge"), g = y("dt-tooltip");
  return a(), l("div", {
    "data-qa": "dt-recipe-callbox",
    class: s([e.$attrs.class, "d-recipe-callbox"]),
    style: x(e.$attrs.style)
  }, [
    e.$slots.video ? (a(), l("div", N, [
      i(e.$slots, "video")
    ])) : o("", !0),
    d("div", {
      "data-qa": "dt-recipe-callbox__main-content",
      class: s(["d-recipe-callbox__main-content", c.borderClass, { "d-recipe-callbox--clickable": t.clickable }])
    }, [
      d("div", L, [
        c.shouldShowAvatar ? (a(), b(v, {
          key: 0,
          "avatar-class": "d-recipe-callbox__avatar",
          "image-src": t.avatarSrc,
          "image-alt": "",
          "full-name": t.avatarFullName,
          seed: t.avatarSeed,
          clickable: t.clickable,
          size: "sm",
          onClick: c.handleClick
        }, S({ _: 2 }, [
          t.isOnHold ? {
            name: "overlayIcon",
            fn: m(() => [
              u(p)
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : o("", !0),
        d("div", E, [
          O((a(), b(D(t.clickable ? "button" : "span"), {
            "data-qa": "dt-recipe-callbox__title",
            class: "d-recipe-callbox__content-title",
            tabindex: "0",
            onClick: c.handleClick
          }, {
            default: m(() => [
              B(w(t.title), 1)
            ]),
            _: 1
          }, 8, ["onClick"])), [
            [g, t.title]
          ]),
          e.$slots.badge || t.badgeText ? (a(), l("div", R, [
            i(e.$slots, "badge", {}, () => [
              u(f, {
                class: s(c.badgeClass),
                text: t.badgeText
              }, null, 8, ["class", "text"])
            ])
          ])) : o("", !0),
          e.$slots.subtitle ? (a(), l("div", T, [
            i(e.$slots, "subtitle")
          ])) : o("", !0)
        ]),
        e.$slots.right ? (a(), l("div", V, [
          i(e.$slots, "right")
        ])) : o("", !0)
      ]),
      e.$slots.bottom ? (a(), l("div", z, [
        i(e.$slots, "bottom")
      ])) : o("", !0)
    ], 2)
  ], 6);
}
const K = /* @__PURE__ */ q(A, [["render", F]]);
export {
  K as default
};
//# sourceMappingURL=callbox.js.map