ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
228 lines (227 loc) • 17.2 kB
JavaScript
import { T as h, _ as s, i as l } from "./factory-WDxu11V0.js";
import { t as f } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as p, i, n as o, o as g, r as u, t as w } from "./utils-U-9uH7EX.js";
import { a as v, n as x } from "./ssr-BzykYefm.js";
import "./icon-DgLPjeVe.js";
var y = ':host{display:var(--ran-math-display, block);color:var(--ran-math-color, var(--ran-color-text, inherit));position:var(--ran-math-position, relative)}:host([hidden]){display:none}:host([display="inline"]){display:var(--ran-math-inline-display, inline-block)}.ran-math{position:relative;text-align:var(--ran-math-align, center)}:host([display="inline"]) .ran-math{text-align:initial}.ran-math-error{margin:0;padding:var(--ran-math-error-padding, 8px 12px);color:var(--ran-math-error-color, var(--ran-color-danger, #e5484d));background:var(--ran-math-error-background, var(--ran-gray-alpha-100, rgba(0, 0, 0, .04)));border-radius:var(--ran-radius-sm, 6px);font-family:var(--ran-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--ran-math-error-font-size, var(--ran-text-label-2, 13px));font-weight:var(--ran-math-error-font-weight, var(--ran-text-mono-weight-regular, 400));line-height:1.5;white-space:pre-wrap;word-break:break-word;text-align:left}.ran-math-toolbar{position:absolute;top:var(--ran-math-toolbar-top, 6px);right:var(--ran-math-toolbar-right, 6px);display:none;gap:var(--ran-math-toolbar-gap, 4px);padding:var(--ran-math-toolbar-padding, var(--ran-space-1, 4px));border-radius:var(--ran-radius-md, 8px);background:var(--ran-math-toolbar-background, var(--ran-color-bg-elevated, #fff));box-shadow:var(--ran-math-toolbar-shadow, var(--ran-shadow-menu, 0 2px 8px rgba(0, 0, 0, .12)));opacity:0;transition:opacity .15s ease;pointer-events:none}.ran-math.has-controls .ran-math-toolbar{display:flex}.ran-math:hover .ran-math-toolbar,.ran-math-toolbar:focus-within{opacity:1;pointer-events:auto}.ran-math-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--ran-math-button-size, var(--ran-size-5, 28px));height:var(--ran-math-button-size, var(--ran-size-5, 28px));padding:0;border:none;border-radius:var(--ran-radius-sm, 6px);background:transparent;color:var(--ran-math-button-color, var(--ran-color-text-secondary, #666));cursor:pointer}.ran-math-btn:hover{background:var(--ran-math-button-hover-background, var(--ran-color-bg-muted, rgba(0, 0, 0, .06)));color:var(--ran-math-button-hover-color, var(--ran-color-text, #222))}.ran-math-btn:focus-visible{outline:var(--ran-math-button-focus-outline, 2px solid var(--ran-color-primary, #1890ff));outline-offset:1px}.ran-math-menu{position:absolute;top:var(--ran-math-menu-top, 40px);right:var(--ran-math-toolbar-right, 6px);display:flex;flex-direction:column;min-width:132px;padding:var(--ran-math-menu-padding, var(--ran-space-1, 4px));border-radius:var(--ran-radius-md, 8px);background:var(--ran-math-toolbar-background, var(--ran-color-bg-elevated, #fff));box-shadow:var(--ran-math-toolbar-shadow, var(--ran-shadow-menu, 0 2px 8px rgba(0, 0, 0, .12)));z-index:1;text-align:left}.ran-math-menu-item{padding:var(--ran-math-menu-item-padding-block, var(--ran-space-2, 8px)) var(--ran-math-menu-item-padding-inline, var(--ran-space-3, 12px));border:none;border-radius:var(--ran-radius-sm, 6px);background:transparent;color:var(--ran-math-item-color, var(--ran-color-text, #222));text-align:left;font-size:var(--ran-math-menu-item-font-size, var(--ran-text-label-2, 13px));font-weight:var(--ran-math-menu-item-font-weight, var(--ran-text-label-weight, 500));cursor:pointer}.ran-math-menu-item:hover{background:var(--ran-math-button-hover-background, var(--ran-color-bg-muted, rgba(0, 0, 0, .06)))}@media(prefers-reduced-motion:reduce){.ran-math-toolbar{transition:none}}', k = `math{font-family:"Latin Modern Math","Cambria Math",STIXTwoMath-Regular,NotoSansMath-Regular,math;font-style:normal;font-weight:400;line-height:normal;font-size-adjust:none;text-indent:0;text-transform:none;letter-spacing:normal;word-wrap:normal;direction:ltr;font-feature-settings:"dtls" off}math *{border-color:currentColor}math.tml-display{display:block;width:100%}*.mathcal{font-feature-settings:"ss01"}math .mathscr{font-family:Temml}mo.tml-prime{font-family:Temml}mfrac>:nth-child(2),msqrt,mover>:first-child{math-shift:compact}.menclose{display:inline-block;position:relative;padding:.5ex 0ex}.tml-cancelto{display:inline-block;position:absolute;top:0;left:0;padding:.5ex 0ex;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker></defs><line x2='100%25' y1='100%25' stroke='black' stroke-width='.06em' marker-end='url(%23a)' vector-effect='non-scaling-stroke'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker></defs><line x2='100%25' y1='100%25' stroke='black' stroke-width='.06em' marker-end='url(%23a)' vector-effect='non-scaling-stroke'/></svg>");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:0 0;mask-position:0 0} (-moz-appearance: none){.tml-vec{transform:scale(.75)}.ff-narrow{width:0em}.ff-nudge-left{margin-left:-.2em}.ff-squash mtd{display:block;height:0}} (not (-moz-appearance: none)){mo.tml-prime{font-family:Temml}.tml-sml-pad{padding-left:.05em}.tml-med-pad{padding-left:.1em}.tml-lrg-pad{padding-left:.15em}} (-webkit-backdrop-filter: blur(1px)){.wbk-acc{transform:translateY(.431em)}.wbk-sml{transform:translate(.07em)}.wbk-sml-acc{transform:translate(.07em,.431em)}.wbk-sml-vec{transform:scale(.75) translate(.07em)}.wbk-med{transform:translate(.14em)}.wbk-med-acc{transform:translate(.14em,.431em)}.wbk-med-vec{transform:scale(.75) translate(.14em)}.wbk-lrg{transform:translate(.21em)}.wbk-lrg-acc{transform:translate(.21em,.431em)}.wbk-lrg-vec{transform:scale(.75) translate(.21em)}}menclose{-webkit-print-color-adjust:exact;print-color-adjust:exact}.tml-right{text-align:right}.tml-left{text-align:left}.tml-shift-left{margin-left:-200%} (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)){.chr-sml{transform:translate(.07em)}.chr-sml-vec{transform:scale(.75) translate(.07em)}.chr-med{transform:translate(.14em)}.chr-med-vec{transform:scale(.75) translate(.14em)}.chr-lrg{transform:translate(.21em)}.chr-lrg-vec{transform:scale(.75) translate(.21em)}.tml-shift-left{margin-left:-100%}menclose{position:relative;padding:.5ex 0ex}.tml-overline{padding:.1em 0 0;border-top:.065em solid}.tml-underline{padding:0 0 .1em;border-bottom:.065em solid}.tml-cancel{display:inline-block;position:absolute;left:.5px;bottom:0;width:100%;height:100%;background-color:currentColor}.upstrike{clip-path:polygon(.05em 100%,0em calc(100% - .05em),calc(100% - .05em) 0em,100% .05em)}.downstrike{clip-path:polygon(0em .05em,.05em 0em,100% calc(100% - .05em),calc(100% - .05em) 100%)}.sout{clip-path:polygon(0em calc(55% + .0333em),0em calc(55% - .0333em),100% calc(55% - .0333em),100% calc(55% + .0333em))}.tml-xcancel{clip-path:polygon(.05em 0em,0em .05em,calc(50% - .05em) 50%,0em calc(100% - .05em),.05em 100%,50% calc(50% + .05em),calc(100% - .05em) 100%,100% calc(100% - .05em),calc(50% + .05em) 50%,100% .05em,calc(100% - .05em) 0%,50% calc(50% - .05em))}.longdiv-top{border-top:.067em solid;padding:.1em .2em .2em .433em}.longdiv-arc{position:absolute;top:0;bottom:.1em;left:-.4em;width:.7em;border:.067em solid;transform:translateY(-.067em);border-radius:70%;clip-path:inset(0 0 0 .4em);box-sizing:border-box}.menclose{display:inline-block;text-align:left;position:relative}.phasor-bottom{border-bottom:.067em solid;padding:.2em .2em .1em .6em}.phasor-angle{display:inline-block;position:absolute;left:.5px;bottom:-.04em;height:100%;aspect-ratio:.5;background-color:currentColor;clip-path:polygon(.05em 100%,0em calc(100% - .05em),calc(100% - .05em) 0em,100% .05em)}.tml-fbox{padding:3pt;border:1px solid}.circle-pad{padding:.267em}.textcircle{position:absolute;inset:0;border:.067em solid;border-radius:50%}.actuarial{padding:.03889em .03889em 0;border-width:.08em .08em 0em 0em;border-style:solid;margin-right:.03889em}.tml-crooked-2{transform:scale(2,1.1)}.tml-crooked-3{transform:scale(3,1.3)}.tml-crooked-4{transform:scale(4,1.4)}.tml-right{text-align:-webkit-right}.tml-left{text-align:-webkit-left}}.special-fraction{font-family:STIX TWO,Times New Roman,Times,Tinos,serif}math{display:inline-flex;flex-wrap:wrap;align-items:baseline}math>mrow{padding:.5ex 0ex}mtable.tml-jot mtd{padding-top:.7ex;padding-bottom:.7ex}mtable.tml-small mtd{padding-top:.35ex;padding-bottom:.35ex}@-moz-document url-prefix(){math{display:inline}math>mrow{padding:0}mtd,mtable.tml-small mtd{padding-top:0;padding-bottom:0}mtable.tml-jot mtd{padding-top:.2ex;padding-bottom:0ex}}.tml-eqn:before{counter-increment:tmlEqnNo;content:"(" counter(tmlEqnNo) ")"}:host{counter-reset:tmlEqnNo}`, b = "ran-math-fonts", m, M = () => typeof document > "u" ? Promise.resolve() : (m || (m = (async () => {
const [{ default: t }, { default: e }] = await Promise.all([import("./latinmodernmath-BnpcbCAh.js"), import("./Temml-3BKyDWY9.js")]);
if (document.getElementById(b)) return;
const a = document.createElement("style");
a.id = b, a.textContent = `-face{font-family:'Latin Modern Math';src:url(${t}) format('woff2');font-weight:normal;font-style:normal;font-display:swap;}-face{font-family:'Temml';src:url(${e}) format('woff2');font-weight:normal;font-style:normal;font-display:swap;}`, (document.head || document.documentElement).appendChild(a);
})()), m), _ = class extends x {
_events = new f();
_shadowDom;
_wrap;
contain;
_toolbar;
_copyResetTimer;
_downloadMenu;
_pending;
static get observedAttributes() {
return [
"latex",
"display",
"font",
"macros",
"wrap",
"copy",
"download",
"sheet"
];
}
constructor() {
super(), this._shadowDom = w(this, `${y}
${k}`);
const t = h(), e = h();
this._wrap = l().class("ran-math").part("math").children(l().class("ran-math-render").ref(t).part("render"), l().class("ran-math-toolbar").ref(e).part("toolbar")).build(), this._shadowDom.appendChild(this._wrap), this.contain = p(t, "render"), this._toolbar = p(e, "toolbar");
}
get latex() {
const t = o(this, "latex");
if (t) try {
return decodeURIComponent(t);
} catch {
return t;
}
return (this.textContent || "").trim();
}
set latex(t) {
i(this, "latex", encodeURIComponent(t));
}
get display() {
return o(this, "display") || "block";
}
set display(t) {
i(this, "display", t);
}
get font() {
return o(this, "font");
}
set font(t) {
i(this, "font", t);
}
get macros() {
const t = o(this, "macros");
if (t)
try {
const e = JSON.parse(t);
return e && typeof e == "object" ? e : void 0;
} catch {
return;
}
}
set macros(t) {
i(this, "macros", typeof t == "string" ? t : t ? JSON.stringify(t) : null);
}
get wrap() {
const t = o(this, "wrap");
return t === "none" || t === "tex" || t === "=" ? t : void 0;
}
set wrap(t) {
i(this, "wrap", t);
}
get copyable() {
return this.hasAttribute("copy");
}
set copyable(t) {
u(this, "copy", t);
}
get copyTarget() {
return o(this, "copy") === "mathml" ? "mathml" : "source";
}
get downloadable() {
return this.hasAttribute("download");
}
set downloadable(t) {
u(this, "download", t);
}
get sheet() {
return o(this, "sheet");
}
set sheet(t) {
i(this, "sheet", t);
}
label(t, e) {
return o(this, `label-${t}`) || e;
}
emit(t, e) {
this.dispatchEvent(new CustomEvent(t, {
detail: e,
bubbles: !0,
composed: !0
}));
}
handlerExternalCss = () => {
g(this, this._shadowDom, "sheet", null, this.sheet);
};
showError(t) {
this.contain.innerHTML = "";
const e = s("pre").class("ran-math-error").part("error").build();
e.textContent = t, this.contain.appendChild(e), this._toolbar.innerHTML = "", this._wrap.classList.remove("has-controls"), this.emit("error", { message: t });
}
render() {
const t = this.latex;
if (!t) {
this.contain.innerHTML = "", this._toolbar.innerHTML = "", this._wrap.classList.remove("has-controls"), this._pending = void 0;
return;
}
const e = this.font !== "system" ? M().catch(() => {
}) : Promise.resolve(), a = import("temml").then(({ default: r }) => {
try {
const n = {
displayMode: this.display !== "inline",
throwOnError: !0,
annotate: !0
}, d = this.macros;
d && (n.macros = d);
const c = this.wrap;
c && (n.wrap = c), this.contain.innerHTML = r.renderToString(t, n), this.buildToolbar(), this.emit("render", { ok: !0 });
} catch (n) {
this.showError(String(n?.message || n));
}
}).catch((r) => this.showError(r.message));
this._pending = Promise.all([e, a]).then(() => {
});
}
iconButton(t, e, a) {
const r = s("button").class("ran-math-btn").part("button").attr("type", "button").attr("aria-label", e).attr("title", e).children(s("r-icon").attr("name", t).attr("size", "16").attr("color", "currentColor")).build();
return this._events.on(r, "click", a), r;
}
buildToolbar() {
this.closeDownloadMenu(), this._toolbar.innerHTML = "";
const t = [];
if (this.copyable) {
const e = this.copyTarget === "mathml" ? "Copy MathML" : "Copy LaTeX";
t.push(this.iconButton("copy", this.label("copy", e), this.copyContent));
}
this.downloadable && t.push(this.iconButton("download", this.label("download", "Download"), this.onDownload)), t.forEach((e) => this._toolbar.appendChild(e)), this._wrap.classList.toggle("has-controls", t.length > 0);
}
currentMathML() {
const t = this.contain.querySelector("math");
return t ? t.outerHTML : "";
}
copyContent = () => {
const t = this.copyTarget, e = t === "mathml" ? this.currentMathML() : this.latex;
!e || !navigator.clipboard || navigator.clipboard.writeText(e).then(() => {
this.emit("copied", { kind: t });
const a = this._toolbar.querySelector('r-icon[name="copy"]');
a && (a.setAttribute("name", "check"), window.clearTimeout(this._copyResetTimer), this._copyResetTimer = window.setTimeout(() => a.setAttribute("name", "copy"), 1200));
});
};
downloadFormats() {
const t = o(this, "download").trim();
return (t ? t.split(/\s+/) : ["source", "mathml"]).filter((e) => e === "source" || e === "mathml");
}
onDownload = () => {
const t = this.downloadFormats();
t.length <= 1 ? this.triggerDownload(t[0] || "mathml") : this.toggleDownloadMenu();
};
triggerDownload(t) {
t === "source" ? this.downloadSource() : this.downloadMathML();
}
saveBlob(t, e) {
const a = URL.createObjectURL(t), r = document.createElement("a");
r.href = a, r.download = e, r.click(), URL.revokeObjectURL(a);
}
downloadSource() {
const t = this.latex;
t && (this.saveBlob(new Blob([t], { type: "application/x-tex;charset=utf-8" }), "formula.tex"), this.emit("download", { format: "source" }));
}
downloadMathML() {
const t = this.currentMathML();
t && (this.saveBlob(new Blob([`<?xml version="1.0" encoding="UTF-8"?>
${t}`], { type: "application/mathml+xml;charset=utf-8" }), "formula.mml"), this.emit("download", { format: "mathml" }));
}
toggleDownloadMenu() {
if (this._downloadMenu) {
this.closeDownloadMenu();
return;
}
const t = l().class("ran-math-menu").part("menu").build(), e = {
source: this.label("download-source", "Source (.tex)"),
mathml: this.label("download-mathml", "MathML (.mml)")
};
this.downloadFormats().forEach((a) => {
const r = s("button").class("ran-math-menu-item").attr("type", "button").build();
r.textContent = e[a] || a, this._events.on(r, "click", () => {
this.triggerDownload(a), this.closeDownloadMenu();
}), t.appendChild(r);
}), this._wrap.appendChild(t), this._downloadMenu = t;
}
closeDownloadMenu = () => {
this._downloadMenu?.remove(), this._downloadMenu = void 0;
};
connectedCallback() {
this.handlerExternalCss(), this.render(), this._events.on(this._wrap, "mouseleave", this.closeDownloadMenu);
}
disconnectedCallback() {
this._events.abort(), window.clearTimeout(this._copyResetTimer), this.closeDownloadMenu();
}
attributeChangedCallback(t, e, a) {
e !== a && (t === "latex" || t === "display" || t === "font" || t === "macros" || t === "wrap" ? this.render() : t === "copy" || t === "download" ? this.buildToolbar() : t === "sheet" && this.handlerExternalCss());
}
};
v("r-math", _);
export {
_ as t
};