@dialpad/dialtone-vue 2.127.0 → 2.127.2

package/dist/lib/callbox.js

@@ -1,24 +1,26 @@
-import { DtAvatar as i } from "./avatar.js";
-import { DtBadge as c } from "./badge.js";
-import { n as o } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import "./utils.js";
-import "./constants.js";
+import { DtAvatar } from "./avatar.js";
+import { DtBadge } from "./badge.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import "../common/utils.js";
+import "../common/constants.js";
 import "vue";
 import "@dialpad/dialtone-icons/icons.json";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "./presence.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-const l = {
+const CALLBOX_BADGE_COLORS = {
   warning: "dt-recipe-callbox-badge--warning"
-}, r = {
+};
+const CALLBOX_BORDER_COLORS = {
   default: "dt-recipe-callbox--border-default",
   ai: "dt-recipe-callbox--border-ai",
   critical: "dt-recipe-callbox--border-critical"
-}, s = {
+};
+const _sfc_main = {
   name: "DtRecipeCallbox",
-  components: { DtBadge: c, DtAvatar: i },
-  inheritAttrs: !1,
+  components: { DtBadge, DtAvatar },
+  inheritAttrs: false,
   props: {
     /**
      * Text for the badge element
@@ -34,7 +36,7 @@ const l = {
     badgeColor: {
       type: String,
       default: null,
-      validator: (e) => e === null || Object.keys(l).includes(e)
+      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color)
     },
     /**
      * Optional avatar image url.
@@ -73,7 +75,7 @@ const l = {
     borderColor: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(r).includes(e)
+      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color)
     },
     /**
      * Makes the callbox avatar and title clickable,
@@ -81,14 +83,14 @@ const l = {
      */
     clickable: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Controls the avatars overlay icon
      */
     isOnHold: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -105,37 +107,41 @@ const l = {
       return this.avatarFullName || this.avatarSrc;
     },
     badgeClass() {
-      return l[this.badgeColor];
+      return CALLBOX_BADGE_COLORS[this.badgeColor];
     },
     borderClass() {
-      return r[this.borderColor];
+      return CALLBOX_BORDER_COLORS[this.borderColor];
     }
   },
   methods: {
     handleClick(e) {
-      this.clickable && this.$emit("click", e);
+      if (!this.clickable)
+        return;
+      this.$emit("click", e);
     }
   }
 };
-var d = function() {
-  var t = this, a = t._self._c;
-  return a("div", { staticClass: "dt-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [t.$slots.video ? a("div", { staticClass: "dt-recipe-callbox--video", attrs: { "data-qa": "dt-recipe-callbox--video-wrapper" } }, [t._t("video")], 2) : t._e(), a("div", { class: ["dt-recipe-callbox--main-content", t.borderClass, { "dt-recipe-callbox--clickable": t.clickable }], attrs: { "data-qa": "dt-recipe-callbox--main-content" } }, [a("div", { staticClass: "dt-recipe-callbox--main-content-top" }, [t.shouldShowAvatar ? a("dt-avatar", { attrs: { "avatar-class": "dt-recipe-callbox--avatar", "image-src": t.avatarSrc, "image-alt": "", "full-name": t.avatarFullName, seed: t.avatarSeed, clickable: t.clickable, "overlay-icon": t.isOnHold ? "pause" : null, size: "sm" }, on: { click: t.handleClick } }) : t._e(), a("div", { staticClass: "dt-recipe-callbox--content" }, [a(t.clickable ? "button" : "span", { tag: "component", staticClass: "dt-recipe-callbox--content-title", attrs: { "data-qa": "dt-recipe-callbox--title" }, on: { click: t.handleClick } }, [t._v(" " + t._s(t.title) + " ")]), t.$slots.badge || t.badgeText ? a("div", { staticClass: "dt-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: "dt-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: "dt-recipe-callbox--right", attrs: { "data-qa": "dt-recipe-callbox--right-wrapper" } }, [t._t("right")], 2) : t._e()], 1), t.$slots.bottom ? a("div", { staticClass: "dt-recipe-callbox--main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox--bottom-wrapper" } }, [t._t("bottom")], 2) : t._e()])]);
-}, n = [], p = /* @__PURE__ */ o(
-  s,
-  d,
-  n,
-  !1,
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dt-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "dt-recipe-callbox--video", attrs: { "data-qa": "dt-recipe-callbox--video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["dt-recipe-callbox--main-content", _vm.borderClass, { "dt-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox--main-content" } }, [_c("div", { staticClass: "dt-recipe-callbox--main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "dt-recipe-callbox--avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "overlay-icon": _vm.isOnHold ? "pause" : null, "size": "sm" }, on: { "click": _vm.handleClick } }) : _vm._e(), _c("div", { staticClass: "dt-recipe-callbox--content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "dt-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: "dt-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: "dt-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: "dt-recipe-callbox--right", attrs: { "data-qa": "dt-recipe-callbox--right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "dt-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,
+  false,
   null,
   "ef08f46e",
   null,
   null
 );
-const S = p.exports;
+const callbox = __component__.exports;
 export {
-  l as CALLBOX_BADGE_COLORS,
-  r as CALLBOX_BORDER_COLORS,
-  S as DtRecipeCallbox
+  CALLBOX_BADGE_COLORS,
+  CALLBOX_BORDER_COLORS,
+  callbox as DtRecipeCallbox
 };
 //# sourceMappingURL=callbox.js.map

package/dist/lib/callbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.js","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox--border-default',\n  ai: 'dt-recipe-callbox--border-ai',\n  critical: 'dt-recipe-callbox--border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n","<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox--video-wrapper\"\n      class=\"dt-recipe-callbox--video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox--main-content\"\n      :class=\"['dt-recipe-callbox--main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox--main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-recipe-callbox--avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          :overlay-icon=\"isOnHold ? 'pause' : null\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        />\n        <div class=\"dt-recipe-callbox--content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox--title\"\n            class=\"dt-recipe-callbox--content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox--badge-wrapper\"\n            class=\"dt-recipe-callbox--content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox--subtitle-wrapper\"\n            class=\"dt-recipe-callbox--content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox--right-wrapper\"\n          class=\"dt-recipe-callbox--right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox--bottom-wrapper\"\n        class=\"dt-recipe-callbox--main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-callbox {\n  padding: 0;\n  color: var(--dt-color-foreground-primary);\n  background-color: var(--dt-color-surface-primary);\n  border-radius: var(--dt-size-radius-300);\n\n  &--video {\n    display: flex;\n    border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;\n    overflow: clip;\n    margin-bottom: var(--dt-space-300-negative);\n  }\n\n  &--main-content {\n    padding: 0;\n    border-radius: var(--dt-size-radius-300);\n    border: var(--dt-size-border-100) solid transparent;\n    align-items: stretch;\n\n    &.dt-recipe-callbox--border-default {\n      border-color: var(--dt-color-border-default);\n    }\n\n    &.dt-recipe-callbox--border-ai {\n      background:\n        linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;\n    }\n\n    &.dt-recipe-callbox--border-critical {\n      background:\n        radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        radial-gradient(circle, #E7301D, #F78B23) border-box;\n    }\n\n    &-top {\n      display: flex;\n      align-items: center;\n      padding: var(--dt-space-350) var(--dt-space-400);\n    }\n\n    &-bottom {\n      border-top: 1px solid var(--dt-color-border-subtle);\n    }\n  }\n\n  &--avatar {\n    margin-right: var(--dt-space-400);\n  }\n\n  &--content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 auto;\n    min-width: 0;\n\n    &-title {\n      overflow: clip;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--dt-color-foreground-primary);\n      background-color: var(--dt-color-surface-primary);\n      font-weight: var(--dt-font-weight-bold);\n      border: none;\n      padding: 0;\n      width: 0;\n      min-width: 100%;\n      text-align: left;\n      user-select: text;\n      line-height: normal;\n    }\n\n    &-badge {\n      line-height: normal;\n    }\n\n    &-subtitle {\n      padding: 0;\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      line-height: normal;\n      overflow: hidden;\n      width: 0;\n      min-width: 100%;\n    }\n  }\n\n  &--right {\n    display: flex;\n    justify-content: right;\n  }\n\n  &--clickable {\n    .dt-recipe-callbox--content-title {\n      cursor: pointer;\n      user-select: none;\n      border-radius: var(--dt-size-100);\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: var(--dt-shadow-focus);\n      }\n\n      &:hover, &:active {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .dt-recipe-callbox-badge--warning {\n    background-color: var(--dt-color-surface-warning);\n  }\n}\n</style>\n"],"names":["CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_sfc_main","DtBadge","DtAvatar","color"],"mappings":";;;;;;;;;;;AAAY,MAACA,IAAuB;AAAA,EAClC,SAAS;AACX,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ,GCgFAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAAC,GAAA,UAAAC,EAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,MAAA,QAAA,OAAA,KAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAA,MAAA,OAAA,KAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAL,EAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,EAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,MAAA,KAAA,aACA,KAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"callbox.js","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox--border-default',\n  ai: 'dt-recipe-callbox--border-ai',\n  critical: 'dt-recipe-callbox--border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n","<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox--video-wrapper\"\n      class=\"dt-recipe-callbox--video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox--main-content\"\n      :class=\"['dt-recipe-callbox--main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox--main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-recipe-callbox--avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          :overlay-icon=\"isOnHold ? 'pause' : null\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        />\n        <div class=\"dt-recipe-callbox--content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox--title\"\n            class=\"dt-recipe-callbox--content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox--badge-wrapper\"\n            class=\"dt-recipe-callbox--content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox--subtitle-wrapper\"\n            class=\"dt-recipe-callbox--content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox--right-wrapper\"\n          class=\"dt-recipe-callbox--right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox--bottom-wrapper\"\n        class=\"dt-recipe-callbox--main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-callbox {\n  padding: 0;\n  color: var(--dt-color-foreground-primary);\n  background-color: var(--dt-color-surface-primary);\n  border-radius: var(--dt-size-radius-300);\n\n  &--video {\n    display: flex;\n    border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;\n    overflow: clip;\n    margin-bottom: var(--dt-space-300-negative);\n  }\n\n  &--main-content {\n    padding: 0;\n    border-radius: var(--dt-size-radius-300);\n    border: var(--dt-size-border-100) solid transparent;\n    align-items: stretch;\n\n    &.dt-recipe-callbox--border-default {\n      border-color: var(--dt-color-border-default);\n    }\n\n    &.dt-recipe-callbox--border-ai {\n      background:\n        linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;\n    }\n\n    &.dt-recipe-callbox--border-critical {\n      background:\n        radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        radial-gradient(circle, #E7301D, #F78B23) border-box;\n    }\n\n    &-top {\n      display: flex;\n      align-items: center;\n      padding: var(--dt-space-350) var(--dt-space-400);\n    }\n\n    &-bottom {\n      border-top: 1px solid var(--dt-color-border-subtle);\n    }\n  }\n\n  &--avatar {\n    margin-right: var(--dt-space-400);\n  }\n\n  &--content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 auto;\n    min-width: 0;\n\n    &-title {\n      overflow: clip;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--dt-color-foreground-primary);\n      background-color: var(--dt-color-surface-primary);\n      font-weight: var(--dt-font-weight-bold);\n      border: none;\n      padding: 0;\n      width: 0;\n      min-width: 100%;\n      text-align: left;\n      user-select: text;\n      line-height: normal;\n    }\n\n    &-badge {\n      line-height: normal;\n    }\n\n    &-subtitle {\n      padding: 0;\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      line-height: normal;\n      overflow: hidden;\n      width: 0;\n      min-width: 100%;\n    }\n  }\n\n  &--right {\n    display: flex;\n    justify-content: right;\n  }\n\n  &--clickable {\n    .dt-recipe-callbox--content-title {\n      cursor: pointer;\n      user-select: none;\n      border-radius: var(--dt-size-100);\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: var(--dt-shadow-focus);\n      }\n\n      &:hover, &:active {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .dt-recipe-callbox-badge--warning {\n    background-color: var(--dt-color-surface-warning);\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;ACgFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,SAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA;AAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/card.cjs

@@ -1,2 +1,74 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),a={name:"DtCard",props:{maxHeight:{type:String,default:null},containerClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""}}};var s=function(){var t=this,e=t._self._c;return e("div",{class:["d-card",t.containerClass],attrs:{"data-qa":"dt-card"}},[t.$slots.header?e("div",{class:["d-card__header",t.headerClass]},[t._t("header")],2):t._e(),e("div",{class:["d-card__content",t.contentClass],style:{"max-height":t.maxHeight}},[t._t("content")],2),t.$slots.footer?e("div",{class:["d-card__footer",t.footerClass]},[t._t("footer")],2):t._e()])},n=[],l=r.n(a,s,n,!1,null,null,null,null);const d=l.exports;exports.DtCard=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const _sfc_main = {
+  name: "DtCard",
+  props: {
+    /**
+     * The maximum height of the card content.
+     * If given, makes content area scrollable.
+     */
+    maxHeight: {
+      type: String,
+      default: null
+    },
+    /**
+     * class for card container.
+     */
+    containerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * class for card content.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * class for card header.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * class for card footer.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
+    "d-card",
+    _vm.containerClass
+  ], attrs: { "data-qa": "dt-card" } }, [_vm.$slots.header ? _c("div", { class: [
+    "d-card__header",
+    _vm.headerClass
+  ] }, [_vm._t("header")], 2) : _vm._e(), _c("div", { class: [
+    "d-card__content",
+    _vm.contentClass
+  ], style: { "max-height": _vm.maxHeight } }, [_vm._t("content")], 2), _vm.$slots.footer ? _c("div", { class: [
+    "d-card__footer",
+    _vm.footerClass
+  ] }, [_vm._t("footer")], 2) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtCard = __component__.exports;
+exports.DtCard = DtCard;
 //# sourceMappingURL=card.cjs.map

package/dist/lib/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","sources":["../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":"iJAiDAA,EAAA,CACA,KAAA,SACA,MAAA,CAKA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,eAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,CACA,CACA"}
+{"version":3,"file":"card.cjs","sources":["../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/card.js

@@ -1,5 +1,5 @@
-import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-const r = {
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+const _sfc_main = {
   name: "DtCard",
   props: {
     /**
@@ -40,33 +40,35 @@ const r = {
     }
   }
 };
-var s = function() {
-  var t = this, e = t._self._c;
-  return e("div", { class: [
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
     "d-card",
-    t.containerClass
-  ], attrs: { "data-qa": "dt-card" } }, [t.$slots.header ? e("div", { class: [
+    _vm.containerClass
+  ], attrs: { "data-qa": "dt-card" } }, [_vm.$slots.header ? _c("div", { class: [
     "d-card__header",
-    t.headerClass
-  ] }, [t._t("header")], 2) : t._e(), e("div", { class: [
+    _vm.headerClass
+  ] }, [_vm._t("header")], 2) : _vm._e(), _c("div", { class: [
     "d-card__content",
-    t.contentClass
-  ], style: { "max-height": t.maxHeight } }, [t._t("content")], 2), t.$slots.footer ? e("div", { class: [
+    _vm.contentClass
+  ], style: { "max-height": _vm.maxHeight } }, [_vm._t("content")], 2), _vm.$slots.footer ? _c("div", { class: [
     "d-card__footer",
-    t.footerClass
-  ] }, [t._t("footer")], 2) : t._e()]);
-}, n = [], l = /* @__PURE__ */ a(
-  r,
-  s,
-  n,
-  !1,
+    _vm.footerClass
+  ] }, [_vm._t("footer")], 2) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const c = l.exports;
+const DtCard = __component__.exports;
 export {
-  c as DtCard
+  DtCard
 };
 //# sourceMappingURL=card.js.map

package/dist/lib/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":";AAiDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"card.js","sources":["../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/checkbox-group.cjs

@@ -1,2 +1,130 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),l=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),n=require("./input-group.cjs");require("../chunks/input_group-j2gTtc1C.js");require("./validators.cjs");require("./constants.cjs");require("./utils.cjs");require("./validation-messages.cjs");const s={name:"DtCheckboxGroup",extends:n.DtInputGroup,model:{prop:"selectedValues"},props:{value:{type:[],default:null,validator:e=>e?(u.util.warn("Component uses selectedValues to initialize the model, value is not supported by this component",void 0),!1):!0},selectedValues:{type:Array,default(){return[]}},dataQaGroup:{type:String,default:"checkbox-group"},dataQaGroupLegend:{type:String,default:"checkbox-group-legend"},dataQaGroupMessages:{type:String,default:"checkbox-group-messages"}},emits:["input"],data(){return{internalValue:this.selectedValues,provideObj:{selectedValues:this.selectedValues}}},watch:{selectedValues(e){this.internalValue=e},internalValue(e){this.provideObj.selectedValues=e}},methods:{setGroupValue(e,t){t?this.internalValue.includes(e)||this.internalValue.push(e):this.internalValue=this.internalValue.filter(r=>r!==e),this.$emit("input",this.internalValue)},getMessageKey(e,t){return`checkbox-group-message-${e}-${t}-${this.id}`}}},a=null,i=null;var o=l.n(s,a,i,!1,null,null,null,null);const c=o.exports;exports.DtCheckboxGroup=c;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Vue = require("vue");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_inputGroup = require("./input-group.cjs");
+require("../chunks/input_group-m3cWYUfI.js");
+require("../common/validators.cjs");
+require("../common/constants.cjs");
+require("../common/utils.cjs");
+require("./validation-messages.cjs");
+const _sfc_main = {
+  name: "DtCheckboxGroup",
+  extends: lib_inputGroup.DtInputGroup,
+  model: {
+    prop: "selectedValues"
+  },
+  props: {
+    /**
+     * Not supported by this component, please use selectedValues
+     */
+    value: {
+      type: [],
+      default: null,
+      validator: (value) => {
+        if (!value) {
+          return true;
+        }
+        Vue.util.warn(
+          "Component uses selectedValues to initialize the model, value is not supported by this component",
+          void 0
+        );
+        return false;
+      }
+    },
+    /**
+     * A provided list of selected values(s) for the checkbox group
+     * @model selectedValues
+     */
+    selectedValues: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * A data qa tag for the radio group
+     */
+    dataQaGroup: {
+      type: String,
+      default: "checkbox-group"
+    },
+    /**
+     * A data qa tag for the radio group legend
+     */
+    dataQaGroupLegend: {
+      type: String,
+      default: "checkbox-group-legend"
+    },
+    /**
+     * A data qa tag for the radio group messages
+     */
+    dataQaGroupMessages: {
+      type: String,
+      default: "checkbox-group-messages"
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {Array}
+     */
+    "input"
+  ],
+  data() {
+    return {
+      internalValue: this.selectedValues,
+      // wrap values in object to make reactive
+      provideObj: {
+        selectedValues: this.selectedValues
+      }
+    };
+  },
+  watch: {
+    selectedValues(newSelectedValues) {
+      this.internalValue = newSelectedValues;
+    },
+    /*
+     * watching value to support 2 way binding for slotted checkboxes.
+     * need this to pass value to slotted checkboxes if modified outside
+     * checkbox group.
+     */
+    internalValue(newInternalValue) {
+      this.provideObj.selectedValues = newInternalValue;
+    }
+  },
+  methods: {
+    /*
+     * provided value to support 2 way binding for slotted checkboxes.
+     * slotted checkbox will change this value and need to emit new value up.
+     */
+    setGroupValue(value, checked) {
+      if (!checked) {
+        this.internalValue = this.internalValue.filter((checkedValue) => checkedValue !== value);
+      } else if (!this.internalValue.includes(value)) {
+        this.internalValue.push(value);
+      }
+      this.$emit("input", this.internalValue);
+    },
+    getMessageKey(type, index) {
+      return `checkbox-group-message-${type}-${index}-${this.id}`;
+    }
+  }
+};
+const _sfc_render = null;
+const _sfc_staticRenderFns = null;
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const checkbox_group = __component__.exports;
+exports.DtCheckboxGroup = checkbox_group;
 //# sourceMappingURL=checkbox-group.cjs.map

package/dist/lib/checkbox-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport Vue from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        Vue.util.warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n      // wrap values in object to make reactive\n      provideObj: {\n        selectedValues: this.selectedValues,\n      },\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted checkboxes.\n     * need this to pass value to slotted checkboxes if modified outside\n     * checkbox group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.selectedValues = newInternalValue;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtInputGroup","value","Vue","this","newSelectedValues","newInternalValue","checked","checkedValue","type","index"],"mappings":"iWAUA,MAAAA,EAAA,CACA,KAAA,kBAEA,QAAAC,EAAA,aAEA,MAAA,CACA,KAAA,gBACA,EAEA,MAAA,CAIA,MAAA,CACA,KAAA,CAAA,EACA,QAAA,KACA,UAAAC,GACAA,GAIAC,EAAA,KAAA,KACA,kGACAC,MACA,EAEA,IARA,EAUA,EAMA,eAAA,CACA,KAAA,MACA,SAAA,CACA,MAAA,EACA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,gBACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,uBACA,EAKA,oBAAA,CACA,KAAA,OACA,QAAA,yBACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,eAEA,WAAA,CACA,eAAA,KAAA,cACA,CACA,CACA,EAEA,MAAA,CACA,eAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAOA,cAAAC,EAAA,CACA,KAAA,WAAA,eAAAA,CACA,CACA,EAEA,QAAA,CAKA,cAAAJ,EAAAK,EAAA,CACAA,EAEA,KAAA,cAAA,SAAAL,CAAA,GACA,KAAA,cAAA,KAAAA,CAAA,EAFA,KAAA,cAAA,KAAA,cAAA,OAAAM,GAAAA,IAAAN,CAAA,EAKA,KAAA,MAAA,QAAA,KAAA,aAAA,CACA,EAEA,cAAAO,EAAAC,EAAA,CACA,MAAA,0BAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,CACA,CACA"}
+{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport Vue from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        Vue.util.warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n      // wrap values in object to make reactive\n      provideObj: {\n        selectedValues: this.selectedValues,\n      },\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted checkboxes.\n     * need this to pass value to slotted checkboxes if modified outside\n     * checkbox group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.selectedValues = newInternalValue;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtInputGroup","this"],"mappings":";;;;;;;;;;AAUA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,SAAAA,eAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA,CAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,WAAA;AACA,YAAA,CAAA,OAAA;AACA,iBAAA;AAAA,QACA;AAEA,YAAA,KAAA;AAAA,UACA;AAAA,UACAC;AAAAA,QACA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,KAAA;AAAA;AAAA,MAEA,YAAA;AAAA,QACA,gBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,eAAA,mBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,kBAAA;AACA,WAAA,WAAA,iBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA,OAAA,SAAA;AACA,UAAA,CAAA,SAAA;AACA,aAAA,gBAAA,KAAA,cAAA,OAAA,kBAAA,iBAAA,KAAA;AAAA,MACA,WAAA,CAAA,KAAA,cAAA,SAAA,KAAA,GAAA;AACA,aAAA,cAAA,KAAA,KAAA;AAAA,MACA;AAEA,WAAA,MAAA,SAAA,KAAA,aAAA;AAAA,IACA;AAAA,IAEA,cAAA,MAAA,OAAA;AACA,aAAA,0BAAA,IAAA,IAAA,KAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/checkbox-group.js

@@ -1,14 +1,14 @@
-import s from "vue";
-import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtInputGroup as r } from "./input-group.js";
-import "../chunks/input_group-zcAq3DQl.js";
-import "./validators.js";
-import "./constants.js";
-import "./utils.js";
+import Vue from "vue";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtInputGroup } from "./input-group.js";
+import "../chunks/input_group-qVZaS5Bb.js";
+import "../common/validators.js";
+import "../common/constants.js";
+import "../common/utils.js";
 import "./validation-messages.js";
-const a = {
+const _sfc_main = {
   name: "DtCheckboxGroup",
-  extends: r,
+  extends: DtInputGroup,
   model: {
     prop: "selectedValues"
   },
@@ -19,10 +19,16 @@ const a = {
     value: {
       type: [],
       default: null,
-      validator: (e) => e ? (s.util.warn(
-        "Component uses selectedValues to initialize the model, value is not supported by this component",
-        void 0
-      ), !1) : !0
+      validator: (value) => {
+        if (!value) {
+          return true;
+        }
+        Vue.util.warn(
+          "Component uses selectedValues to initialize the model, value is not supported by this component",
+          void 0
+        );
+        return false;
+      }
     },
     /**
      * A provided list of selected values(s) for the checkbox group
@@ -75,16 +81,16 @@ const a = {
     };
   },
   watch: {
-    selectedValues(e) {
-      this.internalValue = e;
+    selectedValues(newSelectedValues) {
+      this.internalValue = newSelectedValues;
     },
     /*
      * watching value to support 2 way binding for slotted checkboxes.
      * need this to pass value to slotted checkboxes if modified outside
      * checkbox group.
      */
-    internalValue(e) {
-      this.provideObj.selectedValues = e;
+    internalValue(newInternalValue) {
+      this.provideObj.selectedValues = newInternalValue;
     }
   },
   methods: {
@@ -92,26 +98,33 @@ const a = {
      * provided value to support 2 way binding for slotted checkboxes.
      * slotted checkbox will change this value and need to emit new value up.
      */
-    setGroupValue(e, t) {
-      t ? this.internalValue.includes(e) || this.internalValue.push(e) : this.internalValue = this.internalValue.filter((l) => l !== e), this.$emit("input", this.internalValue);
+    setGroupValue(value, checked) {
+      if (!checked) {
+        this.internalValue = this.internalValue.filter((checkedValue) => checkedValue !== value);
+      } else if (!this.internalValue.includes(value)) {
+        this.internalValue.push(value);
+      }
+      this.$emit("input", this.internalValue);
     },
-    getMessageKey(e, t) {
-      return `checkbox-group-message-${e}-${t}-${this.id}`;
+    getMessageKey(type, index) {
+      return `checkbox-group-message-${type}-${index}-${this.id}`;
     }
   }
-}, u = null, o = null;
-var i = /* @__PURE__ */ n(
-  a,
-  u,
-  o,
-  !1,
+};
+const _sfc_render = null;
+const _sfc_staticRenderFns = null;
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const _ = i.exports;
+const checkbox_group = __component__.exports;
 export {
-  _ as DtCheckboxGroup
+  checkbox_group as DtCheckboxGroup
 };
 //# sourceMappingURL=checkbox-group.js.map