@dialpad/dialtone/dist/vue2/lib/banner/banner.js

Dialpad's Dialtone design system monorepo

import a from "../../common/mixins/modal.js";
import i from "../../common/utils/index.js";
import { n as o } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import s from "../notice/notice-action.js";
import d from "../notice/notice-content.js";
import l from "../notice/notice-icon.js";
import { NOTICE_KINDS as c } from "../notice/notice-constants.js";
const u = {
  name: "DtBanner",
  components: {
    DtNoticeIcon: l,
    DtNoticeContent: d,
    DtNoticeAction: s
  },
  mixins: [a],
  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 i.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 i.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: !1
    },
    /**
     * Pins the banner to the top of the window and pushes all app content down.
     * @values true, false
     */
    pinned: {
      type: Boolean,
      default: !1
    },
    /**
     * Severity level of the notice, sets the icon and background
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validate(e) {
        return c.includes(e);
      }
    },
    /**
     * Hides the close button from the notice
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the icon from the notice
     * @values true, false
     */
    hideIcon: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the action from the notice
     * @values true, false
     */
    hideAction: {
      type: Boolean,
      default: !1
    },
    /**
     * 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() {
      return [
        "d-banner",
        {
          error: "d-banner--error",
          info: "d-banner--info",
          success: "d-banner--success",
          warning: "d-banner--warning",
          base: "d-banner--base"
        }[this.kind],
        {
          "d-banner--important": this.important,
          "d-banner--pinned": this.pinned
        }
      ];
    },
    bannerBackgroundImage() {
      return this.backgroundImage === "" ? null : `background-image: url(${this.backgroundImage});
              background-size: ${this.backgroundSize};`;
    }
  },
  mounted() {
    this.important && this.focusFirstElement();
  },
  methods: {
    trapFocus(e) {
      this.important && this.focusTrappedTabPress(e);
    }
  }
};
var p = function() {
  var t = this, n = t._self._c;
  return n("aside", { class: t.bannerClass, style: t.bannerBackgroundImage, on: { keydown: function(r) {
    return !r.type.indexOf("key") && t._k(r.keyCode, "tab", 9, r.key, "Tab") ? null : t.trapFocus.apply(null, arguments);
  } } }, [n("div", { staticClass: "d-banner__dialog", class: t.dialogClass, attrs: { role: t.role, "aria-labelledby": t.titleId, "aria-describedby": t.contentId } }, [t.hideIcon ? t._e() : n("dt-notice-icon", t._g({ attrs: { kind: t.kind } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
    return [t._t("titleOverride")];
  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default")], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose } }, t.$listeners), [t._t("action")], 2)], 1)]);
}, f = [], m = /* @__PURE__ */ o(
  u,
  p,
  f
);
const C = m.exports;
export {
  C as default
};
//# sourceMappingURL=banner.js.map