@dialpad/dialtone 9.65.1 → 9.66.0

package/dist/vue3/lib/callbox.js

@@ -5,7 +5,7 @@ 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-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "./presence.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
@@ -19,7 +19,10 @@ const CALLBOX_BORDER_COLORS = {
 };
 const _sfc_main = {
   name: "DtRecipeCallbox",
-  components: { DtBadge, DtAvatar },
+  components: {
+    DtBadge,
+    DtAvatar
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -130,8 +133,12 @@ const _hoisted_2 = {
   "data-qa": "dt-recipe-callbox--video-wrapper",
   class: "dt-recipe-callbox--video"
 };
-const _hoisted_3 = { class: "dt-recipe-callbox--main-content-top" };
-const _hoisted_4 = { class: "dt-recipe-callbox--content" };
+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",
@@ -155,59 +162,33 @@ const _hoisted_8 = {
 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: normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
-    }, [
-      createElementVNode("div", _hoisted_3, [
-        $options.shouldShowAvatar ? (openBlock(), createBlock(_component_dt_avatar, {
-          key: 0,
-          "avatar-class": "dt-recipe-callbox--avatar",
-          "image-src": $props.avatarSrc,
-          "image-alt": "",
-          "full-name": $props.avatarFullName,
-          seed: $props.avatarSeed,
-          clickable: $props.clickable,
-          "overlay-icon": $props.isOnHold ? "pause" : null,
-          size: "sm",
-          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: $options.handleClick
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString($props.title), 1)
-            ]),
-            _: 1
-          }, 8, ["onClick"])),
-          _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"])
-            ], true)
-          ])) : createCommentVNode("", true),
-          _ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
-          ])) : createCommentVNode("", true)
-        ]),
-        _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_7, [
-          renderSlot(_ctx.$slots, "right", {}, void 0, true)
-        ])) : createCommentVNode("", true)
-      ]),
-      _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_8, [
-        renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
-      ])) : createCommentVNode("", true)
-    ], 2)
-  ]);
+  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: normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, {
+      "dt-recipe-callbox--clickable": $props.clickable
+    }])
+  }, [createElementVNode("div", _hoisted_3, [$options.shouldShowAvatar ? (openBlock(), createBlock(_component_dt_avatar, {
+    key: 0,
+    "avatar-class": "dt-recipe-callbox--avatar",
+    "image-src": $props.avatarSrc,
+    "image-alt": "",
+    "full-name": $props.avatarFullName,
+    seed: $props.avatarSeed,
+    clickable: $props.clickable,
+    "overlay-icon": $props.isOnHold ? "pause" : null,
+    size: "sm",
+    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: $options.handleClick
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString($props.title), 1)]),
+    _: 1
+  }, 8, ["onClick"])), _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"])], true)])) : createCommentVNode("", true), _ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)])) : createCommentVNode("", true)]), _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "right", {}, void 0, true)])) : createCommentVNode("", true)]), _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "bottom", {}, void 0, true)])) : createCommentVNode("", true)], 2)]);
 }
 const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ef08f46e"]]);
 export {

package/dist/vue3/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":["_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_createVNode"],"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":["CALLBOX_BADGE_COLORS","warning","CALLBOX_BORDER_COLORS","default","ai","critical","_sfc_main","name","components","DtBadge","DtAvatar","inheritAttrs","props","badgeText","type","String","badgeColor","validator","color","Object","keys","includes","avatarSrc","avatarFullName","avatarSeed","title","borderColor","clickable","Boolean","isOnHold","emits","computed","shouldShowAvatar","badgeClass","borderClass","methods","handleClick","e","$emit","class","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_hoisted_1","_ctx","$slots","video","_hoisted_2","_renderSlot","undefined","_createElementVNode","_normalizeClass","$options","$props","_createBlock","_component_dt_avatar","seed","size","onClick","_resolveDynamicComponent","badge","_hoisted_5","_createVNode","_component_dt_badge","text","subtitle","_hoisted_6","right","_hoisted_7","bottom","_hoisted_8"],"mappings":"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"}

package/dist/vue3/lib/card.cjs

@@ -52,40 +52,20 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass([
-      "d-card",
-      $props.containerClass
-    ]),
+    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);
+  }, [$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;

package/dist/vue3/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":["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;;;;;"}
+{"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","name","props","maxHeight","type","String","default","containerClass","Array","Object","contentClass","headerClass","footerClass","data","hasSlotContent","_createElementBlock","class","_normalizeClass","$props","$data","_ctx","$slots","header","_renderSlot","_createElementVNode","style","footer"],"mappings":";;;;;;AAmDA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EACNC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,gBAAgB;AAAA,MACdH,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDI,cAAc;AAAA,MACZN,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDK,aAAa;AAAA,MACXP,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDM,aAAa;AAAA,MACXR,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDO,OAAQ;AACN,WAAO;AAAA,MACLC,gBAAAA,aAAAA;AAAAA;EAEJ;AACF;;0BApGEC,IAuCM,mBAAA,OAAA;AAAA,IAtCHC,OAAKC,IAAAA,eAAA,WAA0BC,OAAcX,cAAA;IAI9C,WAAQ;AAAA,MAGAY,MAAcL,eAACM,KAAMC,OAACC,MAAM,sBADpCP,IASM,mBAAA,OAAA;AAAA;IAPHC,OAAKC,IAAAA,eAAA,mBAAsCC,OAAWP,WAAA;MAMvDY,IAAAA,WAAsBH,KAAAC,QAAA,QAAA,CAAA,2CAGxBG,IAAAA,mBASM,OAAA;AAAA,IARHR,OAAKC,IAAAA,eAAA,oBAAuCC,OAAYR,YAAA;IAIxDe;oBAAuBP,OAASf;AAAAA,KAAA;AAAA,MAGjCoB,IAAuB,WAAAH,KAAAC,QAAA,SAAA,CAAA,OAIjBF,MAAcL,eAACM,KAAMC,OAACK,MAAM,sBADpCX,IASM,mBAAA,OAAA;AAAA;IAPHC,OAAKC,IAAAA,eAAA,mBAAsCC,OAAWN,WAAA;MAMvDW,IAAAA,WAAsBH,KAAAC,QAAA,QAAA,CAAA;;;;"}

package/dist/vue3/lib/card.js

@@ -50,40 +50,20 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass([
-      "d-card",
-      $props.containerClass
-    ]),
+    class: normalizeClass(["d-card", $props.containerClass]),
     "data-qa": "dt-card"
-  }, [
-    $data.hasSlotContent(_ctx.$slots.header) ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass([
-        "d-card__header",
-        $props.headerClass
-      ])
-    }, [
-      renderSlot(_ctx.$slots, "header")
-    ], 2)) : createCommentVNode("", true),
-    createElementVNode("div", {
-      class: normalizeClass([
-        "d-card__content",
-        $props.contentClass
-      ]),
-      style: normalizeStyle({ "max-height": $props.maxHeight })
-    }, [
-      renderSlot(_ctx.$slots, "content")
-    ], 6),
-    $data.hasSlotContent(_ctx.$slots.footer) ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: normalizeClass([
-        "d-card__footer",
-        $props.footerClass
-      ])
-    }, [
-      renderSlot(_ctx.$slots, "footer")
-    ], 2)) : createCommentVNode("", true)
-  ], 2);
+  }, [$data.hasSlotContent(_ctx.$slots.header) ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(["d-card__header", $props.headerClass])
+  }, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true), createElementVNode("div", {
+    class: normalizeClass(["d-card__content", $props.contentClass]),
+    style: normalizeStyle({
+      "max-height": $props.maxHeight
+    })
+  }, [renderSlot(_ctx.$slots, "content")], 6), $data.hasSlotContent(_ctx.$slots.footer) ? (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: normalizeClass(["d-card__footer", $props.footerClass])
+  }, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)], 2);
 }
 const DtCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/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":["_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;;;;"}
+{"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","name","props","maxHeight","type","String","default","containerClass","Array","Object","contentClass","headerClass","footerClass","data","hasSlotContent","_createElementBlock","class","_normalizeClass","$props","$data","_ctx","$slots","header","_renderSlot","_createElementVNode","style","footer"],"mappings":";;;;AAmDA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EACNC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,gBAAgB;AAAA,MACdH,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDI,cAAc;AAAA,MACZN,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDK,aAAa;AAAA,MACXP,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDM,aAAa;AAAA,MACXR,MAAM,CAACC,QAAQG,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDO,OAAQ;AACN,WAAO;AAAA,MACLC;AAAAA;EAEJ;AACF;;sBApGEC,mBAuCM,OAAA;AAAA,IAtCHC,OAAKC,eAAA,WAA0BC,OAAcX,cAAA;IAI9C,WAAQ;AAAA,MAGAY,MAAcL,eAACM,KAAMC,OAACC,MAAM,kBADpCP,mBASM,OAAA;AAAA;IAPHC,OAAKC,eAAA,mBAAsCC,OAAWP,WAAA;MAMvDY,WAAsBH,KAAAC,QAAA,QAAA,CAAA,uCAGxBG,mBASM,OAAA;AAAA,IARHR,OAAKC,eAAA,oBAAuCC,OAAYR,YAAA;IAIxDe;oBAAuBP,OAASf;AAAAA,KAAA;AAAA,MAGjCoB,WAAuBH,KAAAC,QAAA,SAAA,CAAA,OAIjBF,MAAcL,eAACM,KAAMC,OAACK,MAAM,kBADpCX,mBASM,OAAA;AAAA;IAPHC,OAAKC,eAAA,mBAAsCC,OAAWN,WAAA;MAMvDW,WAAsBH,KAAAC,QAAA,QAAA,CAAA;;;"}

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

@@ -2,7 +2,7 @@
 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("../chunks/input_group-rE6nhye8.js");
 require("../common/validators.cjs");
 require("../common/constants.cjs");
 require("../common/utils.cjs");
@@ -25,10 +25,7 @@ const _sfc_main = {
         if (!value) {
           return true;
         }
-        vue.warn(
-          "Component uses selectedValues to initialize the model, value is not supported by this component",
-          void 0
-        );
+        vue.warn("Component uses selectedValues to initialize the model, value is not supported by this component", void 0);
         return false;
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } 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        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    };\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\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","warn","this"],"mappings":";;;;;;;;;;AAUK,MAAA,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,SAASA,eAAY;AAAA,EAErB,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEAC,YAAI;AAAA,UACF;AAAA,UACAC;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;"}
+{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } 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        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    };\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\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","name","extends","DtInputGroup","model","prop","props","value","type","default","validator","warn","this","selectedValues","Array","dataQaGroup","String","dataQaGroupLegend","dataQaGroupMessages","emits","data","internalValue","watch","newSelectedValues","immediate","handler","newInternalValue","provideObj","methods","setGroupValue","checked","filter","checkedValue","includes","push","$emit","getMessageKey","index","id"],"mappings":";;;;;;;;;;AAUA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,SAASC,eAAY;AAAA,EAErBC,OAAO;AAAA,IACLC,MAAM;AAAA,EACP;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,OAAO;AAAA,MACLC,MAAM,CAAE;AAAA,MACRC,SAAS;AAAA,MACTC,WAAWH,WAAS;AAClB,YAAI,CAACA,OAAO;AACV,iBAAO;AAAA,QACT;AAEAI,iBACE,mGACAC,MACF;AAEA,eAAO;AAAA,MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,gBAAgB;AAAA,MACdL,MAAMM;AAAAA,MACNL,UAAW;AACT,eAAO;MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKDM,aAAa;AAAA,MACXP,MAAMQ;AAAAA,MACNP,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDQ,mBAAmB;AAAA,MACjBT,MAAMQ;AAAAA,MACNP,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDS,qBAAqB;AAAA,MACnBV,MAAMQ;AAAAA,MACNP,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EAAO;AAAA,EAGTC,OAAQ;AACN,WAAO;AAAA,MACLC,eAAe,KAAKR;AAAAA;EAEvB;AAAA,EAEDS,OAAO;AAAA,IACLT,eAAgBU,mBAAmB;AACjC,WAAKF,gBAAgBE;AAAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODF,eAAe;AAAA,MACbG,WAAW;AAAA,MACXC,QAASC,kBAAkB;AACzB,aAAKC,WAAWd,iBAAiBa;AAAAA,MACnC;AAAA,IACF;AAAA,EACD;AAAA,EAEDE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKPC,cAAetB,OAAOuB,SAAS;AAC7B,UAAI,CAACA,SAAS;AACZ,aAAKT,gBAAgB,KAAKA,cAAcU,OAAOC,kBAAgBA,iBAAiBzB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAKc,cAAcY,SAAS1B,KAAK,GAAG;AAC9C,aAAKc,cAAca,KAAK3B,KAAK;AAAA,MAC/B;AAEA,WAAK4B,MAAM,SAAS,KAAKd,aAAa;AAAA,IACvC;AAAA,IAEDe,cAAe5B,MAAM6B,OAAO;AAC1B,aAAO,0BAA0B7B,IAAI,IAAI6B,KAAK,IAAI,KAAKC,EAAE;AAAA,IAC3D;AAAA,EACF;AACF;;"}

package/dist/vue3/lib/checkbox-group.js

@@ -1,6 +1,6 @@
 import { warn } from "vue";
 import { DtInputGroup } from "./input-group.js";
-import "../chunks/input_group-jWnq2DJT.js";
+import "../chunks/input_group-hV1WT2it.js";
 import "../common/validators.js";
 import "../common/constants.js";
 import "../common/utils.js";
@@ -23,10 +23,7 @@ const _sfc_main = {
         if (!value) {
           return true;
         }
-        warn(
-          "Component uses selectedValues to initialize the model, value is not supported by this component",
-          void 0
-        );
+        warn("Component uses selectedValues to initialize the model, value is not supported by this component", void 0);
         return false;
       }
     },

package/dist/vue3/lib/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } 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        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    };\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\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":["this"],"mappings":";;;;;;;;AAUK,MAAA,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,SAAS;AAAA,EAET,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEA;AAAA,UACE;AAAA,UACAA;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;"}
+{"version":3,"file":"checkbox-group.js","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } 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        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    };\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\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","name","extends","DtInputGroup","model","prop","props","value","type","default","validator","warn","this","selectedValues","Array","dataQaGroup","String","dataQaGroupLegend","dataQaGroupMessages","emits","data","internalValue","watch","newSelectedValues","immediate","handler","newInternalValue","provideObj","methods","setGroupValue","checked","filter","checkedValue","includes","push","$emit","getMessageKey","index","id"],"mappings":";;;;;;;;AAUA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,SAASC;AAAAA,EAETC,OAAO;AAAA,IACLC,MAAM;AAAA,EACP;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,OAAO;AAAA,MACLC,MAAM,CAAE;AAAA,MACRC,SAAS;AAAA,MACTC,WAAWH,WAAS;AAClB,YAAI,CAACA,OAAO;AACV,iBAAO;AAAA,QACT;AAEAI,aACE,mGACAC,MACF;AAEA,eAAO;AAAA,MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,gBAAgB;AAAA,MACdL,MAAMM;AAAAA,MACNL,UAAW;AACT,eAAO;MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKDM,aAAa;AAAA,MACXP,MAAMQ;AAAAA,MACNP,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDQ,mBAAmB;AAAA,MACjBT,MAAMQ;AAAAA,MACNP,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDS,qBAAqB;AAAA,MACnBV,MAAMQ;AAAAA,MACNP,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EAAO;AAAA,EAGTC,OAAQ;AACN,WAAO;AAAA,MACLC,eAAe,KAAKR;AAAAA;EAEvB;AAAA,EAEDS,OAAO;AAAA,IACLT,eAAgBU,mBAAmB;AACjC,WAAKF,gBAAgBE;AAAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODF,eAAe;AAAA,MACbG,WAAW;AAAA,MACXC,QAASC,kBAAkB;AACzB,aAAKC,WAAWd,iBAAiBa;AAAAA,MACnC;AAAA,IACF;AAAA,EACD;AAAA,EAEDE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKPC,cAAetB,OAAOuB,SAAS;AAC7B,UAAI,CAACA,SAAS;AACZ,aAAKT,gBAAgB,KAAKA,cAAcU,OAAOC,kBAAgBA,iBAAiBzB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAKc,cAAcY,SAAS1B,KAAK,GAAG;AAC9C,aAAKc,cAAca,KAAK3B,KAAK;AAAA,MAC/B;AAEA,WAAK4B,MAAM,SAAS,KAAKd,aAAa;AAAA,IACvC;AAAA,IAEDe,cAAe5B,MAAM6B,OAAO;AAC1B,aAAO,0BAA0B7B,IAAI,IAAI6B,KAAK,IAAI,KAAKC,EAAE;AAAA,IAC3D;AAAA,EACF;AACF;"}

package/dist/vue3/lib/checkbox.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const input = require("../chunks/input-ttnte8zB.js");
+const input = require("../chunks/input-dLLo3Wtg.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_validationMessages = require("./validation-messages.cjs");
@@ -14,7 +14,9 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 };
 const _sfc_main = {
   name: "DtCheckbox",
-  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  components: {
+    DtValidationMessages: lib_validationMessages.DtValidationMessages
+  },
   mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.MessagesMixin],
   inheritAttrs: false,
   emits: [
@@ -87,7 +89,10 @@ const _sfc_main = {
   },
   methods: {
     emitValue(target) {
-      let { value, checked } = target;
+      let {
+        value,
+        checked
+      } = target;
       if (this.internalIndeterminate) {
         checked = false;
         this.internalIndeterminate = false;
@@ -101,7 +106,9 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "d-checkbox__input" };
+const _hoisted_1 = {
+  class: "d-checkbox__input"
+};
 const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
 const _hoisted_3 = {
   key: 0,
@@ -110,47 +117,36 @@ const _hoisted_3 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
-  return vue.openBlock(), vue.createElementBlock("div", null, [
-    vue.createElementVNode("label", null, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.createElementVNode("input", vue.mergeProps({
-            type: "checkbox",
-            checked: _ctx.internalChecked,
-            name: _ctx.internalName,
-            value: _ctx.value,
-            disabled: _ctx.internalDisabled,
-            class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
-          }, _ctx.$attrs, { ".indeterminate": _ctx.internalIndeterminate }, vue.toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
-        ]),
-        $options.hasLabelOrDescription ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-          $options.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: 0,
-            class: _ctx.labelClass
-          }, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
-            ])
-          ], 16)) : vue.createCommentVNode("", true),
-          $options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: 1,
-            class: ["d-description", _ctx.descriptionClass]
-          }, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
-            vue.renderSlot(_ctx.$slots, "description", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
-            ])
-          ], 16)) : vue.createCommentVNode("", true),
-          vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
-            "validation-messages": _ctx.formattedMessages,
-            "show-messages": _ctx.showMessages,
-            class: _ctx.messagesClass
-          }, _ctx.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-        ])) : vue.createCommentVNode("", true)
-      ], 2)
-    ])
-  ]);
+  return vue.openBlock(), vue.createElementBlock("div", null, [vue.createElementVNode("label", null, [vue.createElementVNode("div", {
+    class: vue.normalizeClass(["d-checkbox-group", {
+      "d-checkbox-group--disabled": _ctx.internalDisabled
+    }])
+  }, [vue.createElementVNode("div", _hoisted_1, [vue.createElementVNode("input", vue.mergeProps({
+    type: "checkbox",
+    checked: _ctx.internalChecked,
+    name: _ctx.internalName,
+    value: _ctx.value,
+    disabled: _ctx.internalDisabled,
+    class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
+  }, _ctx.$attrs, {
+    ".indeterminate": _ctx.internalIndeterminate
+  }, vue.toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)]), $options.hasLabelOrDescription ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [$options.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    key: 0,
+    class: _ctx.labelClass
+  }, _ctx.labelChildProps, {
+    "data-qa": "checkbox-label"
+  }), [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)])], 16)) : vue.createCommentVNode("", true), $options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    key: 1,
+    class: ["d-description", _ctx.descriptionClass]
+  }, _ctx.descriptionChildProps, {
+    "data-qa": "checkbox-description"
+  }), [vue.renderSlot(_ctx.$slots, "description", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)])], 16)) : vue.createCommentVNode("", true), vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
+    "validation-messages": _ctx.formattedMessages,
+    "show-messages": _ctx.showMessages,
+    class: _ctx.messagesClass
+  }, _ctx.messagesChildProps, {
+    "data-qa": "dt-checkbox-validation-messages"
+  }), null, 16, ["validation-messages", "show-messages", "class"])])) : vue.createCommentVNode("", true)], 2)])]);
 }
 const checkbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtCheckbox = checkbox;