@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/card.js

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

package/dist/lib/card.js.map

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

package/dist/lib/checkbox-group.cjs

@@ -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/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;;;;;;;;;;;;;;;"}

package/dist/lib/checkbox-group.js

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

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

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

package/dist/lib/checkbox.cjs

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const input = require("../chunks/input-Axw-wFj2.js");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_validationMessages = require("./validation-messages.cjs");
+require("vue");
+require("../common/constants.cjs");
+require("../common/validators.cjs");
+require("../common/utils.cjs");
+const CHECKBOX_INPUT_VALIDATION_CLASSES = {
+  error: "d-checkbox--error",
+  warning: "d-checkbox--warning",
+  success: "d-checkbox--success"
+};
+const _sfc_main = {
+  name: "DtCheckbox",
+  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.MessagesMixin],
+  inheritAttrs: false,
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {Boolean}
+     */
+    "input",
+    /**
+     * Native input focusin event
+     *
+     * @event focusin
+     * @type {FocusEvent}
+     */
+    "focusin",
+    /**
+     * Native input focusout event
+     *
+     * @event focusout
+     * @type {FocusEvent}
+     */
+    "focusout"
+  ],
+  computed: {
+    inputValidationClass() {
+      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];
+    },
+    checkboxGroupValueChecked() {
+      var _a, _b;
+      return ((_b = (_a = this.groupContext) == null ? void 0 : _a.selectedValues) == null ? void 0 : _b.includes(this.value)) ?? false;
+    },
+    hasLabel() {
+      return !!(this.$slots.default || this.label);
+    },
+    hasDescription() {
+      return !!(this.$slots.description || this.description);
+    },
+    hasLabelOrDescription() {
+      return this.hasLabel || this.hasDescription;
+    },
+    inputListeners() {
+      return {
+        /* TODO
+            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
+            and migration prior to upgrading to Vue 3.x
+        */
+        ...this.$listeners,
+        /*
+         * Override input listener to as no-op. Prevents parent input listeners from being passed through
+         * onto the input element which will result in the handler being called twice
+         * (once on the input element and once by the emitted input event by the change listener).
+        */
+        input: () => {
+        },
+        change: (event) => this.emitValue(event.target)
+      };
+    }
+  },
+  watch: {
+    checkboxGroupValueChecked: {
+      immediate: true,
+      handler(newCheckboxGroupValueChecked) {
+        if (this.hasGroup) {
+          this.internalChecked = newCheckboxGroupValueChecked;
+        }
+      }
+    }
+  },
+  mounted() {
+    this.runValidations();
+  },
+  methods: {
+    emitValue(target) {
+      let { value, checked } = target;
+      if (this.internalIndeterminate) {
+        checked = false;
+        this.internalIndeterminate = false;
+        target.checked = false;
+      }
+      this.setGroupValue(value, checked);
+      this.$emit("input", checked);
+    },
+    runValidations() {
+      this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("label", [_c("div", { class: ["d-checkbox-group", { "d-checkbox-group--disabled": _vm.internalDisabled }] }, [_c("div", { staticClass: "d-checkbox__input" }, [_c("input", _vm._g(_vm._b({ class: ["d-checkbox", _vm.inputValidationClass, _vm.inputClass], attrs: { "type": "checkbox", "name": _vm.internalName, "disabled": _vm.internalDisabled }, domProps: { "checked": _vm.internalChecked, "value": _vm.value, "indeterminate": _vm.internalIndeterminate } }, "input", _vm.$attrs, false), _vm.inputListeners))]), _vm.hasLabelOrDescription ? _c("div", { staticClass: "d-checkbox__copy d-checkbox__label", attrs: { "data-qa": "checkbox-label-description-container" } }, [_vm.hasLabel ? _c("div", _vm._b({ class: _vm.labelClass, attrs: { "data-qa": "checkbox-label" } }, "div", _vm.labelChildProps, false), [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e(), _vm.hasDescription ? _c("div", _vm._b({ class: ["d-description", _vm.descriptionClass], attrs: { "data-qa": "checkbox-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
+    return [_vm._v(_vm._s(_vm.description))];
+  })], 2) : _vm._e(), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-checkbox-validation-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const checkbox = __component__.exports;
+exports.DtCheckbox = checkbox;
+//# sourceMappingURL=checkbox.cjs.map

package/dist/lib/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n        <div class=\"d-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"checkbox-description\"\n          >\n            <!-- @slot slot for Checkbox Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-checkbox-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through\n         * onto the input element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target),\n      };\n    },\n  },\n\n  watch: {\n    checkboxGroupValueChecked: {\n      immediate: true,\n      handler (newCheckboxGroupValueChecked) {\n        if (this.hasGroup) {\n          // update internal value when the checkbox group value changes\n          this.internalChecked = newCheckboxGroupValueChecked;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    emitValue (target) {\n      let { value, checked } = target;\n      // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n      // and update this.internalIndeterminate.\n      if (this.internalIndeterminate) {\n        checked = false;\n        this.internalIndeterminate = false;\n        target.checked = false;\n      }\n      // update provided value if injected\n      this.setGroupValue(value, checked);\n\n      // emit the state of the checkbox\n      this.$emit('input', checked);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin"],"mappings":";;;;;;;;;AAAO,MAAM,oCAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;ACiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,sBAAAA,uBAAAA,qBAAA;AAAA,EAEA,QAAA,CAAAC,MAAA,YAAAC,sBAAAC,MAAAA,gBAAAC,MAAAA,aAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,uBAAA;AACA,aAAA,kCAAA,KAAA,uBAAA;AAAA,IACA;AAAA,IAEA,4BAAA;;AACA,eAAA,gBAAA,iBAAA,mBAAA,mBAAA,mBAAA,SAAA,KAAA,WAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,CAAA,EAAA,KAAA,OAAA,WAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,CAAA,EAAA,KAAA,OAAA,eAAA,KAAA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,YAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA,OAAA,MAAA;AAAA,QAAA;AAAA,QACA,QAAA,WAAA,KAAA,UAAA,MAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,2BAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,8BAAA;AACA,YAAA,KAAA,UAAA;AAEA,eAAA,kBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,QAAA;AACA,UAAA,EAAA,OAAA,QAAA,IAAA;AAGA,UAAA,KAAA,uBAAA;AACA,kBAAA;AACA,aAAA,wBAAA;AACA,eAAA,UAAA;AAAA,MACA;AAEA,WAAA,cAAA,OAAA,OAAA;AAGA,WAAA,MAAA,SAAA,OAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,UAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/checkbox.js

@@ -1,19 +1,20 @@
-import { I as a, C as i, G as n, M as r } from "../chunks/input-1tm09l_-.js";
-import { n as l } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtValidationMessages as o } from "./validation-messages.js";
+import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../chunks/input-6kbd8Pju.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtValidationMessages } from "./validation-messages.js";
 import "vue";
-import "./constants.js";
-import "./validators.js";
-import "./utils.js";
-const c = {
+import "../common/constants.js";
+import "../common/validators.js";
+import "../common/utils.js";
+const CHECKBOX_INPUT_VALIDATION_CLASSES = {
   error: "d-checkbox--error",
   warning: "d-checkbox--warning",
   success: "d-checkbox--success"
-}, d = {
+};
+const _sfc_main = {
   name: "DtCheckbox",
-  components: { DtValidationMessages: o },
-  mixins: [a, i, n, r],
-  inheritAttrs: !1,
+  components: { DtValidationMessages },
+  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],
+  inheritAttrs: false,
   emits: [
     /**
      * Native input event
@@ -39,11 +40,11 @@ const c = {
   ],
   computed: {
     inputValidationClass() {
-      return c[this.internalValidationState];
+      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];
     },
     checkboxGroupValueChecked() {
-      var t, e;
-      return ((e = (t = this.groupContext) == null ? void 0 : t.selectedValues) == null ? void 0 : e.includes(this.value)) ?? !1;
+      var _a, _b;
+      return ((_b = (_a = this.groupContext) == null ? void 0 : _a.selectedValues) == null ? void 0 : _b.includes(this.value)) ?? false;
     },
     hasLabel() {
       return !!(this.$slots.default || this.label);
@@ -68,15 +69,17 @@ const c = {
         */
         input: () => {
         },
-        change: (t) => this.emitValue(t.target)
+        change: (event) => this.emitValue(event.target)
       };
     }
   },
   watch: {
     checkboxGroupValueChecked: {
-      immediate: !0,
-      handler(t) {
-        this.hasGroup && (this.internalChecked = t);
+      immediate: true,
+      handler(newCheckboxGroupValueChecked) {
+        if (this.hasGroup) {
+          this.internalChecked = newCheckboxGroupValueChecked;
+        }
       }
     }
   },
@@ -84,34 +87,42 @@ const c = {
     this.runValidations();
   },
   methods: {
-    emitValue(t) {
-      let { value: e, checked: s } = t;
-      this.internalIndeterminate && (s = !1, this.internalIndeterminate = !1, t.checked = !1), this.setGroupValue(e, s), this.$emit("input", s);
+    emitValue(target) {
+      let { value, checked } = target;
+      if (this.internalIndeterminate) {
+        checked = false;
+        this.internalIndeterminate = false;
+        target.checked = false;
+      }
+      this.setGroupValue(value, checked);
+      this.$emit("input", checked);
     },
     runValidations() {
       this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
     }
   }
 };
-var h = function() {
-  var e = this, s = e._self._c;
-  return s("div", [s("label", [s("div", { class: ["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }] }, [s("div", { staticClass: "d-checkbox__input" }, [s("input", e._g(e._b({ class: ["d-checkbox", e.inputValidationClass, e.inputClass], attrs: { type: "checkbox", name: e.internalName, disabled: e.internalDisabled }, domProps: { checked: e.internalChecked, value: e.value, indeterminate: e.internalIndeterminate } }, "input", e.$attrs, !1), e.inputListeners))]), e.hasLabelOrDescription ? s("div", { staticClass: "d-checkbox__copy d-checkbox__label", attrs: { "data-qa": "checkbox-label-description-container" } }, [e.hasLabel ? s("div", e._b({ class: e.labelClass, attrs: { "data-qa": "checkbox-label" } }, "div", e.labelChildProps, !1), [e._t("default", function() {
-    return [e._v(e._s(e.label))];
-  })], 2) : e._e(), e.hasDescription ? s("div", e._b({ class: ["d-description", e.descriptionClass], attrs: { "data-qa": "checkbox-description" } }, "div", e.descriptionChildProps, !1), [e._t("description", function() {
-    return [e._v(e._s(e.description))];
-  })], 2) : e._e(), s("dt-validation-messages", e._b({ class: e.messagesClass, attrs: { "validation-messages": e.formattedMessages, "show-messages": e.showMessages, "data-qa": "dt-checkbox-validation-messages" } }, "dt-validation-messages", e.messagesChildProps, !1))], 1) : e._e()])])]);
-}, u = [], p = /* @__PURE__ */ l(
-  d,
-  h,
-  u,
-  !1,
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("label", [_c("div", { class: ["d-checkbox-group", { "d-checkbox-group--disabled": _vm.internalDisabled }] }, [_c("div", { staticClass: "d-checkbox__input" }, [_c("input", _vm._g(_vm._b({ class: ["d-checkbox", _vm.inputValidationClass, _vm.inputClass], attrs: { "type": "checkbox", "name": _vm.internalName, "disabled": _vm.internalDisabled }, domProps: { "checked": _vm.internalChecked, "value": _vm.value, "indeterminate": _vm.internalIndeterminate } }, "input", _vm.$attrs, false), _vm.inputListeners))]), _vm.hasLabelOrDescription ? _c("div", { staticClass: "d-checkbox__copy d-checkbox__label", attrs: { "data-qa": "checkbox-label-description-container" } }, [_vm.hasLabel ? _c("div", _vm._b({ class: _vm.labelClass, attrs: { "data-qa": "checkbox-label" } }, "div", _vm.labelChildProps, false), [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e(), _vm.hasDescription ? _c("div", _vm._b({ class: ["d-description", _vm.descriptionClass], attrs: { "data-qa": "checkbox-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
+    return [_vm._v(_vm._s(_vm.description))];
+  })], 2) : _vm._e(), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-checkbox-validation-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const C = p.exports;
+const checkbox = __component__.exports;
 export {
-  C as DtCheckbox
+  checkbox as DtCheckbox
 };
 //# sourceMappingURL=checkbox.js.map