ranui/dist/message-taM7-Qsa.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as o, _ as v, i, m as x } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
import { a as m, i as b, n as y, o as w, t as _ } from "./utils-U-9uH7EX.js";
import { a as k, n as d } from "./ssr-BzykYefm.js";
import { i as z } from "./icon-DgLPjeVe.js";
import { t as A } from "./check-circle-fill-DWM-2VQc.js";
import { t as C } from "./close-circle-fill-DqvDy_Bf.js";
import { t as M } from "./info-circle-fill-DCNQCPZ9.js";
import { t as S } from "./warning-circle-fill-RPdgezdq.js";
var I = ':host{display:var(--ran-message-host-display, block)}:host([type="toast"]) .ran-message-notice{padding:var(--ran-message-notice-toast-padding, 8px);text-align:var(--ran-message-notice-toast-text-align, center);max-width:var(--ran-message-notice-toast-max-width, 90%);margin:var(--ran-message-notice-toast-margin, 0 auto);word-break:var(--ran-message-notice-toast-word-break, break-all)}:host([type="toast"]) .ran-message-notice-content{display:var(--ran-message-content-toast-display, inline-block);padding:var(--ran-message-content-toast-padding, var(--ran-space-3, 12px) var(--ran-space-4, 16px));background:var(--ran-message-content-toast-background, rgba(0, 0, 0, .7));border-radius:var(--ran-message-content-toast-border-radius, var(--ran-radius-sm, 7px));pointer-events:var(--ran-message-content-toast-pointer-events, all)}:host([type="toast"]) .ran-message-notice-content-info{align-items:var(--ran-message-info-toast-align-items, center);display:var(--ran-message-info-toast-display, flex)}:host([type="toast"]) .ran-message-notice-content-info span{margin:var(--ran-message-text-toast-margin, 0);padding:var(--ran-message-text-toast-padding, 0);font-size:var(--ran-message-text-toast-font-size, var(--ran-text-copy-2, 14px));font-weight:var(--ran-message-text-toast-font-weight, var(--ran-text-copy-weight, 400));font-variant:var(--ran-message-text-toast-font-variant, tabular-nums);list-style:var(--ran-message-text-toast-list-style, none);font-feature-settings:var(--ran-message-text-toast-font-feature-settings, "tnum");z-index:var(--ran-message-text-toast-z-index, 1010);width:var(--ran-message-text-toast-width, 100%);pointer-events:var(--ran-message-text-toast-pointer-events, none);color:var(--ran-message-text-toast-color, #fff)}.ran-message-notice{padding:var(--ran-message-notice-padding, 8px);text-align:var(--ran-message-notice-text-align, center);max-width:var(--ran-message-notice-max-width, 90%);margin:var(--ran-message-notice-margin, 0 auto);word-break:var(--ran-message-notice-word-break, break-all)}.ran-message-notice-content{display:var(--ran-message-content-display, inline-block);padding:var(--ran-message-content-padding, var(--ran-space-3, 12px) var(--ran-space-4, 16px));background:var(--ran-message-content-background, var(--ran-color-bg-elevated, #fff));border-image-source:var(--ran-message-content-border-image-source, none);border-image-slice:var(--ran-message-content-border-image-slice, 8);border-image-width:var(--ran-message-content-border-image-width, var(--ran-skin-border-image-width, 4px));border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-message-content-border-radius, var(--ran-radius-md, 12px));box-shadow:var(--ran-message-content-box-shadow, var(--ran-shadow-menu, 0 2px 4px #0000000d, 0 8px 24px -6px #00000024));pointer-events:var(--ran-message-content-pointer-events, all)}.ran-message-notice-content-info{align-items:var(--ran-message-info-align-items, center);display:var(--ran-message-info-display, flex)}.ran-message-notice-content-info span{margin:var(--ran-message-text-margin, 0);padding:var(--ran-message-text-padding, 0);color:var(--ran-message-text-color, var(--ran-color-text, #000000d9));font-size:var(--ran-message-text-font-size, var(--ran-text-copy-2, 14px));font-weight:var(--ran-message-text-font-weight, var(--ran-text-copy-weight, 400));font-variant:var(--ran-message-text-font-variant, tabular-nums);list-style:var(--ran-message-text-list-style, none);font-feature-settings:var(--ran-message-text-font-feature-settings, "tnum");z-index:var(--ran-message-text-z-index, 1010);width:var(--ran-message-text-width, 100%);pointer-events:var(--ran-message-text-pointer-events, none)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:var(--ran-message-notice-padding, 8px);transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:var(--ran-message-notice-padding, 8px);opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:var(--ran-message-box-sizing, border-box);margin:var(--ran-message-margin, 0);padding:var(--ran-message-padding, 0);color:var(--ran-message-color, var(--ran-color-text, #000000d9));font-size:var(--ran-message-font-size, var(--ran-text-copy-2, 14px));font-weight:var(--ran-message-font-weight, var(--ran-text-copy-weight, 400));font-variant:var(--ran-message-font-variant, tabular-nums);line-height:var(--ran-message-line-height, 1.5715);list-style:var(--ran-message-ist-style, none);font-feature-settings:var(--ran-message-font-feature-settings, "tnum");position:var(--ran-message-position, fixed);top:var(--ran-message-top, 8px);left:var(--ran-message-left, 0);z-index:var(--ran-message-z-index, var(--ran-z-message, 1200));width:var(--ran-message-width, 100%);pointer-events:var(--ran-message-pointer-events, none)}:host(.message-in){animation-name:var(--ran-message-in-animation-name, MessageMoveIn);animation-duration:var(--ran-message-in-animation-duration, .3s);animation-timing-function:var(--ran-message-in-animation-timing-function, cubic-bezier(.78, .14, .15, .86));animation-fill-mode:var(--ran-message-in-animation-fill-mode, forwards)}:host(.message-leave){animation-name:var(--ran-message-leave-animation-name, MessageMoveOut);animation-duration:var(--ran-message-leave-animation-duration, .3s);animation-timing-function:var(--ran-message-leave-animation-timing-function, cubic-bezier(.78, .14, .15, .86));animation-fill-mode:var(--ran-message-leave-animation-fill-mode, forwards)}', u = "data-ranui-message-host", R = () => `[${u}="true"]`, T = (e, a) => {
  const t = a?.top ?? 8, n = a?.zIndex ?? 1200;
  e.style.setProperty("position", "fixed"), e.style.setProperty("top", typeof t == "number" ? `${t}px` : String(t)), e.style.setProperty("left", "0"), e.style.setProperty("width", "100%"), e.style.setProperty("z-index", String(n)), e.style.setProperty("pointer-events", "none");
}, P = (e) => typeof document > "u" ? null : e?.getContainer?.() || document.body, E = (e) => {
  if (typeof document > "u") return null;
  const a = P(e) || document.body;
  let t = a.querySelector(R());
  return t || (t = i().attr(u, "true").children(i().class("ranui-message").attr("aria-live", "polite").attr("aria-atomic", "false")).build(), a.appendChild(t)), T(t, e), t.querySelector(".ranui-message");
}, f = 300, p = 3e3;
z({
  "check-circle-fill": A,
  "close-circle-fill": C,
  "info-circle-fill": M,
  "warning-circle-fill": S
});
var D = /* @__PURE__ */ new Map([
  ["success", "check-circle-fill"],
  ["warning", "warning-circle-fill"],
  ["error", "close-circle-fill"],
  ["info", "info-circle-fill"],
  ["toast", null]
]), L = /* @__PURE__ */ new Map([
  ["success", "#52c41a"],
  ["warning", "#faad14"],
  ["error", "#ff4d4f"],
  ["info", "#006bff"],
  ["toast", "rgba(0, 0, 0, 0.7)"]
]), O = class extends d {
  _info;
  _notice;
  _content;
  _icon;
  _span;
  _shadowDom;
  timeId;
  close;
  static get observedAttributes() {
    return [
      "type",
      "content",
      "sheet"
    ];
  }
  constructor() {
    super(), this._shadowDom = _(this, I);
    const e = o(), a = o(), t = o(), n = o(), r = i().class("ran-message-notice").children(i().class("ran-message-notice-content").ref(e).children(i().class("ran-message-notice-content-info").ref(a).children(v("r-icon").ref(t), x().ref(n)))).build();
    this._shadowDom.appendChild(r), this._notice = r, this._content = m(e, "notice content"), this._info = m(a, "notice content info"), this._icon = m(t, "r icon"), this._span = m(n, "span"), this.handlerExternalCss();
  }
  connectedCallback() {
    d.prototype.connectedCallback?.call(this), this.hasAttribute("aria-atomic") || this.setAttribute("aria-atomic", "true");
  }
  get type() {
    return this.getAttribute("type");
  }
  set type(e) {
    e && this.setAttribute("type", e);
  }
  get content() {
    return this.getAttribute("content");
  }
  set content(e) {
    e && this.setAttribute("content", e);
  }
  get sheet() {
    return y(this, "sheet");
  }
  set sheet(e) {
    b(this, "sheet", e);
  }
  handlerExternalCss = () => {
    w(this, this._shadowDom, "sheet", null, this.sheet);
  };
  setA11yRole = (e) => {
    const a = e === "error" || e === "warning";
    this.setAttribute("role", a ? "alert" : "status");
  };
  setIcon = (e) => {
    const a = D.get(e), t = L.get(e);
    a && (this._icon?.setAttribute("name", a), this._icon?.style.setProperty("margin-right", "8px"), this._icon?.setAttribute("size", "18"), t && this._icon?.setAttribute("color", t));
  };
  attributeChangedCallback(e, a, t) {
    a !== t && (e === "content" && (this._span.textContent = t), e === "type" && (this.setIcon(t), this.setA11yRole(t)), e === "sheet" && this.handlerExternalCss());
  }
};
k("r-message", O);
function H() {
  if (typeof window > "u") return null;
  const e = (t) => (n) => {
    const r = {}, s = v("r-message").class("message").build();
    s.timeId && clearTimeout(s.timeId), s.setAttribute("type", t);
    let c = p, g;
    if (!n) return;
    typeof n == "string" ? s.setAttribute("content", n) : (s.setAttribute("content", n.content), g = n.close, c = n.duration || p, r.top = n.top, r.zIndex = n.zIndex, r.getContainer = n.getContainer);
    const l = E(r);
    if (!l) return;
    const h = setTimeout(() => {
      s.classList.remove("message-in"), s.classList.add("message-leave"), clearTimeout(h);
    }, c - f);
    s.timeId = setTimeout(() => {
      s.classList.remove("message-leave"), l.removeChild(s), g && g();
    }, c), l.appendChild(s), s.classList.add("message-in"), setTimeout(() => {
      s.classList.remove("message-in");
    }, f);
  }, a = {
    info: e("info"),
    success: e("success"),
    error: e("error"),
    warning: e("warning"),
    toast: e("toast")
  };
  return window.message = a, window.ranui || (window.ranui = {}), window.ranui.message = a, a;
}
var N = H();
export {
  N as n,
  O as t
};