@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/avatar/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("./avatar.cjs"),A=require("./avatar-constants.cjs");exports.DtAvatar=R.default;exports.AVATAR_COLORS=A.AVATAR_COLORS;exports.AVATAR_GROUP_VALIDATOR=A.AVATAR_GROUP_VALIDATOR;exports.AVATAR_ICON_SIZES=A.AVATAR_ICON_SIZES;exports.AVATAR_KIND_MODIFIERS=A.AVATAR_KIND_MODIFIERS;exports.AVATAR_PRESENCE_SIZE_MODIFIERS=A.AVATAR_PRESENCE_SIZE_MODIFIERS;exports.AVATAR_PRESENCE_STATES=A.AVATAR_PRESENCE_STATES;exports.AVATAR_RANDOM_COLORS=A.AVATAR_RANDOM_COLORS;exports.AVATAR_SIZE_MODIFIERS=A.AVATAR_SIZE_MODIFIERS;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("./avatar.cjs"),A=require("./avatar-constants.cjs");exports.DtAvatar=_.default;exports.AVATAR_CHROMA=A.AVATAR_CHROMA;exports.AVATAR_FAMILY_COUNT=A.AVATAR_FAMILY_COUNT;exports.AVATAR_GROUP_VALIDATOR=A.AVATAR_GROUP_VALIDATOR;exports.AVATAR_HUE_OFFSETS=A.AVATAR_HUE_OFFSETS;exports.AVATAR_ICON_SIZES=A.AVATAR_ICON_SIZES;exports.AVATAR_KIND_MODIFIERS=A.AVATAR_KIND_MODIFIERS;exports.AVATAR_LIGHTNESS=A.AVATAR_LIGHTNESS;exports.AVATAR_PRESENCE_SIZE_MODIFIERS=A.AVATAR_PRESENCE_SIZE_MODIFIERS;exports.AVATAR_PRESENCE_STATES=A.AVATAR_PRESENCE_STATES;exports.AVATAR_SIZE_MODIFIERS=A.AVATAR_SIZE_MODIFIERS;exports.AVATAR_VARIANT_COUNT=A.AVATAR_VARIANT_COUNT;exports.colorToFamilyVariant=A.colorToFamilyVariant;exports.computeAvatarHex=A.computeAvatarHex;exports.getRandomFamilyVariant=A.getRandomFamilyVariant;
 //# sourceMappingURL=index.cjs.map

package/dist/lib/avatar/index.js

@@ -1,14 +1,20 @@
 import { default as _ } from "./avatar.js";
-import { AVATAR_COLORS as S, AVATAR_GROUP_VALIDATOR as I, AVATAR_ICON_SIZES as O, AVATAR_KIND_MODIFIERS as T, AVATAR_PRESENCE_SIZE_MODIFIERS as V, AVATAR_PRESENCE_STATES as D, AVATAR_RANDOM_COLORS as r, AVATAR_SIZE_MODIFIERS as t } from "./avatar-constants.js";
+import { AVATAR_CHROMA as E, AVATAR_FAMILY_COUNT as I, AVATAR_GROUP_VALIDATOR as S, AVATAR_HUE_OFFSETS as V, AVATAR_ICON_SIZES as a, AVATAR_KIND_MODIFIERS as t, AVATAR_LIGHTNESS as O, AVATAR_PRESENCE_SIZE_MODIFIERS as o, AVATAR_PRESENCE_STATES as r, AVATAR_SIZE_MODIFIERS as F, AVATAR_VARIANT_COUNT as N, colorToFamilyVariant as e, computeAvatarHex as m, getRandomFamilyVariant as C } from "./avatar-constants.js";
 export {
-  S as AVATAR_COLORS,
-  I as AVATAR_GROUP_VALIDATOR,
-  O as AVATAR_ICON_SIZES,
-  T as AVATAR_KIND_MODIFIERS,
-  V as AVATAR_PRESENCE_SIZE_MODIFIERS,
-  D as AVATAR_PRESENCE_STATES,
-  r as AVATAR_RANDOM_COLORS,
-  t as AVATAR_SIZE_MODIFIERS,
-  _ as DtAvatar
+  E as AVATAR_CHROMA,
+  I as AVATAR_FAMILY_COUNT,
+  S as AVATAR_GROUP_VALIDATOR,
+  V as AVATAR_HUE_OFFSETS,
+  a as AVATAR_ICON_SIZES,
+  t as AVATAR_KIND_MODIFIERS,
+  O as AVATAR_LIGHTNESS,
+  o as AVATAR_PRESENCE_SIZE_MODIFIERS,
+  r as AVATAR_PRESENCE_STATES,
+  F as AVATAR_SIZE_MODIFIERS,
+  N as AVATAR_VARIANT_COUNT,
+  _ as DtAvatar,
+  e as colorToFamilyVariant,
+  m as computeAvatarHex,
+  C as getRandomFamilyVariant
 };
 //# sourceMappingURL=index.js.map

package/dist/lib/badge/badge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./badge-constants.cjs"),l=require("../../common/utils/index.cjs"),e=require("vue"),r=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),s=require("../icon/icon-constants.cjs"),d={compatConfig:{MODE:3},name:"DtBadge",props:{iconSize:{type:String,default:"200",validator:t=>Object.keys(s.ICON_SIZE_MODIFIERS).includes(t)},text:{type:String,default:""},kind:{type:String,default:"label",validator:t=>Object.keys(n.BADGE_KIND_MODIFIERS).includes(t)},type:{type:String,default:"default",validator:t=>Object.keys(n.BADGE_TYPE_MODIFIERS).includes(t)},decoration:{type:String,default:void 0,validator:t=>Object.keys(n.BADGE_DECORATION_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:n.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:n.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:n.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return l.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return l.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},updated(){this.validateProps()},methods:{validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type==="ai"&&this.kind==="count"&&console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."),this.type!=="bulletin"&&this.subtle&&console.error("DtBadge error: subtle can only be used with type 'bulletin'")},validateDecorationPropCombination(){this.decoration&&((this.kind!=="label"||this.type!=="default")&&console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."),this.hasIcons&&console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon."))}}},c={key:0,class:"d-badge__decorative"},u={key:1,class:"d-badge__icon-left"},_={key:2,class:"d-badge__icon-right"};function I(t,h,o,b,a,i){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["d-badge",a.BADGE_TYPE_MODIFIERS[o.type],a.BADGE_KIND_MODIFIERS[o.kind],a.BADGE_DECORATION_MODIFIERS[o.decoration],{"d-badge--subtle":o.subtle},{"d-badge--outlined":o.outlined}]),"data-qa":"dt-badge"},[o.decoration?(e.openBlock(),e.createElementBlock("span",c)):e.createCommentVNode("",!0),i.hasLeftIcon?(e.openBlock(),e.createElementBlock("span",u,[e.renderSlot(t.$slots,"leftIcon",{iconSize:o.iconSize})])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["d-badge__label",o.labelClass])},[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])],2),i.hasRightIcon?(e.openBlock(),e.createElementBlock("span",_,[e.renderSlot(t.$slots,"rightIcon",{iconSize:o.iconSize})])):e.createCommentVNode("",!0)],2)}const D=r._(d,[["render",I]]);exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./badge-constants.cjs"),a=require("../../common/utils/index.cjs"),e=require("vue"),l=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),r=require("../icon/icon-constants.cjs"),d={compatConfig:{MODE:3},name:"DtBadge",props:{iconSize:{type:String,default:"200",validator:t=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(t)},text:{type:String,default:""},kind:{type:String,default:"label",validator:t=>Object.keys(n.BADGE_KIND_MODIFIERS).includes(t)},type:{type:String,default:"default",validator:t=>Object.keys(n.BADGE_TYPE_MODIFIERS).includes(t)},decoration:{type:String,default:void 0,validator:t=>Object.keys(n.BADGE_DECORATION_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:n.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:n.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:n.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return a.hasSlotContent(this.$slots.startIcon)||a.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return a.hasSlotContent(this.$slots.endIcon)||a.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},updated(){this.validateProps()},methods:{validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type==="ai"&&this.kind==="count"&&console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."),this.type!=="bulletin"&&this.subtle&&console.error("DtBadge error: subtle can only be used with type 'bulletin'")},validateDecorationPropCombination(){this.decoration&&((this.kind!=="label"||this.type!=="default")&&console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."),this.hasIcons&&console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."))}}},c={key:0,class:"d-badge__decorative"},u={key:1,class:"d-badge__icon-left"},I={key:2,class:"d-badge__icon-right"};function _(t,D,o,S,i,s){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["d-badge",i.BADGE_TYPE_MODIFIERS[o.type],i.BADGE_KIND_MODIFIERS[o.kind],i.BADGE_DECORATION_MODIFIERS[o.decoration],{"d-badge--subtle":o.subtle},{"d-badge--outlined":o.outlined}]),"data-qa":"dt-badge"},[o.decoration?(e.openBlock(),e.createElementBlock("span",c)):e.createCommentVNode("",!0),s.hasLeftIcon?(e.openBlock(),e.createElementBlock("span",u,[t.$slots.startIcon?e.renderSlot(t.$slots,"startIcon",{key:0,iconSize:o.iconSize}):e.renderSlot(t.$slots,"leftIcon",{key:1,iconSize:o.iconSize})])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["d-badge__label",o.labelClass])},[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])],2),s.hasRightIcon?(e.openBlock(),e.createElementBlock("span",I,[t.$slots.endIcon?e.renderSlot(t.$slots,"endIcon",{key:0,iconSize:o.iconSize}):e.renderSlot(t.$slots,"rightIcon",{key:1,iconSize:o.iconSize})])):e.createCommentVNode("",!0)],2)}const h=l._(d,[["render",_]]);exports.default=h;
 //# sourceMappingURL=badge.cjs.map

package/dist/lib/badge/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.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":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_hoisted_3"],"mappings":"kTAuDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAM/D,KAAM,CACJ,KAAM,OACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAOtE,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAUtE,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,GAM5E,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAAA,qBACA,qBAAAF,EAAAA,gDACAG,EAAAA,2BAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAOC,iBAAe,KAAK,OAAO,QAAQ,CAC5C,EAEA,cAAgB,CACd,OAAOA,iBAAe,KAAK,OAAO,SAAS,CAC7C,EAEA,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YAClC,GAGF,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACxC,EAEA,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEjF,EAEA,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,2EAA2E,EAE7F,EAEJ,WAhLM,MAAM,gCAIN,MAAM,+BAgBN,MAAM,oEAjCVC,EAAAA,mBAyCO,OAAA,CAxCJ,MAAKC,EAAAA,eAAA,WAA2BC,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,2BAA2BC,EAAA,UAAU,qBAA8BA,EAAA,MAAM,uBAAiCA,EAAA,QAAQ,IAQvN,UAAQ,aAGAA,EAAA,YADRC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,+BAEMC,EAAA,aADRF,EAAAA,YAAAJ,EAAAA,mBASO,OATPO,EASO,CAJLC,EAAAA,WAGEC,EAAA,OAAA,WAAA,CADC,SAAWN,EAAA,QAAQ,CAAA,iCAGxBO,EAAAA,mBAKO,OAAA,CALA,yCAA0BP,EAAA,UAAU,CAAA,IAEzCK,EAAAA,WAEOC,sBAFP,IAEO,qCADFN,EAAA,IAAI,EAAA,CAAA,QAIHG,EAAA,cADRF,EAAAA,YAAAJ,EAAAA,mBASO,OATPW,EASO,CAJLH,EAAAA,WAGEC,EAAA,OAAA,YAAA,CADC,SAAWN,EAAA,QAAQ,CAAA"}
+{"version":3,"file":"badge.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 start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\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 end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\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.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || 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 startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","$options","_hoisted_2","_ctx","_renderSlot","_createElementVNode","_hoisted_3"],"mappings":"kTAqEKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAM/D,KAAM,CACJ,KAAM,OACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAOtE,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAUtE,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,GAM5E,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAAA,qBACA,qBAAAF,EAAAA,gDACAG,EAAAA,2BAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAOC,EAAAA,eAAe,KAAK,OAAO,SAAS,GAAKA,iBAAe,KAAK,OAAO,QAAQ,CACrF,EAEA,cAAgB,CACd,OAAOA,EAAAA,eAAe,KAAK,OAAO,OAAO,GAAKA,iBAAe,KAAK,OAAO,SAAS,CACpF,EAEA,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YAClC,GAGF,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACxC,EAEA,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEjF,EAEA,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,0EAA0E,EAE5F,EAEJ,WA9LM,MAAM,gCAIN,MAAM,+BAuBN,MAAM,oEAxCVC,EAAAA,mBAuDO,OAAA,CAtDJ,MAAKC,EAAAA,eAAA,WAA2BC,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,2BAA2BC,EAAA,UAAU,qBAA8BA,EAAA,MAAM,uBAAiCA,EAAA,QAAQ,IAQvN,UAAQ,aAGAA,EAAA,YADRC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,+BAEMC,EAAA,aADRF,EAAAA,YAAAJ,EAAAA,mBAgBO,OAhBPO,EAgBO,CAVGC,EAAA,OAAO,UADfC,aAIED,EAAA,OAAA,YAAA,OADC,SAAWL,EAAA,WAGdM,aAIED,EAAA,OAAA,WAAA,OADC,SAAWL,EAAA,0CAGhBO,EAAAA,mBAKO,OAAA,CALA,yCAA0BP,EAAA,UAAU,CAAA,IAEzCM,EAAAA,WAEOD,sBAFP,IAEO,qCADFL,EAAA,IAAI,EAAA,CAAA,QAIHG,EAAA,cADRF,EAAAA,YAAAJ,EAAAA,mBAgBO,OAhBPW,EAgBO,CAVGH,EAAA,OAAO,QADfC,aAIED,EAAA,OAAA,UAAA,OADC,SAAWL,EAAA,WAGdM,aAIED,EAAA,OAAA,YAAA,OADC,SAAWL,EAAA"}

package/dist/lib/badge/badge.js

@@ -1,9 +1,9 @@
-import { BADGE_DECORATION_MODIFIERS as l, BADGE_KIND_MODIFIERS as d, BADGE_TYPE_MODIFIERS as c } from "./badge-constants.js";
-import { hasSlotContent as u } from "../../common/utils/index.js";
-import { openBlock as o, createElementBlock as a, normalizeClass as h, createCommentVNode as n, renderSlot as r, createElementVNode as f, createTextVNode as b, toDisplayString as I } from "vue";
-import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { ICON_SIZE_MODIFIERS as g } from "../icon/icon-constants.js";
-const p = {
+import { BADGE_DECORATION_MODIFIERS as d, BADGE_KIND_MODIFIERS as c, BADGE_TYPE_MODIFIERS as u } from "./badge-constants.js";
+import { hasSlotContent as n } from "../../common/utils/index.js";
+import { openBlock as i, createElementBlock as a, normalizeClass as h, createCommentVNode as l, renderSlot as o, createElementVNode as I, createTextVNode as f, toDisplayString as b } from "vue";
+import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { ICON_SIZE_MODIFIERS as _ } from "../icon/icon-constants.js";
+const g = {
   compatConfig: { MODE: 3 },
   name: "DtBadge",
   props: {
@@ -14,7 +14,7 @@ const p = {
     iconSize: {
       type: String,
       default: "200",
-      validator: (e) => Object.keys(g).includes(e)
+      validator: (e) => Object.keys(_).includes(e)
     },
     /**
      * Text for the badge content
@@ -30,7 +30,7 @@ const p = {
     kind: {
       type: String,
       default: "label",
-      validator: (e) => Object.keys(d).includes(e)
+      validator: (e) => Object.keys(c).includes(e)
     },
     /**
      * Color for the badge background
@@ -39,7 +39,7 @@ const p = {
     type: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(c).includes(e)
+      validator: (e) => Object.keys(u).includes(e)
     },
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
@@ -51,7 +51,7 @@ const p = {
     decoration: {
       type: String,
       default: void 0,
-      validator: (e) => Object.keys(l).includes(e)
+      validator: (e) => Object.keys(d).includes(e)
     },
     /**
      * Used to customize the label container
@@ -78,17 +78,17 @@ const p = {
   },
   data() {
     return {
-      BADGE_TYPE_MODIFIERS: c,
-      BADGE_KIND_MODIFIERS: d,
-      BADGE_DECORATION_MODIFIERS: l
+      BADGE_TYPE_MODIFIERS: u,
+      BADGE_KIND_MODIFIERS: c,
+      BADGE_DECORATION_MODIFIERS: d
     };
   },
   computed: {
     hasLeftIcon() {
-      return u(this.$slots.leftIcon);
+      return n(this.$slots.startIcon) || n(this.$slots.leftIcon);
     },
     hasRightIcon() {
-      return u(this.$slots.rightIcon);
+      return n(this.$slots.endIcon) || n(this.$slots.rightIcon);
     },
     hasIcons() {
       return this.hasLeftIcon || this.hasRightIcon;
@@ -105,49 +105,61 @@ const p = {
       this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."), this.type !== "bulletin" && this.subtle && console.error("DtBadge error: subtle can only be used with type 'bulletin'");
     },
     validateDecorationPropCombination() {
-      this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon."));
+      this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
     }
   }
-}, y = {
+}, D = {
   key: 0,
   class: "d-badge__decorative"
-}, D = {
+}, S = {
   key: 1,
   class: "d-badge__icon-left"
 }, m = {
   key: 2,
   class: "d-badge__icon-right"
 };
-function S(e, E, t, O, i, s) {
-  return o(), a("span", {
+function p(e, E, t, k, s, r) {
+  return i(), a("span", {
     class: h([
       "d-badge",
-      i.BADGE_TYPE_MODIFIERS[t.type],
-      i.BADGE_KIND_MODIFIERS[t.kind],
-      i.BADGE_DECORATION_MODIFIERS[t.decoration],
+      s.BADGE_TYPE_MODIFIERS[t.type],
+      s.BADGE_KIND_MODIFIERS[t.kind],
+      s.BADGE_DECORATION_MODIFIERS[t.decoration],
       { "d-badge--subtle": t.subtle },
       { "d-badge--outlined": t.outlined }
     ]),
     "data-qa": "dt-badge"
   }, [
-    t.decoration ? (o(), a("span", y)) : n("", !0),
-    s.hasLeftIcon ? (o(), a("span", D, [
-      r(e.$slots, "leftIcon", { iconSize: t.iconSize })
-    ])) : n("", !0),
-    f("span", {
+    t.decoration ? (i(), a("span", D)) : l("", !0),
+    r.hasLeftIcon ? (i(), a("span", S, [
+      e.$slots.startIcon ? o(e.$slots, "startIcon", {
+        key: 0,
+        iconSize: t.iconSize
+      }) : o(e.$slots, "leftIcon", {
+        key: 1,
+        iconSize: t.iconSize
+      })
+    ])) : l("", !0),
+    I("span", {
       class: h(["d-badge__label", t.labelClass])
     }, [
-      r(e.$slots, "default", {}, () => [
-        b(I(t.text), 1)
+      o(e.$slots, "default", {}, () => [
+        f(b(t.text), 1)
       ])
     ], 2),
-    s.hasRightIcon ? (o(), a("span", m, [
-      r(e.$slots, "rightIcon", { iconSize: t.iconSize })
-    ])) : n("", !0)
+    r.hasRightIcon ? (i(), a("span", m, [
+      e.$slots.endIcon ? o(e.$slots, "endIcon", {
+        key: 0,
+        iconSize: t.iconSize
+      }) : o(e.$slots, "rightIcon", {
+        key: 1,
+        iconSize: t.iconSize
+      })
+    ])) : l("", !0)
   ], 2);
 }
-const A = /* @__PURE__ */ _(p, [["render", S]]);
+const z = /* @__PURE__ */ y(g, [["render", p]]);
 export {
-  A as default
+  z as default
 };
 //# sourceMappingURL=badge.js.map

package/dist/lib/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.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":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_hoisted_3"],"mappings":"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"}
+{"version":3,"file":"badge.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 start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\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 end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\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.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || 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 startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","$options","_hoisted_2","_ctx","_renderSlot","_createElementVNode","_hoisted_3"],"mappings":"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"}

package/dist/lib/banner/banner.cjs

@@ -1,3 +1,3 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),r=require("../../common/utils/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../notice/notice-action.cjs"),b=require("../notice/notice-content.cjs"),f=require("../notice/notice-icon.cjs"),g=require("../notice/notice-constants.cjs"),_={compatConfig:{MODE:3},name:"DtBanner",components:{DtNoticeIcon:f.default,DtNoticeContent:b.default,DtNoticeAction:m.default},mixins:[c.default],props:{titleId:{type:String,default(){return r.default.getUniqueString()}},contentId:{type:String,default(){return r.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return g.NOTICE_KINDS.includes(t)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:""},backgroundImage:{type:String,default:""},backgroundSize:{type:String,default:"cover"}},emits:["close"],computed:{role(){return this.important?"alertdialog":"status"},bannerClass(){return["d-banner",{error:"d-banner--error",info:"d-banner--info",success:"d-banner--success",warning:"d-banner--warning",base:"d-banner--base"}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===""?null:`background-image: url(${this.backgroundImage});
-              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(t){this.important&&this.focusTrappedTabPress(t)}}},h=["role","aria-labelledby","aria-describedby"];function C(t,o,n,y,k,i){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),s=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(i.bannerClass),style:e.normalizeStyle(i.bannerBackgroundImage),onKeydown:o[1]||(o[1]=e.withKeys((...a)=>i.trapFocus&&i.trapFocus(...a),["tab"]))},[e.createElementVNode("div",{class:e.normalizeClass(["d-banner__dialog",n.dialogClass]),role:i.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title"]),e.createVNode(s,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=a=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],10,h)],38)}const p=u._(_,[["render",C]]);exports.default=p;
+              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(t){this.important&&this.focusTrappedTabPress(t)}}},h=["role","aria-labelledby","aria-describedby"];function C(t,o,n,k,p,i){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),s=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(i.bannerClass),style:e.normalizeStyle(i.bannerBackgroundImage),onKeydown:o[1]||(o[1]=e.withKeys((...a)=>i.trapFocus&&i.trapFocus(...a),["tab"]))},[e.createElementVNode("div",{class:e.normalizeClass(["d-banner__dialog",n.dialogClass]),role:i.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind,class:e.normalizeClass({"d-notice__icon--has-title":n.title||t.$slots.titleOverride})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind","class"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title"]),e.createVNode(s,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=a=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],10,h)],38)}const y=u._(_,[["render",C]]);exports.default=y;
 //# sourceMappingURL=banner.cjs.map

package/dist/lib/banner/banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"banner.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=\"$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';\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],\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     * 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":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","e","_createElementBlock","$options","args","_createElementVNode","_normalizeClass","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"wbAwDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,OAAQ,CAACC,EAAAA,OAAK,EAEd,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAO/C,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAOA,EAAAA,QAAM,gBAAe,CAAI,GAM/C,MAAO,CACL,KAAM,OACN,QAAS,IASX,UAAW,CACT,KAAM,QACN,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,gBAAiB,CACf,KAAM,OACN,QAAS,IASX,eAAgB,CACd,KAAM,OACN,QAAS,UAIb,MAAO,CAML,SAGF,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,QAC1C,EAEA,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAKM,KAAK,IAAI,EACrB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,QAG/B,EAEA,uBAAyB,CACvB,OAAI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc,GAChD,GAGF,SAAW,CACL,KAAK,WACP,KAAK,kBAAiB,CAE1B,EAEA,QAAS,CACP,UAAWE,EAAG,CACR,KAAK,WACP,KAAK,qBAAqBA,CAAC,CAE/B,EAEJ,+NA1OEC,EAAAA,mBAyCQ,QAAA,CAxCL,uBAAOC,EAAA,WAAW,EAClB,uBAAOA,EAAA,qBAAqB,EAC5B,yCAAaA,EAAA,WAAAA,EAAA,UAAA,GAAAC,CAAA,EAAS,CAAA,KAAA,CAAA,KAEvBC,EAAAA,mBAmCM,MAAA,CAlCJ,MAAKC,EAAAA,eAAA,CAAC,mBACEC,EAAA,WAAW,CAAA,EAClB,KAAMJ,EAAA,KACN,kBAAiBI,EAAA,QACjB,mBAAkBA,EAAA,YAGVA,EAAA,oDADTC,EAAAA,YAMiBC,EAAA,OAJd,KAAMF,EAAA,yBAGP,IAAoB,CAApBG,aAAoBC,EAAA,OAAA,MAAA,sBAEtBC,EAAAA,YAYoBC,EAAA,CAXjB,WAAUN,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,QAEG,wBAGT,IAA6B,CAA7BG,aAA6BC,EAAA,OAAA,eAAA,sBAG/B,IAAQ,CAARD,aAAQC,EAAA,OAAA,SAAA,8CAEVC,EAAAA,YAOmBE,EAAA,CANhB,cAAaP,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOI,EAAA,MAAK,OAAA,uBAGb,IAAsB,CAAtBD,aAAsBC,EAAA,OAAA,QAAA"}
+{"version":3,"file":"banner.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        :class=\"{ 'd-notice__icon--has-title': title || $slots.titleOverride }\"\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=\"$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';\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],\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     * 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":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","e","_createElementBlock","$options","args","_createElementVNode","_normalizeClass","$props","_createBlock","_component_dt_notice_icon","_ctx","_renderSlot","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"wbAyDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,OAAQ,CAACC,EAAAA,OAAK,EAEd,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAO/C,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAOA,EAAAA,QAAM,gBAAe,CAAI,GAM/C,MAAO,CACL,KAAM,OACN,QAAS,IASX,UAAW,CACT,KAAM,QACN,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,gBAAiB,CACf,KAAM,OACN,QAAS,IASX,eAAgB,CACd,KAAM,OACN,QAAS,UAIb,MAAO,CAML,SAGF,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,QAC1C,EAEA,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAKM,KAAK,IAAI,EACrB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,QAG/B,EAEA,uBAAyB,CACvB,OAAI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc,GAChD,GAGF,SAAW,CACL,KAAK,WACP,KAAK,kBAAiB,CAE1B,EAEA,QAAS,CACP,UAAWE,EAAG,CACR,KAAK,WACP,KAAK,qBAAqBA,CAAC,CAE/B,EAEJ,+NA3OEC,EAAAA,mBA0CQ,QAAA,CAzCL,uBAAOC,EAAA,WAAW,EAClB,uBAAOA,EAAA,qBAAqB,EAC5B,yCAAaA,EAAA,WAAAA,EAAA,UAAA,GAAAC,CAAA,EAAS,CAAA,KAAA,CAAA,KAEvBC,EAAAA,mBAoCM,MAAA,CAnCJ,MAAKC,EAAAA,eAAA,CAAC,mBACEC,EAAA,WAAW,CAAA,EAClB,KAAMJ,EAAA,KACN,kBAAiBI,EAAA,QACjB,mBAAkBA,EAAA,YAGVA,EAAA,oDADTC,EAAAA,YAOiBC,EAAA,OALd,KAAMF,EAAA,KACN,MAAKD,EAAAA,eAAA,CAAA,4BAAiCC,EAAA,OAASG,EAAA,OAAO,aAAa,CAAA,sBAGpE,IAAoB,CAApBC,aAAoBD,EAAA,OAAA,MAAA,8BAEtBE,EAAAA,YAYoBC,EAAA,CAXjB,WAAUN,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,QAEG,wBAGT,IAA6B,CAA7BI,aAA6BD,EAAA,OAAA,eAAA,sBAG/B,IAAQ,CAARC,aAAQD,EAAA,OAAA,SAAA,8CAEVE,EAAAA,YAOmBE,EAAA,CANhB,cAAaP,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOG,EAAA,MAAK,OAAA,uBAGb,IAAsB,CAAtBC,aAAsBD,EAAA,OAAA,QAAA"}

package/dist/lib/banner/banner.js

@@ -1,16 +1,16 @@
 import g from "../../common/mixins/modal.js";
-import l from "../../common/utils/index.js";
-import { resolveComponent as r, openBlock as s, createElementBlock as p, withKeys as h, normalizeStyle as y, normalizeClass as c, createElementVNode as k, createBlock as _, withCtx as o, renderSlot as a, createCommentVNode as C, createVNode as u } from "vue";
+import s from "../../common/utils/index.js";
+import { resolveComponent as r, openBlock as c, createElementBlock as h, withKeys as p, normalizeStyle as y, normalizeClass as d, createElementVNode as _, createBlock as k, withCtx as o, renderSlot as a, createCommentVNode as C, createVNode as u } from "vue";
 import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import S from "../notice/notice-action.js";
 import B from "../notice/notice-content.js";
-import N from "../notice/notice-icon.js";
-import { NOTICE_KINDS as v } from "../notice/notice-constants.js";
+import v from "../notice/notice-icon.js";
+import { NOTICE_KINDS as N } from "../notice/notice-constants.js";
 const D = {
   compatConfig: { MODE: 3 },
   name: "DtBanner",
   components: {
-    DtNoticeIcon: N,
+    DtNoticeIcon: v,
     DtNoticeContent: B,
     DtNoticeAction: S
   },
@@ -23,7 +23,7 @@ const D = {
     titleId: {
       type: String,
       default() {
-        return l.getUniqueString();
+        return s.getUniqueString();
       }
     },
     /**
@@ -33,7 +33,7 @@ const D = {
     contentId: {
       type: String,
       default() {
-        return l.getUniqueString();
+        return s.getUniqueString();
       }
     },
     /**
@@ -69,7 +69,7 @@ const D = {
       type: String,
       default: "base",
       validate(e) {
-        return v.includes(e);
+        return N.includes(e);
       }
     },
     /**
@@ -163,28 +163,29 @@ const D = {
     }
   }
 }, w = ["role", "aria-labelledby", "aria-describedby"];
-function z(e, i, t, E, F, n) {
+function z(e, i, t, E, O, n) {
   const m = r("dt-notice-icon"), f = r("dt-notice-content"), b = r("dt-notice-action");
-  return s(), p("aside", {
-    class: c(n.bannerClass),
+  return c(), h("aside", {
+    class: d(n.bannerClass),
     style: y(n.bannerBackgroundImage),
-    onKeydown: i[1] || (i[1] = h((...d) => n.trapFocus && n.trapFocus(...d), ["tab"]))
+    onKeydown: i[1] || (i[1] = p((...l) => n.trapFocus && n.trapFocus(...l), ["tab"]))
   }, [
-    k("div", {
-      class: c(["d-banner__dialog", t.dialogClass]),
+    _("div", {
+      class: d(["d-banner__dialog", t.dialogClass]),
       role: n.role,
       "aria-labelledby": t.titleId,
       "aria-describedby": t.contentId
     }, [
-      t.hideIcon ? C("", !0) : (s(), _(m, {
+      t.hideIcon ? C("", !0) : (c(), k(m, {
         key: 0,
-        kind: t.kind
+        kind: t.kind,
+        class: d({ "d-notice__icon--has-title": t.title || e.$slots.titleOverride })
       }, {
         default: o(() => [
           a(e.$slots, "icon")
         ]),
         _: 3
-      }, 8, ["kind"])),
+      }, 8, ["kind", "class"])),
       u(f, {
         "title-id": t.titleId,
         "content-id": t.contentId,
@@ -201,7 +202,7 @@ function z(e, i, t, E, F, n) {
       u(b, {
         "hide-action": t.hideAction,
         "hide-close": t.hideClose,
-        onClose: i[0] || (i[0] = (d) => e.$emit("close"))
+        onClose: i[0] || (i[0] = (l) => e.$emit("close"))
       }, {
         default: o(() => [
           a(e.$slots, "action")

package/dist/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.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=\"$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';\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],\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     * 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":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","_createElementBlock","$options","args","_createElementVNode","_normalizeClass","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}
+{"version":3,"file":"banner.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        :class=\"{ 'd-notice__icon--has-title': title || $slots.titleOverride }\"\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=\"$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';\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],\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     * 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":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","_createElementBlock","$options","args","_createElementVNode","_normalizeClass","$props","_createBlock","_component_dt_notice_icon","_ctx","_renderSlot","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}

package/dist/lib/breadcrumbs/breadcrumb-item.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./breadcrumbs-constants.cjs"),a=require("../../common/utils/index.cjs"),e=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../link/link.cjs"),o=require("../link/link-constants.cjs"),c={name:"DtBreadcrumbItem",components:{DtLink:u.default},inheritAttrs:!1,props:{inverted:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},label:{type:String,default:""},rootClass:{type:[String,Object,Array],default:""}},data(){return{BREADCRUMB_ITEM_SELECTED_MODIFIER:d.BREADCRUMB_ITEM_SELECTED_MODIFIER}},computed:{linkKind(){return this.inverted?"":o.MUTED},linkInverted(){return!!this.inverted},ariaCurrent(){return this.selected?"location":void 0}},methods:{removeClassStyleAttrs:a.removeClassStyleAttrs,addClassStyleAttrs:a.addClassStyleAttrs}};function _(r,b,n,C,l,t){const s=e.resolveComponent("dt-link");return e.openBlock(),e.createElementBlock("li",e.mergeProps({"data-qa":"dt-breadcrumb-item",class:[n.rootClass,"d-breadcrumbs__item",{[l.BREADCRUMB_ITEM_SELECTED_MODIFIER]:n.selected}]},t.addClassStyleAttrs(r.$attrs)),[e.createVNode(s,e.mergeProps({kind:t.linkKind,inverted:t.linkInverted,"aria-current":t.ariaCurrent,"data-qa":"breadcrumb-item"},t.removeClassStyleAttrs(r.$attrs)),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},16,["kind","inverted","aria-current"])],16)}const m=i._(c,[["render",_]]);exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./breadcrumbs-constants.cjs"),a=require("../../common/utils/index.cjs"),e=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../link/link.cjs"),o=require("../link/link-constants.cjs"),c={name:"DtBreadcrumbItem",components:{DtLink:u.default},inheritAttrs:!1,props:{inverted:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},label:{type:String,default:""},rootClass:{type:[String,Object,Array],default:""}},data(){return{BREADCRUMB_ITEM_SELECTED_MODIFIER:d.BREADCRUMB_ITEM_SELECTED_MODIFIER}},computed:{linkKind(){return this.inverted?"":o.MUTED},linkInverted(){return!!this.inverted},ariaCurrent(){return this.selected?"location":void 0}},methods:{removeClassStyleAttrs:a.removeClassStyleAttrs,addClassStyleAttrs:a.addClassStyleAttrs}};function _(r,b,n,C,l,t){const s=e.resolveComponent("dt-link");return e.openBlock(),e.createElementBlock("li",e.mergeProps({"data-qa":"dt-breadcrumb-item",class:[n.rootClass,"d-breadcrumbs__item",{[l.BREADCRUMB_ITEM_SELECTED_MODIFIER]:n.selected}]},t.addClassStyleAttrs(r.$attrs)),[e.createVNode(s,e.mergeProps({kind:t.linkKind,inverted:t.linkInverted,"aria-current":t.ariaCurrent,underline:!1,"data-qa":"breadcrumb-item"},t.removeClassStyleAttrs(r.$attrs),{class:["d-breadcrumbs__link"]}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},16,["kind","inverted","aria-current"])],16)}const m=i._(c,[["render",_]]);exports.default=m;
 //# sourceMappingURL=breadcrumb-item.cjs.map

package/dist/lib/breadcrumbs/breadcrumb-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      rootClass,\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$props","$data","$options","_ctx","_createVNode","_component_dt_link","_renderSlot"],"mappings":"sVA8BKA,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAAC,EAAAA,SAGF,aAAc,GAEd,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,MAAO,CACL,KAAM,OACN,QAAS,IAQX,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,kCAAAC,EAAAA,kCAGJ,EAEA,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAKC,EAAAA,KAC9B,EAEA,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,QAChB,EAEA,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,MACtC,GAGF,QAAS,CACP,sBAAAC,EAAAA,sBACA,mBAAAC,EAAAA,mBAEJ,gEAnGE,OAAAC,YAAA,EAAAC,qBAqBK,KArBLC,EAAAA,WAqBK,CApBH,UAAQ,qBACP,MAAK,CAAUC,EAAA,gCAAiD,CAAA,CAAAC,EAAA,iCAAiC,EAAGD,EAAA,QAAQ,EAKrG,EAAAE,EAAA,mBAAmBC,EAAA,MAAM,CAAA,EAAA,CAEjCC,EAAAA,YAWUC,EAXVN,aAWU,CAVP,KAAMG,EAAA,SACN,SAAUA,EAAA,aACV,eAAcA,EAAA,YACf,UAAQ,iBACA,EAAAA,EAAA,sBAAsBC,EAAA,MAAM,CAAA,EAAA,mBAGpC,IAEO,CAFPG,EAAAA,WAEOH,sBAFP,IAEO,qCADFH,EAAA,KAAK,EAAA,CAAA"}
+{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      rootClass,\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      :underline=\"false\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n      :class=\"['d-breadcrumbs__link']\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$props","$data","$options","_ctx","_createVNode","_component_dt_link","_renderSlot"],"mappings":"sVAgCKA,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAAC,EAAAA,SAGF,aAAc,GAEd,MAAO,CAML,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,MAAO,CACL,KAAM,OACN,QAAS,IAQX,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,kCAAAC,EAAAA,kCAGJ,EAEA,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAKC,EAAAA,KAC9B,EAEA,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,QAChB,EAEA,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,MACtC,GAGF,QAAS,CACP,sBAAAC,EAAAA,sBACA,mBAAAC,EAAAA,mBAEJ,gEAvGE,OAAAC,YAAA,EAAAC,qBAuBK,KAvBLC,EAAAA,WAuBK,CAtBH,UAAQ,qBACP,MAAK,CAAUC,EAAA,gCAAiD,CAAA,CAAAC,EAAA,iCAAiC,EAAGD,EAAA,QAAQ,EAKrG,EAAAE,EAAA,mBAAmBC,EAAA,MAAM,CAAA,EAAA,CAEjCC,EAAAA,YAaUC,EAbVN,aAaU,CAZP,KAAMG,EAAA,SACN,SAAUA,EAAA,aACV,eAAcA,EAAA,YACd,UAAW,GACZ,UAAQ,iBACA,EAAAA,EAAA,sBAAsBC,EAAA,MAAM,EAAA,CACnC,MAAO,CAAA,qBAAA,CAAuB,CAAA,EAAA,mBAG/B,IAEO,CAFPG,EAAAA,WAEOH,sBAFP,IAEO,qCADFH,EAAA,KAAK,EAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumb-item.js

@@ -12,7 +12,9 @@ const D = {
   inheritAttrs: !1,
   props: {
     /**
+     * @deprecated Use v-dt-mode instead.
      * Passed through to link. If true, applies inverted styles to the link.
+     * @deprecated Use v-dt-mode directive instead.
      */
     inverted: {
       type: Boolean,
@@ -77,8 +79,9 @@ function v(t, y, r, B, n, e) {
       kind: e.linkKind,
       inverted: e.linkInverted,
       "aria-current": e.ariaCurrent,
+      underline: !1,
       "data-qa": "breadcrumb-item"
-    }, e.removeClassStyleAttrs(t.$attrs)), {
+    }, e.removeClassStyleAttrs(t.$attrs), { class: ["d-breadcrumbs__link"] }), {
       default: f(() => [
         _(t.$slots, "default", {}, () => [
           p(C(r.label), 1)

package/dist/lib/breadcrumbs/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      rootClass,\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$props","$data","$options","_ctx","_createVNode","_component_dt_link","_renderSlot"],"mappings":";;;;;;AA8BA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,mCAAAC;AAAA;EAGJ;AAAA,EAEA,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;AAAA,IAC9B;AAAA,IAEA,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAAA,IAEA,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACtC;AAAA;EAGF,SAAS;AAAA,IACP,uBAAAC;AAAA,IACA,oBAAAC;AAAA;AAEJ;;;AAnGE,SAAAC,EAAA,GAAAC,EAqBK,MArBLC,EAqBK;AAAA,IApBH,WAAQ;AAAA,IACP,OAAK;AAAA,MAAUC,EAAA;AAAA;MAAiD,EAAA,CAAAC,EAAA,iCAAiC,GAAGD,EAAA,SAAQ;AAAA;EAKrG,GAAAE,EAAA,mBAAmBC,EAAA,MAAM,CAAA,GAAA;AAAA,IAEjCC,EAWUC,GAXVN,EAWU;AAAA,MAVP,MAAMG,EAAA;AAAA,MACN,UAAUA,EAAA;AAAA,MACV,gBAAcA,EAAA;AAAA,MACf,WAAQ;AAAA,IACA,GAAAA,EAAA,sBAAsBC,EAAA,MAAM,CAAA,GAAA;AAAA,iBAGpC,MAEO;AAAA,QAFPG,EAEOH,yBAFP,MAEO;AAAA,cADFH,EAAA,KAAK,GAAA,CAAA;AAAA;;;;;;;"}
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      rootClass,\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      :underline=\"false\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n      :class=\"['d-breadcrumbs__link']\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$props","$data","$options","_ctx","_createVNode","_component_dt_link","_renderSlot"],"mappings":";;;;;;AAgCA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,mCAAAC;AAAA;EAGJ;AAAA,EAEA,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;AAAA,IAC9B;AAAA,IAEA,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAAA,IAEA,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACtC;AAAA;EAGF,SAAS;AAAA,IACP,uBAAAC;AAAA,IACA,oBAAAC;AAAA;AAEJ;;;AAvGE,SAAAC,EAAA,GAAAC,EAuBK,MAvBLC,EAuBK;AAAA,IAtBH,WAAQ;AAAA,IACP,OAAK;AAAA,MAAUC,EAAA;AAAA;MAAiD,EAAA,CAAAC,EAAA,iCAAiC,GAAGD,EAAA,SAAQ;AAAA;EAKrG,GAAAE,EAAA,mBAAmBC,EAAA,MAAM,CAAA,GAAA;AAAA,IAEjCC,EAaUC,GAbVN,EAaU;AAAA,MAZP,MAAMG,EAAA;AAAA,MACN,UAAUA,EAAA;AAAA,MACV,gBAAcA,EAAA;AAAA,MACd,WAAW;AAAA,MACZ,WAAQ;AAAA,IACA,GAAAA,EAAA,sBAAsBC,EAAA,MAAM,GAAA,EACnC,OAAO,CAAA,qBAAA,EAAuB,CAAA,GAAA;AAAA,iBAG/B,MAEO;AAAA,QAFPG,EAEOH,yBAFP,MAEO;AAAA,cADFH,EAAA,KAAK,GAAA,CAAA;AAAA;;;;;;;"}

package/dist/lib/breadcrumbs/breadcrumbs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./breadcrumbs-constants.cjs"),i=require("./breadcrumb-item.cjs"),s=require("../../common/utils/index.cjs"),m=require("../../localization/index.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtBreadcrumbs",components:{DtBreadcrumbItem:i.default},props:{breadcrumbs:{type:Array,default:()=>[],validate(t){return t.every(({href:n,label:r})=>n!==void 0&&r!==void 0)}},inverted:{type:Boolean,default:!1},ariaLabel:{type:String,default:""}},data(){return{BREADCRUMBS_INVERTED_MODIFIER:d.BREADCRUMBS_INVERTED_MODIFIER,i18n:new m.DialtoneLocalization}},methods:{getBreadcrumbItemKey(t){return`breadcrumbs-item-${t}-${s.default.getUniqueString()}`}}},B=["aria-label"];function E(t,n,r,D,a,u){const l=e.resolveComponent("dt-breadcrumb-item");return e.openBlock(),e.createElementBlock("nav",{"aria-label":r.ariaLabel||a.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),"data-qa":"dt-breadcrumbs",class:e.normalizeClass(["d-breadcrumbs",{[a.BREADCRUMBS_INVERTED_MODIFIER]:r.inverted}])},[e.createElementVNode("ol",null,[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.breadcrumbs,(o,c)=>(e.openBlock(),e.createBlock(l,e.mergeProps({key:u.getBreadcrumbItemKey(c),inverted:r.inverted},{ref_for:!0},o),null,16,["inverted"]))),128))])])],10,B)}const f=b._(_,[["render",E]]);exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./breadcrumbs-constants.cjs"),i=require("./breadcrumb-item.cjs"),s=require("../../common/utils/index.cjs"),m=require("../../localization/index.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtBreadcrumbs",components:{DtBreadcrumbItem:i.default},props:{breadcrumbs:{type:Array,default:()=>[],validate(t){return t.every(({href:n,label:r})=>n!==void 0&&r!==void 0)}},inverted:{type:Boolean,default:!1},ariaLabel:{type:String,default:""}},data(){return{BREADCRUMBS_INVERTED_MODIFIER:d.BREADCRUMBS_INVERTED_MODIFIER,i18n:new m.DialtoneLocalization}},methods:{getBreadcrumbItemKey(t){return`breadcrumbs-item-${t}-${s.default.getUniqueString()}`}}},B=["aria-label"],E={class:e.normalizeClass(["d-breadcrumbs__list"])};function f(t,n,r,I,a,o){const u=e.resolveComponent("dt-breadcrumb-item");return e.openBlock(),e.createElementBlock("nav",{"aria-label":r.ariaLabel||a.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),"data-qa":"dt-breadcrumbs",class:e.normalizeClass(["d-breadcrumbs",{[a.BREADCRUMBS_INVERTED_MODIFIER]:r.inverted}])},[e.createElementVNode("ol",E,[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.breadcrumbs,(l,c)=>(e.openBlock(),e.createBlock(u,e.mergeProps({key:o.getBreadcrumbItemKey(c),inverted:r.inverted},{ref_for:!0},l),null,16,["inverted"]))),128))])])],10,B)}const D=b._(_,[["render",f]]);exports.default=D;
 //# sourceMappingURL=breadcrumbs.cjs.map