@dialpad/dialtone 9.98.0 → 9.99.0

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

@@ -1 +1 @@
-{"version":3,"file":"badge.vue.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["ICON_SIZE_MODIFIERS","BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_renderSlot","_createElementVNode","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;AAuDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKA,kCAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,oCAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,oCAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,0CAA0B,EAAE,SAAS,IAAI;AAAA,IAC3E;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,sBAAAD,gBAAoB;AAAA,MACpB,sBAAAD,gBAAoB;AAAA,kCACpBE,gBAA0B;AAAA;EAE7B;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAOC,4BAAe,KAAK,OAAO,QAAQ;AAAA,IAC3C;AAAA,IAED,eAAgB;AACd,aAAOA,4BAAe,KAAK,OAAO,SAAS;AAAA,IAC5C;AAAA,IAED,WAAY;AACV,aAAO,KAAK,eAAe,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,cAAa;AAAA,EACnB;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,WAAK,4BAA2B;AAChC,WAAK,kCAAiC;AAAA,IACvC;AAAA,IAED,8BAA+B;AAC7B,UAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,SAAS;AAC/C,gBAAQ,MAAM,yEAA6E;AAAA,MAC7F;AACA,UAAI,KAAK,SAAS,cAAc,KAAK,QAAQ;AAC3C,gBAAQ,MAAM,6DAA+D;AAAA,MAC/E;AAAA,IACD;AAAA,IAED,oCAAqC;AACnC,UAAI,CAAC,KAAK,WAAY;AAEtB,UAAI,KAAK,SAAS,WAAW,KAAK,SAAS,WAAW;AACpD,gBAAQ,MAAM,yFAA6F;AAAA,MAC7G;AAEA,UAAI,KAAK,UAAU;AACjB,gBAAQ,MAAM,2EAA2E;AAAA,MAC3F;AAAA,IACD;AAAA,EACF;AACH;;EA7LA,KAAA;AAAA,EAcM,OAAM;;;EAdZ,KAAA;AAAA,EAkBM,OAAM;;;EAlBZ,KAAA;AAAA,EAkCM,OAAM;;;0BAjCVC,IAyCO,mBAAA,QAAA;AAAA,IAxCJ,OAFLC,IAAAA,eAAA;AAAA;MAEqC,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,2BAA2B,OAAU,UAAA;AAAA,2BAA8B,OAAM,OAAA;AAAA,6BAAiC,OAAQ,SAAA;AAAA;IAQvN,WAAQ;AAAA;IAGA,OAAU,cADlBC,IAAAA,aAAAF,IAAAA,mBAGE,QAHF,UAGE,KAfNG,IAAA,mBAAA,IAAA,IAAA;AAAA,IAiBY,SAAW,eADnBD,IAAAA,aAAAF,IAAAA,mBASO,QATP,YASO;AAAA,MAJLI,IAGE,WAAA,KAAA,QAAA,YAAA,EADC,UAAW,OAAQ,UAAA;AAAA,UAvB5BD,IAAA,mBAAA,IAAA,IAAA;AAAA,IA0BIE,IAAAA,mBAKO,QAAA;AAAA,MALA,OA1BXJ,IAAAA,kCA0BqC,OAAU,UAAA,CAAA;AAAA;MAEzCG,IAAAA,WAEO,4BAFP,MAEO;AAAA,QA9BbE,IAAAA,gBAAAC,IAAAA,gBA6BW,OAAI,IAAA,GAAA,CAAA;AAAA;;IAIH,SAAY,gBADpBL,IAAAA,aAAAF,IAAAA,mBASO,QATP,YASO;AAAA,MAJLI,IAGE,WAAA,KAAA,QAAA,aAAA,EADC,UAAW,OAAQ,UAAA;AAAA,UAvC5BD,IAAA,mBAAA,IAAA,IAAA;AAAA;;;;"}
+{"version":3,"file":"badge.vue.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["ICON_SIZE_MODIFIERS","BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_renderSlot","_createElementVNode","_createTextVNode","_toDisplayString"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import { openBlock, createElementBlock, normalizeClass, createCommentVNode, rend
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtBadge",
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"badge.vue.js","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_renderSlot","_createElementVNode","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"badge.vue.js","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_renderSlot","_createElementVNode","_createTextVNode","_toDisplayString"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ const notice_content = require("../notice/notice_content.vue.cjs");
 const notice_action = require("../notice/notice_action.vue.cjs");
 const notice_constants = require("../notice/notice_constants.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtBanner",
   components: {
     DtNoticeIcon: notice_icon.default,

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

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS","_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode"],"mappings":"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"}
+{"version":3,"file":"banner.vue.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS","_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ import DtNoticeContent from "../notice/notice_content.vue.js";
 import DtNoticeAction from "../notice/notice_action.vue.js";
 import { NOTICE_KINDS } from "../notice/notice_constants.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtBanner",
   components: {
     DtNoticeIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.js","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode"],"mappings":"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"}
+{"version":3,"file":"banner.vue.js","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtBreadcrumbs",
   components: {
     DtBreadcrumbItem: breadcrumb_item.default

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.vue.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["DtBreadcrumbItem","breadcrumbs","BREADCRUMBS_INVERTED_MODIFIER","utils","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAA,gBAAgB;AAAA,EACjB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,qCACLC,sBAA6B;AAAA;EAEhC;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAIC,aAAAA,QAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;AAnFA,MAAA,aAAA,CAAA,YAAA;;;0BACEC,IAmBM,mBAAA,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,IAAAA,eAAA;AAAA;MAI8C,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,IAUK,mBAAA,MAAA,MAAA;AAAA,MARHC,IAAAA,WAOO,4BAPP,MAOO;AAAA,SANLC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAKEK,oBAjBVC,IAakC,WAAA,OAAA,aAblC,CAakB,MAAM,UAAK;AADrB,iBAAAF,cAAA,GAAAG,gBAKE,+BALFC,IAAAA,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;EAhBtB,GAAA,IAAA,UAAA;;;;"}
+{"version":3,"file":"breadcrumbs.vue.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["DtBreadcrumbItem","breadcrumbs","BREADCRUMBS_INVERTED_MODIFIER","utils","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;;;AAiCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAA,gBAAgB;AAAA,EACjB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,qCACLC,sBAA6B;AAAA;EAEhC;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAIC,aAAAA,QAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;AApFA,MAAA,aAAA,CAAA,YAAA;;;0BACEC,IAmBM,mBAAA,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,IAAAA,eAAA;AAAA;MAI8C,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,IAUK,mBAAA,MAAA,MAAA;AAAA,MARHC,IAAAA,WAOO,4BAPP,MAOO;AAAA,SANLC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAKEK,oBAjBVC,IAakC,WAAA,OAAA,aAblC,CAakB,MAAM,UAAK;AADrB,iBAAAF,cAAA,GAAAG,gBAKE,+BALFC,IAAAA,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;EAhBtB,GAAA,IAAA,UAAA;;;;"}

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

@@ -4,6 +4,7 @@ import utils from "../../common/utils.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, createBlock, mergeProps } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtBreadcrumbs",
   components: {
     DtBreadcrumbItem

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.vue.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["breadcrumbs","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUA,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAI,MAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;AAnFA,MAAA,aAAA,CAAA,YAAA;;;sBACEC,mBAmBM,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,eAAA;AAAA;MAI8C,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,mBAUK,MAAA,MAAA;AAAA,MARHC,WAOO,4BAPP,MAOO;AAAA,SANLC,UAAA,IAAA,GAAAJ,mBAKEK,gBAjBVC,WAakC,OAAA,aAblC,CAakB,MAAM,UAAK;AADrB,iBAAAF,UAAA,GAAAG,YAKE,+BALFC,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;EAhBtB,GAAA,IAAA,UAAA;;;"}
+{"version":3,"file":"breadcrumbs.vue.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["breadcrumbs","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;AAiCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUA,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAI,MAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;AApFA,MAAA,aAAA,CAAA,YAAA;;;sBACEC,mBAmBM,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,eAAA;AAAA;MAI8C,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,mBAUK,MAAA,MAAA;AAAA,MARHC,WAOO,4BAPP,MAOO;AAAA,SANLC,UAAA,IAAA,GAAAJ,mBAKEK,gBAjBVC,WAakC,OAAA,aAblC,CAakB,MAAM,UAAK;AADrB,iBAAAF,UAAA,GAAAG,YAKE,+BALFC,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;EAhBtB,GAAA,IAAA,UAAA;;;"}

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

@@ -6,8 +6,8 @@ const button_constants = require("./button_constants.cjs");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const link_constants = require("../link/link_constants.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtButton",
-  inheritAttrs: false,
   props: {
     /**
      * Whether the button is a circle or not.
@@ -265,7 +265,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     style: { width: $props.width },
     "aria-live": $options.computedAriaLive,
     "aria-label": $props.loading ? "loading" : _ctx.$attrs["aria-label"]
-  }, _ctx.$attrs, vue.toHandlers($options.buttonListeners, true)), [
+  }, vue.toHandlers($options.buttonListeners, true)), [
     $options.shouldRenderIcon() ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 0,
       "data-qa": "dt-button-icon",

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

@@ -1 +1 @@
-{"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-bind=\"$attrs\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","hasSlotContent","BUTTON_ICON_SIZES","warn","getLinkKindModifier","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","hasSlotContent","BUTTON_ICON_SIZES","warn","getLinkKindModifier","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}

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

@@ -4,8 +4,8 @@ import { ICON_POSITION_MODIFIERS, BUTTON_IMPORTANCE_MODIFIERS, BUTTON_TYPES, BUT
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import { LINK_KIND_MODIFIERS, getLinkKindModifier } from "../link/link_constants.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtButton",
-  inheritAttrs: false,
   props: {
     /**
      * Whether the button is a circle or not.
@@ -263,7 +263,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     style: { width: $props.width },
     "aria-live": $options.computedAriaLive,
     "aria-label": $props.loading ? "loading" : _ctx.$attrs["aria-label"]
-  }, _ctx.$attrs, toHandlers($options.buttonListeners, true)), [
+  }, toHandlers($options.buttonListeners, true)), [
     $options.shouldRenderIcon() ? (openBlock(), createElementBlock("span", {
       key: 0,
       "data-qa": "dt-button-icon",

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

@@ -1 +1 @@
-{"version":3,"file":"button.vue.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-bind=\"$attrs\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"button.vue.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":";;;;;AA+DA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,aAAa,OAAO,KAAK,uBAAuB,EAAE,SAAS,QAAQ;AAAA,IAChF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,2BAA2B,EAAE,SAAS,CAAC;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,OAAO,OAAO,KAAK,mBAAmB,EAAE,SAAS,EAAE;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,aAAa,SAAS,CAAC;AAAA,IAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,qBAAqB,EAAE,SAAS,CAAC;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,qBAAqB,EAAE,SAAS,CAAC;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,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,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;AAAA,MAEA,WAAW;AAAA,MACX;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IAER,kBAAmB;AACjB,aAAO;AAAA,QACL,SAAS,CAAC,MAAM;AACd,eAAK,YAAY,KAAK;AACtB,eAAK,MAAM,WAAW,CAAC;AAAA,QACxB;AAAA,QAED,UAAU,CAAC,MAAM;AACf,eAAK,YAAY;AACjB,eAAK,MAAM,YAAY,CAAC;AAAA,QACzB;AAAA;IAEJ;AAAA,IAED,mBAAoB;AAClB,aAAO,KAAK,oBAAoB,KAAK,YAAY,cAAc,KAAK,OAAO;AAAA,IAC5E;AAAA,IAED,WAAY;AACV,aAAO,kBAAkB,KAAK,IAAI;AAAA,IACnC;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,MACX,UAAW;AACT,YAAI,QAAQ,IAAI,aAAa,aAAc;AAE3C,YAAI,KAAK,UAAU,KAAK,MAAM;AAC5B,eAAK,sDAAsD,IAAI;AAAA,QACjE;AAEA,aAAK,yBAAyB,KAAK,QAAQ,KAAK,MAAM,KAAK,UAAU;AAAA,MACtE;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,UAAI,KAAK,MAAM;AACb,eAAO;AAAA,UACL;AAAA,UACA,oBAAoB,KAAK,UAAU,KAAK,YAAY;AAAA,UACpD,sBAAsB,KAAK,IAAI;AAAA;MAEnC;AACA,aAAO;AAAA,QACL;AAAA,QACA,4BAA4B,KAAK,UAAU;AAAA,QAC3C,sBAAsB,KAAK,IAAI;AAAA,QAC/B,sBAAsB,KAAK,IAAI;AAAA,QAC/B;AAAA,UACE,iBAAiB,KAAK;AAAA,UACtB,kBAAkB,KAAK;AAAA,UACvB,oBAAoB,KAAK,WAAY;AAAA,UACrC,mBAAmB,KAAK,qBAAsB;AAAA,UAC9C,iBAAiB,KAAK;AAAA,QACvB;AAAA;IAEJ;AAAA,IAED,yBAA0B,QAAQ,MAAM,YAAY;AAClD,iBAAW,OAAO,qBAAqB;AACrC,YAAI,WAAW,IAAI,UAAU,SAAS,IAAI,QAAQ,eAAe,IAAI,YAAY;AAC/E,kBAAQ,KAAK,IAAI,OAAO;AACxB,iBAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,IACR;AAAA,IAED,mBAAoB;AAClB,aAAO,eAAe,KAAK,OAAO,IAAI,KAAK,CAAC,KAAK;AAAA,IAClD;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,sBAAsB,CAAC,eAAe,KAAK,OAAO,OAAO;AAAA,IACtE;AAAA,IAED,uBAAwB;AACtB,aAAO,CAAC,KAAK,WAAU,KAAM,CAAC,OAAO,QAAQ,EAAE,SAAS,KAAK,YAAY;AAAA,IAC1E;AAAA,EACF;AACH;AApVA,MAAA,aAAA,CAAA,QAAA,YAAA,aAAA,YAAA;;AACE,SAAAA,UAAA,GAAAC,mBAqCS,UArCTC,WAqCS;AAAA,IApCN,OAAK;AAAA;MAAuC,SAAa,cAAA;AAAA;IAI1D,WAAQ;AAAA,IACP,MAAM,OAAI;AAAA,IACV,UAAU,OAAQ;AAAA,IAClB,gBAAgB,OAAK,MAAA;AAAA,IACrB,aAAW,SAAgB;AAAA,IAC3B,cAAY,OAAO,UAAA,YAAe,KAAM,OAAA,YAAA;AAAA,EACzC,GAAAC,WAAsB,SAAD,iBAAA,IAAA,CAAA,GAAA;AAAA,IAIb,SAAgB,iBAAA,kBADxBF,mBAcO,QAAA;AAAA,MA7BX,KAAA;AAAA,MAiBM,WAAQ;AAAA,MACP,OAlBPG,eAAA;AAAA;;QAkB4E,MAAA,wBAAwB,OAAY,YAAA;AAAA;;MAO1GC,WAGE,KAAA,QAAA,QAAA,EADC,UAAW,SAAQ,UAAA;AAAA,aA3B5BC,mBAAA,IAAA,IAAA;AAAA,IA+BY,MAAc,eAAC,KAAM,OAAC,OAAO,kBADrCL,mBAOO,QAAA;AAAA,MArCX,KAAA;AAAA,MAgCM,WAAQ;AAAA,MACP,OAjCPG,sDAiCqD,OAAU,UAAA,CAAA;AAAA;MAGzDC,WAAQ,KAAA,QAAA,SAAA;AAAA,aApCdC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,IAAA,UAAA;;;"}

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

@@ -4,6 +4,7 @@ const button_group_constants = require("./button_group_constants.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtButtonGroup",
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"button_group.vue.cjs","sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["BUTTON_GROUP_ALIGNMENT","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAgBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,OAAO,KAAKA,6CAAsB,EAAE,SAAS,SAAS;AAAA,IACjF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,8BACLA,uBAAsB;AAAA;EAEzB;AACH;;0BAlCEC,IASM,mBAAA,OAAA;AAAA,IARH,OAFLC,IAAAA,eAAA;AAAA;MAEyC,MAAA,uBAAuB,OAAS,SAAA;AAAA;IAIrE,MAAK;AAAA;IAGLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}
+{"version":3,"file":"button_group.vue.cjs","sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["BUTTON_GROUP_ALIGNMENT","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAgBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,OAAO,KAAKA,6CAAsB,EAAE,SAAS,SAAS;AAAA,IACjF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,8BACLA,uBAAsB;AAAA;EAEzB;AACH;;0BAnCEC,IASM,mBAAA,OAAA;AAAA,IARH,OAFLC,IAAAA,eAAA;AAAA;MAEyC,MAAA,uBAAuB,OAAS,SAAA;AAAA;IAIrE,MAAK;AAAA;IAGLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

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

@@ -2,6 +2,7 @@ import { BUTTON_GROUP_ALIGNMENT } from "./button_group_constants.js";
 import { openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtButtonGroup",
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"button_group.vue.js","sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAgBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,OAAO,KAAK,sBAAsB,EAAE,SAAS,SAAS;AAAA,IACjF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;sBAlCEA,mBASM,OAAA;AAAA,IARH,OAFLC,eAAA;AAAA;MAEyC,MAAA,uBAAuB,OAAS,SAAA;AAAA;IAIrE,MAAK;AAAA;IAGLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}
+{"version":3,"file":"button_group.vue.js","sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAgBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,OAAO,KAAK,sBAAsB,EAAE,SAAS,SAAS;AAAA,IACjF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;sBAnCEA,mBASM,OAAA;AAAA,IARH,OAFLC,eAAA;AAAA;MAEyC,MAAA,uBAAuB,OAAS,SAAA;AAAA;IAIrE,MAAK;AAAA;IAGLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}

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

@@ -4,6 +4,7 @@ const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCard",
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"card.vue.cjs","sources":["../../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.header)\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"hasSlotContent($slots.footer)\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["hasSlotContent","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_normalizeStyle"],"mappings":";;;;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAA,aAAc;AAAA;EAEjB;AACH;;0BApGEC,IAuCM,mBAAA,OAAA;AAAA,IAtCH,OAFLC,IAAAA,eAAA;AAAA;MAEoC,OAAc;AAAA;IAI9C,WAAQ;AAAA;IAGA,MAAc,eAAC,KAAM,OAAC,MAAM,sBADpCD,IASM,mBAAA,OAAA;AAAA,MAjBV,KAAA;AAAA,MAUO,OAVPC,IAAAA,eAAA;AAAA;QAUkD,OAAW;AAAA;;MAMvDC,eAAsB,KAAA,QAAA,QAAA;AAAA,aAhB5BC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAmBIC,IAAAA,mBASM,OAAA;AAAA,MARH,OApBPH,IAAAA,eAAA;AAAA;QAoBmD,OAAY;AAAA;MAIxD,OAxBPI,IAAAA,+BAwB8B,OAAS,UAAA,CAAA;AAAA;MAGjCH,eAAuB,KAAA,QAAA,SAAA;AAAA;IAIjB,MAAc,eAAC,KAAM,OAAC,MAAM,sBADpCF,IASM,mBAAA,OAAA;AAAA,MAvCV,KAAA;AAAA,MAgCO,OAhCPC,IAAAA,eAAA;AAAA;QAgCkD,OAAW;AAAA;;MAMvDC,eAAsB,KAAA,QAAA,QAAA;AAAA,aAtC5BC,IAAA,mBAAA,IAAA,IAAA;AAAA;;;;"}
+{"version":3,"file":"card.vue.cjs","sources":["../../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.header)\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"hasSlotContent($slots.footer)\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["hasSlotContent","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_normalizeStyle"],"mappings":";;;;;AAmDA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAA,aAAc;AAAA;EAEjB;AACH;;0BArGEC,IAuCM,mBAAA,OAAA;AAAA,IAtCH,OAFLC,IAAAA,eAAA;AAAA;MAEoC,OAAc;AAAA;IAI9C,WAAQ;AAAA;IAGA,MAAc,eAAC,KAAM,OAAC,MAAM,sBADpCD,IASM,mBAAA,OAAA;AAAA,MAjBV,KAAA;AAAA,MAUO,OAVPC,IAAAA,eAAA;AAAA;QAUkD,OAAW;AAAA;;MAMvDC,eAAsB,KAAA,QAAA,QAAA;AAAA,aAhB5BC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAmBIC,IAAAA,mBASM,OAAA;AAAA,MARH,OApBPH,IAAAA,eAAA;AAAA;QAoBmD,OAAY;AAAA;MAIxD,OAxBPI,IAAAA,+BAwB8B,OAAS,UAAA,CAAA;AAAA;MAGjCH,eAAuB,KAAA,QAAA,SAAA;AAAA;IAIjB,MAAc,eAAC,KAAM,OAAC,MAAM,sBADpCF,IASM,mBAAA,OAAA;AAAA,MAvCV,KAAA;AAAA,MAgCO,OAhCPC,IAAAA,eAAA;AAAA;QAgCkD,OAAW;AAAA;;MAMvDC,eAAsB,KAAA,QAAA,QAAA;AAAA,aAtC5BC,IAAA,mBAAA,IAAA,IAAA;AAAA;;;;"}

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

@@ -2,6 +2,7 @@ import { hasSlotContent } from "../../common/utils.js";
 import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCard",
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"card.vue.js","sources":["../../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.header)\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"hasSlotContent($slots.footer)\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_normalizeStyle"],"mappings":";;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;sBApGEA,mBAuCM,OAAA;AAAA,IAtCH,OAFLC,eAAA;AAAA;MAEoC,OAAc;AAAA;IAI9C,WAAQ;AAAA;IAGA,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCD,mBASM,OAAA;AAAA,MAjBV,KAAA;AAAA,MAUO,OAVPC,eAAA;AAAA;QAUkD,OAAW;AAAA;;MAMvDC,WAAsB,KAAA,QAAA,QAAA;AAAA,aAhB5BC,mBAAA,IAAA,IAAA;AAAA,IAmBIC,mBASM,OAAA;AAAA,MARH,OApBPH,eAAA;AAAA;QAoBmD,OAAY;AAAA;MAIxD,OAxBPI,+BAwB8B,OAAS,UAAA,CAAA;AAAA;MAGjCH,WAAuB,KAAA,QAAA,SAAA;AAAA;IAIjB,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCF,mBASM,OAAA;AAAA,MAvCV,KAAA;AAAA,MAgCO,OAhCPC,eAAA;AAAA;QAgCkD,OAAW;AAAA;;MAMvDC,WAAsB,KAAA,QAAA,QAAA;AAAA,aAtC5BC,mBAAA,IAAA,IAAA;AAAA;;;"}
+{"version":3,"file":"card.vue.js","sources":["../../../components/card/card.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-card',\n      containerClass,\n    ]\"\n    data-qa=\"dt-card\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.header)\"\n      :class=\"[\n        'd-card__header',\n        headerClass,\n      ]\"\n    >\n      <!-- @slot slot for header content -->\n      <slot name=\"header\" />\n    </div>\n\n    <div\n      :class=\"[\n        'd-card__content',\n        contentClass,\n      ]\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <!-- @slot slot for main content -->\n      <slot name=\"content\" />\n    </div>\n\n    <div\n      v-if=\"hasSlotContent($slots.footer)\"\n      :class=\"[\n        'd-card__footer',\n        footerClass,\n      ]\"\n    >\n      <!-- @slot slot for footer content -->\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * A card contains summary content and actions about a single subject.\n * It can be used by itself or within a list, and is generally interactive.\n * @see https://dialtone.dialpad.com/components/card.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCard',\n  props: {\n    /**\n     * The maximum height of the card content.\n     * If given, makes content area scrollable.\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * class for card container.\n     */\n    containerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card content.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card header.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * class for card footer.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_normalizeStyle"],"mappings":";;;AAmDA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;sBArGEA,mBAuCM,OAAA;AAAA,IAtCH,OAFLC,eAAA;AAAA;MAEoC,OAAc;AAAA;IAI9C,WAAQ;AAAA;IAGA,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCD,mBASM,OAAA;AAAA,MAjBV,KAAA;AAAA,MAUO,OAVPC,eAAA;AAAA;QAUkD,OAAW;AAAA;;MAMvDC,WAAsB,KAAA,QAAA,QAAA;AAAA,aAhB5BC,mBAAA,IAAA,IAAA;AAAA,IAmBIC,mBASM,OAAA;AAAA,MARH,OApBPH,eAAA;AAAA;QAoBmD,OAAY;AAAA;MAIxD,OAxBPI,+BAwB8B,OAAS,UAAA,CAAA;AAAA;MAGjCH,WAAuB,KAAA,QAAA,SAAA;AAAA;IAIjB,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCF,mBASM,OAAA;AAAA,MAvCV,KAAA;AAAA,MAgCO,OAhCPC,eAAA;AAAA;QAgCkD,OAAW;AAAA;;MAMvDC,WAAsB,KAAA,QAAA,QAAA;AAAA,aAtC5BC,mBAAA,IAAA,IAAA;AAAA;;;"}

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

@@ -6,6 +6,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtCheckbox",
   components: { DtValidationMessages: validation_messages.default },
   mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.MessagesMixin],