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

Dialpad's Dialtone design system monorepo

import f from "./notice-icon.js";
import m from "./notice-content.js";
import p from "./notice-action.js";
import { NOTICE_ROLES as y, NOTICE_KINDS as h } from "./notice-constants.js";
import _ from "../../common/mixins/sr-only-close-button.js";
import { resolveComponent as i, openBlock as d, createElementBlock as C, normalizeClass as v, createBlock as B, withCtx as o, renderSlot as n, createCommentVNode as k, createVNode as c } from "vue";
import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const b = {
  compatConfig: { MODE: 3 },
  name: "DtNotice",
  components: {
    DtNoticeIcon: f,
    DtNoticeContent: m,
    DtNoticeAction: p
  },
  mixins: [_],
  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 y.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 h.includes(e);
      }
    },
    /**
     * Props for the notice close button.
     */
    closeButtonProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * 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",
    /**
     * Native button click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  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 }
      ];
    }
  }
};
function N(e, l, t, S, g, s) {
  const a = i("dt-notice-icon"), r = i("dt-notice-content"), u = i("dt-notice-action");
  return d(), C("aside", {
    class: v(s.noticeClass),
    "data-qa": "notice"
  }, [
    t.hideIcon ? k("", !0) : (d(), B(a, {
      key: 0,
      kind: t.kind
    }, {
      default: o(() => [
        n(e.$slots, "icon")
      ]),
      _: 3
    }, 8, ["kind"])),
    c(r, {
      "title-id": t.titleId,
      "content-id": t.contentId,
      title: t.title,
      role: t.role
    }, {
      titleOverride: o(() => [
        n(e.$slots, "titleOverride")
      ]),
      default: o(() => [
        n(e.$slots, "default")
      ]),
      _: 3
    }, 8, ["title-id", "content-id", "title", "role"]),
    c(u, {
      "hide-action": t.hideAction,
      "hide-close": t.hideClose,
      "close-button-props": t.closeButtonProps,
      "visually-hidden-close": e.visuallyHiddenClose,
      "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
      onClose: l[0] || (l[0] = (O) => e.$emit("close"))
    }, {
      default: o(() => [
        n(e.$slots, "action")
      ]),
      _: 3
    }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
  ], 2);
}
const L = /* @__PURE__ */ I(b, [["render", N]]);
export {
  L as default
};
//# sourceMappingURL=notice.js.map