@dialpad/dialtone 9.70.1 → 9.71.0-beta.2

package/dist/vue3/lib/banner.cjs

@@ -1,243 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../chunks/modal-VgxXAQFP.js");
-const common_utils = require("../common/utils.cjs");
-const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
-const vue = require("vue");
-const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-const notice_action = require("../chunks/notice_action-WTucGhvr.js");
-const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
-require("../common/constants.cjs");
-require("./icon.cjs");
-require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-require("./button.cjs");
-require("../chunks/link_constants-x8NwdqmA.js");
-const _sfc_main = {
-  name: "DtBanner",
-  components: {
-    DtNoticeIcon: notice_action.DtNoticeIcon,
-    DtNoticeContent: notice_action.DtNoticeContent,
-    DtNoticeAction: notice_action.DtNoticeAction
-  },
-  mixins: [modal.Modal, sr_only_close_button.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 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);
-      }
-    }
-  }
-};
-const _hoisted_1 = ["role", "aria-labelledby", "aria-describedby"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_notice_icon = vue.resolveComponent("dt-notice-icon");
-  const _component_dt_notice_content = vue.resolveComponent("dt-notice-content");
-  const _component_dt_notice_action = vue.resolveComponent("dt-notice-action");
-  return vue.openBlock(), vue.createElementBlock("aside", {
-    class: vue.normalizeClass($options.bannerClass),
-    style: vue.normalizeStyle($options.bannerBackgroundImage),
-    onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => $options.trapFocus && $options.trapFocus(...args), ["tab"]))
-  }, [
-    vue.createElementVNode("div", {
-      class: vue.normalizeClass(["d-banner__dialog", $props.dialogClass]),
-      role: $options.role,
-      "aria-labelledby": $props.titleId,
-      "aria-describedby": $props.contentId
-    }, [
-      !$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
-        key: 0,
-        kind: $props.kind
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "icon")
-        ]),
-        _: 3
-      }, 8, ["kind"])) : vue.createCommentVNode("", true),
-      vue.createVNode(_component_dt_notice_content, {
-        "title-id": $props.titleId,
-        "content-id": $props.contentId,
-        title: $props.title
-      }, {
-        titleOverride: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "titleOverride")
-        ]),
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["title-id", "content-id", "title"]),
-      vue.createVNode(_component_dt_notice_action, {
-        "hide-action": $props.hideAction,
-        "hide-close": $props.hideClose,
-        "close-button-props": $props.closeButtonProps,
-        "visually-hidden-close": _ctx.visuallyHiddenClose,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "action")
-        ]),
-        _: 3
-      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-    ], 10, _hoisted_1)
-  ], 38);
-}
-const banner = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+const banner = require("../components/banner/banner.vue.cjs");
 exports.DtBanner = banner;
 //# sourceMappingURL=banner.cjs.map

package/dist/vue3/lib/banner.cjs.map

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

package/dist/vue3/lib/banner.js

@@ -1,243 +1,5 @@
-import { Modal } from "../chunks/modal-XOr4kiNZ.js";
-import utils from "../common/utils.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, withKeys, createElementVNode, createBlock, withCtx, renderSlot, createCommentVNode, createVNode } from "vue";
-import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-p-ePanW_.js";
-import { NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
-import "../common/constants.js";
-import "./icon.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-import "./button.js";
-import "../chunks/link_constants-AfTWrr-n.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);
-      }
-    }
-  }
-};
-const _hoisted_1 = ["role", "aria-labelledby", "aria-describedby"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_notice_icon = resolveComponent("dt-notice-icon");
-  const _component_dt_notice_content = resolveComponent("dt-notice-content");
-  const _component_dt_notice_action = resolveComponent("dt-notice-action");
-  return openBlock(), createElementBlock("aside", {
-    class: normalizeClass($options.bannerClass),
-    style: normalizeStyle($options.bannerBackgroundImage),
-    onKeydown: _cache[1] || (_cache[1] = withKeys((...args) => $options.trapFocus && $options.trapFocus(...args), ["tab"]))
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(["d-banner__dialog", $props.dialogClass]),
-      role: $options.role,
-      "aria-labelledby": $props.titleId,
-      "aria-describedby": $props.contentId
-    }, [
-      !$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
-        key: 0,
-        kind: $props.kind
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "icon")
-        ]),
-        _: 3
-      }, 8, ["kind"])) : createCommentVNode("", true),
-      createVNode(_component_dt_notice_content, {
-        "title-id": $props.titleId,
-        "content-id": $props.contentId,
-        title: $props.title
-      }, {
-        titleOverride: withCtx(() => [
-          renderSlot(_ctx.$slots, "titleOverride")
-        ]),
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["title-id", "content-id", "title"]),
-      createVNode(_component_dt_notice_action, {
-        "hide-action": $props.hideAction,
-        "hide-close": $props.hideClose,
-        "close-button-props": $props.closeButtonProps,
-        "visually-hidden-close": _ctx.visuallyHiddenClose,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "action")
-        ]),
-        _: 3
-      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-    ], 10, _hoisted_1)
-  ], 38);
-}
-const banner = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { default as default2 } from "../components/banner/banner.vue.js";
 export {
-  banner as DtBanner
+  default2 as DtBanner
 };
 //# sourceMappingURL=banner.js.map

package/dist/vue3/lib/banner.js.map

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