@dialpad/dialtone 9.98.0 → 9.99.0

package/dist/vue3/components/checkbox/checkbox.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.vue.cjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<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        /*\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        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\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","CHECKBOX_INPUT_VALIDATION_CLASSES","_createElementBlock","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}
+{"version":3,"file":"checkbox.vue.cjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<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  compatConfig: { MODE: 3 },\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        /*\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        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\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","CHECKBOX_INPUT_VALIDATION_CLASSES","_createElementBlock","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/vue3/components/checkbox/checkbox.vue.js

@@ -4,6 +4,7 @@ import { resolveComponent, openBlock, createElementBlock, createElementVNode, no
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCheckbox",
   components: { DtValidationMessages },
   mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],

package/dist/vue3/components/checkbox/checkbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.vue.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<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        /*\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        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\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":["_createElementBlock","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}
+{"version":3,"file":"checkbox.vue.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<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  compatConfig: { MODE: 3 },\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        /*\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        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\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":["_createElementBlock","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/vue3/components/checkbox_group/checkbox_group.vue.cjs

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const input_group = require("../input_group/input_group.vue.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCheckboxGroup",
   extends: input_group.default,
   model: {

package/dist/vue3/components/checkbox_group/checkbox_group.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox_group.vue.cjs","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtInputGroup","warn","this"],"mappings":";;;;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,SAASA,YAAY;AAAA,EAErB,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEAC,YAAI;AAAA,UACF;AAAA,UACAC;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;;"}
+{"version":3,"file":"checkbox_group.vue.cjs","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtInputGroup","warn","this"],"mappings":";;;;AAUA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,SAASA,YAAY;AAAA,EAErB,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEAC,YAAI;AAAA,UACF;AAAA,UACAC;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;;"}

package/dist/vue3/components/checkbox_group/checkbox_group.vue.js

@@ -1,6 +1,7 @@
 import { warn } from "vue";
 import DtInputGroup from "../input_group/input_group.vue.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCheckboxGroup",
   extends: DtInputGroup,
   model: {

package/dist/vue3/components/checkbox_group/checkbox_group.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox_group.vue.js","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["this"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,SAAS;AAAA,EAET,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEA;AAAA,UACE;AAAA,UACAA;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;"}
+{"version":3,"file":"checkbox_group.vue.js","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["this"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,SAAS;AAAA,EAET,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEA;AAAA,UACE;AAAA,UACAA;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;"}

package/dist/vue3/components/chip/chip.vue.cjs

@@ -7,6 +7,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../button/button.vue.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtChip",
   components: {
     DtButton: button.default,

package/dist/vue3/components/chip/chip.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.vue.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<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=\"hasSlotContent($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=\"hasSlotContent($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=\"hasSlotContent($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-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } 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    DtIconClose,\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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\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","DtIconClose","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createCommentVNode","_normalizeClass","_createVNode"],"mappings":"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"}
+{"version":3,"file":"chip.vue.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<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=\"hasSlotContent($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=\"hasSlotContent($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=\"hasSlotContent($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-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } 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  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\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","DtIconClose","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createCommentVNode","_normalizeClass","_createVNode"],"mappings":"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"}

package/dist/vue3/components/chip/chip.vue.js

@@ -5,6 +5,7 @@ import { resolveComponent, openBlock, createElementBlock, createBlock, resolveDy
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../button/button.vue.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtChip",
   components: {
     DtButton,

package/dist/vue3/components/chip/chip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.vue.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<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=\"hasSlotContent($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=\"hasSlotContent($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=\"hasSlotContent($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-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } 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    DtIconClose,\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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\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":["_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createCommentVNode","_normalizeClass","_createVNode"],"mappings":"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"}
+{"version":3,"file":"chip.vue.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<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=\"hasSlotContent($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=\"hasSlotContent($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=\"hasSlotContent($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-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } 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  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\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":["_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createCommentVNode","_normalizeClass","_createVNode"],"mappings":"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"}

package/dist/vue3/components/codeblock/codeblock.vue.cjs

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCodeblock",
   props: {
     text: {

package/dist/vue3/components/codeblock/codeblock.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.vue.cjs","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createTextVNode","_createElementVNode","_toDisplayString"],"mappings":";;;;AASA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AACH;AAfM,MAAA,aAAA,EAAA,OAAM,cAAa;;0BAFvBA,uBAIM,OAAA,MAAA;AAAA,IALRC,IAAAA,gBACO,MACH;AAAA,IAAAC,IAEkB,mBAAA,QAFlB,YAEkBC,IAAAA,gBAAd,OAAI,IAAA,GAAA,CAAA;AAAA,IAJZF,IAAAA,gBAIsB,MACpB;AAAA;;;;"}
+{"version":3,"file":"codeblock.vue.cjs","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createTextVNode","_createElementVNode","_toDisplayString"],"mappings":";;;;AASA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AACH;AAhBM,MAAA,aAAA,EAAA,OAAM,cAAa;;0BAFvBA,uBAIM,OAAA,MAAA;AAAA,IALRC,IAAAA,gBACO,MACH;AAAA,IAAAC,IAEkB,mBAAA,QAFlB,YAEkBC,IAAAA,gBAAd,OAAI,IAAA,GAAA,CAAA;AAAA,IAJZF,IAAAA,gBAIsB,MACpB;AAAA;;;;"}

package/dist/vue3/components/codeblock/codeblock.vue.js

@@ -1,6 +1,7 @@
 import { openBlock, createElementBlock, createTextVNode, createElementVNode, toDisplayString } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCodeblock",
   props: {
     text: {

package/dist/vue3/components/codeblock/codeblock.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.vue.js","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createTextVNode","_createElementVNode","_toDisplayString"],"mappings":";;AASA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AACH;AAfM,MAAA,aAAA,EAAA,OAAM,cAAa;;sBAFvBA,mBAIM,OAAA,MAAA;AAAA,IALRC,gBACO,MACH;AAAA,IAAAC,mBAEkB,QAFlB,YAEkBC,gBAAd,OAAI,IAAA,GAAA,CAAA;AAAA,IAJZF,gBAIsB,MACpB;AAAA;;;"}
+{"version":3,"file":"codeblock.vue.js","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createTextVNode","_createElementVNode","_toDisplayString"],"mappings":";;AASA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AACH;AAhBM,MAAA,aAAA,EAAA,OAAM,cAAa;;sBAFvBA,mBAIM,OAAA,MAAA;AAAA,IALRC,gBACO,MACH;AAAA,IAAAC,mBAEkB,QAFlB,YAEkBC,gBAAd,OAAI,IAAA,GAAA,CAAA;AAAA,IAJZF,gBAIsB,MACpB;AAAA;;;"}

package/dist/vue3/components/collapsible/collapsible.vue.cjs

@@ -8,6 +8,7 @@ const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helpe
 const button = require("../button/button.vue.cjs");
 const lazy_show = require("../lazy_show/lazy_show.vue.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCollapsible",
   components: {
     DtButton: button.default,

package/dist/vue3/components/collapsible/collapsible.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.vue.cjs","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon-chevron-down\n            v-if=\"isOpen\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <dt-icon-chevron-right\n            v-else\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIconChevronDown,\n    DtIconChevronRight,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIconChevronDown","DtIconChevronRight","getUniqueString","extractVueListeners","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","_normalizeStyle","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"collapsible.vue.cjs","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon-chevron-down\n            v-if=\"isOpen\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <dt-icon-chevron-right\n            v-else\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIconChevronDown,\n    DtIconChevronRight,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIconChevronDown","DtIconChevronRight","getUniqueString","extractVueListeners","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","_normalizeStyle","_toDisplayString"],"mappings":"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"}

package/dist/vue3/components/collapsible/collapsible.vue.js

@@ -6,6 +6,7 @@ import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../button/button.vue.js";
 import DtLazyShow from "../lazy_show/lazy_show.vue.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCollapsible",
   components: {
     DtButton,

package/dist/vue3/components/collapsible/collapsible.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.vue.js","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon-chevron-down\n            v-if=\"isOpen\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <dt-icon-chevron-right\n            v-else\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIconChevronDown,\n    DtIconChevronRight,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","_normalizeStyle","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"collapsible.vue.js","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon-chevron-down\n            v-if=\"isOpen\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <dt-icon-chevron-right\n            v-else\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIconChevronDown,\n    DtIconChevronRight,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","_normalizeStyle","_toDisplayString"],"mappings":"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"}

package/dist/vue3/components/combobox/combobox.vue.cjs

@@ -8,6 +8,7 @@ const combobox_constants = require("./combobox_constants.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCombobox",
   components: {
     ComboboxLoadingList: combobox_loadingList.default,

package/dist/vue3/components/combobox/combobox.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.vue.cjs","sources":["../../../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading (loading) {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["ComboboxLoadingList","ComboboxEmptyList","KeyboardNavigation","LABEL_SIZES","getUniqueString","hasSlotContent","_createElementBlock","_withKeys","_withModifiers","_createElementVNode","_renderSlot","_openBlock","_createBlock","_normalizeProps","_mergeProps","_withCtx","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"combobox.vue.cjs","sources":["../../../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading (loading) {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["ComboboxLoadingList","ComboboxEmptyList","KeyboardNavigation","LABEL_SIZES","getUniqueString","hasSlotContent","_createElementBlock","_withKeys","_withModifiers","_createElementVNode","_renderSlot","_openBlock","_createBlock","_normalizeProps","_mergeProps","_withCtx","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/components/combobox/combobox.vue.js

@@ -6,6 +6,7 @@ import { LABEL_SIZES } from "./combobox_constants.js";
 import { resolveComponent, openBlock, createElementBlock, withKeys, withModifiers, createElementVNode, renderSlot, createBlock, normalizeProps, mergeProps, withCtx, createCommentVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCombobox",
   components: {
     ComboboxLoadingList,