ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
4 lines (3 loc) • 16.2 kB
JavaScript
const h=require("./rolldown-runtime-DGqZhkpL.cjs"),n=require("./builder-Cb6jFd2B.cjs"),r=require("./utils-D2N_KPUb.cjs");require("./icon-CJdX6ZRY.cjs");var p=':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}}',u=`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=h.__exportAll({Math:()=>s,default:()=>s}),c="ran-math-fonts",l,g=()=>typeof document>"u"?Promise.resolve():(l||(l=(async()=>{const[{default:t},{default:e}]=await Promise.all([Promise.resolve().then(()=>require("./latinmodernmath-BNPh95x3.cjs")),Promise.resolve().then(()=>require("./Temml-B3J22Yln.cjs"))]);if(document.getElementById(c))return;const a=document.createElement("style");a.id=c,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)})()),l),s=class extends r.RanElement{_events=new r.EventManager;_shadowDom;_wrap;contain;_toolbar;_copyResetTimer;_downloadMenu;_pending;static get observedAttributes(){return["latex","display","font","macros","wrap","copy","download","sheet"]}constructor(){super(),this._shadowDom=r.ensureShadowRoot(this,`${p}
${u}`);const t=n.createRef(),e=n.createRef();this._wrap=n.Div().class("ran-math").part("math").children(n.Div().class("ran-math-render").ref(t).part("render"),n.Div().class("ran-math-toolbar").ref(e).part("toolbar")).build(),this._shadowDom.appendChild(this._wrap),this.contain=r.shadowPart(t,"render"),this._toolbar=r.shadowPart(e,"toolbar")}get latex(){const t=r.getStringAttribute(this,"latex");if(t)try{return decodeURIComponent(t)}catch{return t}return(this.textContent||"").trim()}set latex(t){r.setStringAttribute(this,"latex",encodeURIComponent(t))}get display(){return r.getStringAttribute(this,"display")||"block"}set display(t){r.setStringAttribute(this,"display",t)}get font(){return r.getStringAttribute(this,"font")}set font(t){r.setStringAttribute(this,"font",t)}get macros(){const t=r.getStringAttribute(this,"macros");if(t)try{const e=JSON.parse(t);return e&&typeof e=="object"?e:void 0}catch{return}}set macros(t){r.setStringAttribute(this,"macros",typeof t=="string"?t:t?JSON.stringify(t):null)}get wrap(){const t=r.getStringAttribute(this,"wrap");return t==="none"||t==="tex"||t==="="?t:void 0}set wrap(t){r.setStringAttribute(this,"wrap",t)}get copyable(){return this.hasAttribute("copy")}set copyable(t){r.setBooleanAttribute(this,"copy",t)}get copyTarget(){return r.getStringAttribute(this,"copy")==="mathml"?"mathml":"source"}get downloadable(){return this.hasAttribute("download")}set downloadable(t){r.setBooleanAttribute(this,"download",t)}get sheet(){return r.getStringAttribute(this,"sheet")}set sheet(t){r.setStringAttribute(this,"sheet",t)}label(t,e){return r.getStringAttribute(this,`label-${t}`)||e}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}handlerExternalCss=()=>{r.syncSheetAttribute(this,this._shadowDom,"sheet",null,this.sheet)};showError(t){this.contain.innerHTML="";const e=n.View("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"?g().catch(()=>{}):Promise.resolve(),a=Promise.resolve().then(()=>require("./temml-u4juqd82.cjs")).then(({default:o})=>{try{const i={displayMode:this.display!=="inline",throwOnError:!0,annotate:!0},m=this.macros;m&&(i.macros=m);const d=this.wrap;d&&(i.wrap=d),this.contain.innerHTML=o.renderToString(t,i),this.buildToolbar(),this.emit("render",{ok:!0})}catch(i){this.showError(String(i?.message||i))}}).catch(o=>this.showError(o.message));this._pending=Promise.all([e,a]).then(()=>{})}iconButton(t,e,a){const o=n.View("button").class("ran-math-btn").part("button").attr("type","button").attr("aria-label",e).attr("title",e).children(n.View("r-icon").attr("name",t).attr("size","16").attr("color","currentColor")).build();return this._events.on(o,"click",a),o}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=r.getStringAttribute(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),o=document.createElement("a");o.href=a,o.download=e,o.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=n.Div().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 o=n.View("button").class("ran-math-menu-item").attr("type","button").build();o.textContent=e[a]||a,this._events.on(o,"click",()=>{this.triggerDownload(a),this.closeDownloadMenu()}),t.appendChild(o)}),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())}};r.defineSSR("r-math",s);Object.defineProperty(exports,"Math",{enumerable:!0,get:function(){return s}});Object.defineProperty(exports,"math_exports",{enumerable:!0,get:function(){return b}});