@dialpad/dialtone-vue 3.222.2 → 3.223.0-next.1

package/dist/lib/badge/badge.js

@@ -1,17 +1,16 @@
 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
+//#region components/Badge/Badge.vue
 var m = {
-	compatConfig: { MODE: 3 },
 	name: "DtBadge",
 	props: {
 		iconSize: {
 			type: String,
 			default: "200",
-			validator: (e) => Object.keys(n).includes(e)
+			validator: (e) => Object.keys(a).includes(e)
 		},
 		text: {
 			type: String,
@@ -20,17 +19,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: [
@@ -40,6 +39,22 @@ var m = {
 			],
 			default: ""
 		},
+		startIconClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		endIconClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
 		subtle: {
 			type: Boolean,
 			default: !1
@@ -51,22 +66,25 @@ 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;
 		}
 	},
+	mounted() {
+		this.validateProps();
+	},
 	updated() {
 		this.validateProps();
 	},
@@ -78,20 +96,14 @@ 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 = {
 	key: 0,
 	class: "d-badge__decorative"
-}, g = {
-	key: 1,
-	class: "d-badge__icon-left"
-}, _ = {
-	key: 2,
-	class: "d-badge__icon-right"
 };
-function v(e, t, n, r, i, a) {
+function g(e, t, n, r, i, a) {
 	return d(), s("span", {
 		class: u([
 			"d-badge",
@@ -104,13 +116,31 @@ 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", {
+			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),
 		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", {
+			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)
 	], 2);
 }
-var y = /* @__PURE__ */ t(m, [["render", v]]);
+var _ = /* @__PURE__ */ t(m, [["render", g]]);
 //#endregion
-export { y as default };
+export { _ 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\"\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', 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 './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, 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 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  mounted () {\n    this.validateProps();\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,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,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;;CAjNK,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"}

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(`../notice/notice-constants.cjs`),r=require(`../notice/notice-icon.cjs`),i=require(`../notice/notice-content.cjs`),a=require(`../notice/notice-action.cjs`);let o=require(`vue`);var s={name:`DtBanner`,components:{DtNoticeIcon:r.default,DtNoticeContent:i.default,DtNoticeAction:a.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 n.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`},hasHeader(){return!!this.headerText||!!this.$slots.header},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};`}}},c=[`role`,`aria-modal`,`aria-labelledby`,`aria-describedby`];function l(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-notice-icon`),l=(0,o.resolveComponent)(`dt-notice-content`),u=(0,o.resolveComponent)(`dt-notice-action`),d=(0,o.resolveDirective)(`dt-focustrap`);return(0,o.withDirectives)(((0,o.openBlock)(),(0,o.createElementBlock)(`aside`,{class:(0,o.normalizeClass)(a.bannerClass),style:(0,o.normalizeStyle)(a.bannerBackgroundImage),"data-qa":`dt-banner`},[(0,o.createElementVNode)(`div`,{class:(0,o.normalizeClass)([`d-banner__dialog`,n.dialogClass]),"data-qa":`dt-banner-dialog`,role:a.role,"aria-modal":n.important||void 0,"aria-labelledby":a.hasHeader?n.headerId:void 0,"aria-describedby":n.contentId},[n.showIcon?((0,o.openBlock)(),(0,o.createBlock)(s,{key:0,kind:n.kind,"icon-class":n.iconClass,class:(0,o.normalizeClass)({"d-notice__icon--has-title":n.headerText||e.$slots.header})},{default:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`,`icon-class`,`class`])):(0,o.createCommentVNode)(``,!0),(0,o.createVNode)(l,{"header-id":n.headerId,"content-id":n.contentId,"header-text":n.headerText,"header-class":n.headerClass,"content-class":n.contentClass},{header:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`header`)]),default:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`default`)]),_:3},8,[`header-id`,`content-id`,`header-text`,`header-class`,`content-class`]),(0,o.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,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`action`)]),_:3},8,[`show-action`,`show-close`,`action-class`])],10,c)],6)),[[d,{active:n.important,initialFocus:`auto`,restoreFocus:!0}]])}var u=t.t(s,[[`render`,l]]);exports.default=u;
 //# 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":["<template>\n  <aside\n    v-dt-focustrap=\"{ active: important, initialFocus: 'auto', restoreFocus: true }\"\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    data-qa=\"dt-banner\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      data-qa=\"dt-banner-dialog\"\n      :role=\"role\"\n      :aria-modal=\"important || undefined\"\n      :aria-labelledby=\"hasHeader ? headerId : undefined\"\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 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  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\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 keyboard focus within the banner while it is shown (via the\n     * v-dt-focustrap directive), restoring focus to the previously focused element on close.\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    hasHeader () {\n      return !!this.headerText || !!this.$slots.header;\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</script>\n"],"mappings":"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"}

package/dist/lib/banner/banner.js

@@ -1,23 +1,20 @@
 import e from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import n from "../../common/mixins/modal.js";
-import { NOTICE_KINDS as r } from "../notice/notice-constants.js";
-import i from "../notice/notice-icon.js";
-import a from "../notice/notice-content.js";
-import o from "../notice/notice-action.js";
-import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v } from "vue";
-//#region components/banner/banner.vue
+import { NOTICE_KINDS as n } from "../notice/notice-constants.js";
+import r from "../notice/notice-icon.js";
+import i from "../notice/notice-content.js";
+import a from "../notice/notice-action.js";
+import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveComponent as h, resolveDirective as g, withCtx as _, withDirectives as v } from "vue";
+//#region components/Banner/Banner.vue
 var y = {
-	compatConfig: { MODE: 3 },
 	name: "DtBanner",
 	components: {
-		DtNoticeIcon: i,
-		DtNoticeContent: a,
-		DtNoticeAction: o
+		DtNoticeIcon: r,
+		DtNoticeContent: i,
+		DtNoticeAction: a
 	},
-	mixins: [n],
 	props: {
-		titleId: {
+		headerId: {
 			type: String,
 			default() {
 				return e.getUniqueString();
@@ -29,9 +26,9 @@ var y = {
 				return e.getUniqueString();
 			}
 		},
-		title: {
+		headerText: {
 			type: String,
-			default: ""
+			default: void 0
 		},
 		important: {
 			type: Boolean,
@@ -44,21 +41,21 @@ var y = {
 		kind: {
 			type: String,
 			default: "base",
-			validate(e) {
-				return r.includes(e);
+			validator(e) {
+				return n.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,
@@ -71,6 +68,38 @@ 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"],
@@ -78,13 +107,16 @@ var y = {
 		role() {
 			return this.important ? "alertdialog" : "status";
 		},
+		hasHeader() {
+			return !!this.headerText || !!this.$slots.header;
+		},
 		bannerClass() {
 			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],
@@ -98,59 +130,75 @@ var y = {
 			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);
-	} }
+	}
 }, b = [
 	"role",
+	"aria-modal",
 	"aria-labelledby",
 	"aria-describedby"
 ];
 function x(e, t, n, r, i, a) {
-	let o = g("dt-notice-icon"), y = g("dt-notice-content"), x = g("dt-notice-action");
-	return m(), l("aside", {
-		class: f(a.bannerClass),
-		style: p(a.bannerBackgroundImage),
-		onKeydown: t[1] || (t[1] = v((...e) => a.trapFocus && a.trapFocus(...e), ["tab"]))
-	}, [u("div", {
-		class: f(["d-banner__dialog", n.dialogClass]),
+	let y = h("dt-notice-icon"), x = h("dt-notice-content"), S = h("dt-notice-action"), C = g("dt-focustrap");
+	return v((p(), c("aside", {
+		class: d(a.bannerClass),
+		style: f(a.bannerBackgroundImage),
+		"data-qa": "dt-banner"
+	}, [l("div", {
+		class: d(["d-banner__dialog", n.dialogClass]),
+		"data-qa": "dt-banner-dialog",
 		role: a.role,
-		"aria-labelledby": n.titleId,
+		"aria-modal": n.important || void 0,
+		"aria-labelledby": a.hasHeader ? n.headerId : void 0,
 		"aria-describedby": n.contentId
 	}, [
-		n.hideIcon ? c("", !0) : (m(), s(o, {
+		n.showIcon ? (p(), o(y, {
 			key: 0,
-			kind: n.kind
+			kind: n.kind,
+			"icon-class": n.iconClass,
+			class: d({ "d-notice__icon--has-title": n.headerText || e.$slots.header })
 		}, {
-			default: _(() => [h(e.$slots, "icon")]),
+			default: _(() => [m(e.$slots, "icon")]),
 			_: 3
-		}, 8, ["kind"])),
-		d(y, {
-			"title-id": n.titleId,
+		}, 8, [
+			"kind",
+			"icon-class",
+			"class"
+		])) : s("", !0),
+		u(x, {
+			"header-id": n.headerId,
 			"content-id": n.contentId,
-			title: n.title
+			"header-text": n.headerText,
+			"header-class": n.headerClass,
+			"content-class": n.contentClass
 		}, {
-			titleOverride: _(() => [h(e.$slots, "titleOverride")]),
-			default: _(() => [h(e.$slots, "default")]),
+			header: _(() => [m(e.$slots, "header")]),
+			default: _(() => [m(e.$slots, "default")]),
 			_: 3
 		}, 8, [
-			"title-id",
+			"header-id",
 			"content-id",
-			"title"
+			"header-text",
+			"header-class",
+			"content-class"
 		]),
-		d(x, {
-			"hide-action": n.hideAction,
-			"hide-close": n.hideClose,
+		u(S, {
+			"show-action": n.showAction,
+			"show-close": n.showClose,
+			"action-class": n.actionClass,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
-			default: _(() => [h(e.$slots, "action")]),
+			default: _(() => [m(e.$slots, "action")]),
 			_: 3
-		}, 8, ["hide-action", "hide-close"])
-	], 10, b)], 38);
+		}, 8, [
+			"show-action",
+			"show-close",
+			"action-class"
+		])
+	], 10, b)], 6)), [[C, {
+		active: n.important,
+		initialFocus: "auto",
+		restoreFocus: !0
+	}]]);
 }
 var S = /* @__PURE__ */ t(y, [["render", x]]);
 //#endregion

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":["<template>\n  <aside\n    v-dt-focustrap=\"{ active: important, initialFocus: 'auto', restoreFocus: true }\"\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    data-qa=\"dt-banner\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      data-qa=\"dt-banner-dialog\"\n      :role=\"role\"\n      :aria-modal=\"important || undefined\"\n      :aria-labelledby=\"hasHeader ? headerId : undefined\"\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 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  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\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 keyboard focus within the banner while it is shown (via the\n     * v-dt-focustrap directive), restoring focus to the previously focused element on close.\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    hasHeader () {\n      return !!this.headerText || !!this.$slots.header;\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</script>\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../common/constants/layout.cjs`);var t=[`div`,`span`,`section`,`article`,`aside`,`main`,`header`,`footer`,`nav`,`ul`,`ol`,`li`,`fieldset`,`form`,`figure`],n=[`0`,`1`,`25`,`50`,`75`,`100`,`125`,`150`,`175`,`200`,`250`,`300`,`350`,`400`,`450`,`500`,`525`,`550`,`600`,`650`,`700`,`750`,`800`],r=`primary.secondary.moderate.bold.strong.contrast.backdrop.overlay.brand.info.positive.warning.critical.brand-subtle.brand-strong.info-subtle.info-strong.positive-subtle.positive-strong.warning-subtle.warning-strong.critical-subtle.critical-strong.primary-opaque.secondary-opaque.moderate-opaque.bold-opaque.strong-opaque.contrast-opaque.brand-opaque.brand-subtle-opaque.info-opaque.info-subtle-opaque.positive-opaque.positive-subtle-opaque.warning-opaque.warning-subtle-opaque.critical-opaque.critical-subtle-opaque`.split(`.`),i=[`transparent`,`subtle`,`default`,`moderate`,`bold`,`accent`,`focus`,`brand`,`positive`,`warning`,`critical`,`info`,`brand-subtle`,`brand-strong`,`positive-subtle`,`positive-strong`,`warning-subtle`,`warning-strong`,`critical-subtle`,`critical-strong`,`info-subtle`,`info-strong`],a=[`0`,`50`,`100`,`150`,`200`,`300`,`400`],o=[`0`,`100`,`200`,`300`,`350`,`400`,`450`,`500`,`550`,`600`,`pill`,`circle`],s=[`small`,`medium`,`large`,`extra-large`,`card`],c=e.LAYOUT_VALUES,l=[`hidden`,`scroll`,`auto`,`clip`,`visible`],u=[`leave`,`scroll`,`move`,`always`];exports.DT_BOX_AS_VALUES=t,exports.DT_BOX_BORDER_COLOR_VALUES=i,exports.DT_BOX_BORDER_RADIUS_VALUES=o,exports.DT_BOX_BORDER_WIDTH_VALUES=a,exports.DT_BOX_LAYOUT_VALUES=c,exports.DT_BOX_OVERFLOW_VALUES=l,exports.DT_BOX_SCROLLBAR_VALUES=u,exports.DT_BOX_SHADOW_VALUES=s,exports.DT_BOX_SPACING_VALUES=n,exports.DT_BOX_SURFACE_VALUES=r;
+//# sourceMappingURL=box-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-constants.cjs","names":["LAYOUT_VALUES"],"sources":["../../../components/Box/BoxConstants.js"],"sourcesContent":["import { LAYOUT_VALUES } from '@/common/constants';\n\n/**\n * Valid `as` elements for the box component.\n * @type {string[]}\n */\nexport const DT_BOX_AS_VALUES = ['div', 'span', 'section', 'article', 'aside', 'main', 'header', 'footer', 'nav', 'ul', 'ol', 'li', 'fieldset', 'form', 'figure'];\n\n/**\n * Spacing token scale (shared across all padding props).\n * @type {string[]}\n */\nexport const DT_BOX_SPACING_VALUES = ['0', '1', '25', '50', '75', '100', '125', '150', '175', '200', '250', '300', '350', '400', '450', '500', '525', '550', '600', '650', '700', '750', '800'];\n\n\n/**\n * Surface color values (neutral + semantic + subtle/strong + opaque).\n * @type {string[]}\n */\nexport const DT_BOX_SURFACE_VALUES = [\n  'primary', 'secondary', 'moderate', 'bold', 'strong', 'contrast', 'backdrop', 'overlay',\n  'brand', 'info', 'positive', 'warning', 'critical',\n  'brand-subtle', 'brand-strong', 'info-subtle', 'info-strong',\n  'positive-subtle', 'positive-strong', 'warning-subtle', 'warning-strong',\n  'critical-subtle', 'critical-strong',\n  'primary-opaque', 'secondary-opaque', 'moderate-opaque', 'bold-opaque',\n  'strong-opaque', 'contrast-opaque',\n  'brand-opaque', 'brand-subtle-opaque', 'info-opaque', 'info-subtle-opaque',\n  'positive-opaque', 'positive-subtle-opaque', 'warning-opaque', 'warning-subtle-opaque',\n  'critical-opaque', 'critical-subtle-opaque',\n];\n\n/**\n * Border color values (neutral + semantic + variants).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_COLOR_VALUES = [\n  'transparent', 'subtle', 'default', 'moderate', 'bold', 'accent', 'focus',\n  'brand', 'positive', 'warning', 'critical', 'info',\n  'brand-subtle', 'brand-strong', 'positive-subtle', 'positive-strong',\n  'warning-subtle', 'warning-strong', 'critical-subtle', 'critical-strong',\n  'info-subtle', 'info-strong',\n];\n\n/**\n * Border width values (maps to --dt-size-border-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_WIDTH_VALUES = ['0', '50', '100', '150', '200', '300', '400'];\n\n/**\n * Border radius values (maps to --dt-size-radius-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_RADIUS_VALUES = ['0', '100', '200', '300', '350', '400', '450', '500', '550', '600', 'pill', 'circle'];\n\n/**\n * Shadow values (maps to --dt-shadow-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_SHADOW_VALUES = ['small', 'medium', 'large', 'extra-large', 'card'];\n\n/**\n * Layout token scale (for sizing props: inlineSize, blockSize, min/max variants).\n * @type {string[]}\n */\nexport const DT_BOX_LAYOUT_VALUES = LAYOUT_VALUES;\n\n/**\n * Overflow values.\n * @type {string[]}\n */\nexport const DT_BOX_OVERFLOW_VALUES = ['hidden', 'scroll', 'auto', 'clip', 'visible'];\n\n/**\n * Scrollbar autoHide mode values (maps to OverlayScrollbars autoHide option).\n * @type {string[]}\n */\nexport const DT_BOX_SCROLLBAR_VALUES = ['leave', 'scroll', 'move', 'always'];\n"],"mappings":"wHAMA,IAAa,EAAmB,CAAC,MAAO,OAAQ,UAAW,UAAW,QAAS,OAAQ,SAAU,SAAU,MAAO,KAAM,KAAM,KAAM,WAAY,OAAQ,SAAS,CAMpJ,EAAwB,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAM,CAOlL,EAAwB,+gBAWpC,CAMY,EAA6B,CACxC,cAAe,SAAU,UAAW,WAAY,OAAQ,SAAU,QAClE,QAAS,WAAY,UAAW,WAAY,OAC5C,eAAgB,eAAgB,kBAAmB,kBACnD,iBAAkB,iBAAkB,kBAAmB,kBACvD,cAAe,cAChB,CAMY,EAA6B,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAM,CAM3E,EAA8B,CAAC,IAAK,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAAQ,SAAS,CAMpH,EAAuB,CAAC,QAAS,SAAU,QAAS,cAAe,OAAO,CAM1E,EAAuBA,EAAAA,cAMvB,EAAyB,CAAC,SAAU,SAAU,OAAQ,OAAQ,UAAU,CAMxE,EAA0B,CAAC,QAAS,SAAU,OAAQ,SAAS"}