@dialpad/dialtone-vue 3.220.0-next.4 → 3.220.0

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 { 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 { 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 { 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(a).includes(e)
+			validator: (e) => Object.keys(n).includes(e)
 		},
 		text: {
 			type: String,
@@ -20,17 +20,17 @@ var m = {
 		kind: {
 			type: String,
 			default: "label",
-			validator: (e) => Object.keys(r).includes(e)
+			validator: (e) => Object.keys(i).includes(e)
 		},
 		type: {
 			type: String,
 			default: "default",
-			validator: (e) => Object.keys(i).includes(e)
+			validator: (e) => Object.keys(a).includes(e)
 		},
 		decoration: {
 			type: String,
 			default: void 0,
-			validator: (e) => Object.keys(n).includes(e)
+			validator: (e) => Object.keys(r).includes(e)
 		},
 		labelClass: {
 			type: [
@@ -40,22 +40,6 @@ var m = {
 			],
 			default: ""
 		},
-		startIconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		endIconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
 		subtle: {
 			type: Boolean,
 			default: !1
@@ -67,17 +51,17 @@ var m = {
 	},
 	data() {
 		return {
-			BADGE_TYPE_MODIFIERS: i,
-			BADGE_KIND_MODIFIERS: r,
-			BADGE_DECORATION_MODIFIERS: n
+			BADGE_TYPE_MODIFIERS: a,
+			BADGE_KIND_MODIFIERS: i,
+			BADGE_DECORATION_MODIFIERS: r
 		};
 	},
 	computed: {
 		hasLeftIcon() {
-			return e(this.$slots.startIcon) || e(this.$slots.leftIcon);
+			return e(this.$slots.leftIcon);
 		},
 		hasRightIcon() {
-			return e(this.$slots.endIcon) || e(this.$slots.rightIcon);
+			return e(this.$slots.rightIcon);
 		},
 		hasIcons() {
 			return this.hasLeftIcon || this.hasRightIcon;
@@ -94,14 +78,20 @@ 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 startIcon or endIcon."));
+			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."));
 		}
 	}
 }, h = {
 	key: 0,
 	class: "d-badge__decorative"
+}, g = {
+	key: 1,
+	class: "d-badge__icon-left"
+}, _ = {
+	key: 2,
+	class: "d-badge__icon-right"
 };
-function g(e, t, n, r, i, a) {
+function v(e, t, n, r, i, a) {
 	return d(), s("span", {
 		class: u([
 			"d-badge",
@@ -114,31 +104,13 @@ function g(e, t, n, r, i, a) {
 		"data-qa": "dt-badge"
 	}, [
 		n.decoration ? (d(), s("span", h)) : o("", !0),
-		a.hasLeftIcon ? (d(), s("span", {
-			key: 1,
-			class: u(["d-badge__icon-left", n.startIconClass])
-		}, [e.$slots.startIcon ? f(e.$slots, "startIcon", {
-			key: 0,
-			iconSize: n.iconSize
-		}) : f(e.$slots, "leftIcon", {
-			key: 1,
-			iconSize: n.iconSize
-		})], 2)) : o("", !0),
+		a.hasLeftIcon ? (d(), s("span", g, [f(e.$slots, "leftIcon", { 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", {
-			key: 2,
-			class: u(["d-badge__icon-right", n.endIconClass])
-		}, [e.$slots.endIcon ? f(e.$slots, "endIcon", {
-			key: 0,
-			iconSize: n.iconSize
-		}) : f(e.$slots, "rightIcon", {
-			key: 1,
-			iconSize: n.iconSize
-		})], 2)) : o("", !0)
+		a.hasRightIcon ? (d(), s("span", _, [f(e.$slots, "rightIcon", { iconSize: n.iconSize })])) : o("", !0)
 	], 2);
 }
-var _ = /* @__PURE__ */ t(m, [["render", g]]);
+var y = /* @__PURE__ */ t(m, [["render", v]]);
 //#endregion
-export { _ as default };
+export { y as default };
 
 //# sourceMappingURL=badge.js.map

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', startIconClass]\"\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', endIconClass]\"\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     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\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;EAKD,gBAAgB;GACd,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,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;;CA9MK,OAAM;;;aAbV,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,QAAA;;GAdJ,OAAK,EAAA,CAAA,sBAAyB,EAAA,eAAc,CAAA;MAIrC,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,QAAA;;GAdJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,aAAY,CAAA;MAIpC,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA"}
+{"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"}

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:{headerId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},headerText:{type:String,default:void 0},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`},iconClass:{type:[String,Array,Object],default:``},headerClass:{type:[String,Array,Object],default:``},contentClass:{type:[String,Array,Object],default:``},actionClass:{type:[String,Array,Object],default:``}},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.headerId,"aria-describedby":n.contentId},[n.showIcon?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind,"icon-class":n.iconClass,class:(0,s.normalizeClass)({"d-notice__icon--has-title":n.headerText||e.$slots.header})},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`,`icon-class`,`class`])):(0,s.createCommentVNode)(``,!0),(0,s.createVNode)(c,{"header-id":n.headerId,"content-id":n.contentId,"header-text":n.headerText,"header-class":n.headerClass,"content-class":n.contentClass},{header:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`header`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`header-id`,`content-id`,`header-text`,`header-class`,`content-class`]),(0,s.createVNode)(u,{"show-action":n.showAction,"show-close":n.showClose,"action-class":n.actionClass,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`,`action-class`])],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`,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;
 //# 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=\"headerId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"showIcon\"\n        :kind=\"kind\"\n        :icon-class=\"iconClass\"\n        :class=\"{ 'd-notice__icon--has-title': headerText || $slots.header }\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :header-id=\"headerId\"\n        :content-id=\"contentId\"\n        :header-text=\"headerText\"\n        :header-class=\"headerClass\"\n        :content-class=\"contentClass\"\n      >\n        <template #header>\n          <!-- @slot Slot for the header -->\n          <slot name=\"header\" />\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        :action-class=\"actionClass\"\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 header 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 header.\n     */\n    headerId: {\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     * Header text of the banner. This can be left blank to remove the header from the banner entirely.\n     */\n    headerText: {\n      type: String,\n      default: undefined,\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     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the action wrapper element.\n     */\n    actionClass: {\n      type: [String, Array, Object],\n      default: '',\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":"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"}
+{"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"}

package/dist/lib/banner/banner.js

@@ -17,7 +17,7 @@ var y = {
 	},
 	mixins: [n],
 	props: {
-		headerId: {
+		titleId: {
 			type: String,
 			default() {
 				return e.getUniqueString();
@@ -29,9 +29,9 @@ var y = {
 				return e.getUniqueString();
 			}
 		},
-		headerText: {
+		title: {
 			type: String,
-			default: void 0
+			default: ""
 		},
 		important: {
 			type: Boolean,
@@ -44,21 +44,21 @@ var y = {
 		kind: {
 			type: String,
 			default: "base",
-			validator(e) {
+			validate(e) {
 				return r.includes(e);
 			}
 		},
-		showClose: {
+		hideClose: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		showIcon: {
+		hideIcon: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		showAction: {
+		hideAction: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		dialogClass: {
 			type: String,
@@ -71,38 +71,6 @@ var y = {
 		backgroundSize: {
 			type: String,
 			default: "cover"
-		},
-		iconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		headerClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		contentClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		actionClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
 		}
 	},
 	emits: ["close"],
@@ -114,9 +82,9 @@ var y = {
 			return [
 				"d-banner",
 				{
-					critical: "d-banner--critical",
+					error: "d-banner--error",
 					info: "d-banner--info",
-					positive: "d-banner--positive",
+					success: "d-banner--success",
 					warning: "d-banner--warning",
 					base: "d-banner--base"
 				}[this.kind],
@@ -151,52 +119,37 @@ function x(e, t, n, r, i, a) {
 	}, [u("div", {
 		class: f(["d-banner__dialog", n.dialogClass]),
 		role: a.role,
-		"aria-labelledby": n.headerId,
+		"aria-labelledby": n.titleId,
 		"aria-describedby": n.contentId
 	}, [
-		n.showIcon ? (m(), s(o, {
+		n.hideIcon ? c("", !0) : (m(), s(o, {
 			key: 0,
-			kind: n.kind,
-			"icon-class": n.iconClass,
-			class: f({ "d-notice__icon--has-title": n.headerText || e.$slots.header })
+			kind: n.kind
 		}, {
 			default: _(() => [h(e.$slots, "icon")]),
 			_: 3
-		}, 8, [
-			"kind",
-			"icon-class",
-			"class"
-		])) : c("", !0),
+		}, 8, ["kind"])),
 		d(y, {
-			"header-id": n.headerId,
+			"title-id": n.titleId,
 			"content-id": n.contentId,
-			"header-text": n.headerText,
-			"header-class": n.headerClass,
-			"content-class": n.contentClass
+			title: n.title
 		}, {
-			header: _(() => [h(e.$slots, "header")]),
+			titleOverride: _(() => [h(e.$slots, "titleOverride")]),
 			default: _(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
-			"header-id",
+			"title-id",
 			"content-id",
-			"header-text",
-			"header-class",
-			"content-class"
+			"title"
 		]),
 		d(x, {
-			"show-action": n.showAction,
-			"show-close": n.showClose,
-			"action-class": n.actionClass,
+			"hide-action": n.hideAction,
+			"hide-close": n.hideClose,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
 			default: _(() => [h(e.$slots, "action")]),
 			_: 3
-		}, 8, [
-			"show-action",
-			"show-close",
-			"action-class"
-		])
+		}, 8, ["hide-action", "hide-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=\"headerId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"showIcon\"\n        :kind=\"kind\"\n        :icon-class=\"iconClass\"\n        :class=\"{ 'd-notice__icon--has-title': headerText || $slots.header }\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :header-id=\"headerId\"\n        :content-id=\"contentId\"\n        :header-text=\"headerText\"\n        :header-class=\"headerClass\"\n        :content-class=\"contentClass\"\n      >\n        <template #header>\n          <!-- @slot Slot for the header -->\n          <slot name=\"header\" />\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        :action-class=\"actionClass\"\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 header 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 header.\n     */\n    headerId: {\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     * Header text of the banner. This can be left blank to remove the header from the banner entirely.\n     */\n    headerText: {\n      type: String,\n      default: undefined,\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     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the action wrapper element.\n     */\n    actionClass: {\n      type: [String, Array, Object],\n      default: '',\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":"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"}
+{"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"}

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:``}},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;
+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;
 //# 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      '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"}
+{"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"}

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

@@ -1,13 +1,13 @@
-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";
+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";
 //#region components/breadcrumbs/breadcrumb_item.vue
-var g = {
+var h = {
 	name: "DtBreadcrumbItem",
-	components: { DtLink: r },
+	components: { DtLink: i },
 	inheritAttrs: !1,
 	props: {
 		inverted: {
@@ -21,14 +21,22 @@ var g = {
 		label: {
 			type: String,
 			default: ""
+		},
+		rootClass: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			default: ""
 		}
 	},
 	data() {
-		return { BREADCRUMB_ITEM_SELECTED_MODIFIER: i };
+		return { BREADCRUMB_ITEM_SELECTED_MODIFIER: a };
 	},
 	computed: {
 		linkKind() {
-			return this.inverted ? "" : n;
+			return this.inverted ? "" : r;
 		},
 		linkInverted() {
 			return !!this.inverted;
@@ -37,35 +45,36 @@ var g = {
 			return this.selected ? "location" : void 0;
 		}
 	},
-	methods: { removeClassStyleAttrs: e }
+	methods: {
+		removeClassStyleAttrs: t,
+		addClassStyleAttrs: e
+	}
 };
-function _(e, t, n, r, i, g) {
-	let _ = p("dt-link");
-	return d(), a("li", {
+function g(e, t, n, r, i, a) {
+	let h = f("dt-link");
+	return u(), o("li", l({
 		"data-qa": "dt-breadcrumb-item",
-		class: l([
+		class: [
+			n.rootClass,
 			"d-breadcrumbs__item",
-			{ [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,
+			{ [i.BREADCRUMB_ITEM_SELECTED_MODIFIER]: n.selected }
+		]
+	}, a.addClassStyleAttrs(e.$attrs)), [c(h, l({
+		kind: a.linkKind,
+		inverted: a.linkInverted,
+		"aria-current": a.ariaCurrent,
 		"data-qa": "breadcrumb-item"
-	}, g.removeClassStyleAttrs(e.$attrs), { class: ["d-breadcrumbs__link"] }), {
-		default: h(() => [f(e.$slots, "default", {}, () => [o(m(n.label), 1)])]),
+	}, a.removeClassStyleAttrs(e.$attrs)), {
+		default: m(() => [d(e.$slots, "default", {}, () => [s(p(n.label), 1)])]),
 		_: 3
 	}, 16, [
 		"kind",
 		"inverted",
 		"aria-current"
-	])], 6);
+	])], 16);
 }
-var v = /* @__PURE__ */ t(g, [["render", _]]);
+var _ = /* @__PURE__ */ n(h, [["render", g]]);
 //#endregion
-export { v as default };
+export { _ 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      '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"}
+{"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"}

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},listClass:{type:[String,Array,Object],default:``},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`,{class:(0,a.normalizeClass)([`d-breadcrumbs__list`,n.listClass])},[(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))])],2)],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`];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;
 //# sourceMappingURL=breadcrumbs.cjs.map