@dialpad/dialtone 9.71.0-beta.1 → 9.71.0

package/dist/vue2/components/badge/badge_constants.js

@@ -0,0 +1,43 @@
+const BADGE_TYPE_MODIFIERS = {
+  default: "",
+  info: "d-badge--info",
+  success: "d-badge--success",
+  warning: "d-badge--warning",
+  critical: "d-badge--critical",
+  bulletin: "d-badge--bulletin",
+  ai: "d-badge--ai"
+};
+const BADGE_KIND_MODIFIERS = {
+  label: "",
+  count: "d-badge--count"
+};
+const BADGE_DECORATION_MODIFIERS = {
+  "black-400": "d-badge--decorate-black-400",
+  "black-500": "d-badge--decorate-black-500",
+  "black-900": "d-badge--decorate-black-900",
+  "red-200": "d-badge--decorate-red-200",
+  "red-300": "d-badge--decorate-red-300",
+  "red-400": "d-badge--decorate-red-400",
+  "purple-200": "d-badge--decorate-purple-200",
+  "purple-300": "d-badge--decorate-purple-300",
+  "purple-400": "d-badge--decorate-purple-400",
+  "purple-500": "d-badge--decorate-purple-500",
+  "blue-200": "d-badge--decorate-blue-200",
+  "blue-300": "d-badge--decorate-blue-300",
+  "blue-400": "d-badge--decorate-blue-400",
+  "green-300": "d-badge--decorate-green-300",
+  "green-400": "d-badge--decorate-green-400",
+  "green-500": "d-badge--decorate-green-500",
+  "gold-300": "d-badge--decorate-gold-300",
+  "gold-400": "d-badge--decorate-gold-400",
+  "gold-500": "d-badge--decorate-gold-500",
+  "magenta-200": "d-badge--decorate-magenta-200",
+  "magenta-300": "d-badge--decorate-magenta-300",
+  "magenta-400": "d-badge--decorate-magenta-400"
+};
+export {
+  BADGE_DECORATION_MODIFIERS,
+  BADGE_KIND_MODIFIERS,
+  BADGE_TYPE_MODIFIERS
+};
+//# sourceMappingURL=badge_constants.js.map

package/dist/vue2/components/badge/badge_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge_constants.js","sources":["../../../components/badge/badge_constants.js"],"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"],"names":[],"mappings":"AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,IAAI;AACN;AAEY,MAAC,uBAAuB;AAAA,EAClC,OAAO;AAAA,EACP,OAAO;AACT;AAEY,MAAC,6BAA6B;AAAA,EACxC,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AACjB;"}

package/dist/vue2/components/banner/banner.vue.cjs

@@ -0,0 +1,199 @@
+"use strict";
+const modal = require("../../common/mixins/modal.cjs");
+const common_utils = require("../../common/utils.cjs");
+const sr_only_close_button = require("../../common/mixins/sr_only_close_button.cjs");
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const notice_icon = require("../notice/notice_icon.vue.cjs");
+const notice_content = require("../notice/notice_content.vue.cjs");
+const notice_action = require("../notice/notice_action.vue.cjs");
+const notice_constants = require("../notice/notice_constants.cjs");
+const _sfc_main = {
+  name: "DtBanner",
+  components: {
+    DtNoticeIcon: notice_icon,
+    DtNoticeContent: notice_content,
+    DtNoticeAction: notice_action
+  },
+  mixins: [modal, sr_only_close_button],
+  props: {
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * This will also change the aria role from status to alertdialog.
+     * and will modally trap the keyboard focus in the dialog as soon as it displays.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pins the banner to the top of the window and pushes all app content down.
+     * @values true, false
+     */
+    pinned: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(kind) {
+        return notice_constants.NOTICE_KINDS.includes(kind);
+      }
+    },
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Inner dialog class
+     */
+    dialogClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Banner background image
+     */
+    backgroundImage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Background image size, follows the background-size CSS property values
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" target="_blank">
+     *   CSS background-sizes
+     * </a>
+     */
+    backgroundSize: {
+      type: String,
+      default: "cover"
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close"
+  ],
+  computed: {
+    role() {
+      return this.important ? "alertdialog" : "status";
+    },
+    bannerClass() {
+      const kindClasses = {
+        error: "d-banner--error",
+        info: "d-banner--info",
+        success: "d-banner--success",
+        warning: "d-banner--warning",
+        base: "d-banner--base"
+      };
+      return [
+        "d-banner",
+        kindClasses[this.kind],
+        {
+          "d-banner--important": this.important,
+          "d-banner--pinned": this.pinned
+        }
+      ];
+    },
+    bannerBackgroundImage() {
+      if (this.backgroundImage === "") return null;
+      return `background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`;
+    }
+  },
+  mounted() {
+    if (this.important) {
+      this.focusFirstElement();
+    }
+  },
+  methods: {
+    trapFocus(e) {
+      if (this.important) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("aside", { class: _vm.bannerClass, style: _vm.bannerBackgroundImage, on: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
+    return _vm.trapFocus.apply(null, arguments);
+  } } }, [_c("div", { staticClass: "d-banner__dialog", class: _vm.dialogClass, attrs: { "role": _vm.role, "aria-labelledby": _vm.titleId, "aria-describedby": _vm.contentId } }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({ attrs: { "kind": _vm.kind } }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
+    return [_vm._t("titleOverride")];
+  }, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default")], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.$listeners), [_vm._t("action")], 2)], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const banner = __component__.exports;
+module.exports = banner;
+//# sourceMappingURL=banner.vue.cjs.map

package/dist/vue2/components/banner/banner.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.vue.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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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"],"mappings":";;;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA;AAAAA,IACA,iBAAAC;AAAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,QAAA,CAAAC,OAAAC,oBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAAC,iBAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/banner/banner.vue.js

@@ -0,0 +1,200 @@
+import Modal from "../../common/mixins/modal.js";
+import utils from "../../common/utils.js";
+import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+import DtNoticeIcon from "../notice/notice_icon.vue.js";
+import DtNoticeContent from "../notice/notice_content.vue.js";
+import DtNoticeAction from "../notice/notice_action.vue.js";
+import { NOTICE_KINDS } from "../notice/notice_constants.js";
+const _sfc_main = {
+  name: "DtBanner",
+  components: {
+    DtNoticeIcon,
+    DtNoticeContent,
+    DtNoticeAction
+  },
+  mixins: [Modal, SrOnlyCloseButtonMixin],
+  props: {
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default() {
+        return utils.getUniqueString();
+      }
+    },
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default() {
+        return utils.getUniqueString();
+      }
+    },
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * This will also change the aria role from status to alertdialog.
+     * and will modally trap the keyboard focus in the dialog as soon as it displays.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pins the banner to the top of the window and pushes all app content down.
+     * @values true, false
+     */
+    pinned: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(kind) {
+        return NOTICE_KINDS.includes(kind);
+      }
+    },
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Inner dialog class
+     */
+    dialogClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Banner background image
+     */
+    backgroundImage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Background image size, follows the background-size CSS property values
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" target="_blank">
+     *   CSS background-sizes
+     * </a>
+     */
+    backgroundSize: {
+      type: String,
+      default: "cover"
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close"
+  ],
+  computed: {
+    role() {
+      return this.important ? "alertdialog" : "status";
+    },
+    bannerClass() {
+      const kindClasses = {
+        error: "d-banner--error",
+        info: "d-banner--info",
+        success: "d-banner--success",
+        warning: "d-banner--warning",
+        base: "d-banner--base"
+      };
+      return [
+        "d-banner",
+        kindClasses[this.kind],
+        {
+          "d-banner--important": this.important,
+          "d-banner--pinned": this.pinned
+        }
+      ];
+    },
+    bannerBackgroundImage() {
+      if (this.backgroundImage === "") return null;
+      return `background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`;
+    }
+  },
+  mounted() {
+    if (this.important) {
+      this.focusFirstElement();
+    }
+  },
+  methods: {
+    trapFocus(e) {
+      if (this.important) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("aside", { class: _vm.bannerClass, style: _vm.bannerBackgroundImage, on: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
+    return _vm.trapFocus.apply(null, arguments);
+  } } }, [_c("div", { staticClass: "d-banner__dialog", class: _vm.dialogClass, attrs: { "role": _vm.role, "aria-labelledby": _vm.titleId, "aria-describedby": _vm.contentId } }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({ attrs: { "kind": _vm.kind } }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
+    return [_vm._t("titleOverride")];
+  }, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default")], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.$listeners), [_vm._t("action")], 2)], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const banner = __component__.exports;
+export {
+  banner as default
+};
+//# sourceMappingURL=banner.vue.js.map

package/dist/vue2/components/banner/banner.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.vue.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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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":[],"mappings":";;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,OAAA,sBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.cjs

@@ -0,0 +1,72 @@
+"use strict";
+const breadcrumbs_constants = require("./breadcrumbs_constants.cjs");
+const link_constants = require("../link/link_constants.cjs");
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const link = require("../link/link.vue.cjs");
+const _sfc_main = {
+  name: "DtBreadcrumbItem",
+  components: {
+    DtLink: link
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Passed through to link. If true, applies inverted styles to the link.
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Applies selected styles to the breadcrumb
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Describes the breadcrumb. Overridden by default slot
+     */
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      BREADCRUMB_ITEM_SELECTED_MODIFIER: breadcrumbs_constants.BREADCRUMB_ITEM_SELECTED_MODIFIER
+    };
+  },
+  computed: {
+    linkKind() {
+      return this.inverted ? "" : link_constants.MUTED;
+    },
+    linkInverted() {
+      return !!this.inverted;
+    },
+    ariaCurrent() {
+      return this.selected ? "location" : void 0;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("li", { class: [
+    "d-breadcrumbs__item",
+    { [_vm.BREADCRUMB_ITEM_SELECTED_MODIFIER]: _vm.selected }
+  ], attrs: { "data-qa": "dt-breadcrumb-item" } }, [_c("dt-link", _vm._b({ attrs: { "kind": _vm.linkKind, "inverted": _vm.linkInverted, "aria-current": _vm.ariaCurrent, "data-qa": "breadcrumb-item" } }, "dt-link", _vm.$attrs, false), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+  })], 2)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtBreadcrumbItem = __component__.exports;
+module.exports = DtBreadcrumbItem;
+//# sourceMappingURL=breadcrumb_item.vue.cjs.map

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb_item.vue.cjs","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\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"],"names":["DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED"],"mappings":";;;;;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA;AAAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mCAAAC,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAA,KAAAC;IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.js

@@ -0,0 +1,73 @@
+import { BREADCRUMB_ITEM_SELECTED_MODIFIER } from "./breadcrumbs_constants.js";
+import { MUTED } from "../link/link_constants.js";
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+import DtLink from "../link/link.vue.js";
+const _sfc_main = {
+  name: "DtBreadcrumbItem",
+  components: {
+    DtLink
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Passed through to link. If true, applies inverted styles to the link.
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Applies selected styles to the breadcrumb
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Describes the breadcrumb. Overridden by default slot
+     */
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      BREADCRUMB_ITEM_SELECTED_MODIFIER
+    };
+  },
+  computed: {
+    linkKind() {
+      return this.inverted ? "" : MUTED;
+    },
+    linkInverted() {
+      return !!this.inverted;
+    },
+    ariaCurrent() {
+      return this.selected ? "location" : void 0;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("li", { class: [
+    "d-breadcrumbs__item",
+    { [_vm.BREADCRUMB_ITEM_SELECTED_MODIFIER]: _vm.selected }
+  ], attrs: { "data-qa": "dt-breadcrumb-item" } }, [_c("dt-link", _vm._b({ attrs: { "kind": _vm.linkKind, "inverted": _vm.linkInverted, "aria-current": _vm.ariaCurrent, "data-qa": "breadcrumb-item" } }, "dt-link", _vm.$attrs, false), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+  })], 2)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtBreadcrumbItem = __component__.exports;
+export {
+  DtBreadcrumbItem as default
+};
+//# sourceMappingURL=breadcrumb_item.vue.js.map

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb_item.vue.js","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\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"],"names":[],"mappings":";;;;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}