@dialpad/dialtone 9.65.1 → 9.66.0

package/dist/vue2/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":[],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","name","props","maxHeight","type","String","default","containerClass","Array","Object","contentClass","headerClass","footerClass"],"mappings":";AAiDA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EACAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKAC,WAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,gBAAA;AAAA,MACAH,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAH,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAI,cAAA;AAAA,MACAN,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAH,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAK,aAAA;AAAA,MACAP,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAH,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAM,aAAA;AAAA,MACAR,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport Vue from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        Vue.util.warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n      // wrap values in object to make reactive\n      provideObj: {\n        selectedValues: this.selectedValues,\n      },\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted checkboxes.\n     * need this to pass value to slotted checkboxes if modified outside\n     * checkbox group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.selectedValues = newInternalValue;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["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;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox-group.cjs","sources":["../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport Vue from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        Vue.util.warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n      // wrap values in object to make reactive\n      provideObj: {\n        selectedValues: this.selectedValues,\n      },\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted checkboxes.\n     * need this to pass value to slotted checkboxes if modified outside\n     * checkbox group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.selectedValues = newInternalValue;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","extends","DtInputGroup","model","prop","props","value","type","default","validator","Vue","util","warn","this","selectedValues","Array","dataQaGroup","String","dataQaGroupLegend","dataQaGroupMessages","emits","data","internalValue","provideObj","watch","newSelectedValues","newInternalValue","methods","setGroupValue","checked","filter","checkedValue","includes","push","$emit","getMessageKey","index","id"],"mappings":";;;;;;;;;;AAUA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,SAAAC,eAAA;AAAA,EAEAC,OAAA;AAAA,IACAC,MAAA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,OAAA;AAAA,MACAC,MAAA,CAAA;AAAA,MACAC,SAAA;AAAA,MACAC,WAAAH,WAAA;AACA,YAAA,CAAAA,OAAA;AACA,iBAAA;AAAA,QACA;AAEAI,YAAAC,KAAAC,KACA,mGACAC,MACA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,gBAAA;AAAA,MACAP,MAAAQ;AAAAA,MACAP,UAAA;AACA,eAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAQ,aAAA;AAAA,MACAT,MAAAU;AAAAA,MACAT,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAU,mBAAA;AAAA,MACAX,MAAAU;AAAAA,MACAT,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAW,qBAAA;AAAA,MACAZ,MAAAU;AAAAA,MACAT,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAY,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAAA,EAGAC,OAAA;AACA,WAAA;AAAA,MACAC,eAAA,KAAAR;AAAAA;AAAAA,MAEAS,YAAA;AAAA,QACAT,gBAAA,KAAAA;AAAAA,MACA;AAAA;EAEA;AAAA,EAEAU,OAAA;AAAA,IACAV,eAAAW,mBAAA;AACA,WAAAH,gBAAAG;AAAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOAH,cAAAI,kBAAA;AACA,WAAAH,WAAAT,iBAAAY;AAAAA,IACA;AAAA,EACA;AAAA,EAEAC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKAC,cAAAtB,OAAAuB,SAAA;AACA,UAAA,CAAAA,SAAA;AACA,aAAAP,gBAAA,KAAAA,cAAAQ,OAAAC,kBAAAA,iBAAAzB,KAAA;AAAA,MACA,WAAA,CAAA,KAAAgB,cAAAU,SAAA1B,KAAA,GAAA;AACA,aAAAgB,cAAAW,KAAA3B,KAAA;AAAA,MACA;AAEA,WAAA4B,MAAA,SAAA,KAAAZ,aAAA;AAAA,IACA;AAAA,IAEAa,cAAA5B,MAAA6B,OAAA;AACA,aAAA,0BAAA7B,IAAA,IAAA6B,KAAA,IAAA,KAAAC,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;"}

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

@@ -1,7 +1,7 @@
 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 "../chunks/input_group-ZI7aVGEp.js";
 import "../common/validators.js";
 import "../common/constants.js";
 import "../common/utils.js";
@@ -23,10 +23,7 @@ const _sfc_main = {
         if (!value) {
           return true;
         }
-        Vue.util.warn(
-          "Component uses selectedValues to initialize the model, value is not supported by this component",
-          void 0
-        );
+        Vue.util.warn("Component uses selectedValues to initialize the model, value is not supported by this component", void 0);
         return false;
       }
     },
@@ -113,16 +110,7 @@ const _sfc_main = {
 };
 const _sfc_render = null;
 const _sfc_staticRenderFns = null;
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const checkbox_group = __component__.exports;
 export {
   checkbox_group as DtCheckboxGroup

package/dist/vue2/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":["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;;;;;;;;;;;;;;"}
+{"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","name","extends","DtInputGroup","model","prop","props","value","type","default","validator","Vue","util","warn","this","selectedValues","Array","dataQaGroup","String","dataQaGroupLegend","dataQaGroupMessages","emits","data","internalValue","provideObj","watch","newSelectedValues","newInternalValue","methods","setGroupValue","checked","filter","checkedValue","includes","push","$emit","getMessageKey","index","id"],"mappings":";;;;;;;;AAUA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,SAAAC;AAAAA,EAEAC,OAAA;AAAA,IACAC,MAAA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,OAAA;AAAA,MACAC,MAAA,CAAA;AAAA,MACAC,SAAA;AAAA,MACAC,WAAAH,WAAA;AACA,YAAA,CAAAA,OAAA;AACA,iBAAA;AAAA,QACA;AAEAI,YAAAC,KAAAC,KACA,mGACAC,MACA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,gBAAA;AAAA,MACAP,MAAAQ;AAAAA,MACAP,UAAA;AACA,eAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAQ,aAAA;AAAA,MACAT,MAAAU;AAAAA,MACAT,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAU,mBAAA;AAAA,MACAX,MAAAU;AAAAA,MACAT,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAW,qBAAA;AAAA,MACAZ,MAAAU;AAAAA,MACAT,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAY,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAAA,EAGAC,OAAA;AACA,WAAA;AAAA,MACAC,eAAA,KAAAR;AAAAA;AAAAA,MAEAS,YAAA;AAAA,QACAT,gBAAA,KAAAA;AAAAA,MACA;AAAA;EAEA;AAAA,EAEAU,OAAA;AAAA,IACAV,eAAAW,mBAAA;AACA,WAAAH,gBAAAG;AAAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOAH,cAAAI,kBAAA;AACA,WAAAH,WAAAT,iBAAAY;AAAAA,IACA;AAAA,EACA;AAAA,EAEAC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKAC,cAAAtB,OAAAuB,SAAA;AACA,UAAA,CAAAA,SAAA;AACA,aAAAP,gBAAA,KAAAA,cAAAQ,OAAAC,kBAAAA,iBAAAzB,KAAA;AAAA,MACA,WAAA,CAAA,KAAAgB,cAAAU,SAAA1B,KAAA,GAAA;AACA,aAAAgB,cAAAW,KAAA3B,KAAA;AAAA,MACA;AAEA,WAAA4B,MAAA,SAAA,KAAAZ,aAAA;AAAA,IACA;AAAA,IAEAa,cAAA5B,MAAA6B,OAAA;AACA,aAAA,0BAAA7B,IAAA,IAAA6B,KAAA,IAAA,KAAAC,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;"}

package/dist/vue2/lib/checkbox.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const input = require("../chunks/input-Axw-wFj2.js");
+const input = require("../chunks/input-Hqw33WBe.js");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_validationMessages = require("./validation-messages.cjs");
 require("vue");
@@ -14,7 +14,9 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 };
 const _sfc_main = {
   name: "DtCheckbox",
-  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  components: {
+    DtValidationMessages: lib_validationMessages.DtValidationMessages
+  },
   mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.MessagesMixin],
   inheritAttrs: false,
   emits: [
@@ -90,7 +92,10 @@ const _sfc_main = {
   },
   methods: {
     emitValue(target) {
-      let { value, checked } = target;
+      let {
+        value,
+        checked
+      } = target;
       if (this.internalIndeterminate) {
         checked = false;
         this.internalIndeterminate = false;
@@ -106,23 +111,54 @@ const _sfc_main = {
 };
 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 _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() {
+  })], 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()])])]);
+  })], 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
-);
+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/vue2/lib/checkbox.cjs.map

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":["CHECKBOX_INPUT_VALIDATION_CLASSES","error","warning","success","_sfc_main","name","components","DtValidationMessages","mixins","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","inheritAttrs","emits","computed","inputValidationClass","internalValidationState","checkboxGroupValueChecked","groupContext","selectedValues","includes","value","hasLabel","$slots","default","label","hasDescription","description","hasLabelOrDescription","inputListeners","$listeners","input","change","event","emitValue","target","watch","immediate","handler","newCheckboxGroupValueChecked","hasGroup","internalChecked","mounted","runValidations","methods","checked","internalIndeterminate","setGroupValue","$emit","validateInputLabels","$attrs"],"mappings":";;;;;;;;;AAAO,MAAMA,oCAAoC;AAAA,EAC/CC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AACX;ACiEA,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IAAAC,sBAAAA,uBAAAA;AAAAA,EAAA;AAAA,EAEAC,QAAA,CAAAC,MAAA,YAAAC,sBAAAC,MAAAA,gBAAAC,MAAAA,aAAA;AAAA,EAEAC,cAAA;AAAA,EAEAC,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,EAAA;AAAA,EAGAC,UAAA;AAAA,IACAC,uBAAA;AACA,aAAAhB,kCAAA,KAAAiB,uBAAA;AAAA,IACA;AAAA,IAEAC,4BAAA;;AACA,eAAA,gBAAAC,iBAAA,mBAAAC,mBAAA,mBAAAC,SAAA,KAAAC,WAAA;AAAA,IACA;AAAA,IAEAC,WAAA;AACA,aAAA,CAAA,EAAA,KAAAC,OAAAC,WAAA,KAAAC;AAAAA,IACA;AAAA,IAEAC,iBAAA;AACA,aAAA,CAAA,EAAA,KAAAH,OAAAI,eAAA,KAAAA;AAAAA,IACA;AAAA,IAEAC,wBAAA;AACA,aAAA,KAAAN,YAAA,KAAAI;AAAAA,IACA;AAAA,IAEAG,iBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,QAMAC,OAAAA,MAAA;AAAA,QAAA;AAAA,QACAC,QAAAC,WAAA,KAAAC,UAAAD,MAAAE,MAAA;AAAA;IAEA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA,IACAnB,2BAAA;AAAA,MACAoB,WAAA;AAAA,MACAC,QAAAC,8BAAA;AACA,YAAA,KAAAC,UAAA;AAEA,eAAAC,kBAAAF;AAAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEAG,UAAA;AACA,SAAAC,eAAA;AAAA,EACA;AAAA,EAEAC,SAAA;AAAA,IACAV,UAAAC,QAAA;AACA,UAAA;AAAA,QAAAd;AAAAA,QAAAwB;AAAAA,MAAA,IAAAV;AAGA,UAAA,KAAAW,uBAAA;AACAD,kBAAA;AACA,aAAAC,wBAAA;AACAX,eAAAU,UAAA;AAAA,MACA;AAEA,WAAAE,cAAA1B,OAAAwB,OAAA;AAGA,WAAAG,MAAA,SAAAH,OAAA;AAAA,IACA;AAAA,IAEAF,iBAAA;AACA,WAAAM,oBAAA,KAAA3B,UAAA,KAAA4B,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/checkbox.js

@@ -1,4 +1,4 @@
-import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../chunks/input-6kbd8Pju.js";
+import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../chunks/input-PhJeBN6r.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import { DtValidationMessages } from "./validation-messages.js";
 import "vue";
@@ -12,7 +12,9 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 };
 const _sfc_main = {
   name: "DtCheckbox",
-  components: { DtValidationMessages },
+  components: {
+    DtValidationMessages
+  },
   mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],
   inheritAttrs: false,
   emits: [
@@ -88,7 +90,10 @@ const _sfc_main = {
   },
   methods: {
     emitValue(target) {
-      let { value, checked } = target;
+      let {
+        value,
+        checked
+      } = target;
       if (this.internalIndeterminate) {
         checked = false;
         this.internalIndeterminate = false;
@@ -104,23 +109,54 @@ const _sfc_main = {
 };
 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 _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() {
+  })], 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()])])]);
+  })], 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
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const checkbox = __component__.exports;
 export {
   checkbox as DtCheckbox

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","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":[],"mappings":";;;;;;;AAAO,MAAM,oCAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;ACiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,qBAAA;AAAA,EAEA,QAAA,CAAA,YAAA,gBAAA,gBAAA,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;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox.js","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":["CHECKBOX_INPUT_VALIDATION_CLASSES","error","warning","success","_sfc_main","name","components","DtValidationMessages","mixins","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","inheritAttrs","emits","computed","inputValidationClass","internalValidationState","checkboxGroupValueChecked","groupContext","selectedValues","includes","value","hasLabel","$slots","default","label","hasDescription","description","hasLabelOrDescription","inputListeners","$listeners","input","change","event","emitValue","target","watch","immediate","handler","newCheckboxGroupValueChecked","hasGroup","internalChecked","mounted","runValidations","methods","checked","internalIndeterminate","setGroupValue","$emit","validateInputLabels","$attrs"],"mappings":";;;;;;;AAAO,MAAMA,oCAAoC;AAAA,EAC/CC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AACX;ACiEA,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IAAAC;AAAAA,EAAA;AAAA,EAEAC,QAAA,CAAAC,YAAAC,gBAAAC,gBAAAC,aAAA;AAAA,EAEAC,cAAA;AAAA,EAEAC,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,EAAA;AAAA,EAGAC,UAAA;AAAA,IACAC,uBAAA;AACA,aAAAhB,kCAAA,KAAAiB,uBAAA;AAAA,IACA;AAAA,IAEAC,4BAAA;;AACA,eAAA,gBAAAC,iBAAA,mBAAAC,mBAAA,mBAAAC,SAAA,KAAAC,WAAA;AAAA,IACA;AAAA,IAEAC,WAAA;AACA,aAAA,CAAA,EAAA,KAAAC,OAAAC,WAAA,KAAAC;AAAAA,IACA;AAAA,IAEAC,iBAAA;AACA,aAAA,CAAA,EAAA,KAAAH,OAAAI,eAAA,KAAAA;AAAAA,IACA;AAAA,IAEAC,wBAAA;AACA,aAAA,KAAAN,YAAA,KAAAI;AAAAA,IACA;AAAA,IAEAG,iBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,QAMAC,OAAAA,MAAA;AAAA,QAAA;AAAA,QACAC,QAAAC,WAAA,KAAAC,UAAAD,MAAAE,MAAA;AAAA;IAEA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA,IACAnB,2BAAA;AAAA,MACAoB,WAAA;AAAA,MACAC,QAAAC,8BAAA;AACA,YAAA,KAAAC,UAAA;AAEA,eAAAC,kBAAAF;AAAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEAG,UAAA;AACA,SAAAC,eAAA;AAAA,EACA;AAAA,EAEAC,SAAA;AAAA,IACAV,UAAAC,QAAA;AACA,UAAA;AAAA,QAAAd;AAAAA,QAAAwB;AAAAA,MAAA,IAAAV;AAGA,UAAA,KAAAW,uBAAA;AACAD,kBAAA;AACA,aAAAC,wBAAA;AACAX,eAAAU,UAAA;AAAA,MACA;AAEA,WAAAE,cAAA1B,OAAAwB,OAAA;AAGA,WAAAG,MAAA,SAAAH,OAAA;AAAA,IACA;AAAA,IAEAF,iBAAA;AACA,WAAAM,oBAAA,KAAA3B,UAAA,KAAA4B,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/chip.cjs

@@ -8,7 +8,7 @@ require("../common/constants.cjs");
 require("vue");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 const CHIP_SIZE_MODIFIERS = {
   xs: "d-chip__label--xs",
@@ -38,7 +38,9 @@ const _sfc_main = {
     closeButtonProps: {
       type: Object,
       default: function() {
-        return { ariaLabel: "close" };
+        return {
+          ariaLabel: "close"
+        };
       },
       validator: (props) => {
         return !!props.ariaLabel;
@@ -153,17 +155,10 @@ const _sfc_main = {
   },
   methods: {
     chipClasses() {
-      return [
-        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        CHIP_SIZE_MODIFIERS[this.size],
-        this.labelClass
-      ];
+      return [this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label", CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
     chipCloseButtonClasses() {
-      return [
-        "d-chip__close",
-        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
-      ];
+      return ["d-chip__close", CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
     onClose() {
       if (!this.hideClose) {
@@ -174,23 +169,60 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "d-chip" }, [_c(_vm.interactive ? "button" : "span", _vm._g({ tag: "component", class: _vm.chipClasses(), attrs: { "id": _vm.id, "type": _vm.interactive && "button", "data-qa": "dt-chip", "aria-labelledby": _vm.ariaLabel ? void 0 : `${_vm.id}-content`, "aria-label": _vm.ariaLabel } }, _vm.chipListeners), [_vm.$slots.icon ? _c("span", { staticClass: "d-chip__icon", attrs: { "data-qa": "dt-chip-icon" } }, [_vm._t("icon")], 2) : _vm.$slots.avatar ? _c("span", { attrs: { "data-qa": "dt-chip-avatar" } }, [_vm._t("avatar")], 2) : _vm._e(), _vm.$slots.default ? _c("span", { class: ["d-chip__text", _vm.contentClass], attrs: { "id": `${_vm.id}-content`, "data-qa": "dt-chip-label" } }, [_vm._t("default")], 2) : _vm._e()]), !_vm.hideClose ? _c("dt-button", _vm._b({ class: _vm.chipCloseButtonClasses(), attrs: { "data-qa": "dt-chip-close", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": function($event) {
-    return _vm.$emit("close");
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "close", "size": _vm.closeButtonIconSize } })];
-  }, proxy: true }], null, false, 1192647893) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
+  return _c("span", {
+    staticClass: "d-chip"
+  }, [_c(_vm.interactive ? "button" : "span", _vm._g({
+    tag: "component",
+    class: _vm.chipClasses(),
+    attrs: {
+      "id": _vm.id,
+      "type": _vm.interactive && "button",
+      "data-qa": "dt-chip",
+      "aria-labelledby": _vm.ariaLabel ? void 0 : `${_vm.id}-content`,
+      "aria-label": _vm.ariaLabel
+    }
+  }, _vm.chipListeners), [_vm.$slots.icon ? _c("span", {
+    staticClass: "d-chip__icon",
+    attrs: {
+      "data-qa": "dt-chip-icon"
+    }
+  }, [_vm._t("icon")], 2) : _vm.$slots.avatar ? _c("span", {
+    attrs: {
+      "data-qa": "dt-chip-avatar"
+    }
+  }, [_vm._t("avatar")], 2) : _vm._e(), _vm.$slots.default ? _c("span", {
+    class: ["d-chip__text", _vm.contentClass],
+    attrs: {
+      "id": `${_vm.id}-content`,
+      "data-qa": "dt-chip-label"
+    }
+  }, [_vm._t("default")], 2) : _vm._e()]), !_vm.hideClose ? _c("dt-button", _vm._b({
+    class: _vm.chipCloseButtonClasses(),
+    attrs: {
+      "data-qa": "dt-chip-close",
+      "aria-label": _vm.closeButtonProps.ariaLabel
+    },
+    on: {
+      "click": function($event) {
+        return _vm.$emit("close");
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "close",
+            "size": _vm.closeButtonIconSize
+          }
+        })];
+      },
+      proxy: true
+    }], null, false, 1192647893)
+  }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtChip = __component__.exports;
 exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = CHIP_CLOSE_BUTTON_SIZE_MODIFIERS;
 exports.CHIP_ICON_SIZES = CHIP_ICON_SIZES;

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

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"$slots.icon\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-chip__icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"$slots.avatar\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"$slots.default\"\n        :id=\"`${id}-content`\"\n        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString } from '@/common/utils';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","getUniqueString"],"mappings":"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"}
+{"version":3,"file":"chip.cjs","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"$slots.icon\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-chip__icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"$slots.avatar\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"$slots.default\"\n        :id=\"`${id}-content`\"\n        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString } from '@/common/utils';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["CHIP_SIZE_MODIFIERS","xs","sm","md","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","name","components","DtButton","DtIcon","props","closeButtonProps","type","Object","default","ariaLabel","validator","hideClose","Boolean","size","String","s","keys","includes","interactive","id","getUniqueString","contentClass","Array","labelClass","emits","data","isActive","computed","chipListeners","$listeners","click","event","$emit","keyup","code","toLowerCase","onClose","closeButtonIconSize","methods","chipClasses","$attrs","chipCloseButtonClasses"],"mappings":"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"}