@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/callbox.js

@@ -1,24 +1,26 @@
-import { DtAvatar as v } from "./avatar.js";
-import { DtBadge as f } from "./badge.js";
-import { resolveComponent as d, openBlock as a, createElementBlock as l, renderSlot as r, createCommentVNode as o, createElementVNode as i, normalizeClass as s, createBlock as n, resolveDynamicComponent as g, withCtx as h, createTextVNode as k, toDisplayString as _, createVNode as x } from "vue";
-import { _ as C } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "./utils.js";
-import "./constants.js";
+import { DtAvatar } from "./avatar.js";
+import { DtBadge } from "./badge.js";
+import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createElementVNode, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, createVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import "../common/utils.js";
+import "../common/constants.js";
 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/vue3";
-const b = {
+const CALLBOX_BADGE_COLORS = {
   warning: "dt-recipe-callbox-badge--warning"
-}, u = {
+};
+const CALLBOX_BORDER_COLORS = {
   default: "dt-recipe-callbox--border-default",
   ai: "dt-recipe-callbox--border-ai",
   critical: "dt-recipe-callbox--border-critical"
-}, y = {
+};
+const _sfc_main = {
   name: "DtRecipeCallbox",
-  components: { DtBadge: f, DtAvatar: v },
-  inheritAttrs: !1,
+  components: { DtBadge, DtAvatar },
+  inheritAttrs: false,
   props: {
     /**
      * Text for the badge element
@@ -34,7 +36,7 @@ const b = {
     badgeColor: {
       type: String,
       default: null,
-      validator: (e) => e === null || Object.keys(b).includes(e)
+      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color)
     },
     /**
      * Optional avatar image url.
@@ -73,7 +75,7 @@ const b = {
     borderColor: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(u).includes(e)
+      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color)
     },
     /**
      * Makes the callbox avatar and title clickable,
@@ -81,14 +83,14 @@ const b = {
      */
     clickable: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Controls the avatars overlay icon
      */
     isOnHold: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -105,101 +107,112 @@ const b = {
       return this.avatarFullName || this.avatarSrc;
     },
     badgeClass() {
-      return b[this.badgeColor];
+      return CALLBOX_BADGE_COLORS[this.badgeColor];
     },
     borderClass() {
-      return u[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);
     }
   }
-}, S = {
+};
+const _hoisted_1 = {
   "data-qa": "dt-recipe-callbox",
   class: "dt-recipe-callbox"
-}, O = {
+};
+const _hoisted_2 = {
   key: 0,
   "data-qa": "dt-recipe-callbox--video-wrapper",
   class: "dt-recipe-callbox--video"
-}, w = { class: "dt-recipe-callbox--main-content-top" }, B = { class: "dt-recipe-callbox--content" }, q = {
+};
+const _hoisted_3 = { class: "dt-recipe-callbox--main-content-top" };
+const _hoisted_4 = { class: "dt-recipe-callbox--content" };
+const _hoisted_5 = {
   key: 0,
   "data-qa": "dt-recipe-callbox--badge-wrapper",
   class: "dt-recipe-callbox--content-badge"
-}, D = {
+};
+const _hoisted_6 = {
   key: 1,
   "data-qa": "dt-recipe-callbox--subtitle-wrapper",
   class: "dt-recipe-callbox--content-subtitle"
-}, A = {
+};
+const _hoisted_7 = {
   key: 1,
   "data-qa": "dt-recipe-callbox--right-wrapper",
   class: "dt-recipe-callbox--right"
-}, N = {
+};
+const _hoisted_8 = {
   key: 0,
   "data-qa": "dt-recipe-callbox--bottom-wrapper",
   class: "dt-recipe-callbox--main-content-bottom"
 };
-function L(e, R, t, E, T, c) {
-  const p = d("dt-avatar"), m = d("dt-badge");
-  return a(), l("div", S, [
-    e.$slots.video ? (a(), l("div", O, [
-      r(e.$slots, "video", {}, void 0, !0)
-    ])) : o("", !0),
-    i("div", {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_avatar = resolveComponent("dt-avatar");
+  const _component_dt_badge = resolveComponent("dt-badge");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.$slots.video ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "video", {}, void 0, true)
+    ])) : createCommentVNode("", true),
+    createElementVNode("div", {
       "data-qa": "dt-recipe-callbox--main-content",
-      class: s(["dt-recipe-callbox--main-content", c.borderClass, { "dt-recipe-callbox--clickable": t.clickable }])
+      class: normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
     }, [
-      i("div", w, [
-        c.shouldShowAvatar ? (a(), n(p, {
+      createElementVNode("div", _hoisted_3, [
+        $options.shouldShowAvatar ? (openBlock(), createBlock(_component_dt_avatar, {
           key: 0,
           "avatar-class": "dt-recipe-callbox--avatar",
-          "image-src": t.avatarSrc,
+          "image-src": $props.avatarSrc,
           "image-alt": "",
-          "full-name": t.avatarFullName,
-          seed: t.avatarSeed,
-          clickable: t.clickable,
-          "overlay-icon": t.isOnHold ? "pause" : null,
+          "full-name": $props.avatarFullName,
+          seed: $props.avatarSeed,
+          clickable: $props.clickable,
+          "overlay-icon": $props.isOnHold ? "pause" : null,
           size: "sm",
-          onClick: c.handleClick
-        }, null, 8, ["image-src", "full-name", "seed", "clickable", "overlay-icon", "onClick"])) : o("", !0),
-        i("div", B, [
-          (a(), n(g(t.clickable ? "button" : "span"), {
+          onClick: $options.handleClick
+        }, null, 8, ["image-src", "full-name", "seed", "clickable", "overlay-icon", "onClick"])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4, [
+          (openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
             "data-qa": "dt-recipe-callbox--title",
             class: "dt-recipe-callbox--content-title",
-            onClick: c.handleClick
+            onClick: $options.handleClick
           }, {
-            default: h(() => [
-              k(_(t.title), 1)
+            default: withCtx(() => [
+              createTextVNode(toDisplayString($props.title), 1)
             ]),
             _: 1
           }, 8, ["onClick"])),
-          e.$slots.badge || t.badgeText ? (a(), l("div", q, [
-            r(e.$slots, "badge", {}, () => [
-              x(m, {
-                class: s(c.badgeClass),
-                text: t.badgeText
+          _ctx.$slots.badge || $props.badgeText ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "badge", {}, () => [
+              createVNode(_component_dt_badge, {
+                class: normalizeClass($options.badgeClass),
+                text: $props.badgeText
               }, null, 8, ["class", "text"])
-            ], !0)
-          ])) : o("", !0),
-          e.$slots.subtitle ? (a(), l("div", D, [
-            r(e.$slots, "subtitle", {}, void 0, !0)
-          ])) : o("", !0)
+            ], true)
+          ])) : createCommentVNode("", true),
+          _ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
+          ])) : createCommentVNode("", true)
         ]),
-        e.$slots.right ? (a(), l("div", A, [
-          r(e.$slots, "right", {}, void 0, !0)
-        ])) : o("", !0)
+        _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          renderSlot(_ctx.$slots, "right", {}, void 0, true)
+        ])) : createCommentVNode("", true)
       ]),
-      e.$slots.bottom ? (a(), l("div", N, [
-        r(e.$slots, "bottom", {}, void 0, !0)
-      ])) : o("", !0)
+      _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_8, [
+        renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
+      ])) : createCommentVNode("", true)
     ], 2)
   ]);
 }
-const P = /* @__PURE__ */ C(y, [["render", L], ["__scopeId", "data-v-ef08f46e"]]);
+const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ef08f46e"]]);
 export {
-  b as CALLBOX_BADGE_COLORS,
-  u as CALLBOX_BORDER_COLORS,
-  P 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","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_hoisted_1","_ctx","_hoisted_2","_renderSlot","_createElementVNode","_normalizeClass","$options","$props","_createBlock","_component_dt_avatar","_resolveDynamicComponent","_hoisted_5","_createVNode","_component_dt_badge","_hoisted_6","_hoisted_7","_hoisted_8"],"mappings":"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"}
+{"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":["_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}

package/dist/lib/card.cjs

@@ -1,2 +1,92 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./utils.cjs"),e=require("vue"),n=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const l={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:""}},data(){return{hasSlotContent:o.hasSlotContent}}};function s(t,d,r,i,a,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-card",r.containerClass]),"data-qa":"dt-card"},[a.hasSlotContent(t.$slots.header)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["d-card__header",r.headerClass])},[e.renderSlot(t.$slots,"header")],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["d-card__content",r.contentClass]),style:e.normalizeStyle({"max-height":r.maxHeight})},[e.renderSlot(t.$slots,"content")],6),a.hasSlotContent(t.$slots.footer)?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["d-card__footer",r.footerClass])},[e.renderSlot(t.$slots,"footer")],2)):e.createCommentVNode("",!0)],2)}const c=n._(l,[["render",s]]);exports.DtCard=c;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_utils = require("../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("../common/constants.cjs");
+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: ""
+    }
+  },
+  data() {
+    return {
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "d-card",
+      $props.containerClass
+    ]),
+    "data-qa": "dt-card"
+  }, [
+    $data.hasSlotContent(_ctx.$slots.header) ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass([
+        "d-card__header",
+        $props.headerClass
+      ])
+    }, [
+      vue.renderSlot(_ctx.$slots, "header")
+    ], 2)) : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass([
+        "d-card__content",
+        $props.contentClass
+      ]),
+      style: vue.normalizeStyle({ "max-height": $props.maxHeight })
+    }, [
+      vue.renderSlot(_ctx.$slots, "content")
+    ], 6),
+    $data.hasSlotContent(_ctx.$slots.footer) ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: vue.normalizeClass([
+        "d-card__footer",
+        $props.footerClass
+      ])
+    }, [
+      vue.renderSlot(_ctx.$slots, "footer")
+    ], 2)) : vue.createCommentVNode("", true)
+  ], 2);
+}
+const DtCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+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=\"hasSlotContent($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=\"hasSlotContent($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>\nimport { hasSlotContent } from '@/common/utils';\n\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_createElementBlock","_normalizeClass","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":"wNAmDA,MAAKA,EAAU,CACb,KAAM,SACN,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,IACV,EAKD,eAAgB,CACd,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,eAAAC,EAAc,eAEjB,CACH,+CApGEC,EAuCM,mBAAA,MAAA,CAtCH,MAAKC,EAAAA,eAAA,UAA0BC,EAAc,iBAI9C,UAAQ,YAGAC,EAAc,eAACC,EAAM,OAAC,MAAM,iBADpCJ,EASM,mBAAA,MAAA,OAPH,MAAKC,EAAAA,eAAA,kBAAsCC,EAAW,gBAMvDG,aAAsBD,EAAA,OAAA,QAAA,mCAGxBE,EAAAA,mBASM,MAAA,CARH,MAAKL,EAAAA,eAAA,mBAAuCC,EAAY,eAIxD,qCAAuBA,EAAS,SAAA,CAAA,IAGjCG,aAAuBD,EAAA,OAAA,SAAA,MAIjBD,EAAc,eAACC,EAAM,OAAC,MAAM,iBADpCJ,EASM,mBAAA,MAAA,OAPH,MAAKC,EAAAA,eAAA,kBAAsCC,EAAW,gBAMvDG,aAAsBD,EAAA,OAAA,QAAA"}
+{"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=\"hasSlotContent($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=\"hasSlotContent($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>\nimport { hasSlotContent } from '@/common/utils';\n\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["hasSlotContent","_createElementBlock","_normalizeClass","_renderSlot","_createElementVNode"],"mappings":";;;;;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAA,aAAc;AAAA;EAEjB;AACH;;0BApGEC,IAuCM,mBAAA,OAAA;AAAA,IAtCH,OAAKC,IAAAA,eAAA;AAAA;MAA0B,OAAc;AAAA;IAI9C,WAAQ;AAAA;IAGA,MAAc,eAAC,KAAM,OAAC,MAAM,sBADpCD,IASM,mBAAA,OAAA;AAAA;MAPH,OAAKC,IAAAA,eAAA;AAAA;QAAsC,OAAW;AAAA;;MAMvDC,eAAsB,KAAA,QAAA,QAAA;AAAA;IAGxBC,IAAAA,mBASM,OAAA;AAAA,MARH,OAAKF,IAAAA,eAAA;AAAA;QAAuC,OAAY;AAAA;MAIxD,0CAAuB,OAAS,UAAA,CAAA;AAAA;MAGjCC,eAAuB,KAAA,QAAA,SAAA;AAAA;IAIjB,MAAc,eAAC,KAAM,OAAC,MAAM,sBADpCF,IASM,mBAAA,OAAA;AAAA;MAPH,OAAKC,IAAAA,eAAA;AAAA;QAAsC,OAAW;AAAA;;MAMvDC,eAAsB,KAAA,QAAA,QAAA;AAAA;;;;;"}

package/dist/lib/card.js

@@ -1,8 +1,8 @@
-import { hasSlotContent as d } from "./utils.js";
-import { openBlock as a, createElementBlock as o, normalizeClass as r, renderSlot as s, createCommentVNode as l, createElementVNode as c, normalizeStyle as i } from "vue";
-import { _ as m } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "./constants.js";
-const f = {
+import { hasSlotContent } from "../common/utils.js";
+import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import "../common/constants.js";
+const _sfc_main = {
   name: "DtCard",
   props: {
     /**
@@ -44,49 +44,49 @@ const f = {
   },
   data() {
     return {
-      hasSlotContent: d
+      hasSlotContent
     };
   }
 };
-function C(e, h, t, y, n, u) {
-  return a(), o("div", {
-    class: r([
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
       "d-card",
-      t.containerClass
+      $props.containerClass
     ]),
     "data-qa": "dt-card"
   }, [
-    n.hasSlotContent(e.$slots.header) ? (a(), o("div", {
+    $data.hasSlotContent(_ctx.$slots.header) ? (openBlock(), createElementBlock("div", {
       key: 0,
-      class: r([
+      class: normalizeClass([
         "d-card__header",
-        t.headerClass
+        $props.headerClass
       ])
     }, [
-      s(e.$slots, "header")
-    ], 2)) : l("", !0),
-    c("div", {
-      class: r([
+      renderSlot(_ctx.$slots, "header")
+    ], 2)) : createCommentVNode("", true),
+    createElementVNode("div", {
+      class: normalizeClass([
         "d-card__content",
-        t.contentClass
+        $props.contentClass
       ]),
-      style: i({ "max-height": t.maxHeight })
+      style: normalizeStyle({ "max-height": $props.maxHeight })
     }, [
-      s(e.$slots, "content")
+      renderSlot(_ctx.$slots, "content")
     ], 6),
-    n.hasSlotContent(e.$slots.footer) ? (a(), o("div", {
+    $data.hasSlotContent(_ctx.$slots.footer) ? (openBlock(), createElementBlock("div", {
       key: 1,
-      class: r([
+      class: normalizeClass([
         "d-card__footer",
-        t.footerClass
+        $props.footerClass
       ])
     }, [
-      s(e.$slots, "footer")
-    ], 2)) : l("", !0)
+      renderSlot(_ctx.$slots, "footer")
+    ], 2)) : createCommentVNode("", true)
   ], 2);
 }
-const b = /* @__PURE__ */ m(f, [["render", C]]);
+const DtCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  b 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=\"hasSlotContent($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=\"hasSlotContent($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>\nimport { hasSlotContent } from '@/common/utils';\n\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_createElementBlock","_normalizeClass","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":";;;;AAmDA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEH;AACH;;cApGEC,EAuCM,OAAA;AAAA,IAtCH,OAAKC,EAAA;AAAA;MAA0BC,EAAc;AAAA;IAI9C,WAAQ;AAAA;IAGAC,EAAc,eAACC,EAAM,OAAC,MAAM,UADpCJ,EASM,OAAA;AAAA;MAPH,OAAKC,EAAA;AAAA;QAAsCC,EAAW;AAAA;;MAMvDG,EAAsBD,EAAA,QAAA,QAAA;AAAA;IAGxBE,EASM,OAAA;AAAA,MARH,OAAKL,EAAA;AAAA;QAAuCC,EAAY;AAAA;MAIxD,yBAAuBA,EAAS,UAAA,CAAA;AAAA;MAGjCG,EAAuBD,EAAA,QAAA,SAAA;AAAA;IAIjBD,EAAc,eAACC,EAAM,OAAC,MAAM,UADpCJ,EASM,OAAA;AAAA;MAPH,OAAKC,EAAA;AAAA;QAAsCC,EAAW;AAAA;;MAMvDG,EAAsBD,EAAA,QAAA,QAAA;AAAA;;;;"}
+{"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=\"hasSlotContent($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=\"hasSlotContent($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>\nimport { hasSlotContent } from '@/common/utils';\n\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_createElementVNode"],"mappings":";;;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;sBApGEA,mBAuCM,OAAA;AAAA,IAtCH,OAAKC,eAAA;AAAA;MAA0B,OAAc;AAAA;IAI9C,WAAQ;AAAA;IAGA,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCD,mBASM,OAAA;AAAA;MAPH,OAAKC,eAAA;AAAA;QAAsC,OAAW;AAAA;;MAMvDC,WAAsB,KAAA,QAAA,QAAA;AAAA;IAGxBC,mBASM,OAAA;AAAA,MARH,OAAKF,eAAA;AAAA;QAAuC,OAAY;AAAA;MAIxD,sCAAuB,OAAS,UAAA,CAAA;AAAA;MAGjCC,WAAuB,KAAA,QAAA,SAAA;AAAA;IAIjB,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCF,mBASM,OAAA;AAAA;MAPH,OAAKC,eAAA;AAAA;QAAsC,OAAW;AAAA;;MAMvDC,WAAsB,KAAA,QAAA,QAAA;AAAA;;;;"}

package/dist/lib/checkbox-group.cjs

@@ -1,2 +1,116 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),a=require("./input-group.cjs");require("../chunks/input_group-AS760Cp7.js");require("./validators.cjs");require("./constants.cjs");require("./utils.cjs");require("./validation-messages.cjs");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");const i={name:"DtCheckboxGroup",extends:a.DtInputGroup,model:{prop:"selectedValues"},props:{value:{type:[],default:null,validator:e=>e?(u.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}},watch:{selectedValues(e){this.internalValue=e},internalValue:{immediate:!0,handler(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}`}}};exports.DtCheckboxGroup=i;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const lib_inputGroup = require("./input-group.cjs");
+require("../chunks/input_group-M-D25pOJ.js");
+require("../common/validators.cjs");
+require("../common/constants.cjs");
+require("../common/utils.cjs");
+require("./validation-messages.cjs");
+require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+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.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
+    };
+  },
+  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: {
+      immediate: true,
+      handler(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}`;
+    }
+  }
+};
+exports.DtCheckboxGroup = _sfc_main;
 //# sourceMappingURL=checkbox-group.cjs.map