number-flow/dist/ssr-B-DD5oSO.js

A component to transition and format numbers.

"use strict";const l=require("esm-env"),b=String.raw,d=String.raw,$=l.BROWSER&&(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch{return!1}return!0})(),w=l.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),v=l.BROWSER&&typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,m="--_number-flow-d-opacity",g="--_number-flow-d-width",s="--_number-flow-dx",u="--_number-flow-d",S=(()=>{try{return CSS.registerProperty({name:m,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:s,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:g,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:u,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),o="round(nearest, calc(var(--number-flow-mask-height, 0.25em) / 2), 1px)",t=`calc(${o} * 2)`,p="var(--number-flow-mask-width, 0.5em)",n=`calc(${p} / var(--scale-x))`,i="#000 0, transparent 71%",k=d`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:1}.number,.number__inner{display:inline-block;transform-origin:left top}:host([data-will-change]) :is(.number,.number__inner,.section,.digit,.digit__num,.symbol){will-change:transform}.number{--scale-x:calc(1 + var(${g}) / var(--width));transform:translateX(var(${s})) scaleX(var(--scale-x));margin:0 calc(-1 * ${p});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${n},#000 calc(100% - ${n}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${t},#000 calc(100% - ${t}),transparent 100% ),radial-gradient(at bottom right,${i}),radial-gradient(at bottom left,${i}),radial-gradient(at top left,${i}),radial-gradient(at top right,${i});-webkit-mask-size:100% calc(100% - ${t} * 2),calc(100% - ${n} * 2) 100%,${n} ${t},${n} ${t},${n} ${t},${n} ${t};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.number__inner{padding:${o} ${p};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${s})))}:host > :not(.number){z-index:5}.section,.symbol{display:inline-block;position:relative;isolation:isolate}.section::after{content:'\200b';display:inline-block}.section--justify-left{transform-origin:center left}.section--justify-right{transform-origin:center right}.section > [inert],.symbol > [inert]{margin:0 !important;position:absolute !important;z-index:-1}.digit{display:inline-block;position:relative;--c:var(--current) + var(${u})}.digit__num,.number .section::after{padding:${o} 0}.digit__num{display:inline-block;--offset-raw:mod(var(--length) + var(--n) - mod(var(--c),var(--length)),var(--length));--offset:calc( var(--offset-raw) - var(--length) * round(down,var(--offset-raw) / (var(--length) / 2),1) );--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y))}.digit__num[inert]{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y))}.digit:not(.is-spinning) .digit__num[inert]{display:none}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre}.section--justify-left .symbol > [inert]{left:0}.section--justify-right .symbol > [inert]{right:0}.animate-presence{opacity:calc(1 + var(${m}))}`,_=l.BROWSER&&typeof HTMLElement<"u"?HTMLElement:class{},f=d`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:1}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:${o} 0}.symbol{white-space:pre}`,x=e=>`<span class="${e.type==="integer"||e.type==="fraction"?"digit":"symbol"}" part="${e.type==="integer"||e.type==="fraction"?`digit ${e.type}-digit`:`symbol ${e.type}`}">${e.value}</span>`,a=(e,r)=>`<span part="${r}">${e.reduce((c,h)=>c+x(h),"")}</span>`,y=(e="")=>d`:where(number-flow${e}){line-height:1}number-flow${e} > span{font-kerning:none;display:inline-block;padding:${t} 0}`,M=(e,{nonce:r,elementSuffix:c}={})=>b`<template shadowroot="open" shadowrootmode="open"
			><style${r?` nonce="${r}"`:""}>${f}</style
			><span role="img" aria-label="${e.valueAsString}"
				>${a(e.pre,"left")}<span part="number" class="number"
					>${a(e.integer,"integer")}${a(e.fraction,"fraction")}</span
				>${a(e.post,"right")}</span
			></template
		><style${r?` nonce="${r}"`:""}>${y(c)}</style
		><span>${e.valueAsString}</span>`;exports.ServerSafeHTMLElement=_;exports.deltaVar=u;exports.dxVar=s;exports.opacityDeltaVar=m;exports.prefersReducedMotion=v;exports.renderFallbackStyles=y;exports.renderInnerHTML=M;exports.styles=f;exports.styles$1=k;exports.supportsAtProperty=S;exports.supportsLinear=$;exports.supportsMod=w;exports.widthDeltaVar=g;