@dialpad/dialtone 9.65.1 → 9.66.0

package/dist/vue2/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-ZaGdAHz7.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-2Q9Ny1Nc.js");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const notice_action = require("../chunks/notice_action-P6uDyE9x.js");
+const notice_action = require("../chunks/notice_action-tEvvMg7Q.js");
 const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
 require("../common/constants.cjs");
 require("vue");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.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 === "")
@@ -186,25 +182,53 @@ const _sfc_main = {
 };
 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)]);
+  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.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const banner = __component__.exports;
 exports.DtBanner = banner;
 //# sourceMappingURL=banner.cjs.map

package/dist/vue2/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        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":"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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        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":["_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"],"mappings":"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"}

package/dist/vue2/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-81bHIpPu.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-IjMVfBDE.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-IRUoLX2d.js";
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-qQr3K2TC.js";
 import { NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
 import "../common/constants.js";
 import "vue";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.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 === "")
@@ -184,25 +180,53 @@ const _sfc_main = {
 };
 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)]);
+  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,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const banner = __component__.exports;
 export {
   banner as DtBanner

package/dist/vue2/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        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;AAAA,eAAA;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;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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        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":["_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"],"mappings":"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"}

package/dist/vue2/lib/breadcrumbs.cjs

@@ -56,24 +56,26 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = 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 _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$1 = [];
-var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const DtBreadcrumbItem = __component__$1.exports;
 const _sfc_main = {
   name: "DtBreadcrumbs",
@@ -88,7 +90,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;
         });
       }
@@ -122,26 +127,27 @@ const _sfc_main = {
 };
 var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("nav", { class: [
-    "d-breadcrumbs",
-    { [_vm.BREADCRUMBS_INVERTED_MODIFIER]: _vm.inverted }
-  ], attrs: { "aria-label": _vm.ariaLabel, "data-qa": "dt-breadcrumbs" } }, [_c("ol", [_vm._t("default", function() {
+  return _c("nav", {
+    class: ["d-breadcrumbs", {
+      [_vm.BREADCRUMBS_INVERTED_MODIFIER]: _vm.inverted
+    }],
+    attrs: {
+      "aria-label": _vm.ariaLabel,
+      "data-qa": "dt-breadcrumbs"
+    }
+  }, [_c("ol", [_vm._t("default", function() {
     return _vm._l(_vm.breadcrumbs, function(item, index) {
-      return _c("dt-breadcrumb-item", _vm._g(_vm._b({ key: _vm.getBreadcrumbItemKey(index), attrs: { "inverted": _vm.inverted } }, "dt-breadcrumb-item", item, false), _vm.$listeners));
+      return _c("dt-breadcrumb-item", _vm._g(_vm._b({
+        key: _vm.getBreadcrumbItemKey(index),
+        attrs: {
+          "inverted": _vm.inverted
+        }
+      }, "dt-breadcrumb-item", item, false), _vm.$listeners));
     });
   })], 2)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const breadcrumbs = __component__.exports;
 exports.BREADCRUMBS_INVERTED_MODIFIER = BREADCRUMBS_INVERTED_MODIFIER;
 exports.BREADCRUMB_ITEM_SELECTED_MODIFIER = BREADCRUMB_ITEM_SELECTED_MODIFIER;

package/dist/vue2/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          v-on=\"$listeners\"\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","breadcrumbs","utils"],"mappings":";;;;;;;;AAAY,MAAC,oCAAoC;AACrC,MAAC,gCAAgC;AC2B7C,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC,SAAA;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,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;;;;;;;;;;;;;;;;;;;;;;AChDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAC,cAAA;AACA,eAAAA,aAAA,MAAA,CAAA,EAAA,MAAA,MAAA,MAAA;AACA,iBAAA,SAAA,UAAA,UAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA,OAAA;AACA,aAAA,oBAAA,KAAA,IAAAC,aAAAA,QAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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          v-on=\"$listeners\"\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","DtBreadcrumbItem","breadcrumbs","Array","validate","every","href","ariaLabel","methods","getBreadcrumbItemKey","index","utils","getUniqueString"],"mappings":";;;;;;;;AAAO,MAAMA,oCAAoC;AAC1C,MAAMC,gCAAgC;AC2B7C,MAAAC,cAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAC,QAAAA,SAAAA;AAAAA,EACA;AAAA,EAEAC,cAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,UAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,UAAA;AAAA,MACAH,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAE,OAAA;AAAA,MACAJ,MAAAK;AAAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,OAAA;AACA,WAAA;AAAA,MACAf;AAAAA;EAEA;AAAA,EAEAgB,UAAA;AAAA,IACAC,WAAA;AACA,aAAA,KAAAT,WAAA,KAAAU;IACA;AAAA,IAEAC,eAAA;AACA,aAAA,CAAA,CAAA,KAAAX;AAAAA,IACA;AAAA,IAEAY,cAAA;AACA,aAAA,KAAAR,WAAA,aAAAS;AAAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;AChDA,MAAAnB,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAkB;AAAAA,EACA;AAAA,EAEAf,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAgB,aAAA;AAAA,MACAd,MAAAe;AAAAA,MACAb,SAAAA,MAAA,CAAA;AAAA,MACAc,SAAAF,cAAA;AACA,eAAAA,aAAAG,MAAA,CAAA;AAAA,UAAAC;AAAAA,UAAAd;AAAAA,QAAA,MAAA;AACA,iBAAAc,SAAAN,UAAAR,UAAAQ;AAAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAb,UAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAiB,WAAA;AAAA,MACAnB,MAAAK;AAAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,OAAA;AACA,WAAA;AAAA,MACAd;AAAAA;EAEA;AAAA,EAEA4B,SAAA;AAAA,IACAC,qBAAAC,OAAA;AACA,aAAA,oBAAAA,KAAA,IAAAC,aAAAA,QAAAC,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/breadcrumbs.js

@@ -54,24 +54,26 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = 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 _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$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const DtBreadcrumbItem = __component__$1.exports;
 const _sfc_main = {
   name: "DtBreadcrumbs",
@@ -86,7 +88,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;
         });
       }
@@ -120,26 +125,27 @@ const _sfc_main = {
 };
 var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("nav", { class: [
-    "d-breadcrumbs",
-    { [_vm.BREADCRUMBS_INVERTED_MODIFIER]: _vm.inverted }
-  ], attrs: { "aria-label": _vm.ariaLabel, "data-qa": "dt-breadcrumbs" } }, [_c("ol", [_vm._t("default", function() {
+  return _c("nav", {
+    class: ["d-breadcrumbs", {
+      [_vm.BREADCRUMBS_INVERTED_MODIFIER]: _vm.inverted
+    }],
+    attrs: {
+      "aria-label": _vm.ariaLabel,
+      "data-qa": "dt-breadcrumbs"
+    }
+  }, [_c("ol", [_vm._t("default", function() {
     return _vm._l(_vm.breadcrumbs, function(item, index) {
-      return _c("dt-breadcrumb-item", _vm._g(_vm._b({ key: _vm.getBreadcrumbItemKey(index), attrs: { "inverted": _vm.inverted } }, "dt-breadcrumb-item", item, false), _vm.$listeners));
+      return _c("dt-breadcrumb-item", _vm._g(_vm._b({
+        key: _vm.getBreadcrumbItemKey(index),
+        attrs: {
+          "inverted": _vm.inverted
+        }
+      }, "dt-breadcrumb-item", item, false), _vm.$listeners));
     });
   })], 2)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const breadcrumbs = __component__.exports;
 export {
   BREADCRUMBS_INVERTED_MODIFIER,

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","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          v-on=\"$listeners\"\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","breadcrumbs"],"mappings":";;;;;;AAAY,MAAC,oCAAoC;AACrC,MAAC,gCAAgC;AC2B7C,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;;;;;;AChDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAC,cAAA;AACA,eAAAA,aAAA,MAAA,CAAA,EAAA,MAAA,MAAA,MAAA;AACA,iBAAA,SAAA,UAAA,UAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA,OAAA;AACA,aAAA,oBAAA,KAAA,IAAA,MAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"breadcrumbs.js","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          v-on=\"$listeners\"\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","DtBreadcrumbItem","breadcrumbs","Array","validate","every","href","ariaLabel","methods","getBreadcrumbItemKey","index","utils","getUniqueString"],"mappings":";;;;;;AAAO,MAAMA,oCAAoC;AAC1C,MAAMC,gCAAgC;AC2B7C,MAAAC,cAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAC;AAAAA,EACA;AAAA,EAEAC,cAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,UAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,UAAA;AAAA,MACAH,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAE,OAAA;AAAA,MACAJ,MAAAK;AAAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,OAAA;AACA,WAAA;AAAA,MACAf;AAAAA;EAEA;AAAA,EAEAgB,UAAA;AAAA,IACAC,WAAA;AACA,aAAA,KAAAT,WAAA,KAAAU;AAAAA,IACA;AAAA,IAEAC,eAAA;AACA,aAAA,CAAA,CAAA,KAAAX;AAAAA,IACA;AAAA,IAEAY,cAAA;AACA,aAAA,KAAAR,WAAA,aAAAS;AAAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;AChDA,MAAAnB,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAkB;AAAAA,EACA;AAAA,EAEAf,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAgB,aAAA;AAAA,MACAd,MAAAe;AAAAA,MACAb,SAAAA,MAAA,CAAA;AAAA,MACAc,SAAAF,cAAA;AACA,eAAAA,aAAAG,MAAA,CAAA;AAAA,UAAAC;AAAAA,UAAAd;AAAAA,QAAA,MAAA;AACA,iBAAAc,SAAAN,UAAAR,UAAAQ;AAAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAb,UAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAiB,WAAA;AAAA,MACAnB,MAAAK;AAAAA,MACAH,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAI,OAAA;AACA,WAAA;AAAA,MACAd;AAAAA;EAEA;AAAA,EAEA4B,SAAA;AAAA,IACAC,qBAAAC,OAAA;AACA,aAAA,oBAAAA,KAAA,IAAAC,MAAAC,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/button-group.cjs

@@ -26,22 +26,15 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: [
-    "d-btn-group",
-    _vm.BUTTON_GROUP_ALIGNMENT[_vm.alignment]
-  ], attrs: { "role": "group" } }, [_vm._t("default")], 2);
+  return _c("div", {
+    class: ["d-btn-group", _vm.BUTTON_GROUP_ALIGNMENT[_vm.alignment]],
+    attrs: {
+      "role": "group"
+    }
+  }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const button_group = __component__.exports;
 exports.BUTTON_GROUP_ALIGNMENT = BUTTON_GROUP_ALIGNMENT;
 exports.DtButtonGroup = button_group;