@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.1

package/dist/lib/badge/badge.js

@@ -1,7 +1,7 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
-import { BADGE_DECORATION_MODIFIERS as r, BADGE_KIND_MODIFIERS as i, BADGE_TYPE_MODIFIERS as a } from "./badge-constants.js";
+import { BADGE_DECORATION_MODIFIERS as n, BADGE_KIND_MODIFIERS as r, BADGE_TYPE_MODIFIERS as i } from "./badge-constants.js";
+import { ICON_SIZE_MODIFIERS as a } from "../icon/icon-constants.js";
 import { createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p } from "vue";
 //#region components/badge/badge.vue
 var m = {
@@ -11,7 +11,7 @@ var m = {
 		iconSize: {
 			type: String,
 			default: "200",
-			validator: (e) => Object.keys(n).includes(e)
+			validator: (e) => Object.keys(a).includes(e)
 		},
 		text: {
 			type: String,
@@ -20,17 +20,17 @@ var m = {
 		kind: {
 			type: String,
 			default: "label",
-			validator: (e) => Object.keys(i).includes(e)
+			validator: (e) => Object.keys(r).includes(e)
 		},
 		type: {
 			type: String,
 			default: "default",
-			validator: (e) => Object.keys(a).includes(e)
+			validator: (e) => Object.keys(i).includes(e)
 		},
 		decoration: {
 			type: String,
 			default: void 0,
-			validator: (e) => Object.keys(r).includes(e)
+			validator: (e) => Object.keys(n).includes(e)
 		},
 		labelClass: {
 			type: [
@@ -51,17 +51,17 @@ var m = {
 	},
 	data() {
 		return {
-			BADGE_TYPE_MODIFIERS: a,
-			BADGE_KIND_MODIFIERS: i,
-			BADGE_DECORATION_MODIFIERS: r
+			BADGE_TYPE_MODIFIERS: i,
+			BADGE_KIND_MODIFIERS: r,
+			BADGE_DECORATION_MODIFIERS: n
 		};
 	},
 	computed: {
 		hasLeftIcon() {
-			return e(this.$slots.leftIcon);
+			return e(this.$slots.startIcon) || e(this.$slots.leftIcon);
 		},
 		hasRightIcon() {
-			return e(this.$slots.rightIcon);
+			return e(this.$slots.endIcon) || e(this.$slots.rightIcon);
 		},
 		hasIcons() {
 			return this.hasLeftIcon || this.hasRightIcon;
@@ -78,7 +78,7 @@ var m = {
 			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."));
 		}
 	}
 }, h = {
@@ -104,9 +104,21 @@ function v(e, t, n, r, i, a) {
 		"data-qa": "dt-badge"
 	}, [
 		n.decoration ? (d(), s("span", h)) : o("", !0),
-		a.hasLeftIcon ? (d(), s("span", g, [f(e.$slots, "leftIcon", { iconSize: n.iconSize })])) : o("", !0),
+		a.hasLeftIcon ? (d(), s("span", g, [e.$slots.startIcon ? f(e.$slots, "startIcon", {
+			key: 0,
+			iconSize: n.iconSize
+		}) : f(e.$slots, "leftIcon", {
+			key: 1,
+			iconSize: n.iconSize
+		})])) : o("", !0),
 		c("span", { class: u(["d-badge__label", n.labelClass]) }, [f(e.$slots, "default", {}, () => [l(p(n.text), 1)])], 2),
-		a.hasRightIcon ? (d(), s("span", _, [f(e.$slots, "rightIcon", { iconSize: n.iconSize })])) : o("", !0)
+		a.hasRightIcon ? (d(), s("span", _, [e.$slots.endIcon ? f(e.$slots, "endIcon", {
+			key: 0,
+			iconSize: n.iconSize
+		}) : f(e.$slots, "rightIcon", {
+			key: 1,
+			iconSize: n.iconSize
+		})])) : o("", !0)
 	], 2);
 }
 var y = /* @__PURE__ */ t(m, [["render", v]]);

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"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"],"mappings":";;;;;;AAuDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,SAAS;;EAG7C,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,UAAU;;EAG9C,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,4EAA4E;;EAG/F;CACF;;CAhLK,OAAM;;;CAIN,OAAM;;;CAgBN,OAAM;;;aAjCV,EAyCO,QAAA;EAxCJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,YAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;EAGxB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,aAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"badge.js","names":[],"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, positive, 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"],"mappings":";;;;;;AAqEA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,UAAS,IAAK,EAAe,KAAK,OAAO,SAAS;;EAGtF,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,QAAO,IAAK,EAAe,KAAK,OAAO,UAAU;;EAGrF,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,2EAA2E;;EAG9F;CACF;;CA9LK,OAAM;;;CAIN,OAAM;;;CAuBN,OAAM;;;aAxCV,EAuDO,QAAA;EAtDJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,EAgBO,QAhBP,GAgBO,CAVG,EAAA,OAAO,YADf,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,YAAA;;GADC,UAAW,EAAA;;EAGhB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,EAgBO,QAhBP,GAgBO,CAVG,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA"}

package/dist/lib/banner/banner.cjs

@@ -1,3 +1,3 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../notice/notice-icon.cjs`),a=require(`../notice/notice-content.cjs`),o=require(`../notice/notice-action.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtBanner`,components:{DtNoticeIcon:i.default,DtNoticeContent:a.default,DtNoticeAction:o.default},mixins:[n.default],props:{titleId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},title:{type:String,default:``},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:`base`,validate(e){return r.NOTICE_KINDS.includes(e)}},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(e){this.important&&this.focusTrappedTabPress(e)}}},l=[`role`,`aria-labelledby`,`aria-describedby`];function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-notice-icon`),c=(0,s.resolveComponent)(`dt-notice-content`),u=(0,s.resolveComponent)(`dt-notice-action`);return(0,s.openBlock)(),(0,s.createElementBlock)(`aside`,{class:(0,s.normalizeClass)(a.bannerClass),style:(0,s.normalizeStyle)(a.bannerBackgroundImage),onKeydown:t[1]||(t[1]=(0,s.withKeys)((...e)=>a.trapFocus&&a.trapFocus(...e),[`tab`]))},[(0,s.createElementVNode)(`div`,{class:(0,s.normalizeClass)([`d-banner__dialog`,n.dialogClass]),role:a.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?(0,s.createCommentVNode)(``,!0):((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`])),(0,s.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`titleOverride`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`]),(0,s.createVNode)(u,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`action`)]),_:3},8,[`hide-action`,`hide-close`])],10,l)],38)}var d=t.t(c,[[`render`,u]]);exports.default=d;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../notice/notice-icon.cjs`),a=require(`../notice/notice-content.cjs`),o=require(`../notice/notice-action.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtBanner`,components:{DtNoticeIcon:i.default,DtNoticeContent:a.default,DtNoticeAction:o.default},mixins:[n.default],props:{titleId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},title:{type:String,default:``},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:`base`,validator(e){return r.NOTICE_KINDS.includes(e)}},showClose:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},showAction:{type:Boolean,default:!0},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`,{critical:`d-banner--critical`,info:`d-banner--info`,positive:`d-banner--positive`,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(e){this.important&&this.focusTrappedTabPress(e)}}},l=[`role`,`aria-labelledby`,`aria-describedby`];function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-notice-icon`),c=(0,s.resolveComponent)(`dt-notice-content`),u=(0,s.resolveComponent)(`dt-notice-action`);return(0,s.openBlock)(),(0,s.createElementBlock)(`aside`,{class:(0,s.normalizeClass)(a.bannerClass),style:(0,s.normalizeStyle)(a.bannerBackgroundImage),onKeydown:t[1]||(t[1]=(0,s.withKeys)((...e)=>a.trapFocus&&a.trapFocus(...e),[`tab`]))},[(0,s.createElementVNode)(`div`,{class:(0,s.normalizeClass)([`d-banner__dialog`,n.dialogClass]),role:a.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.showIcon?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind,class:(0,s.normalizeClass)({"d-notice__icon--has-title":n.title||e.$slots.title})},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`,`class`])):(0,s.createCommentVNode)(``,!0),(0,s.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{title:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`title`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`]),(0,s.createVNode)(u,{"show-action":n.showAction,"show-close":n.showClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`action`)]),_:3},8,[`show-action`,`show-close`])],10,l)],38)}var d=t.t(c,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=banner.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"banner.cjs","names":[],"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"],"mappings":"mdAwDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,OAAQ,CAAC,EAAA,QAAM,CAEf,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,QAAS,GACV,CAQD,eAAgB,CACd,KAAM,OACN,QAAS,QACV,CACF,CAED,MAAO,CAML,QACD,CAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,UAG1C,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACP,CAIa,KAAK,MACjB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,OAC1B,CACF,EAGH,uBAAyB,CAGvB,OAFI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe,IAElD,CAED,SAAW,CACL,KAAK,WACP,KAAK,mBAAmB,EAI5B,QAAS,CACP,UAAW,EAAG,CACR,KAAK,WACP,KAAK,qBAAqB,EAAE,EAGjC,CACF,oQAjMS,QAAA,CAxCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CAClB,OAAA,EAAA,EAAA,gBAAO,EAAA,sBAAqB,CAC5B,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,CAAA,CAAA,MAAA,CAAA,6BAqCjB,MAAA,CAlCJ,OAAA,EAAA,EAAA,gBAAK,CAAC,mBACE,EAAA,YAAW,CAAA,CAClB,KAAM,EAAA,KACN,kBAAiB,EAAA,QACjB,mBAAkB,EAAA,YAGV,EAAA,2CAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKQ,EAAA,OAJd,KAAM,EAAA,iCAGa,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,qCAcF,EAAA,CAXjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,QAEG,eAAA,EAAA,EAAA,aAGoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,2BAGvB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,6DASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"banner.cjs","names":[],"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=\"showIcon\"\n        :kind=\"kind\"\n        :class=\"{ 'd-notice__icon--has-title': title || $slots.title }\"\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 #title>\n          <!-- @slot Slot for the title -->\n          <slot name=\"title\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :show-action=\"showAction\"\n        :show-close=\"showClose\"\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, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Shows the close button in the banner\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon in the banner\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the banner\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\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        critical: 'd-banner--critical',\n        info: 'd-banner--info',\n        positive: 'd-banner--positive',\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"],"mappings":"mdAwDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,OAAQ,CAAC,EAAA,QAAM,CAEf,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAW,EAAM,CACf,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,QAAS,GACV,CAQD,eAAgB,CACd,KAAM,OACN,QAAS,QACV,CACF,CAED,MAAO,CAML,QACD,CAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,UAG1C,aAAe,CASb,MAAO,CACL,WATkB,CAClB,SAAU,qBACV,KAAM,iBACN,SAAU,qBACV,QAAS,oBACT,KAAM,iBACP,CAIa,KAAK,MACjB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,OAC1B,CACF,EAGH,uBAAyB,CAGvB,OAFI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe,IAElD,CAED,SAAW,CACL,KAAK,WACP,KAAK,mBAAmB,EAI5B,QAAS,CACP,UAAW,EAAG,CACR,KAAK,WACP,KAAK,qBAAqB,EAAE,EAGjC,CACF,oQAjMS,QAAA,CAxCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CAClB,OAAA,EAAA,EAAA,gBAAO,EAAA,sBAAqB,CAC5B,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,CAAA,CAAA,MAAA,CAAA,6BAqCjB,MAAA,CAlCJ,OAAA,EAAA,EAAA,gBAAK,CAAC,mBACE,EAAA,YAAW,CAAA,CAClB,KAAM,EAAA,KACN,kBAAiB,EAAA,QACjB,mBAAkB,EAAA,YAGX,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAMS,EAAA,OALd,KAAM,EAAA,KACN,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAiC,EAAA,OAAS,EAAA,OAAO,MAAK,CAAA,6BAGxC,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,6EAaF,EAAA,CAVjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,QAEG,OAAA,EAAA,EAAA,aAEY,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,QAAA,CAAA,CAAA,2BAGf,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,6DASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}

package/dist/lib/banner/banner.js

@@ -44,21 +44,21 @@ var y = {
 		kind: {
 			type: String,
 			default: "base",
-			validate(e) {
+			validator(e) {
 				return r.includes(e);
 			}
 		},
-		hideClose: {
+		showClose: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideIcon: {
+		showIcon: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideAction: {
+		showAction: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		dialogClass: {
 			type: String,
@@ -82,9 +82,9 @@ var y = {
 			return [
 				"d-banner",
 				{
-					error: "d-banner--error",
+					critical: "d-banner--critical",
 					info: "d-banner--info",
-					success: "d-banner--success",
+					positive: "d-banner--positive",
 					warning: "d-banner--warning",
 					base: "d-banner--base"
 				}[this.kind],
@@ -122,19 +122,20 @@ function x(e, t, n, r, i, a) {
 		"aria-labelledby": n.titleId,
 		"aria-describedby": n.contentId
 	}, [
-		n.hideIcon ? c("", !0) : (m(), s(o, {
+		n.showIcon ? (m(), s(o, {
 			key: 0,
-			kind: n.kind
+			kind: n.kind,
+			class: f({ "d-notice__icon--has-title": n.title || e.$slots.title })
 		}, {
 			default: _(() => [h(e.$slots, "icon")]),
 			_: 3
-		}, 8, ["kind"])),
+		}, 8, ["kind", "class"])) : c("", !0),
 		d(y, {
 			"title-id": n.titleId,
 			"content-id": n.contentId,
 			title: n.title
 		}, {
-			titleOverride: _(() => [h(e.$slots, "titleOverride")]),
+			title: _(() => [h(e.$slots, "title")]),
 			default: _(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
@@ -143,13 +144,13 @@ function x(e, t, n, r, i, a) {
 			"title"
 		]),
 		d(x, {
-			"hide-action": n.hideAction,
-			"hide-close": n.hideClose,
+			"show-action": n.showAction,
+			"show-close": n.showClose,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
 			default: _(() => [h(e.$slots, "action")]),
 			_: 3
-		}, 8, ["hide-action", "hide-close"])
+		}, 8, ["show-action", "show-close"])
 	], 10, b)], 38);
 }
 var S = /* @__PURE__ */ t(y, [["render", x]]);

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

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"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"],"mappings":";;;;;;;;;AAwDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,cAAA;EACA,iBAAA;EACA,gBAAA;EACD;CAED,QAAQ,CAAC,EAAM;CAEf,OAAO;EAKL,SAAS;GACP,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAMD,WAAW;GACT,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAQD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,SAAU,GAAM;AACd,WAAO,EAAa,SAAS,EAAK;;GAErC;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAQD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,QACD;CAED,UAAU;EACR,OAAQ;AACN,UAAO,KAAK,YAAY,gBAAgB;;EAG1C,cAAe;AASb,UAAO;IACL;IATkB;KAClB,OAAO;KACP,MAAM;KACN,SAAS;KACT,SAAS;KACT,MAAM;KACP,CAIa,KAAK;IACjB;KACE,uBAAuB,KAAK;KAC5B,oBAAoB,KAAK;KAC1B;IACF;;EAGH,wBAAyB;AAGvB,UAFI,KAAK,oBAAoB,KAAW,OAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe;;EAElD;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,mBAAmB;;CAI5B,SAAS,EACP,UAAW,GAAG;AACZ,EAAI,KAAK,aACP,KAAK,qBAAqB,EAAE;IAGjC;CACF;;;;;;;aA1OC,EAyCQ,SAAA;EAxCL,OAAK,EAAE,EAAA,YAAW;EAClB,OAAK,EAAE,EAAA,sBAAqB;EAC5B,WAAO,EAAA,OAAA,EAAA,KAAA,GAAA,GAAA,MAAM,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,MAAA,CAAA;KAEvB,EAmCM,OAAA;EAlCJ,OAAK,EAAA,CAAC,oBACE,EAAA,YAAW,CAAA;EAClB,MAAM,EAAA;EACN,mBAAiB,EAAA;EACjB,oBAAkB,EAAA;;EAGV,EAAA,wBAAA,GAAA,EADT,EAMiB,GAAA;;GAJd,MAAM,EAAA;;oBAGa,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;EAEtB,EAYoB,GAAA;GAXjB,YAAU,EAAA;GACV,cAAY,EAAA;GACZ,OAAO,EAAA;;GAEG,eAAa,QAGO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA;oBAGvB,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;EAEV,EAOmB,GAAA;GANhB,eAAa,EAAA;GACb,cAAY,EAAA;GACZ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;oBAGS,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"banner.js","names":[],"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=\"showIcon\"\n        :kind=\"kind\"\n        :class=\"{ 'd-notice__icon--has-title': title || $slots.title }\"\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 #title>\n          <!-- @slot Slot for the title -->\n          <slot name=\"title\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :show-action=\"showAction\"\n        :show-close=\"showClose\"\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, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Shows the close button in the banner\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon in the banner\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the banner\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\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        critical: 'd-banner--critical',\n        info: 'd-banner--info',\n        positive: 'd-banner--positive',\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"],"mappings":";;;;;;;;;AAwDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,cAAA;EACA,iBAAA;EACA,gBAAA;EACD;CAED,QAAQ,CAAC,EAAM;CAEf,OAAO;EAKL,SAAS;GACP,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAMD,WAAW;GACT,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAQD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,UAAW,GAAM;AACf,WAAO,EAAa,SAAS,EAAK;;GAErC;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAQD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,QACD;CAED,UAAU;EACR,OAAQ;AACN,UAAO,KAAK,YAAY,gBAAgB;;EAG1C,cAAe;AASb,UAAO;IACL;IATkB;KAClB,UAAU;KACV,MAAM;KACN,UAAU;KACV,SAAS;KACT,MAAM;KACP,CAIa,KAAK;IACjB;KACE,uBAAuB,KAAK;KAC5B,oBAAoB,KAAK;KAC1B;IACF;;EAGH,wBAAyB;AAGvB,UAFI,KAAK,oBAAoB,KAAW,OAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe;;EAElD;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,mBAAmB;;CAI5B,SAAS,EACP,UAAW,GAAG;AACZ,EAAI,KAAK,aACP,KAAK,qBAAqB,EAAE;IAGjC;CACF;;;;;;;aA1OC,EAyCQ,SAAA;EAxCL,OAAK,EAAE,EAAA,YAAW;EAClB,OAAK,EAAE,EAAA,sBAAqB;EAC5B,WAAO,EAAA,OAAA,EAAA,KAAA,GAAA,GAAA,MAAM,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,MAAA,CAAA;KAEvB,EAmCM,OAAA;EAlCJ,OAAK,EAAA,CAAC,oBACE,EAAA,YAAW,CAAA;EAClB,MAAM,EAAA;EACN,mBAAiB,EAAA;EACjB,oBAAkB,EAAA;;EAGX,EAAA,YAAA,GAAA,EADR,EAOiB,GAAA;;GALd,MAAM,EAAA;GACN,OAAK,EAAA,EAAA,6BAAiC,EAAA,SAAS,EAAA,OAAO,OAAK,CAAA;;oBAGxC,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;EAEtB,EAWoB,GAAA;GAVjB,YAAU,EAAA;GACV,cAAY,EAAA;GACZ,OAAO,EAAA;;GAEG,OAAK,QAEO,CAArB,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;oBAGf,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;EAEV,EAOmB,GAAA;GANhB,eAAa,EAAA;GACb,cAAY,EAAA;GACZ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;oBAGS,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.cjs","names":[],"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"],"mappings":"iXA8BA,IAAK,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAOD,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,kCAAA,EAAA,kCAED,EAGH,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAK,EAAA,OAG9B,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,UAGhB,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,IAAA,IAEvC,CAED,QAAS,CACP,sBAAA,EAAA,sBACA,mBAAA,EAAA,mBACD,CACF,kHA9EM,MAAA,EAAA,EAAA,YAAA,CApBH,UAAQ,qBACP,MAAK,CAAU,EAAA,kCAAiD,EAAA,mCAAoC,EAAA,SAAQ,GAKrG,EAAA,mBAAmB,EAAA,OAAM,CAAA,CAAA,EAAA,EAAA,EAAA,aAavB,GAAA,EAAA,EAAA,YAAA,CAVP,KAAM,EAAA,SACN,SAAU,EAAA,aACV,eAAc,EAAA,YACf,UAAQ,mBACA,EAAA,sBAAsB,EAAA,OAAM,CAAA,CAAA,2BAK7B,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"breadcrumb-item.cjs","names":[],"sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n      $attrs.class,\n    ]\"\n    :style=\"$attrs.style\"\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 } 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  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  },\n};\n</script>\n"],"mappings":"iXAgCA,IAAK,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAML,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,kCAAA,EAAA,kCAED,EAGH,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAK,EAAA,OAG9B,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,UAGhB,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,IAAA,IAEvC,CAED,QAAS,CACP,sBAAA,EAAA,sBACD,CACF,kHArEM,KAAA,CAtBH,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,yBAA0C,EAAA,mCAAoC,EAAA,SAAQ,CAAU,EAAA,OAAO,QAK5G,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,qBAeV,GAAA,EAAA,EAAA,YAAA,CAZP,KAAM,EAAA,SACN,SAAU,EAAA,aACV,eAAc,EAAA,YACd,UAAW,GACZ,UAAQ,mBACA,EAAA,sBAAsB,EAAA,OAAM,CAAA,CACnC,MAAO,CAAA,sBAAuB,CAAA,CAAA,CAAA,2BAKxB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1,13 +1,13 @@
-import { addClassStyleAttrs as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
-import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { MUTED as r } from "../link/link-constants.js";
-import i from "../link/link.js";
-import { BREADCRUMB_ITEM_SELECTED_MODIFIER as a } from "./breadcrumbs-constants.js";
-import { createElementBlock as o, createTextVNode as s, createVNode as c, mergeProps as l, openBlock as u, renderSlot as d, resolveComponent as f, toDisplayString as p, withCtx as m } from "vue";
+import { removeClassStyleAttrs as e } from "../../common/utils/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { MUTED as n } from "../link/link-constants.js";
+import r from "../link/link.js";
+import { BREADCRUMB_ITEM_SELECTED_MODIFIER as i } from "./breadcrumbs-constants.js";
+import { createElementBlock as a, createTextVNode as o, createVNode as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, resolveComponent as p, toDisplayString as m, withCtx as h } from "vue";
 //#region components/breadcrumbs/breadcrumb_item.vue
-var h = {
+var g = {
 	name: "DtBreadcrumbItem",
-	components: { DtLink: i },
+	components: { DtLink: r },
 	inheritAttrs: !1,
 	props: {
 		inverted: {
@@ -21,22 +21,14 @@ var h = {
 		label: {
 			type: String,
 			default: ""
-		},
-		rootClass: {
-			type: [
-				String,
-				Object,
-				Array
-			],
-			default: ""
 		}
 	},
 	data() {
-		return { BREADCRUMB_ITEM_SELECTED_MODIFIER: a };
+		return { BREADCRUMB_ITEM_SELECTED_MODIFIER: i };
 	},
 	computed: {
 		linkKind() {
-			return this.inverted ? "" : r;
+			return this.inverted ? "" : n;
 		},
 		linkInverted() {
 			return !!this.inverted;
@@ -45,36 +37,35 @@ var h = {
 			return this.selected ? "location" : void 0;
 		}
 	},
-	methods: {
-		removeClassStyleAttrs: t,
-		addClassStyleAttrs: e
-	}
+	methods: { removeClassStyleAttrs: e }
 };
-function g(e, t, n, r, i, a) {
-	let h = f("dt-link");
-	return u(), o("li", l({
+function _(e, t, n, r, i, g) {
+	let _ = p("dt-link");
+	return d(), a("li", {
 		"data-qa": "dt-breadcrumb-item",
-		class: [
-			n.rootClass,
+		class: l([
 			"d-breadcrumbs__item",
-			{ [i.BREADCRUMB_ITEM_SELECTED_MODIFIER]: n.selected }
-		]
-	}, a.addClassStyleAttrs(e.$attrs)), [c(h, l({
-		kind: a.linkKind,
-		inverted: a.linkInverted,
-		"aria-current": a.ariaCurrent,
+			{ [i.BREADCRUMB_ITEM_SELECTED_MODIFIER]: n.selected },
+			e.$attrs.class
+		]),
+		style: u(e.$attrs.style)
+	}, [s(_, c({
+		kind: g.linkKind,
+		inverted: g.linkInverted,
+		"aria-current": g.ariaCurrent,
+		underline: !1,
 		"data-qa": "breadcrumb-item"
-	}, a.removeClassStyleAttrs(e.$attrs)), {
-		default: m(() => [d(e.$slots, "default", {}, () => [s(p(n.label), 1)])]),
+	}, g.removeClassStyleAttrs(e.$attrs), { class: ["d-breadcrumbs__link"] }), {
+		default: h(() => [f(e.$slots, "default", {}, () => [o(m(n.label), 1)])]),
 		_: 3
 	}, 16, [
 		"kind",
 		"inverted",
 		"aria-current"
-	])], 16);
+	])], 6);
 }
-var _ = /* @__PURE__ */ n(h, [["render", g]]);
+var v = /* @__PURE__ */ t(g, [["render", _]]);
 //#endregion
-export { _ as default };
+export { v as default };
 
 //# sourceMappingURL=breadcrumb-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","names":[],"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"],"mappings":";;;;;;;AA8BA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,QAAA,GACD;CAED,cAAc;CAEd,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAOD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,sCAED;;CAGH,UAAU;EACR,WAAY;AACV,UAAO,KAAK,WAAW,KAAK;;EAG9B,eAAgB;AACd,UAAO,CAAC,CAAC,KAAK;;EAGhB,cAAe;AACb,UAAO,KAAK,WAAW,aAAa,KAAA;;EAEvC;CAED,SAAS;EACP;EACA;EACD;CACF;;;aAnGC,EAqBK,MArBL,EAqBK;EApBH,WAAQ;EACP,OAAK;GAAU,EAAA;;MAAiD,EAAA,oCAAoC,EAAA,UAAQ;;IAKrG,EAAA,mBAAmB,EAAA,OAAM,CAAA,EAAA,CAEjC,EAWU,GAXV,EAWU;EAVP,MAAM,EAAA;EACN,UAAU,EAAA;EACV,gBAAc,EAAA;EACf,WAAQ;IACA,EAAA,sBAAsB,EAAA,OAAM,CAAA,EAAA;mBAK7B,CAFP,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"breadcrumb-item.js","names":[],"sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n      $attrs.class,\n    ]\"\n    :style=\"$attrs.style\"\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 } 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  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  },\n};\n</script>\n"],"mappings":";;;;;;;AAgCA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,QAAA,GACD;CAED,cAAc;CAEd,OAAO;EAML,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,sCAED;;CAGH,UAAU;EACR,WAAY;AACV,UAAO,KAAK,WAAW,KAAK;;EAG9B,eAAgB;AACd,UAAO,CAAC,CAAC,KAAK;;EAGhB,cAAe;AACb,UAAO,KAAK,WAAW,aAAa,KAAA;;EAEvC;CAED,SAAS,EACP,0BACD;CACF;;;aA5FC,EAuBK,MAAA;EAtBH,WAAQ;EACP,OAAK,EAAA;;MAA0C,EAAA,oCAAoC,EAAA,UAAQ;GAAU,EAAA,OAAO;;EAK5G,OAAK,EAAE,EAAA,OAAO,MAAK;KAEpB,EAaU,GAbV,EAaU;EAZP,MAAM,EAAA;EACN,UAAU,EAAA;EACV,gBAAc,EAAA;EACd,WAAW;EACZ,WAAQ;IACA,EAAA,sBAAsB,EAAA,OAAM,EAAA,EACnC,OAAO,CAAA,sBAAuB,EAAA,CAAA,EAAA;mBAKxB,CAFP,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumbs.cjs

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

package/dist/lib/breadcrumbs/breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.cjs","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"mappings":"wXAkCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,gBAEN,WAAY,CACV,iBAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,YAAe,EAAE,CACjB,SAAU,EAAa,CACrB,OAAO,EAAY,OAAO,CAAE,OAAM,WACzB,IAAS,IAAA,IAAa,IAAU,IAAA,GACvC,EAEL,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,8BAAA,EAAA,8BACA,KAAM,IAAI,EAAA,qBACX,EAGH,QAAS,CACP,qBAAsB,EAAO,CAC3B,MAAO,oBAAoB,EAAM,GAAG,EAAA,QAAM,iBAAiB,IAE9D,CACF,8IAlEO,MAAA,CAlBH,aAAY,EAAA,WAAa,EAAA,KAAK,GAAE,kCAAA,CACjC,UAAQ,iBACP,OAAA,EAAA,EAAA,gBAAK,CAAA,gBAAA,EAAoC,EAAA,+BAAgC,EAAA,SAAQ,CAAA,CAAA,4BAe7E,KAAA,KAAA,EAAA,EAAA,EAAA,YADI,EAAA,OAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADH,EAAA,SAAA,MAAA,EAAA,EAAA,YAJwB,EAAA,aAAhB,EAAM,yCAId,GAAA,EAAA,EAAA,YAAA,CAHC,IAAK,EAAA,qBAAqB,EAAK,CAC/B,SAAU,EAAA,uBACH,EAAI,CAAA,KAAA,GAAA,CAAA,WAAA,CAAA"}
+{"version":3,"file":"breadcrumbs.cjs","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol :class=\"['d-breadcrumbs__list']\">\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"mappings":"wXAkCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,gBAEN,WAAY,CACV,iBAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,YAAe,EAAE,CACjB,SAAU,EAAa,CACrB,OAAO,EAAY,OAAO,CAAE,OAAM,WACzB,IAAS,IAAA,IAAa,IAAU,IAAA,GACvC,EAEL,CAQD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,8BAAA,EAAA,8BACA,KAAM,IAAI,EAAA,qBACX,EAGH,QAAS,CACP,qBAAsB,EAAO,CAC3B,MAAO,oBAAoB,EAAM,GAAG,EAAA,QAAM,iBAAiB,IAE9D,CACF,qBA/EQ,OAAK,EAAA,EAAA,gBAAE,CAAA,sBAAuB,CAAA,CAAA,6HAW/B,MAAA,CAlBH,aAAY,EAAA,WAAa,EAAA,KAAK,GAAE,kCAAA,CACjC,UAAQ,iBACP,OAAA,EAAA,EAAA,gBAAK,CAAA,gBAAA,EAAoC,EAAA,+BAAgC,EAAA,SAAQ,CAAA,CAAA,4BAe7E,KAVL,EAUK,EAAA,EAAA,EAAA,YADI,EAAA,OAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADH,EAAA,SAAA,MAAA,EAAA,EAAA,YAJwB,EAAA,aAAhB,EAAM,yCAId,GAAA,EAAA,EAAA,YAAA,CAHC,IAAK,EAAA,qBAAqB,EAAK,CAC/B,SAAU,EAAA,uBACH,EAAI,CAAA,KAAA,GAAA,CAAA,WAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumbs.js

@@ -35,20 +35,20 @@ var h = {
 	methods: { getBreadcrumbItemKey(t) {
 		return `breadcrumbs-item-${t}-${e.getUniqueString()}`;
 	} }
-}, g = ["aria-label"];
-function _(e, t, n, r, i, h) {
-	let _ = m("dt-breadcrumb-item");
+}, g = ["aria-label"], _ = { class: /* @__PURE__ */ u(["d-breadcrumbs__list"]) };
+function v(e, t, n, r, i, h) {
+	let v = m("dt-breadcrumb-item");
 	return d(), s("nav", {
 		"aria-label": n.ariaLabel || i.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),
 		"data-qa": "dt-breadcrumbs",
 		class: u(["d-breadcrumbs", { [i.BREADCRUMBS_INVERTED_MODIFIER]: n.inverted }])
-	}, [c("ol", null, [p(e.$slots, "default", {}, () => [(d(!0), s(a, null, f(n.breadcrumbs, (e, t) => (d(), o(_, l({
+	}, [c("ol", _, [p(e.$slots, "default", {}, () => [(d(!0), s(a, null, f(n.breadcrumbs, (e, t) => (d(), o(v, l({
 		key: h.getBreadcrumbItemKey(t),
 		inverted: n.inverted
 	}, { ref_for: !0 }, e), null, 16, ["inverted"]))), 128))])])], 10, g);
 }
-var v = /* @__PURE__ */ t(h, [["render", _]]);
+var y = /* @__PURE__ */ t(h, [["render", v]]);
 //#endregion
-export { v as default };
+export { y as default };
 
 //# sourceMappingURL=breadcrumbs.js.map

package/dist/lib/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAkCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EACV,kBAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,eAAe,EAAE;GACjB,SAAU,GAAa;AACrB,WAAO,EAAY,OAAO,EAAE,SAAM,eACzB,MAAS,KAAA,KAAa,MAAU,KAAA,EACvC;;GAEL;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA,MAAM,IAAI,GAAsB;GACjC;;CAGH,SAAS,EACP,qBAAsB,GAAO;AAC3B,SAAO,oBAAoB,EAAM,GAAG,EAAM,iBAAiB;IAE9D;CACF;;;aArFC,EAmBM,OAAA;EAlBH,cAAY,EAAA,aAAa,EAAA,KAAK,GAAE,kCAAA;EACjC,WAAQ;EACP,OAAK,EAAA,CAAA,iBAAA,GAAoC,EAAA,gCAAgC,EAAA,UAAQ,CAAA,CAAA;KAKlF,EAUK,MAAA,MAAA,CARH,EAOO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EANL,EAKE,GAAA,MAAA,EAJwB,EAAA,cAAhB,GAAM,YADhB,EAKE,GALF,EAKE;EAHC,KAAK,EAAA,qBAAqB,EAAK;EAC/B,UAAU,EAAA;qBACH,EAAI,EAAA,MAAA,IAAA,CAAA,WAAA,CAAA"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol :class=\"['d-breadcrumbs__list']\">\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAkCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EACV,kBAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,eAAe,EAAE;GACjB,SAAU,GAAa;AACrB,WAAO,EAAY,OAAO,EAAE,SAAM,eACzB,MAAS,KAAA,KAAa,MAAU,KAAA,EACvC;;GAEL;EAQD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA,MAAM,IAAI,GAAsB;GACjC;;CAGH,SAAS,EACP,qBAAsB,GAAO;AAC3B,SAAO,oBAAoB,EAAM,GAAG,EAAM,iBAAiB;IAE9D;CACF,4BA/EQ,OAAK,kBAAE,CAAA,sBAAuB,CAAA,EAAA;;;aARrC,EAmBM,OAAA;EAlBH,cAAY,EAAA,aAAa,EAAA,KAAK,GAAE,kCAAA;EACjC,WAAQ;EACP,OAAK,EAAA,CAAA,iBAAA,GAAoC,EAAA,gCAAgC,EAAA,UAAQ,CAAA,CAAA;KAKlF,EAUK,MAVL,GAUK,CARH,EAOO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EANL,EAKE,GAAA,MAAA,EAJwB,EAAA,cAAhB,GAAM,YADhB,EAKE,GALF,EAKE;EAHC,KAAK,EAAA,qBAAqB,EAAK;EAC/B,UAAU,EAAA;qBACH,EAAI,EAAA,MAAA,IAAA,CAAA,WAAA,CAAA"}

package/dist/lib/button/button-constants.cjs

@@ -1,4 +1,4 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=`d-btn--unstyled`,t={xs:`d-btn--xs`,sm:`d-btn--sm`,md:``,lg:`d-btn--lg`,xl:`d-btn--xl`},n={default:``,muted:`d-btn--muted`,danger:`d-btn--danger`,positive:`d-btn--positive`,inverted:`d-btn--inverted`,unstyled:`d-btn--unstyled`},r={clear:``,outlined:`d-btn--outlined`,primary:`d-btn--primary`},i=[`submit`,`reset`,`button`],a={left:`d-btn__icon--left`,right:`d-btn__icon--right`,top:`d-btn__icon--top`,bottom:`d-btn__icon--bottom`},o=[{circle:!0,kind:`default`,importance:`primary`,message:c(!0,`default`,`primary`)},{circle:!0,kind:`danger`,importance:`outlined`,message:c(!0,`danger`,`outlined`)},{circle:!0,kind:`muted`,importance:`primary`,message:c(!0,`muted`,`primary`)},{circle:!1,kind:`muted`,importance:`primary`,message:c(!1,`muted`,`primary`)}],s={xs:`200`,sm:`200`,md:`300`,lg:`400`,xl:`500`};function c(e,t,n){return`You cannot have a ${e?`circle `:``}button \
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=`d-btn--unstyled`,t={100:`d-btn--xs`,200:`d-btn--sm`,300:``,400:`d-btn--lg`,500:`d-btn--xl`,xs:`d-btn--xs`,sm:`d-btn--sm`,md:``,lg:`d-btn--lg`,xl:`d-btn--xl`},n={default:``,muted:`d-btn--muted`,critical:`d-btn--critical`,positive:`d-btn--positive`,inverted:`d-btn--inverted`,unstyled:`d-btn--unstyled`},r={clear:``,outlined:`d-btn--outlined`,primary:`d-btn--primary`},i=[`submit`,`reset`,`button`],a={start:`d-btn__icon--left`,end:`d-btn__icon--right`,blockStart:`d-btn__icon--top`,blockEnd:`d-btn__icon--bottom`,left:`d-btn__icon--left`,right:`d-btn__icon--right`,top:`d-btn__icon--top`,bottom:`d-btn__icon--bottom`},o=[{circle:!0,kind:`default`,importance:`primary`,message:c(!0,`default`,`primary`)},{circle:!0,kind:`critical`,importance:`outlined`,message:c(!0,`critical`,`outlined`)},{circle:!0,kind:`muted`,importance:`primary`,message:c(!0,`muted`,`primary`)},{circle:!1,kind:`muted`,importance:`primary`,message:c(!1,`muted`,`primary`)}],s={100:`200`,200:`200`,300:`300`,400:`400`,500:`500`,xs:`200`,sm:`200`,md:`300`,lg:`400`,xl:`500`};function c(e,t,n){return`You cannot have a ${e?`circle `:``}button \
 with kind: ${t} and importance: ${n} as it \
 does not exist in our design system. \
 See https://dialtone.dialpad.com/components/button.html for a \

package/dist/lib/button/button-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-constants.cjs","names":[],"sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,kBAExB,EAAwB,CACnC,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,YACL,CAEY,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,OAAQ,gBACR,SAAU,kBACV,SAAU,kBACV,SAAU,kBACX,CAEY,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,iBACV,CAEY,EAAe,CAAC,SAAU,QAAS,SAAS,CAE5C,EAA0B,CACrC,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,sBACT,CAEY,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAAS,EAA2B,GAAM,UAAW,UAAU,CAChE,CACD,CACE,OAAQ,GACR,KAAM,SACN,WAAY,WACZ,QAAS,EAA2B,GAAM,SAAU,WAAW,CAChE,CACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAAS,EAA2B,GAAM,QAAS,UAAU,CAC9D,CACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAAS,EAA2B,GAAO,QAAS,UAAU,CAC/D,CACF,CAEY,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAED,SAAS,EAA4B,EAAQ,EAAM,EAAY,CAC7D,MAAO,qBAAqB,EAAS,UAAY,GAAG;aACzC,EAAK,mBAAmB,EAAW;;;iCAMhD,IAAA,EAAe,CACb,wBACA,wBACA,8BACA,eACA,wBACA,0BACA,sBACA,oBACD"}
+{"version":3,"file":"button-constants.cjs","names":[],"sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-btn--xs',\n  200: 'd-btn--sm',\n  300: '',\n  400: 'd-btn--lg',\n  500: 'd-btn--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  critical: 'd-btn--critical',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  start: 'd-btn__icon--left',\n  end: 'd-btn__icon--right',\n  blockStart: 'd-btn__icon--top',\n  blockEnd: 'd-btn__icon--bottom',\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'critical',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'critical', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '200',\n  200: '200',\n  300: '300',\n  400: '400',\n  500: '500',\n  // T-shirt aliases (deprecated)\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,kBAExB,EAAwB,CAEnC,IAAK,YACL,IAAK,YACL,IAAK,GACL,IAAK,YACL,IAAK,YAEL,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,YACL,CAEY,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,SAAU,kBACV,SAAU,kBACV,SAAU,kBACV,SAAU,kBACX,CAEY,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,iBACV,CAEY,EAAe,CAAC,SAAU,QAAS,SAAS,CAE5C,EAA0B,CACrC,MAAO,oBACP,IAAK,qBACL,WAAY,mBACZ,SAAU,sBACV,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,sBACT,CAEY,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAAS,EAA2B,GAAM,UAAW,UAAU,CAChE,CACD,CACE,OAAQ,GACR,KAAM,WACN,WAAY,WACZ,QAAS,EAA2B,GAAM,WAAY,WAAW,CAClE,CACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAAS,EAA2B,GAAM,QAAS,UAAU,CAC9D,CACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAAS,EAA2B,GAAO,QAAS,UAAU,CAC/D,CACF,CAEY,EAAoB,CAE/B,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MAEL,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAED,SAAS,EAA4B,EAAQ,EAAM,EAAY,CAC7D,MAAO,qBAAqB,EAAS,UAAY,GAAG;aACzC,EAAK,mBAAmB,EAAW;;;iCAMhD,IAAA,EAAe,CACb,wBACA,wBACA,8BACA,eACA,wBACA,0BACA,sBACA,oBACD"}