@dialpad/dialtone-vue/dist/lib/notice/notice.js

Vue component library for Dialpad's design system Dialtone

import i from "./notice-icon.js";
import o from "./notice-content.js";
import r from "./notice-action.js";
import { NOTICE_KINDS as c, NOTICE_ROLES as a } from "./notice-constants.js";
import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const s = {
  name: "DtNotice",
  components: {
    DtNoticeIcon: i,
    DtNoticeContent: o,
    DtNoticeAction: r
  },
  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: void 0
    },
    /**
     * 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: void 0
    },
    /**
     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
     */
    title: {
      type: String,
      default: ""
    },
    /**
     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
     * important message that does contain interactive elements.
     * @values alert, alertdialog, status
     */
    role: {
      type: String,
      default: "status",
      validate(e) {
        return a.includes(e);
      }
    },
    /**
     * Used in scenarios where the message needs to visually dominate the screen.
     * This will also change the aria role from status to alert.
     * @values true, false
     */
    important: {
      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
    },
    /**
     * Truncates the content instead of wrapping.
     * Used when the notice needs to have a fixed height.
     * @values true, false
     */
    truncateText: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close"
  ],
  computed: {
    noticeClass() {
      return [
        "d-notice",
        {
          error: "d-notice--error",
          info: "d-notice--info",
          success: "d-notice--success",
          warning: "d-notice--warning",
          base: "d-notice--base"
        }[this.kind],
        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
      ];
    }
  }
};
var l = function() {
  var t = this, n = t._self._c;
  return n("aside", { class: t.noticeClass, attrs: { "data-qa": "notice" } }, [t.hideIcon ? t._e() : n("dt-notice-icon", { attrs: { kind: t.kind } }, [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, 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);
}, u = [], f = /* @__PURE__ */ d(
  s,
  l,
  u
);
const I = f.exports;
export {
  I as default
};
//# sourceMappingURL=notice.js.map