@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n        <div class=\"d-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"checkbox-description\"\n          >\n            <!-- @slot slot for Checkbox Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-checkbox-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\n    },\n\n    inputListeners () {\n      return {\n        /*\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","_createElementBlock","_createElementVNode","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"checkbox.cjs","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n        <div class=\"d-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"checkbox-description\"\n          >\n            <!-- @slot slot for Checkbox Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-checkbox-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\n    },\n\n    inputListeners () {\n      return {\n        /*\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":["CHECKBOX_INPUT_VALIDATION_CLASSES","error","warning","success","_sfc_main","name","components","DtValidationMessages","mixins","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","inheritAttrs","emits","computed","inputValidationClass","internalValidationState","checkboxGroupValueChecked","groupContext","selectedValues","includes","value","hasLabel","$slots","default","label","hasDescription","description","hasLabelOrDescription","inputListeners","input","focusin","event","$emit","focusout","change","emitValue","target","watch","immediate","handler","newCheckboxGroupValueChecked","hasGroup","internalChecked","mounted","runValidations","methods","checked","internalIndeterminate","setGroupValue","validateInputLabels","$attrs","_hoisted_1","class","_createElementBlock","_createElementVNode","_ctx","internalDisabled","_mergeProps","type","internalName","disabled","$options","inputClass","_toHandlers","_hoisted_2","_openBlock","_hoisted_3","labelClass","labelChildProps","_renderSlot","descriptionClass","descriptionChildProps","_createVNode","_component_dt_validation_messages","formattedMessages","showMessages","messagesClass","messagesChildProps"],"mappings":"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"}

package/dist/lib/checkbox.js

@@ -1,4 +1,4 @@
-import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../chunks/input-NmYDD5bn.js";
+import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../chunks/input-HIysg24t.js";
 import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, mergeProps, toHandlers, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtValidationMessages } from "./validation-messages.js";
@@ -12,7 +12,9 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 };
 const _sfc_main = {
   name: "DtCheckbox",
-  components: { DtValidationMessages },
+  components: {
+    DtValidationMessages
+  },
   mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],
   inheritAttrs: false,
   emits: [
@@ -85,7 +87,10 @@ const _sfc_main = {
   },
   methods: {
     emitValue(target) {
-      let { value, checked } = target;
+      let {
+        value,
+        checked
+      } = target;
       if (this.internalIndeterminate) {
         checked = false;
         this.internalIndeterminate = false;
@@ -99,7 +104,9 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "d-checkbox__input" };
+const _hoisted_1 = {
+  class: "d-checkbox__input"
+};
 const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
 const _hoisted_3 = {
   key: 0,
@@ -108,47 +115,36 @@ const _hoisted_3 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
-  return openBlock(), createElementBlock("div", null, [
-    createElementVNode("label", null, [
-      createElementVNode("div", {
-        class: normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
-      }, [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("input", mergeProps({
-            type: "checkbox",
-            checked: _ctx.internalChecked,
-            name: _ctx.internalName,
-            value: _ctx.value,
-            disabled: _ctx.internalDisabled,
-            class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
-          }, _ctx.$attrs, { ".indeterminate": _ctx.internalIndeterminate }, toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
-        ]),
-        $options.hasLabelOrDescription ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          $options.hasLabel ? (openBlock(), createElementBlock("div", mergeProps({
-            key: 0,
-            class: _ctx.labelClass
-          }, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
-            renderSlot(_ctx.$slots, "default", {}, () => [
-              createTextVNode(toDisplayString(_ctx.label), 1)
-            ])
-          ], 16)) : createCommentVNode("", true),
-          $options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
-            key: 1,
-            class: ["d-description", _ctx.descriptionClass]
-          }, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
-            renderSlot(_ctx.$slots, "description", {}, () => [
-              createTextVNode(toDisplayString(_ctx.description), 1)
-            ])
-          ], 16)) : createCommentVNode("", true),
-          createVNode(_component_dt_validation_messages, mergeProps({
-            "validation-messages": _ctx.formattedMessages,
-            "show-messages": _ctx.showMessages,
-            class: _ctx.messagesClass
-          }, _ctx.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-        ])) : createCommentVNode("", true)
-      ], 2)
-    ])
-  ]);
+  return openBlock(), createElementBlock("div", null, [createElementVNode("label", null, [createElementVNode("div", {
+    class: normalizeClass(["d-checkbox-group", {
+      "d-checkbox-group--disabled": _ctx.internalDisabled
+    }])
+  }, [createElementVNode("div", _hoisted_1, [createElementVNode("input", mergeProps({
+    type: "checkbox",
+    checked: _ctx.internalChecked,
+    name: _ctx.internalName,
+    value: _ctx.value,
+    disabled: _ctx.internalDisabled,
+    class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
+  }, _ctx.$attrs, {
+    ".indeterminate": _ctx.internalIndeterminate
+  }, toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)]), $options.hasLabelOrDescription ? (openBlock(), createElementBlock("div", _hoisted_3, [$options.hasLabel ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 0,
+    class: _ctx.labelClass
+  }, _ctx.labelChildProps, {
+    "data-qa": "checkbox-label"
+  }), [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1)])], 16)) : createCommentVNode("", true), $options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 1,
+    class: ["d-description", _ctx.descriptionClass]
+  }, _ctx.descriptionChildProps, {
+    "data-qa": "checkbox-description"
+  }), [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(_ctx.description), 1)])], 16)) : createCommentVNode("", true), createVNode(_component_dt_validation_messages, mergeProps({
+    "validation-messages": _ctx.formattedMessages,
+    "show-messages": _ctx.showMessages,
+    class: _ctx.messagesClass
+  }, _ctx.messagesChildProps, {
+    "data-qa": "dt-checkbox-validation-messages"
+  }), null, 16, ["validation-messages", "show-messages", "class"])])) : createCommentVNode("", true)], 2)])]);
 }
 const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n        <div class=\"d-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"checkbox-description\"\n          >\n            <!-- @slot slot for Checkbox Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-checkbox-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\n    },\n\n    inputListeners () {\n      return {\n        /*\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","_mergeProps","_toHandlers","_openBlock","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n        <div class=\"d-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"checkbox-description\"\n          >\n            <!-- @slot slot for Checkbox Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-checkbox-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\n    },\n\n    inputListeners () {\n      return {\n        /*\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":["CHECKBOX_INPUT_VALIDATION_CLASSES","error","warning","success","_sfc_main","name","components","DtValidationMessages","mixins","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","inheritAttrs","emits","computed","inputValidationClass","internalValidationState","checkboxGroupValueChecked","groupContext","selectedValues","includes","value","hasLabel","$slots","default","label","hasDescription","description","hasLabelOrDescription","inputListeners","input","focusin","event","$emit","focusout","change","emitValue","target","watch","immediate","handler","newCheckboxGroupValueChecked","hasGroup","internalChecked","mounted","runValidations","methods","checked","internalIndeterminate","setGroupValue","validateInputLabels","$attrs","_hoisted_1","class","_createElementBlock","_createElementVNode","_ctx","internalDisabled","_mergeProps","type","internalName","disabled","$options","inputClass","_toHandlers","_hoisted_2","_openBlock","_hoisted_3","labelClass","labelChildProps","_renderSlot","descriptionClass","descriptionChildProps","_createVNode","_component_dt_validation_messages","formattedMessages","showMessages","messagesClass","messagesChildProps"],"mappings":"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"}

package/dist/lib/chip.cjs

@@ -8,7 +8,7 @@ const lib_icon = require("./icon.cjs");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 const CHIP_SIZE_MODIFIERS = {
   xs: "d-chip__label--xs",
@@ -38,7 +38,9 @@ const _sfc_main = {
     closeButtonProps: {
       type: Object,
       default: function() {
-        return { ariaLabel: "close" };
+        return {
+          ariaLabel: "close"
+        };
       },
       validator: (props) => {
         return !!props.ariaLabel;
@@ -153,17 +155,10 @@ const _sfc_main = {
   },
   methods: {
     chipClasses() {
-      return [
-        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        CHIP_SIZE_MODIFIERS[this.size],
-        this.labelClass
-      ];
+      return [this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label", CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
     chipCloseButtonClasses() {
-      return [
-        "d-chip__close",
-        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
-      ];
+      return ["d-chip__close", CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
     onClose() {
       if (!this.hideClose) {
@@ -172,7 +167,9 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "d-chip" };
+const _hoisted_1 = {
+  class: "d-chip"
+};
 const _hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
@@ -186,47 +183,35 @@ const _hoisted_4 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
-  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
-    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.interactive ? "button" : "span"), vue.mergeProps({
-      id: $props.id,
-      type: $props.interactive && "button",
-      class: $options.chipClasses(),
-      "data-qa": "dt-chip",
-      "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
-      "aria-label": $props.ariaLabel
-    }, vue.toHandlers($options.chipListeners)), {
-      default: vue.withCtx(() => [
-        $data.hasSlotContent(_ctx.$slots.icon) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
-          vue.renderSlot(_ctx.$slots, "icon")
-        ])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
-          vue.renderSlot(_ctx.$slots, "avatar")
-        ])) : vue.createCommentVNode("", true),
-        $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("span", {
-          key: 2,
-          id: `${$props.id}-content`,
-          "data-qa": "dt-chip-label",
-          class: vue.normalizeClass(["d-chip__text", $props.contentClass])
-        }, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 10, _hoisted_4)) : vue.createCommentVNode("", true)
-      ]),
-      _: 3
-    }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
-    !$props.hideClose ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({ key: 0 }, $props.closeButtonProps, {
-      class: $options.chipCloseButtonClasses(),
-      "data-qa": "dt-chip-close",
-      "aria-label": $props.closeButtonProps.ariaLabel,
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-    }), {
-      icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "close",
-          size: $options.closeButtonIconSize
-        }, null, 8, ["size"])
-      ]),
-      _: 1
-    }, 16, ["class", "aria-label"])) : vue.createCommentVNode("", true)
-  ]);
+  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.interactive ? "button" : "span"), vue.mergeProps({
+    id: $props.id,
+    type: $props.interactive && "button",
+    class: $options.chipClasses(),
+    "data-qa": "dt-chip",
+    "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
+    "aria-label": $props.ariaLabel
+  }, vue.toHandlers($options.chipListeners)), {
+    default: vue.withCtx(() => [$data.hasSlotContent(_ctx.$slots.icon) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [vue.renderSlot(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [vue.renderSlot(_ctx.$slots, "avatar")])) : vue.createCommentVNode("", true), $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("span", {
+      key: 2,
+      id: `${$props.id}-content`,
+      "data-qa": "dt-chip-label",
+      class: vue.normalizeClass(["d-chip__text", $props.contentClass])
+    }, [vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_4)) : vue.createCommentVNode("", true)]),
+    _: 3
+  }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
+    key: 0
+  }, $props.closeButtonProps, {
+    class: $options.chipCloseButtonClasses(),
+    "data-qa": "dt-chip-close",
+    "aria-label": $props.closeButtonProps.ariaLabel,
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+  }), {
+    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+      name: "close",
+      size: $options.closeButtonIconSize
+    }, null, 8, ["size"])]),
+    _: 1
+  }, 16, ["class", "aria-label"])) : vue.createCommentVNode("", true)]);
 }
 const DtChip = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = CHIP_CLOSE_BUTTON_SIZE_MODIFIERS;

package/dist/lib/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"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\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, 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    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      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","DtIcon","getUniqueString","hasSlotContent","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"chip.cjs","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"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\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, 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    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      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":["CHIP_SIZE_MODIFIERS","xs","sm","md","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","name","components","DtButton","DtIcon","props","closeButtonProps","type","Object","default","ariaLabel","validator","hideClose","Boolean","size","String","s","keys","includes","interactive","id","getUniqueString","contentClass","Array","labelClass","emits","data","isActive","hasSlotContent","computed","chipListeners","click","event","$emit","keyup","code","toLowerCase","onClose","closeButtonIconSize","methods","chipClasses","$attrs","chipCloseButtonClasses","_hoisted_1","class","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","undefined","_toHandlers","$data","_ctx","$slots","icon","_hoisted_2","_renderSlot","avatar","_hoisted_3","_component_dt_button","key","onClick","_createVNode","_component_dt_icon"],"mappings":"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"}

package/dist/lib/chip.js

@@ -6,7 +6,7 @@ import { DtIcon } from "./icon.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 const CHIP_SIZE_MODIFIERS = {
   xs: "d-chip__label--xs",
@@ -36,7 +36,9 @@ const _sfc_main = {
     closeButtonProps: {
       type: Object,
       default: function() {
-        return { ariaLabel: "close" };
+        return {
+          ariaLabel: "close"
+        };
       },
       validator: (props) => {
         return !!props.ariaLabel;
@@ -151,17 +153,10 @@ const _sfc_main = {
   },
   methods: {
     chipClasses() {
-      return [
-        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        CHIP_SIZE_MODIFIERS[this.size],
-        this.labelClass
-      ];
+      return [this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label", CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
     chipCloseButtonClasses() {
-      return [
-        "d-chip__close",
-        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
-      ];
+      return ["d-chip__close", CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
     onClose() {
       if (!this.hideClose) {
@@ -170,7 +165,9 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "d-chip" };
+const _hoisted_1 = {
+  class: "d-chip"
+};
 const _hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
@@ -184,47 +181,35 @@ const _hoisted_4 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
-  return openBlock(), createElementBlock("span", _hoisted_1, [
-    (openBlock(), createBlock(resolveDynamicComponent($props.interactive ? "button" : "span"), mergeProps({
-      id: $props.id,
-      type: $props.interactive && "button",
-      class: $options.chipClasses(),
-      "data-qa": "dt-chip",
-      "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
-      "aria-label": $props.ariaLabel
-    }, toHandlers($options.chipListeners)), {
-      default: withCtx(() => [
-        $data.hasSlotContent(_ctx.$slots.icon) ? (openBlock(), createElementBlock("span", _hoisted_2, [
-          renderSlot(_ctx.$slots, "icon")
-        ])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (openBlock(), createElementBlock("span", _hoisted_3, [
-          renderSlot(_ctx.$slots, "avatar")
-        ])) : createCommentVNode("", true),
-        $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("span", {
-          key: 2,
-          id: `${$props.id}-content`,
-          "data-qa": "dt-chip-label",
-          class: normalizeClass(["d-chip__text", $props.contentClass])
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 10, _hoisted_4)) : createCommentVNode("", true)
-      ]),
-      _: 3
-    }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
-    !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({ key: 0 }, $props.closeButtonProps, {
-      class: $options.chipCloseButtonClasses(),
-      "data-qa": "dt-chip-close",
-      "aria-label": $props.closeButtonProps.ariaLabel,
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-    }), {
-      icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "close",
-          size: $options.closeButtonIconSize
-        }, null, 8, ["size"])
-      ]),
-      _: 1
-    }, 16, ["class", "aria-label"])) : createCommentVNode("", true)
-  ]);
+  return openBlock(), createElementBlock("span", _hoisted_1, [(openBlock(), createBlock(resolveDynamicComponent($props.interactive ? "button" : "span"), mergeProps({
+    id: $props.id,
+    type: $props.interactive && "button",
+    class: $options.chipClasses(),
+    "data-qa": "dt-chip",
+    "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
+    "aria-label": $props.ariaLabel
+  }, toHandlers($options.chipListeners)), {
+    default: withCtx(() => [$data.hasSlotContent(_ctx.$slots.icon) ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "avatar")])) : createCommentVNode("", true), $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("span", {
+      key: 2,
+      id: `${$props.id}-content`,
+      "data-qa": "dt-chip-label",
+      class: normalizeClass(["d-chip__text", $props.contentClass])
+    }, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_4)) : createCommentVNode("", true)]),
+    _: 3
+  }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({
+    key: 0
+  }, $props.closeButtonProps, {
+    class: $options.chipCloseButtonClasses(),
+    "data-qa": "dt-chip-close",
+    "aria-label": $props.closeButtonProps.ariaLabel,
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+  }), {
+    icon: withCtx(() => [createVNode(_component_dt_icon, {
+      name: "close",
+      size: $options.closeButtonIconSize
+    }, null, 8, ["size"])]),
+    _: 1
+  }, 16, ["class", "aria-label"])) : createCommentVNode("", true)]);
 }
 const DtChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"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\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, 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    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      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","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"chip.js","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n","<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"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\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, 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    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      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":["CHIP_SIZE_MODIFIERS","xs","sm","md","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","name","components","DtButton","DtIcon","props","closeButtonProps","type","Object","default","ariaLabel","validator","hideClose","Boolean","size","String","s","keys","includes","interactive","id","getUniqueString","contentClass","Array","labelClass","emits","data","isActive","hasSlotContent","computed","chipListeners","click","event","$emit","keyup","code","toLowerCase","onClose","closeButtonIconSize","methods","chipClasses","$attrs","chipCloseButtonClasses","_hoisted_1","class","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","undefined","_toHandlers","$data","_ctx","$slots","icon","_hoisted_2","_renderSlot","avatar","_hoisted_3","_component_dt_button","key","onClick","_createVNode","_component_dt_icon"],"mappings":"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"}