@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/badge.js

@@ -2,7 +2,7 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, create
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtIcon } from "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 const BADGE_TYPE_MODIFIERS = {
   default: "",
@@ -185,37 +185,21 @@ const _hoisted_3 = {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = resolveComponent("dt-icon");
   return openBlock(), createElementBlock("span", {
-    class: normalizeClass([
-      "d-badge",
-      $data.BADGE_TYPE_MODIFIERS[$props.type],
-      $data.BADGE_KIND_MODIFIERS[$props.kind],
-      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
-      { "d-badge--subtle": $props.subtle },
-      { "d-badge--outlined": $props.outlined }
-    ]),
+    class: normalizeClass(["d-badge", $data.BADGE_TYPE_MODIFIERS[$props.type], $data.BADGE_KIND_MODIFIERS[$props.kind], $data.BADGE_DECORATION_MODIFIERS[$props.decoration], {
+      "d-badge--subtle": $props.subtle
+    }, {
+      "d-badge--outlined": $props.outlined
+    }]),
     "data-qa": "dt-badge"
-  }, [
-    $props.decoration ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
-    $props.iconLeft || $props.type === "ai" ? (openBlock(), createElementBlock("span", _hoisted_2, [
-      createVNode(_component_dt_icon, {
-        name: $props.iconLeft || "dialpad-ai",
-        size: "200"
-      }, null, 8, ["name"])
-    ])) : createCommentVNode("", true),
-    createElementVNode("span", {
-      class: normalizeClass(["d-badge__label", $props.labelClass])
-    }, [
-      renderSlot(_ctx.$slots, "default", {}, () => [
-        createTextVNode(toDisplayString($props.text), 1)
-      ])
-    ], 2),
-    $props.iconRight ? (openBlock(), createElementBlock("span", _hoisted_3, [
-      createVNode(_component_dt_icon, {
-        name: $props.iconRight,
-        size: "200"
-      }, null, 8, ["name"])
-    ])) : createCommentVNode("", true)
-  ], 2);
+  }, [$props.decoration ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true), $props.iconLeft || $props.type === "ai" ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(_component_dt_icon, {
+    name: $props.iconLeft || "dialpad-ai",
+    size: "200"
+  }, null, 8, ["name"])])) : createCommentVNode("", true), createElementVNode("span", {
+    class: normalizeClass(["d-badge__label", $props.labelClass])
+  }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString($props.text), 1)])], 2), $props.iconRight ? (openBlock(), createElementBlock("span", _hoisted_3, [createVNode(_component_dt_icon, {
+    name: $props.iconRight,
+    size: "200"
+  }, null, 8, ["name"])])) : createCommentVNode("", true)], 2);
 }
 const DtBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../components/badge/badge_constants.js","../../components/badge/badge.vue"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n","<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=\"iconLeft || type === 'ai'\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft || 'dialpad-ai'\"\n        size=\"200\"\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=\"iconRight\"\n      class=\"d-badge__icon-right\"\n    >\n      <dt-icon\n        :name=\"iconRight\"\n        size=\"200\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { DtIcon } from '@/components/icon';\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  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n     * will automatically be shown here, but this can be overridden by setting this prop.\n     */\n    iconLeft: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n     */\n    iconRight: {\n      type: String,\n      default: '',\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 iconLeft and iconRight\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    hasIcons () {\n      return this.iconLeft !== '' || this.iconRight !== '';\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\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 iconLeft or iconRight.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../components/badge/badge_constants.js","../../components/badge/badge.vue"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n","<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=\"iconLeft || type === 'ai'\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft || 'dialpad-ai'\"\n        size=\"200\"\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=\"iconRight\"\n      class=\"d-badge__icon-right\"\n    >\n      <dt-icon\n        :name=\"iconRight\"\n        size=\"200\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { DtIcon } from '@/components/icon';\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  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n     * will automatically be shown here, but this can be overridden by setting this prop.\n     */\n    iconLeft: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n     */\n    iconRight: {\n      type: String,\n      default: '',\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 iconLeft and iconRight\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    hasIcons () {\n      return this.iconLeft !== '' || this.iconRight !== '';\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\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 iconLeft or iconRight.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["BADGE_TYPE_MODIFIERS","default","info","success","warning","critical","bulletin","ai","BADGE_KIND_MODIFIERS","label","count","BADGE_DECORATION_MODIFIERS","_sfc_main","name","components","DtIcon","props","iconLeft","type","String","iconRight","text","kind","validator","Object","keys","includes","decoration","undefined","labelClass","Array","subtle","Boolean","outlined","data","computed","hasIcons","watch","$props","immediate","deep","handler","validateProps","methods","validateTypePropCombination","validateDecorationPropCombination","console","error","class","_createElementBlock","_normalizeClass","$data","_openBlock","_hoisted_1","_hoisted_2","_createVNode","_component_dt_icon","size","_createElementVNode","_renderSlot","_ctx","_hoisted_3"],"mappings":"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"}

package/dist/lib/banner.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../chunks/modal-VgxXAQFP.js");
+const modal = require("../chunks/modal-OaWxzqNt.js");
 const common_utils = require("../common/utils.cjs");
-const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-gKr0Vlbz.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-const notice_action = require("../chunks/notice_action-WTucGhvr.js");
+const notice_action = require("../chunks/notice_action-3ed0uIMN.js");
 const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
 require("../common/constants.cjs");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
@@ -155,14 +155,10 @@ const _sfc_main = {
         warning: "d-banner--warning",
         base: "d-banner--base"
       };
-      return [
-        "d-banner",
-        kindClasses[this.kind],
-        {
-          "d-banner--important": this.important,
-          "d-banner--pinned": this.pinned
-        }
-      ];
+      return ["d-banner", kindClasses[this.kind], {
+        "d-banner--important": this.important,
+        "d-banner--pinned": this.pinned
+      }];
     },
     bannerBackgroundImage() {
       if (this.backgroundImage === "")
@@ -193,50 +189,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass($options.bannerClass),
     style: vue.normalizeStyle($options.bannerBackgroundImage),
     onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => $options.trapFocus && $options.trapFocus(...args), ["tab"]))
-  }, [
-    vue.createElementVNode("div", {
-      class: vue.normalizeClass(["d-banner__dialog", $props.dialogClass]),
-      role: $options.role,
-      "aria-labelledby": $props.titleId,
-      "aria-describedby": $props.contentId
-    }, [
-      !$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
-        key: 0,
-        kind: $props.kind
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "icon")
-        ]),
-        _: 3
-      }, 8, ["kind"])) : vue.createCommentVNode("", true),
-      vue.createVNode(_component_dt_notice_content, {
-        "title-id": $props.titleId,
-        "content-id": $props.contentId,
-        title: $props.title
-      }, {
-        titleOverride: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "titleOverride")
-        ]),
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["title-id", "content-id", "title"]),
-      vue.createVNode(_component_dt_notice_action, {
-        "hide-action": $props.hideAction,
-        "hide-close": $props.hideClose,
-        "close-button-props": $props.closeButtonProps,
-        "visually-hidden-close": _ctx.visuallyHiddenClose,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "action")
-        ]),
-        _: 3
-      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-    ], 10, _hoisted_1)
-  ], 38);
+  }, [vue.createElementVNode("div", {
+    class: vue.normalizeClass(["d-banner__dialog", $props.dialogClass]),
+    role: $options.role,
+    "aria-labelledby": $props.titleId,
+    "aria-describedby": $props.contentId
+  }, [!$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
+    key: 0,
+    kind: $props.kind
+  }, {
+    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "icon")]),
+    _: 3
+  }, 8, ["kind"])) : vue.createCommentVNode("", true), vue.createVNode(_component_dt_notice_content, {
+    "title-id": $props.titleId,
+    "content-id": $props.contentId,
+    title: $props.title
+  }, {
+    titleOverride: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "titleOverride")]),
+    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+    _: 3
+  }, 8, ["title-id", "content-id", "title"]), vue.createVNode(_component_dt_notice_action, {
+    "hide-action": $props.hideAction,
+    "hide-close": $props.hideClose,
+    "close-button-props": $props.closeButtonProps,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+    onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+  }, {
+    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "action")]),
+    _: 3
+  }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, _hoisted_1)], 38);
 }
 const banner = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtBanner = banner;

package/dist/lib/banner.cjs.map

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

package/dist/lib/banner.js

@@ -1,14 +1,14 @@
-import { Modal } from "../chunks/modal-XOr4kiNZ.js";
+import { Modal } from "../chunks/modal-8X6poIZW.js";
 import utils from "../common/utils.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-Ji3Zlts6.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, withKeys, createElementVNode, createBlock, withCtx, renderSlot, createCommentVNode, createVNode } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-p-ePanW_.js";
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-e08Lw5W6.js";
 import { NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
 import "../common/constants.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
@@ -153,14 +153,10 @@ const _sfc_main = {
         warning: "d-banner--warning",
         base: "d-banner--base"
       };
-      return [
-        "d-banner",
-        kindClasses[this.kind],
-        {
-          "d-banner--important": this.important,
-          "d-banner--pinned": this.pinned
-        }
-      ];
+      return ["d-banner", kindClasses[this.kind], {
+        "d-banner--important": this.important,
+        "d-banner--pinned": this.pinned
+      }];
     },
     bannerBackgroundImage() {
       if (this.backgroundImage === "")
@@ -191,50 +187,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass($options.bannerClass),
     style: normalizeStyle($options.bannerBackgroundImage),
     onKeydown: _cache[1] || (_cache[1] = withKeys((...args) => $options.trapFocus && $options.trapFocus(...args), ["tab"]))
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(["d-banner__dialog", $props.dialogClass]),
-      role: $options.role,
-      "aria-labelledby": $props.titleId,
-      "aria-describedby": $props.contentId
-    }, [
-      !$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
-        key: 0,
-        kind: $props.kind
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "icon")
-        ]),
-        _: 3
-      }, 8, ["kind"])) : createCommentVNode("", true),
-      createVNode(_component_dt_notice_content, {
-        "title-id": $props.titleId,
-        "content-id": $props.contentId,
-        title: $props.title
-      }, {
-        titleOverride: withCtx(() => [
-          renderSlot(_ctx.$slots, "titleOverride")
-        ]),
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["title-id", "content-id", "title"]),
-      createVNode(_component_dt_notice_action, {
-        "hide-action": $props.hideAction,
-        "hide-close": $props.hideClose,
-        "close-button-props": $props.closeButtonProps,
-        "visually-hidden-close": _ctx.visuallyHiddenClose,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "action")
-        ]),
-        _: 3
-      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-    ], 10, _hoisted_1)
-  ], 38);
+  }, [createElementVNode("div", {
+    class: normalizeClass(["d-banner__dialog", $props.dialogClass]),
+    role: $options.role,
+    "aria-labelledby": $props.titleId,
+    "aria-describedby": $props.contentId
+  }, [!$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
+    key: 0,
+    kind: $props.kind
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+    _: 3
+  }, 8, ["kind"])) : createCommentVNode("", true), createVNode(_component_dt_notice_content, {
+    "title-id": $props.titleId,
+    "content-id": $props.contentId,
+    title: $props.title
+  }, {
+    titleOverride: withCtx(() => [renderSlot(_ctx.$slots, "titleOverride")]),
+    default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+    _: 3
+  }, 8, ["title-id", "content-id", "title"]), createVNode(_component_dt_notice_action, {
+    "hide-action": $props.hideAction,
+    "hide-close": $props.hideClose,
+    "close-button-props": $props.closeButtonProps,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+    onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "action")]),
+    _: 3
+  }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, _hoisted_1)], 38);
 }
 const banner = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/banner.js.map

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

package/dist/lib/breadcrumbs.cjs

@@ -58,25 +58,18 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_link = vue.resolveComponent("dt-link");
   return vue.openBlock(), vue.createElementBlock("li", {
     "data-qa": "dt-breadcrumb-item",
-    class: vue.normalizeClass([
-      "d-breadcrumbs__item",
-      { [$data.BREADCRUMB_ITEM_SELECTED_MODIFIER]: $props.selected }
-    ])
-  }, [
-    vue.createVNode(_component_dt_link, vue.mergeProps({
-      kind: $options.linkKind,
-      inverted: $options.linkInverted,
-      "aria-current": $options.ariaCurrent,
-      "data-qa": "breadcrumb-item"
-    }, _ctx.$attrs), {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          vue.createTextVNode(vue.toDisplayString($props.label), 1)
-        ])
-      ]),
-      _: 3
-    }, 16, ["kind", "inverted", "aria-current"])
-  ], 2);
+    class: vue.normalizeClass(["d-breadcrumbs__item", {
+      [$data.BREADCRUMB_ITEM_SELECTED_MODIFIER]: $props.selected
+    }])
+  }, [vue.createVNode(_component_dt_link, vue.mergeProps({
+    kind: $options.linkKind,
+    inverted: $options.linkInverted,
+    "aria-current": $options.ariaCurrent,
+    "data-qa": "breadcrumb-item"
+  }, _ctx.$attrs), {
+    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString($props.label), 1)])]),
+    _: 3
+  }, 16, ["kind", "inverted", "aria-current"])], 2);
 }
 const DtBreadcrumbItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -92,7 +85,10 @@ const _sfc_main = {
       type: Array,
       default: () => [],
       validate(breadcrumbs2) {
-        return breadcrumbs2.every(({ href, label }) => {
+        return breadcrumbs2.every(({
+          href,
+          label
+        }) => {
           return href !== void 0 && label !== void 0;
         });
       }
@@ -130,22 +126,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("nav", {
     "aria-label": $props.ariaLabel,
     "data-qa": "dt-breadcrumbs",
-    class: vue.normalizeClass([
-      "d-breadcrumbs",
-      { [$data.BREADCRUMBS_INVERTED_MODIFIER]: $props.inverted }
-    ])
-  }, [
-    vue.createElementVNode("ol", null, [
-      vue.renderSlot(_ctx.$slots, "default", {}, () => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.breadcrumbs, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_component_dt_breadcrumb_item, vue.mergeProps({
-            key: $options.getBreadcrumbItemKey(index),
-            inverted: $props.inverted
-          }, item), null, 16, ["inverted"]);
-        }), 128))
-      ])
-    ])
-  ], 10, _hoisted_1);
+    class: vue.normalizeClass(["d-breadcrumbs", {
+      [$data.BREADCRUMBS_INVERTED_MODIFIER]: $props.inverted
+    }])
+  }, [vue.createElementVNode("ol", null, [vue.renderSlot(_ctx.$slots, "default", {}, () => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.breadcrumbs, (item, index) => {
+    return vue.openBlock(), vue.createBlock(_component_dt_breadcrumb_item, vue.mergeProps({
+      key: $options.getBreadcrumbItemKey(index),
+      inverted: $props.inverted
+    }, item), null, 16, ["inverted"]);
+  }), 128))])])], 10, _hoisted_1);
 }
 const breadcrumbs = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.BREADCRUMBS_INVERTED_MODIFIER = BREADCRUMBS_INVERTED_MODIFIER;

package/dist/lib/breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.cjs","sources":["../../components/breadcrumbs/breadcrumbs_constants.js","../../components/breadcrumbs/breadcrumb_item.vue","../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n","<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"$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 { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\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  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\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</script>\n","<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","MUTED","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_renderSlot","breadcrumbs","utils","_createElementVNode","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;;;;;AAAY,MAAC,oCAAoC;AACrC,MAAC,gCAAgC;AC2B7C,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC,SAAM;AAAA,EACP;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AACH;;;0BAjFEC,IAmBK,mBAAA,MAAA;AAAA,IAlBH,WAAQ;AAAA,IACP,OAAKC,IAAAA,eAAA;AAAA;MAA0C,EAAA,CAAA,MAAA,iCAAiC,GAAG,OAAQ,SAAA;AAAA;;IAK5FC,IAAA,YAWU,oBAXVC,eAWU;AAAA,MAVP,MAAM,SAAQ;AAAA,MACd,UAAU,SAAY;AAAA,MACtB,gBAAc,SAAW;AAAA,MAC1B,WAAQ;AAAA,OACA,KAAM,MAAA,GAAA;AAAA,2BAGd,MAEO;AAAA,QAFPC,IAAAA,WAEO,4BAFP,MAEO;AAAA,kDADF,OAAK,KAAA,GAAA,CAAA;AAAA;;;;;;;ACgBhB,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAIC,aAAAA,QAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;;;;0BAlFEN,IAmBM,mBAAA,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAAKC,IAAAA,eAAA;AAAA;MAAoC,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFM,IAUK,mBAAA,MAAA,MAAA;AAAA,MARHH,IAAAA,WAOO,4BAPP,MAOO;AAAA,SANLI,IAAAA,UAAA,IAAA,GAAAR,IAAA,mBAKES,cAJwB,MAAAC,IAAA,WAAA,OAAA,aAAhB,CAAA,MAAM,UAAK;AADrB,iBAAAF,cAAA,GAAAG,gBAKE,+BALFR,IAAAA,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;;;;;;;;"}
+{"version":3,"file":"breadcrumbs.cjs","sources":["../../components/breadcrumbs/breadcrumbs_constants.js","../../components/breadcrumbs/breadcrumb_item.vue","../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n","<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"$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 { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\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  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\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</script>\n","<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["BREADCRUMB_ITEM_SELECTED_MODIFIER","BREADCRUMBS_INVERTED_MODIFIER","_sfc_main","name","components","DtLink","inheritAttrs","props","inverted","type","Boolean","default","selected","label","String","data","computed","linkKind","MUTED","linkInverted","ariaCurrent","undefined","_createElementBlock","class","_normalizeClass","$data","$props","_createVNode","_component_dt_link","_mergeProps","kind","$options","_ctx","$attrs","_renderSlot","DtBreadcrumbItem","breadcrumbs","Array","validate","every","href","ariaLabel","methods","getBreadcrumbItemKey","index","utils","getUniqueString","_createElementVNode","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","key"],"mappings":"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"}