import { r as c, f as r, h as i, H as f, g as d } from "./reactcomponent-44b70bf6.mjs";
import "react";
import "react-dom";
var l;
(function(t) {
  t.TOP_LEFT = "top-left", t.TOP_CENTER = "top-center", t.TOP_RIGHT = "top-right", t.BOTTOM_CENTER = "bottom-center", t.BOTTOM_LEFT = "bottom-left", t.BOTTOM_RIGHT = "bottom-right";
})(l || (l = {}));
var n;
(function(t) {
  t.Error = "error", t.Info = "info", t.Success = "success", t.Warning = "warning", t.None = "none";
})(n || (n = {}));
const h = ':host{padding:16px;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";position:fixed;z-index:1000;display:flex;flex-direction:column}:host(.top-left){top:0;left:0}:host(.top-center){top:0;align-items:center;left:50%;transform:translate(-50%, 0)}:host(.top-right){top:0;right:0;align-items:flex-end}:host(.bottom-left){bottom:0;left:0}:host(.bottom-center){bottom:0;align-items:center;left:50%;transform:translate(-50%, 0)}:host(.bottom-right){bottom:0;right:0;align-items:flex-end}.notification{margin-top:16px;display:flex;flex-direction:row;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 1px 1px rgba(0, 0, 0, 0.2);border-radius:2px;background-color:#fcfcfc;overflow:hidden}.notification .icon{width:48px;display:flex;justify-content:center;align-items:center}.notification .icon-type--error{background-color:#ef4444}.notification .icon-type--success{background-color:#22c55e}.notification .icon-type--warning{background-color:#f59e0b}.notification .icon-type--info{background-color:#6b7280}.notification .label{padding-left:16px;flex:1;font-size:0.875rem}.notification .btn{padding-left:24px;padding-right:16px;display:flex;align-items:center;border:none;background-color:#fcfcfc}.notification .btn:focus{outline:none;box-shadow:none}', p = class {
  constructor(t) {
    c(this, t), this.notifications = [], this.notificationId = 0, this.position = l.BOTTOM_RIGHT, this.duration = 3;
  }
  /**
   * Show a notification.
   *
   * @param {string} message - Message to display.
   * @param {string} [type='none'] - Type of notification. Available types: 'info', 'warning', 'success', 'error' and 'none'.
   * @param {boolean} [sticky=false] - Set message as sticky to prevent it from disappearing.
   * @returns {Promise<void>}
   */
  async push(t, e = "none", o = !1) {
    if (typeof t != "string" || t.length < 1)
      return;
    if (!Object.values(n).some((a) => a === e)) {
      console.error("Invalid notification type");
      return;
    }
    const s = {
      id: this.notificationId,
      message: t,
      sticky: o,
      type: e
    };
    o === !1 && (s.timer = window.setTimeout(() => this.dismiss(s.id), this.duration * 1e3)), this.notificationId++, this.notifications.push(s), r(this.hostElement);
  }
  /**
   * Clear all notifications.
   *
   * @returns {Promise<void>}
   */
  async clearAll() {
    this.notifications = [], r(this.hostElement);
  }
  /**
   * Dismiss a single notification.
   *
   * @param {number} id
   */
  dismiss(t) {
    this.notifications = this.notifications.filter((e) => e.id !== t), r(this.hostElement);
  }
  render() {
    return i(f, { class: this.position }, this.notifications.map((t) => this.renderNotification(t)));
  }
  /**
   * Get JSX for notification.
   *
   * @param {NotificationMessage} { id, message }
   * @returns {JSX.Element}
   */
  renderNotification({ id: t, message: e, type: o }) {
    return i("div", { class: "notification", role: "alert" }, o && o !== "none" ? this.renderIcon(o) : null, i("p", { class: "label" }, e), i("button", { type: "button", "aria-label": "Dismiss notification", class: "btn", onClick: () => this.dismiss(t) }, i("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: "#1E2025" }))));
  }
  /**
   * Get JSX for type-icon.
   *
   * @param {NotificationType} type
   * @returns {JSX.Element}
   */
  renderIcon(t) {
    return t === n.Error ? i("div", { class: "icon icon-type--error" }, i("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM9 15V13H11V15H9ZM9 5V11H11V5H9Z", fill: "#FCFCFC" }))) : t === n.Success ? i("div", { class: "icon icon-type--success" }, i("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { d: "M5.99997 11.17L1.82997 7L0.409973 8.41L5.99997 14L18 2L16.59 0.59L5.99997 11.17Z", fill: "#FCFCFC" }))) : t === n.Warning ? i("div", { class: "icon icon-type--warning" }, i("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 19L11 0L0 19H22ZM10 16V14H12V16H10ZM10 12H12V8H10V12Z", fill: "#FCFCFC" }))) : i("div", { class: "icon icon-type--info" }, i("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM9 15V9H11V15H9ZM9 5V7H11V5H9Z", fill: "#FCFCFC" })));
  }
  get hostElement() {
    return d(this);
  }
};
p.style = h;
export {
  p as mi_notification
};
//# sourceMappingURL=mi-notification.entry-33f32fde.mjs.map
