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

Dialpad's Dialtone design system monorepo

import g from "../../common/mixins/modal.js";
import l from "../../common/utils/index.js";
import { resolveComponent as r, createElementBlock as p, openBlock as s, withKeys as h, normalizeStyle as y, normalizeClass as c, createElementVNode as k, createBlock as _, createCommentVNode as C, createVNode as u, withCtx as o, renderSlot as a } from "vue";
import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import S from "../notice/notice-action.js";
import B from "../notice/notice-content.js";
import N from "../notice/notice-icon.js";
import { NOTICE_KINDS as v } from "../notice/notice-constants.js";
const D = {
  compatConfig: { MODE: 3 },
  name: "DtBanner",
  components: {
    DtNoticeIcon: N,
    DtNoticeContent: B,
    DtNoticeAction: S
  },
  mixins: [g],
  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 l.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 l.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 v.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);
    }
  }
}, w = ["role", "aria-labelledby", "aria-describedby"];
function z(e, i, t, E, F, n) {
  const m = r("dt-notice-icon"), f = r("dt-notice-content"), b = r("dt-notice-action");
  return s(), p("aside", {
    class: c(n.bannerClass),
    style: y(n.bannerBackgroundImage),
    onKeydown: i[1] || (i[1] = h((...d) => n.trapFocus && n.trapFocus(...d), ["tab"]))
  }, [
    k("div", {
      class: c(["d-banner__dialog", t.dialogClass]),
      role: n.role,
      "aria-labelledby": t.titleId,
      "aria-describedby": t.contentId
    }, [
      t.hideIcon ? C("", !0) : (s(), _(m, {
        key: 0,
        kind: t.kind
      }, {
        default: o(() => [
          a(e.$slots, "icon")
        ]),
        _: 3
      }, 8, ["kind"])),
      u(f, {
        "title-id": t.titleId,
        "content-id": t.contentId,
        title: t.title
      }, {
        titleOverride: o(() => [
          a(e.$slots, "titleOverride")
        ]),
        default: o(() => [
          a(e.$slots, "default")
        ]),
        _: 3
      }, 8, ["title-id", "content-id", "title"]),
      u(b, {
        "hide-action": t.hideAction,
        "hide-close": t.hideClose,
        onClose: i[0] || (i[0] = (d) => e.$emit("close"))
      }, {
        default: o(() => [
          a(e.$slots, "action")
        ]),
        _: 3
      }, 8, ["hide-action", "hide-close"])
    ], 10, w)
  ], 38);
}
const P = /* @__PURE__ */ I(D, [["render", z]]);
export {
  P as default
};
//# sourceMappingURL=banner.js.map