npm - @dialpad/dialtone - Versions diffs - 9.109.0 → 9.110.1 - Mend

@dialpad/dialtone 9.109.0 → 9.110.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/dist/vue3/components/checkbox/checkbox.vue.cjs CHANGED Viewed

@@ -49,8 +49,11 @@ const _sfc_main = {
     hasDescription() {
       return !!(this.$slots.description || this.description);
     },
-    hasLabelOrDescription() {
-      return this.hasLabel || this.hasDescription;
+    hasDescriptionOrMessages() {
+      return this.hasDescription || this.hasMessages;
+    },
+    hasMessages() {
+      return this.formattedMessages.length && this.showMessages;
     },
     inputListeners() {
       return {
@@ -102,51 +105,49 @@ const _hoisted_1 = { class: "d-checkbox__input" };
 const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
 const _hoisted_3 = {
   key: 0,
-  class: "d-checkbox__copy d-checkbox__label",
-  "data-qa": "checkbox-label-description-container"
+  class: "d-checkbox__messages",
+  "data-qa": "checkbox-description-messages"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
   return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
-    vue.createElementVNode("label", null, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.createElementVNode("input", vue.mergeProps({
-            type: "checkbox",
-            checked: _ctx.internalChecked,
-            name: _ctx.internalName,
-            value: _ctx.value,
-            disabled: _ctx.internalDisabled,
-            class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
-          }, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, vue.toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
-        ]),
-        $options.hasLabelOrDescription ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-          $options.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: 0,
-            class: _ctx.labelClass
-          }, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
-            ])
-          ], 16)) : vue.createCommentVNode("", true),
-          $options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: 1,
-            class: ["d-description", _ctx.descriptionClass]
-          }, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
-            vue.renderSlot(_ctx.$slots, "description", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
-            ])
-          ], 16)) : vue.createCommentVNode("", true),
-          vue.createVNode(_component_dt_validation_messages, vue.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"])
-        ])) : vue.createCommentVNode("", true)
-      ], 2)
-    ])
+    vue.createElementVNode("label", {
+      class: vue.normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
+    }, [
+      vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("input", vue.mergeProps({
+          type: "checkbox",
+          checked: _ctx.internalChecked,
+          name: _ctx.internalName,
+          value: _ctx.value,
+          disabled: _ctx.internalDisabled,
+          class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
+        }, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, vue.toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
+      ]),
+      $options.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        class: [_ctx.labelClass, "d-checkbox__copy d-checkbox__label"]
+      }, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
+        ])
+      ], 16)) : vue.createCommentVNode("", true)
+    ], 2),
+    $options.hasDescriptionOrMessages ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      $options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        class: ["d-description", _ctx.descriptionClass]
+      }, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
+        vue.renderSlot(_ctx.$slots, "description", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
+        ])
+      ], 16)) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_dt_validation_messages, vue.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"])
+    ])) : vue.createCommentVNode("", true)
   ], 16);
 }
 const checkbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.vue.cjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\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=\"removeClassStyleAttrs($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 { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\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 removeClassStyleAttrs,\n addClassStyleAttrs,\n\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","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,oBAAAA,QAAsB;AAAA,EAEpC,QAAQ,CAACC,MAAU,YAAEC,sBAAgBC,MAAAA,gBAAgBC,MAAAA,aAAa;AAAA,EAElE,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,uBAAwB;AACtB,aAAOC,mBAAiC,kCAAC,KAAK,uBAAuB;AAAA,IACtE;AAAA,IAED,4BAA6B;;AAC3B,eAAO,gBAAK,iBAAL,mBAAmB,mBAAnB,mBAAmC,SAAS,KAAK,WAAU;AAAA,IACnE;AAAA,IAED,WAAY;AACV,aAAO,CAAC,EAAE,KAAK,OAAO,WAAW,KAAK;AAAA,IACvC;AAAA,IAED,iBAAkB;AAChB,aAAO,CAAC,EAAE,KAAK,OAAO,eAAe,KAAK;AAAA,IAC3C;AAAA,IAED,~~wBAAyB~~;~~AACvB~~,aAAO,KAAK,~~YAAY~~,KAAK;AAAA,~~IAC9B~~;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAML,OAAO,MAAM;AAAA,QAAE;AAAA,QACf,SAAS,WAAS,KAAK,MAAM,WAAW,KAAK;AAAA,QAC7C,UAAU,WAAS,KAAK,MAAM,YAAY,KAAK;AAAA,QAC/C,QAAQ,WAAS,KAAK,UAAU,MAAM,MAAM;AAAA;IAE/C;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,2BAA2B;AAAA,MACzB,WAAW;AAAA,MACX,QAAS,8BAA8B;AACrC,YAAI,KAAK,UAAU;AAEjB,eAAK,kBAAkB;AAAA,QACzB;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,eAAc;AAAA,EACpB;AAAA,EAED,SAAS;AAAA,IACP,uBAAAC,aAAqB;AAAA,IACrB,oBAAAC,aAAkB;AAAA,IAElB,UAAW,QAAQ;AACjB,UAAI,EAAE,OAAO,QAAU,IAAE;AAGzB,UAAI,KAAK,uBAAuB;AAC9B,kBAAU;AACV,aAAK,wBAAwB;AAC7B,eAAO,UAAU;AAAA,MACnB;AAEA,WAAK,cAAc,OAAO,OAAO;AAGjC,WAAK,MAAM,SAAS,OAAO;AAAA,IAC5B;AAAA,IAED,iBAAkB;AAChB,WAAK,oBAAoB,KAAK,UAAU,KAAK,OAAO,YAAY,CAAC;AAAA,IAClE;AAAA,EACF;AACH;~~AAlLa~~,MAAA,aAAA,EAAA,OAAM,oBAAmB;~~AANtC~~,MAAA,aAAA,CAAA,WAAA,QAAA,SAAA,YAAA,gBAAA;;EAAA,KAAA;AAAA,~~EAqBU~~,OAAM;AAAA,EACN,WAAQ;;;;~~AArBhB~~,SAAAC,cAAA,GAAAC,uBAmDM,OApDRC,IAAAA,eAAAC,IAAAA,mBAEY,SAAA,mBAAmB,KAAM,MAAA,CAAA,CAAA,GAAA;AAAA,IAEjCC,~~IA+CQ~~,~~mBAAA~~,SAAA~~,MAAA~~;AAAA,~~MA9CNA~~,~~IAAAA~~,~~mBA6CM~~,~~OAAA;AAAA,QA7CA,OALZC,wEAKwE,~~KAAgB,iBAAA,CAAA,CAAA;AAAA;~~QAChFD~~,IAAA,mBAYM,OAZN,YAYM;AAAA,~~UAXJA~~,IAAA,mBAUC,SAVDE,eAUC;AAAA,~~YATC~~,MAAK;AAAA,~~YACJ~~,SAAS,KAAe;AAAA,~~YACxB~~,MAAM,KAAY;AAAA,~~YAClB~~,OAAO,KAAK;AAAA,~~YACZ~~,UAAU,KAAgB;AAAA,~~YAC1B~~,OAAK,CAAA,cAAiB,SAAoB,sBAAE,KAAU,UAAA;AAAA,~~aAC~~/C,SAAqB,sBAAC,KAAM,MAAA,GAAA,EACnC,kBAAoB,2BACrB,GAAAC,IAAA,WAAqB,SAAf,~~gBAhBlB~~,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;~~QAoBgB~~,~~SAAqB,yBAD7BP,IAAAA,aAAAC,IAAAA,mBA8BM,OA9BN,YA8BM;AAAA,UAxBI,~~SAAQ,~~YADhBD~~,IAAAA,aAAAC,IAAAA,mBAQM,OARNK,eAQM;AAAA,~~YAhChB~~,KAAA;AAAA,~~YA0Ba~~,~~OAAO~~,KAAU;AAAA,~~aACV~~,KAAe,iBAAA,EACvB,WAAQ,iBAAgB,CAAA,GAAA;AAAA,~~YAGxBE~~,IAAAA,WAAwB,4BAAxB,MAAwB;AAAA,~~cA/BpCC~~,IAAAA,gBAAAC,IAAAA,~~gBA+BqB~~,KAAK,KAAA,GAAA,CAAA;AAAA;~~oBA/B1BC~~,IAAA,mBAAA,IAAA,IAAA;AAAA,~~UAkCkB~~,SAAc,~~kBADtBX~~,IAAAA,aAAAC,IAAAA,~~mBAQM~~,~~OARNK~~,~~eAQM~~;AAAA,~~YAzChB~~,KAAA;AAAA,~~YAmCa~~,yBAAyB,KAAgB,gBAAA;AAAA,~~aAClC~~,KAAqB,uBAAA,EAC7B,WAAQ,uBAAsB,CAAA,GAAA;AAAA,~~YAG9BE~~,IAAAA,~~WAAiD~~,~~gCAAjD~~,~~MAAiD~~;AAAA,~~cAxC7DC~~,IAAAA,gBAAAC,IAAAA,~~gBAwCwC~~,KAAW,WAAA,GAAA,CAAA;AAAA;~~oBAxCnDC~~,IAAA,mBAAA,IAAA,IAAA;AAAA,~~UA0CUC~~,IAAA,YAME,mCANFN,eAME;AAAA,~~YALC~~,uBAAqB,KAAiB;AAAA,~~YACtC~~,iBAAe,KAAY;AAAA,~~YAC3B~~,OAAO,KAAa;AAAA,~~aACb~~,KAAkB,oBAAA,EAC1B,WAAQ,kCAAiC,CAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,OAAA,CAAA;AAAA,~~cA/CrDK~~,IAAA,mBAAA,IAAA,IAAA;AAAA~~;;;;;;~~"}
1	+ {"version":3,"file":"checkbox.vue.cjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :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=\"removeClassStyleAttrs($attrs)\"\n :indeterminate.prop=\"internalIndeterminate\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n v-if=\"hasLabel\"\n :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"checkbox-label\"\n >\n <!-- @slot slot for Checkbox Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"hasDescriptionOrMessages\"\n class=\"d-checkbox__messages\"\n data-qa=\"checkbox-description-messages\"\n >\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\">\n {{ description }}\n </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</template>\n\n<script>\n// Imports\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\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 hasDescriptionOrMessages () {\n return this.hasDescription \|\| this.hasMessages;\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\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 removeClassStyleAttrs,\n addClassStyleAttrs,\n\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","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}

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

@@ -47,8 +47,11 @@ const _sfc_main = {
     hasDescription() {
       return !!(this.$slots.description || this.description);
     },
-    hasLabelOrDescription() {
-      return this.hasLabel || this.hasDescription;
+    hasDescriptionOrMessages() {
+      return this.hasDescription || this.hasMessages;
+    },
+    hasMessages() {
+      return this.formattedMessages.length && this.showMessages;
     },
     inputListeners() {
       return {
@@ -100,51 +103,49 @@ const _hoisted_1 = { class: "d-checkbox__input" };
 const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
 const _hoisted_3 = {
   key: 0,
-  class: "d-checkbox__copy d-checkbox__label",
-  "data-qa": "checkbox-label-description-container"
+  class: "d-checkbox__messages",
+  "data-qa": "checkbox-description-messages"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
   return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
-    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]
-          }, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, toHandlers($options.inputListeners, true)), null, 48, _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)
-    ])
+    createElementVNode("label", {
+      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]
+        }, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
+      ]),
+      $options.hasLabel ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        class: [_ctx.labelClass, "d-checkbox__copy d-checkbox__label"]
+      }, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.label), 1)
+        ])
+      ], 16)) : createCommentVNode("", true)
+    ], 2),
+    $options.hasDescriptionOrMessages ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      $options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        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)
   ], 16);
 }
 const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.vue.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\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=\"removeClassStyleAttrs($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 { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\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 removeClassStyleAttrs,\n addClassStyleAttrs,\n\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":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,YAAY,gBAAgB,gBAAgB,aAAa;AAAA,EAElE,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,uBAAwB;AACtB,aAAO,kCAAkC,KAAK,uBAAuB;AAAA,IACtE;AAAA,IAED,4BAA6B;;AAC3B,eAAO,gBAAK,iBAAL,mBAAmB,mBAAnB,mBAAmC,SAAS,KAAK,WAAU;AAAA,IACnE;AAAA,IAED,WAAY;AACV,aAAO,CAAC,EAAE,KAAK,OAAO,WAAW,KAAK;AAAA,IACvC;AAAA,IAED,iBAAkB;AAChB,aAAO,CAAC,EAAE,KAAK,OAAO,eAAe,KAAK;AAAA,IAC3C;AAAA,IAED,~~wBAAyB~~;~~AACvB~~,aAAO,KAAK,~~YAAY~~,KAAK;AAAA,~~IAC9B~~;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAML,OAAO,MAAM;AAAA,QAAE;AAAA,QACf,SAAS,WAAS,KAAK,MAAM,WAAW,KAAK;AAAA,QAC7C,UAAU,WAAS,KAAK,MAAM,YAAY,KAAK;AAAA,QAC/C,QAAQ,WAAS,KAAK,UAAU,MAAM,MAAM;AAAA;IAE/C;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,2BAA2B;AAAA,MACzB,WAAW;AAAA,MACX,QAAS,8BAA8B;AACrC,YAAI,KAAK,UAAU;AAEjB,eAAK,kBAAkB;AAAA,QACzB;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,eAAc;AAAA,EACpB;AAAA,EAED,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IAEA,UAAW,QAAQ;AACjB,UAAI,EAAE,OAAO,QAAU,IAAE;AAGzB,UAAI,KAAK,uBAAuB;AAC9B,kBAAU;AACV,aAAK,wBAAwB;AAC7B,eAAO,UAAU;AAAA,MACnB;AAEA,WAAK,cAAc,OAAO,OAAO;AAGjC,WAAK,MAAM,SAAS,OAAO;AAAA,IAC5B;AAAA,IAED,iBAAkB;AAChB,WAAK,oBAAoB,KAAK,UAAU,KAAK,OAAO,YAAY,CAAC;AAAA,IAClE;AAAA,EACF;AACH;~~AAlLa~~,MAAA,aAAA,EAAA,OAAM,oBAAmB;~~AANtC~~,MAAA,aAAA,CAAA,WAAA,QAAA,SAAA,YAAA,gBAAA;;EAAA,KAAA;AAAA,~~EAqBU~~,OAAM;AAAA,EACN,WAAQ;;;;~~AArBhB~~,SAAAA,UAAA,GAAAC,mBAmDM,OApDRC,eAAAC,mBAEY,SAAA,mBAAmB,KAAM,MAAA,CAAA,CAAA,GAAA;AAAA,IAEjCC,~~mBA+CQ~~,SAAA~~,MAAA~~;AAAA,~~MA9CNA~~,~~mBA6CM~~,~~OAAA;AAAA~~,~~QA7CA,OALZC,oEAKwE,~~KAAgB,iBAAA,CAAA,CAAA;AAAA;~~QAChFD~~,mBAYM,OAZN,YAYM;AAAA,~~UAXJA~~,mBAUC,SAVDE,WAUC;AAAA,~~YATC~~,MAAK;AAAA,~~YACJ~~,SAAS,KAAe;AAAA,~~YACxB~~,MAAM,KAAY;AAAA,~~YAClB~~,OAAO,KAAK;AAAA,~~YACZ~~,UAAU,KAAgB;AAAA,~~YAC1B~~,OAAK,CAAA,cAAiB,SAAoB,sBAAE,KAAU,UAAA;AAAA,~~aAC~~/C,SAAqB,sBAAC,KAAM,MAAA,GAAA,EACnC,kBAAoB,2BACrB,GAAAC,WAAqB,SAAf,~~gBAhBlB~~,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;~~QAoBgB~~,~~SAAqB,yBAD7BP,aAAAC,mBA8BM,OA9BN,YA8BM;AAAA,UAxBI,~~SAAQ,~~YADhBD~~,aAAAC,mBAQM,OARNK,WAQM;AAAA,~~YAhChB~~,KAAA;AAAA,~~YA0Ba~~,~~OAAO~~,KAAU;AAAA,~~aACV~~,KAAe,iBAAA,EACvB,WAAQ,iBAAgB,CAAA,GAAA;AAAA,~~YAGxBE~~,WAAwB,4BAAxB,MAAwB;AAAA,~~cA/BpCC~~,gBAAAC,~~gBA+BqB~~,KAAK,KAAA,GAAA,CAAA;AAAA;~~oBA/B1BC~~,mBAAA,IAAA,IAAA;AAAA,~~UAkCkB~~,SAAc,~~kBADtBX~~,aAAAC,~~mBAQM~~,~~OARNK~~,~~WAQM~~;AAAA,~~YAzChB~~,KAAA;AAAA,~~YAmCa~~,yBAAyB,KAAgB,gBAAA;AAAA,~~aAClC~~,KAAqB,uBAAA,EAC7B,WAAQ,uBAAsB,CAAA,GAAA;AAAA,~~YAG9BE~~,~~WAAiD~~,~~gCAAjD~~,~~MAAiD~~;AAAA,~~cAxC7DC~~,gBAAAC,~~gBAwCwC~~,KAAW,WAAA,GAAA,CAAA;AAAA;~~oBAxCnDC~~,mBAAA,IAAA,IAAA;AAAA,~~UA0CUC~~,YAME,mCANFN,WAME;AAAA,~~YALC~~,uBAAqB,KAAiB;AAAA,~~YACtC~~,iBAAe,KAAY;AAAA,~~YAC3B~~,OAAO,KAAa;AAAA,~~aACb~~,KAAkB,oBAAA,EAC1B,WAAQ,kCAAiC,CAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,OAAA,CAAA;AAAA,~~cA/CrDK~~,mBAAA,IAAA,IAAA;AAAA~~;;;;;~~"}
1	+ {"version":3,"file":"checkbox.vue.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :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=\"removeClassStyleAttrs($attrs)\"\n :indeterminate.prop=\"internalIndeterminate\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n v-if=\"hasLabel\"\n :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"checkbox-label\"\n >\n <!-- @slot slot for Checkbox Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"hasDescriptionOrMessages\"\n class=\"d-checkbox__messages\"\n data-qa=\"checkbox-description-messages\"\n >\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\">\n {{ description }}\n </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</template>\n\n<script>\n// Imports\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\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 hasDescriptionOrMessages () {\n return this.hasDescription \|\| this.hasMessages;\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\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 removeClassStyleAttrs,\n addClassStyleAttrs,\n\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":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/vue3/components/radio/radio.vue.cjs CHANGED Viewed

@@ -84,6 +84,15 @@ const _sfc_main = {
         focusout: (event) => this.$emit("focusout", event),
         change: (event) => this.emitValue(event.target.value)
       };
+    },
+    hasDescription() {
+      return !!(this.$slots.description || this.description);
+    },
+    hasDescriptionOrMessages() {
+      return this.hasDescription || this.hasMessages;
+    },
+    hasMessages() {
+      return this.formattedMessages.length && this.showMessages;
     }
   },
   watch: {
@@ -110,48 +119,49 @@ const _sfc_main = {
 const _hoisted_1 = { class: "d-radio__input" };
 const _hoisted_2 = ["checked", "name", "value", "disabled"];
 const _hoisted_3 = {
-  class: "d-radio__copy d-radio__label",
-  "data-qa": "radio-label-description-container"
+  key: 0,
+  class: "d-radio__messages",
+  "data-qa": "radio-description-messages"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
   return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
-    vue.createElementVNode("label", null, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.createElementVNode("input", vue.mergeProps({
-            checked: _ctx.internalChecked,
-            name: _ctx.internalName,
-            value: $props.value,
-            disabled: _ctx.internalDisabled,
-            type: "radio",
-            class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
-          }, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
-        ]),
-        vue.createElementVNode("div", _hoisted_3, [
-          vue.createElementVNode("div", vue.mergeProps({ class: _ctx.labelClass }, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
-            ])
-          ], 16),
-          _ctx.$slots.description || _ctx.description ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: 0,
-            class: ["d-description", _ctx.descriptionClass]
-          }, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
-            vue.renderSlot(_ctx.$slots, "description", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
-            ])
-          ], 16)) : vue.createCommentVNode("", true),
-          vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
-            "validation-messages": _ctx.formattedMessages,
-            "show-messages": _ctx.showMessages,
-            class: _ctx.messagesClass
-          }, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
+    vue.createElementVNode("label", {
+      class: vue.normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
+    }, [
+      vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("input", vue.mergeProps({
+          checked: _ctx.internalChecked,
+          name: _ctx.internalName,
+          value: $props.value,
+          disabled: _ctx.internalDisabled,
+          type: "radio",
+          class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
+        }, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
+      ]),
+      vue.createElementVNode("div", vue.mergeProps({
+        class: [_ctx.labelClass, "d-radio__copy d-radio__label"]
+      }, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
+        ])
+      ], 16)
+    ], 2),
+    $options.hasDescriptionOrMessages ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      $options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        class: ["d-description", _ctx.descriptionClass]
+      }, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
+        vue.renderSlot(_ctx.$slots, "description", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
         ])
-      ], 2)
-    ])
+      ], 16)) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
+        "validation-messages": _ctx.formattedMessages,
+        "show-messages": _ctx.showMessages,
+        class: _ctx.messagesClass
+      }, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
+    ])) : vue.createCommentVNode("", true)
   ], 16);
 }
 const radio = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);

package/dist/vue3/components/radio/radio.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.vue.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label~~>\n <div~~ :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n <div class=\"d-radio__input\">\n <input\n :checked=\"internalChecked\"\n :name=\"internalName\"\n :value=\"value\"\n :disabled=\"internalDisabled\"\n type=\"radio\"\n :class=\"['d-radio', inputValidationClass, inputClass]\"\n v-bind=\"removeClassStyleAttrs($attrs)\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n class=\"d-radio__copy d-radio__label\"\n ~~data-qa=\"radio-label-description-container\"\n~~ ~~>\n <div\n :class=\"labelClass\"\n~~ v-bind=\"labelChildProps\"\n data-qa=\"radio-label\"\n >\n <!-- @slot slot for Radio Label -->\n <slot>{{ label }}</slot>\n </div>\n <div\n v-if=\"~~$slots.~~description ~~\|\| description~~\"\n :class=\"['d-description', descriptionClass]\"\n v-bind=\"descriptionChildProps\"\n data-qa=\"radio-description\"\n >\n <!-- @slot slot for Radio 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-radio-validation-messages\"\n />\n </div>\n ~~</div>\n </label>\n~~ </div>\n</template>\n\n<script>\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\n/*\n Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRadio',\n\n components: { DtValidationMessages },\n\n mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /\n A provided value for the radio\n /\n value: {\n type: [String, Number],\n default: '',\n },\n },\n\n emits: [\n /\n Native input event\n \n @event input\n * @type {String \| Number}\n /\n 'input',\n\n /\n Native input focus event\n \n @event focus\n * @type {FocusEvent}\n /\n 'focus',\n\n /\n Native input focusin event\n \n @event focusin\n * @property {FocusEvent}\n /\n 'focusin',\n\n /\n Native input focusout event\n \n @event focusout\n * @property {FocusEvent}\n /\n 'focusout',\n\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n ],\n\n data () {\n return {\n hasSlotContent,\n };\n },\n\n computed: {\n inputValidationClass () {\n return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n },\n\n radioGroupValue () {\n return this.groupContext?.selectedValue;\n },\n\n inputListeners () {\n return {\n /\n * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n * 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.value),\n };\n },\n },\n\n watch: {\n radioGroupValue: {\n immediate: true,\n handler (newRadioGroupValue) {\n if (this.hasGroup) {\n // update internal value when the radio group value changes\n this.internalChecked = newRadioGroupValue === this.value;\n }\n },\n },\n },\n\n methods: {\n removeClassStyleAttrs,\n addClassStyleAttrs,\n emitValue (value) {\n if (value !== this.radioGroupValue) {\n // update provided value if injected\n this.setGroupValue(value);\n\n this.$emit('input', value);\n }\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","hasSlotContent","RADIO_INPUT_VALIDATION_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;;;~~AAoEA~~,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,oBAAAA,QAAsB;AAAA,EAEpC,QAAQ,CAACC,MAAU,YAAEC,sBAAgBC,MAAAA,gBAAgBC,MAAAA,aAAa;AAAA,EAElE,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,uBAAwB;AACtB,aAAOC,gBAA8B,+BAAC,KAAK,uBAAuB;AAAA,IACnE;AAAA,IAED,kBAAmB;;AACjB,cAAO,UAAK,iBAAL,mBAAmB;AAAA,IAC3B;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAML,OAAO,MAAM;AAAA,QAAE;AAAA,QACf,SAAS,WAAS,KAAK,MAAM,WAAW,KAAK;AAAA,QAC7C,UAAU,WAAS,KAAK,MAAM,YAAY,KAAK;AAAA,QAC/C,QAAQ,WAAS,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA;IAErD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,iBAAiB;AAAA,MACf,WAAW;AAAA,MACX,QAAS,oBAAoB;AAC3B,YAAI,KAAK,UAAU;AAEjB,eAAK,kBAAkB,uBAAuB,KAAK;AAAA,QACrD;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,uBAAAC,aAAqB;AAAA,IACrB,oBAAAC,aAAkB;AAAA,IAClB,UAAW,OAAO;AAChB,UAAI,UAAU,KAAK,iBAAiB;AAElC,aAAK,cAAc,KAAK;AAExB,aAAK,MAAM,SAAS,KAAK;AAAA,MAC3B;AAAA,IACD;AAAA,EACF;AACH;~~AAlLa~~,MAAA,aAAA,EAAA,OAAM,iBAAgB;~~AANnC~~,MAAA,aAAA,CAAA,WAAA,QAAA,SAAA,UAAA;;~~EAmBU~~,OAAM;AAAA,EACN,WAAQ;;;;~~AAnBhB~~,SAAAC,cAAA,GAAAC,~~uBAgDM~~,~~OAjDRC~~,IAAAA,eAAAC,IAAAA,mBAEY,SAAA,mBAAmB,KAAM,MAAA,CAAA,CAAA,GAAA;AAAA,IAEjCC,~~IA4CQ~~,~~mBAAA~~,SAAA~~,MAAA~~;AAAA,~~MA3CNA~~,~~IAAAA~~,~~mBA0CM~~,~~OAAA;AAAA,QA1CA,OALZC,kEAKkE,~~KAAgB,iBAAA,CAAA,CAAA;AAAA;~~QAC1ED~~,IAAA,mBAWM,OAXN,YAWM;AAAA,~~UAVJA~~,IAAA,mBASC,SATDE,eASC;AAAA,~~YARE~~,SAAS,KAAe;AAAA,~~YACxB~~,MAAM,KAAY;AAAA,~~YAClB~~,OAAO,OAAK;AAAA,~~YACZ~~,UAAU,KAAgB;AAAA,~~YAC3B~~,MAAK;AAAA,~~YACJ~~,OAAK,CAAA,WAAc,SAAoB,sBAAE,KAAU,UAAA;AAAA,~~UAC5C~~,GAAA,SAAA,sBAAsB,KAAM,MAAA,GACpCC,IAAqB,WAAf,~~yBAflB~~,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;~~QAkBQH~~,IAAA,~~mBA4BM~~,~~OA5BN~~,~~YA4BM~~;AAAA,~~UAxBJA~~,~~IAAAA~~,~~mBAOM~~,~~OAPNE~~,~~IAAAA~~,~~WAOM~~,~~EANH,OAAO,KAAU,cACV,~~KAAe,iBAAA,EACvB,WAAQ,cAAa,CAAA,GAAA;AAAA,~~YAGrBE~~,IAAAA,WAAwB,4BAAxB,MAAwB;AAAA,~~cA5BpCC~~,IAAAA,gBAAAC,IAAAA,~~gBA4BqB~~,KAAK,KAAA,GAAA,CAAA;AAAA~~;;UAGR~~,~~KAAM~~,~~OAAC~~,~~eAAe~~,~~KAAW~~,~~eADzCV~~,IAAAA,aAAAC,IAAAA,~~mBAQM~~,~~OARNK~~,~~eAQM~~;AAAA,~~YAtChB~~,KAAA;AAAA,~~YAgCa~~,yBAAyB,KAAgB,gBAAA;AAAA,~~aAClC~~,KAAqB,uBAAA,EAC7B,WAAQ,oBAAmB,CAAA,GAAA;AAAA,~~YAG3BE~~,IAAAA,~~WAAiD~~,~~gCAAjD~~,~~MAAiD~~;AAAA,~~cArC7DC~~,IAAAA,gBAAAC,IAAAA,~~gBAqCwC~~,KAAW,WAAA,GAAA,CAAA;AAAA;~~oBArCnDC~~,IAAA,mBAAA,IAAA,IAAA;AAAA,~~UAuCUC~~,IAAA,YAME,mCANFN,eAME;AAAA,~~YALC~~,uBAAqB,KAAiB;AAAA,~~YACtC~~,iBAAe,KAAY;AAAA,~~YAC3B~~,OAAO,KAAa;AAAA,~~aACb~~,KAAkB,oBAAA,EAC1B,WAAQ,+BAA8B,CAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,OAAA,CAAA;AAAA~~;;;;;;;~~"}
1	+ {"version":3,"file":"radio.vue.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n <div class=\"d-radio__input\">\n <input\n :checked=\"internalChecked\"\n :name=\"internalName\"\n :value=\"value\"\n :disabled=\"internalDisabled\"\n type=\"radio\"\n :class=\"['d-radio', inputValidationClass, inputClass]\"\n v-bind=\"removeClassStyleAttrs($attrs)\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"radio-label\"\n >\n <!-- @slot slot for Radio Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"hasDescriptionOrMessages\"\n class=\"d-radio__messages\"\n data-qa=\"radio-description-messages\"\n >\n <div\n v-if=\"hasDescription\"\n :class=\"['d-description', descriptionClass]\"\n v-bind=\"descriptionChildProps\"\n data-qa=\"radio-description\"\n >\n <!-- @slot slot for Radio Description -->\n <slot name=\"description\">\n {{ description }}\n </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-radio-validation-messages\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\n/*\n Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRadio',\n\n components: { DtValidationMessages },\n\n mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /\n A provided value for the radio\n /\n value: {\n type: [String, Number],\n default: '',\n },\n },\n\n emits: [\n /\n Native input event\n \n @event input\n * @type {String \| Number}\n /\n 'input',\n\n /\n Native input focus event\n \n @event focus\n * @type {FocusEvent}\n /\n 'focus',\n\n /\n Native input focusin event\n \n @event focusin\n * @property {FocusEvent}\n /\n 'focusin',\n\n /\n Native input focusout event\n \n @event focusout\n * @property {FocusEvent}\n /\n 'focusout',\n\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n ],\n\n data () {\n return {\n hasSlotContent,\n };\n },\n\n computed: {\n inputValidationClass () {\n return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n },\n\n radioGroupValue () {\n return this.groupContext?.selectedValue;\n },\n\n inputListeners () {\n return {\n /\n * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n * 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.value),\n };\n },\n\n hasDescription () {\n return !!(this.$slots.description \|\| this.description);\n },\n\n hasDescriptionOrMessages () {\n return this.hasDescription \|\| this.hasMessages;\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\n },\n },\n\n watch: {\n radioGroupValue: {\n immediate: true,\n handler (newRadioGroupValue) {\n if (this.hasGroup) {\n // update internal value when the radio group value changes\n this.internalChecked = newRadioGroupValue === this.value;\n }\n },\n },\n },\n\n methods: {\n removeClassStyleAttrs,\n addClassStyleAttrs,\n emitValue (value) {\n if (value !== this.radioGroupValue) {\n // update provided value if injected\n this.setGroupValue(value);\n\n this.$emit('input', value);\n }\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","hasSlotContent","RADIO_INPUT_VALIDATION_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/vue3/components/radio/radio.vue.js CHANGED Viewed

@@ -82,6 +82,15 @@ const _sfc_main = {
         focusout: (event) => this.$emit("focusout", event),
         change: (event) => this.emitValue(event.target.value)
       };
+    },
+    hasDescription() {
+      return !!(this.$slots.description || this.description);
+    },
+    hasDescriptionOrMessages() {
+      return this.hasDescription || this.hasMessages;
+    },
+    hasMessages() {
+      return this.formattedMessages.length && this.showMessages;
     }
   },
   watch: {
@@ -108,48 +117,49 @@ const _sfc_main = {
 const _hoisted_1 = { class: "d-radio__input" };
 const _hoisted_2 = ["checked", "name", "value", "disabled"];
 const _hoisted_3 = {
-  class: "d-radio__copy d-radio__label",
-  "data-qa": "radio-label-description-container"
+  key: 0,
+  class: "d-radio__messages",
+  "data-qa": "radio-description-messages"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
   return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
-    createElementVNode("label", null, [
-      createElementVNode("div", {
-        class: normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
-      }, [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("input", mergeProps({
-            checked: _ctx.internalChecked,
-            name: _ctx.internalName,
-            value: $props.value,
-            disabled: _ctx.internalDisabled,
-            type: "radio",
-            class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
-          }, $options.removeClassStyleAttrs(_ctx.$attrs), toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
-        ]),
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("div", mergeProps({ class: _ctx.labelClass }, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
-            renderSlot(_ctx.$slots, "default", {}, () => [
-              createTextVNode(toDisplayString(_ctx.label), 1)
-            ])
-          ], 16),
-          _ctx.$slots.description || _ctx.description ? (openBlock(), createElementBlock("div", mergeProps({
-            key: 0,
-            class: ["d-description", _ctx.descriptionClass]
-          }, _ctx.descriptionChildProps, { "data-qa": "radio-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-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
+    createElementVNode("label", {
+      class: normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("input", mergeProps({
+          checked: _ctx.internalChecked,
+          name: _ctx.internalName,
+          value: $props.value,
+          disabled: _ctx.internalDisabled,
+          type: "radio",
+          class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
+        }, $options.removeClassStyleAttrs(_ctx.$attrs), toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
+      ]),
+      createElementVNode("div", mergeProps({
+        class: [_ctx.labelClass, "d-radio__copy d-radio__label"]
+      }, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.label), 1)
+        ])
+      ], 16)
+    ], 2),
+    $options.hasDescriptionOrMessages ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      $options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        class: ["d-description", _ctx.descriptionClass]
+      }, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
+        renderSlot(_ctx.$slots, "description", {}, () => [
+          createTextVNode(toDisplayString(_ctx.description), 1)
         ])
-      ], 2)
-    ])
+      ], 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-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
+    ])) : createCommentVNode("", true)
   ], 16);
 }
 const radio = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);