@dialpad/dialtone 9.35.0-beta.2 → 9.36.0

package/dist/vue2/lib/callbox.cjs

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_avatar = require("./avatar.cjs");
+const lib_badge = require("./badge.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("@dialpad/dialtone-icons/icons.json");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("./presence.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue2");
+const CALLBOX_BADGE_COLORS = {
+  warning: "dt-recipe-callbox-badge--warning"
+};
+const CALLBOX_BORDER_COLORS = {
+  default: "dt-recipe-callbox--border-default",
+  ai: "dt-recipe-callbox--border-ai",
+  critical: "dt-recipe-callbox--border-critical"
+};
+const _sfc_main = {
+  name: "DtRecipeCallbox",
+  components: { DtBadge: lib_badge.DtBadge, DtAvatar: lib_avatar.DtAvatar },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Text for the badge element
+     */
+    badgeText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Color for the badge element
+     * @values null, warning
+     */
+    badgeColor: {
+      type: String,
+      default: null,
+      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color)
+    },
+    /**
+     * Optional avatar image url.
+     * If not provided it will use the initial of the name.
+     */
+    avatarSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar's full name, used to extract initials
+     * to display if `avatarSrc` is empty.
+     */
+    avatarFullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Callbox title
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Callbox border color
+     * @values default, ai, critical
+     */
+    borderColor: {
+      type: String,
+      default: "default",
+      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color)
+    },
+    /**
+     * Makes the callbox avatar and title clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Controls the avatars overlay icon
+     */
+    isOnHold: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    /**
+     * Callbox click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    shouldShowAvatar() {
+      return this.avatarFullName || this.avatarSrc;
+    },
+    badgeClass() {
+      return CALLBOX_BADGE_COLORS[this.badgeColor];
+    },
+    borderClass() {
+      return CALLBOX_BORDER_COLORS[this.borderColor];
+    }
+  },
+  methods: {
+    handleClick(e) {
+      if (!this.clickable)
+        return;
+      this.$emit("click", e);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dt-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "dt-recipe-callbox--video", attrs: { "data-qa": "dt-recipe-callbox--video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["dt-recipe-callbox--main-content", _vm.borderClass, { "dt-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox--main-content" } }, [_c("div", { staticClass: "dt-recipe-callbox--main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "dt-recipe-callbox--avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "overlay-icon": _vm.isOnHold ? "pause" : null, "size": "sm" }, on: { "click": _vm.handleClick } }) : _vm._e(), _c("div", { staticClass: "dt-recipe-callbox--content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "dt-recipe-callbox--content-title", attrs: { "data-qa": "dt-recipe-callbox--title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "dt-recipe-callbox--content-badge", attrs: { "data-qa": "dt-recipe-callbox--badge-wrapper" } }, [_vm._t("badge", function() {
+    return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
+  })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "dt-recipe-callbox--content-subtitle", attrs: { "data-qa": "dt-recipe-callbox--subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "dt-recipe-callbox--right", attrs: { "data-qa": "dt-recipe-callbox--right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "dt-recipe-callbox--main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox--bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "ef08f46e",
+  null,
+  null
+);
+const callbox = __component__.exports;
+exports.CALLBOX_BADGE_COLORS = CALLBOX_BADGE_COLORS;
+exports.CALLBOX_BORDER_COLORS = CALLBOX_BORDER_COLORS;
+exports.DtRecipeCallbox = callbox;
+//# sourceMappingURL=callbox.cjs.map

package/dist/vue2/lib/callbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"callbox.cjs","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":["DtBadge","DtAvatar"],"mappings":";;;;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;ACgFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAAA,UAAA,SAAA,UAAAC,oBAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA;AAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/callbox.js

@@ -0,0 +1,147 @@
+import { DtAvatar } from "./avatar.js";
+import { DtBadge } from "./badge.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import "../common/utils.js";
+import "../common/constants.js";
+import "vue";
+import "@dialpad/dialtone-icons/icons.json";
+import "../chunks/icon_constants-Dy4MEUJL.js";
+import "./presence.js";
+import "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+const CALLBOX_BADGE_COLORS = {
+  warning: "dt-recipe-callbox-badge--warning"
+};
+const CALLBOX_BORDER_COLORS = {
+  default: "dt-recipe-callbox--border-default",
+  ai: "dt-recipe-callbox--border-ai",
+  critical: "dt-recipe-callbox--border-critical"
+};
+const _sfc_main = {
+  name: "DtRecipeCallbox",
+  components: { DtBadge, DtAvatar },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Text for the badge element
+     */
+    badgeText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Color for the badge element
+     * @values null, warning
+     */
+    badgeColor: {
+      type: String,
+      default: null,
+      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color)
+    },
+    /**
+     * Optional avatar image url.
+     * If not provided it will use the initial of the name.
+     */
+    avatarSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar's full name, used to extract initials
+     * to display if `avatarSrc` is empty.
+     */
+    avatarFullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Callbox title
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Callbox border color
+     * @values default, ai, critical
+     */
+    borderColor: {
+      type: String,
+      default: "default",
+      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color)
+    },
+    /**
+     * Makes the callbox avatar and title clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Controls the avatars overlay icon
+     */
+    isOnHold: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    /**
+     * Callbox click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    shouldShowAvatar() {
+      return this.avatarFullName || this.avatarSrc;
+    },
+    badgeClass() {
+      return CALLBOX_BADGE_COLORS[this.badgeColor];
+    },
+    borderClass() {
+      return CALLBOX_BORDER_COLORS[this.borderColor];
+    }
+  },
+  methods: {
+    handleClick(e) {
+      if (!this.clickable)
+        return;
+      this.$emit("click", e);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dt-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "dt-recipe-callbox--video", attrs: { "data-qa": "dt-recipe-callbox--video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["dt-recipe-callbox--main-content", _vm.borderClass, { "dt-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox--main-content" } }, [_c("div", { staticClass: "dt-recipe-callbox--main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "dt-recipe-callbox--avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "overlay-icon": _vm.isOnHold ? "pause" : null, "size": "sm" }, on: { "click": _vm.handleClick } }) : _vm._e(), _c("div", { staticClass: "dt-recipe-callbox--content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "dt-recipe-callbox--content-title", attrs: { "data-qa": "dt-recipe-callbox--title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "dt-recipe-callbox--content-badge", attrs: { "data-qa": "dt-recipe-callbox--badge-wrapper" } }, [_vm._t("badge", function() {
+    return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
+  })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "dt-recipe-callbox--content-subtitle", attrs: { "data-qa": "dt-recipe-callbox--subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "dt-recipe-callbox--right", attrs: { "data-qa": "dt-recipe-callbox--right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "dt-recipe-callbox--main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox--bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "ef08f46e",
+  null,
+  null
+);
+const callbox = __component__.exports;
+export {
+  CALLBOX_BADGE_COLORS,
+  CALLBOX_BORDER_COLORS,
+  callbox as DtRecipeCallbox
+};
+//# sourceMappingURL=callbox.js.map

package/dist/vue2/lib/callbox.js.map

@@ -0,0 +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":[],"mappings":";;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;ACgFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,SAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA;AAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/card.cjs

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

package/dist/vue2/lib/card.cjs.map

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

package/dist/vue2/lib/card.js

@@ -0,0 +1,74 @@
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+const _sfc_main = {
+  name: "DtCard",
+  props: {
+    /**
+     * The maximum height of the card content.
+     * If given, makes content area scrollable.
+     */
+    maxHeight: {
+      type: String,
+      default: null
+    },
+    /**
+     * class for card container.
+     */
+    containerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * class for card content.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * class for card header.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * class for card footer.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
+    "d-card",
+    _vm.containerClass
+  ], attrs: { "data-qa": "dt-card" } }, [_vm.$slots.header ? _c("div", { class: [
+    "d-card__header",
+    _vm.headerClass
+  ] }, [_vm._t("header")], 2) : _vm._e(), _c("div", { class: [
+    "d-card__content",
+    _vm.contentClass
+  ], style: { "max-height": _vm.maxHeight } }, [_vm._t("content")], 2), _vm.$slots.footer ? _c("div", { class: [
+    "d-card__footer",
+    _vm.footerClass
+  ] }, [_vm._t("footer")], 2) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtCard = __component__.exports;
+export {
+  DtCard
+};
+//# sourceMappingURL=card.js.map

package/dist/vue2/lib/card.js.map

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

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

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

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

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