https://basecamp.com/assets/js/packages/number-flow.js

1/*
2NumberFlow 0.6.1 (vanilla web component)
3Copyright © Maxwell Barvian, MIT license
4https://number-flow.barvian.me/vanilla
5Bundled from https://esm.sh/[email protected]/es2022/number-flow.bundle.mjs
6*/
7/* esm.sh - [email protected] */
8var u=!0;var Z="production",st=Z&&!Z.toLowerCase().startsWith("prod");var nt=String.raw,V=String.raw,q=u&&(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch{return!1}return!0})(),J=u&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),D=u&&typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,b="--_number-flow-d-opacity",A="--_number-flow-d-width",w="--_number-flow-dx",R="--_number-flow-d",G=(()=>{try{return CSS.registerProperty({name:b,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:w,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:A,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:R,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),k="round(nearest, calc(var(--number-flow-mask-height, 0.25em) / 2), 1px)",m=`calc(${k} * 2)`,P="var(--number-flow-mask-width, 0.5em)",g=`calc(${P} / var(--scale-x))`,C="#000 0, transparent 71%",T=V`: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(${A}) / var(--width));transform:translateX(var(${w})) scaleX(var(--scale-x));margin:0 calc(-1 * ${P});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${m},#000 calc(100% - ${m}),transparent 100% ),radial-gradient(at bottom right,${C}),radial-gradient(at bottom left,${C}),radial-gradient(at top left,${C}),radial-gradient(at top right,${C});-webkit-mask-size:100% calc(100% - ${m} * 2),calc(100% - ${g} * 2) 100%,${g} ${m},${g} ${m},${g} ${m},${g} ${m};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.number__inner{padding:${k} ${P};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${w})))}: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(${R})}.digit__num,.number .section::after{padding:${k} 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(${b}))}`,K=u&&typeof HTMLElement<"u"?HTMLElement:class{},B=V`: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:${k} 0}.symbol{white-space:pre}`,at=s=>`<span class="${s.type==="integer"||s.type==="fraction"?"digit":"symbol"}" part="${s.type==="integer"||s.type==="fraction"?`digit ${s.type}-digit`:`symbol ${s.type}`}">${s.value}</span>`,S=(s,t)=>`<span part="${t}">${s.reduce((e,i)=>e+at(i),"")}</span>`,W=(s="")=>V`:where(number-flow${s}){line-height:1}number-flow${s} > span{font-kerning:none;display:inline-block;padding:${m} 0}`,O=(s,{nonce:t,elementSuffix:e}={})=>nt`<template shadowroot="open" shadowrootmode="open"
9			><style${t?` nonce="${t}"`:""}>${B}</style
10			><span role="img" aria-label="${s.valueAsString}"
11				>${S(s.pre,"left")}

11<span part="number" class="number"
12					>${S(s.integer,"integer")}${S(s.fraction,"fraction")}</span
13				>${S(s.post,"right")}</span
14			></template
15		><style${t?` nonce="${t}"`:""}>${W(e)}</style
16		><span>${s.valueAsString}</span>`;var rt=(s,t)=>s==null?t:t==null?s:Math.max(s,t),F=new WeakMap,Q={onUpdate(s,t,e){if(F.set(e,void 0),!e.computedTrend)return;let i=t.integer.concat(t.fraction).filter(a=>a.type==="integer"||a.type==="fraction"),n=s.integer.concat(s.fraction).filter(a=>a.type==="integer"||a.type==="fraction"),o=i.find(a=>!n.find(h=>h.pos===a.pos&&h.value===a.value)),r=n.find(a=>!i.find(h=>a.pos===h.pos&&a.value===h.value));F.set(e,rt(o?.pos,r?.pos))},getDelta(s,t,e){let i=s-t,n=F.get(e.flow);if(!i&&n!=null&&n>=e.pos)return e.length*e.flow.computedTrend}};var f=(s,t,e)=>{let i=document.createElement(s),[n,o]=Array.isArray(t)?[void 0,t]:[t,e];return n&&Object.assign(i,n),o?.forEach(r=>i.appendChild(r)),i},ot=(s,t)=>{var e;return t==="left"?s.offsetLeft:(((e=s.offsetParent instanceof HTMLElement?s.offsetParent:null)==null?void 0:e.offsetWidth)??0)-s.offsetWidth-s.offsetLeft},lt=s=>s.offsetWidth>0&&s.offsetHeight>0,tt=(s,t)=>{u&&typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get(s)&&customElements.define(s,t)};function ht(s,t,{reverse:e=!1}={}){let i=s.length;for(let n=e?i-1:0;e?n>=0:n<i;e?n--:n++)t(s[n],n)}function H(s,t,e,i){let n=t.formatToParts(s);e&&n.unshift({type:"prefix",value:e}),i&&n.push({type:"suffix",value:i});let o=[],r=[],a=[],h=[],c={},d=p=>`${p}:${c[p]=(c[p]??-1)+1}`,v="",y=!1,_=!1;for(let p of n){v+=p.value;let l=p.type==="minusSign"||p.type==="plusSign"?"sign":p.type;l==="integer"?(y=!0,r.push(...p.value.split("").map(L=>({type:l,value:parseInt(L)})))):l==="group"?r.push({type:l,value:p.value}):l==="decimal"?(_=!0,a.push({type:l,value:p.value,key:d(l)})):l==="fraction"?a.push(...p.value.split("").map(L=>({type:l,value:parseInt(L),key:d(l),pos:-1-c[l]}))):(y||_?h:o).push({type:l,value:p.value,key:d(l)})}let Y=[];for(let p=r.length-1;p>=0;p--){let l=r[p];Y.unshift(l.type==="integer"?{...l,key:d(l.type),pos:c[l.type]}:{...l,key:d(l.type)})}return{pre:o,integer:Y,fraction:a,post:h,valueAsString:v,value:typeof s=="string"?parseFloat(s):s}}var et=J&&q&&G,$=class extends K{constructor(){super(),this.created=!1,this.batched=!1;let{animated:t,...e}=this.constructor.defaultProps;this._animated=this.computedAnimated=t,Object.assign(this,e)}get animated(){return this._animated}set animated(t){var e;this.animated!==t&&(this._animated=t,(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}set data(t){var e,i;if(t==null)return;let{pre:n,integer:o,fraction:r,post:a,value:h}=t;if(this.created){let c=this._data;this._data=t,this.computedTrend=typeof this.trend=="function"?this.trend(c.value,h):this.trend,this.computedAnimated=et&&this._animated&&(!this.respectMotionPreference||!((e=D)!=null&&e.matches))&&lt(this)&&this.ownerDocument.visibilityState==="visible",(i=this.plugins)==null||i.forEach(d=>{var v;return(v=d.onUpdate)==null?void 0:v.call(d,t,c,this)}),this.batched||this.willUpdate(),this._pre.update(n),this._num.update({integer:o,fraction:r}),this._post.update(a),this.batched||this.didUpdate()}else{this._data=t,this.attachShadow({mode:"open"});try{this._internals??(this._internals=this.attachInternals()),this._internals.role="img"}catch{}let c=document.createElement("style");this.nonce&&(c.nonce=this.nonce),c.textContent=T,this.shadowRoot.appendChild(c),this._pre=new N(this,n,{justify:"right",part:"left"}),this.shadowRoot.appendChild(this._pre.el),this._num=new I(this,o,r),this.shadowRoot.appendChild(this._num.el),this._post=new N(this,a,{justify:"left",part:"right"}),this.shadowRoot.appendChild(this._post.el),this.created=!0}try{this._internals.ariaLabel=t.valueAsString}catch{}}willUpdate(){this._pre.willUpdate(),this._num.willUpdate(),this._post.willUpdate()}didUpdate(){if(!this.computedAnimated)return;this._abortAnimationsFinish?this._abortAnimationsFinish.abort():this.dispatchEvent(new Event("animationsstart")),this._pre.didUpdate(),this._num.didUpdate(),this._post.didUpdate();let t=new AbortController;Promise.all(this.shadowRoot.getAnimations().map(e=>e.finished)).then(()=>{t.signal.aborted||(this.dispatchEvent(new Event("animationsfinish")),this._abortAnimationsFinish=void 0)}),this._abortAnimationsFinish=t}};$.defaultProps={transformTiming:{duration:900,easing:"linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.99

166,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)"},spinTiming:void 0,opacityTiming:{duration:450,easing:"ease-out"},animated:!0,trend:(s,t)=>Math.sign(t-s),respectMotionPreference:!0,plugins:void 0,digits:void 0};var I=class{constructor(t,e,i,{className:n,...o}={}){this.flow=t,this._integer=new j(t,e,{justify:"right",part:"integer"}),this._fraction=new j(t,i,{justify:"left",part:"fraction"}),this._inner=f("span",{className:"number__inner"},[this._integer.el,this._fraction.el]),this.el=f("span",{...o,part:"number",className:`number ${n??""}`},[this._inner])}willUpdate(){this._prevWidth=this.el.offsetWidth,this._prevLeft=this.el.getBoundingClientRect().left,this._integer.willUpdate(),this._fraction.willUpdate()}update({integer:t,fraction:e}){this._integer.update(t),this._fraction.update(e)}didUpdate(){let t=this.el.getBoundingClientRect();this._integer.didUpdate(),this._fraction.didUpdate();let e=this._prevLeft-t.left,i=this.el.offsetWidth,n=this._prevWidth-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[w]:[`${e}px`,"0px"],[A]:[n,0]},{...this.flow.transformTiming,composite:"accumulate"})}},U=class{constructor(t,e,{justify:i,className:n,...o},r){this.flow=t,this.children=new Map,this.onCharRemove=h=>()=>{this.children.delete(h)},this.justify=i;let a=e.map(h=>this.addChar(h).el);this.el=f("span",{...o,className:`section section--justify-${i} ${n??""}`},r?r(a):a)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){let n=t.type==="integer"||t.type==="fraction"?new E(this,t.type,e?0:t.value,t.pos,{...i,onRemove:this.onCharRemove(t.key)}):new X(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,n),n}unpop(t){t.el.removeAttribute("inert"),t.el.style.top="",t.el.style[this.justify]=""}pop(t){t.forEach(e=>{e.el.style.top=`${e.el.offsetTop}px`,e.el.style[this.justify]=`${ot(e.el,this.justify)}px`}),t.forEach(e=>{e.el.setAttribute("inert",""),e.present=!1})}addNewAndUpdateExisting(t){let e=new Map,i=new Map,n=this.justify==="left",o=n?"prepend":"append";if(ht(t,r=>{let a;this.children.has(r.key)?(a=this.children.get(r.key),i.set(r,a),this.unpop(a),a.present=!0):(a=this.addChar(r,{startDigitsAtZero:!0,animateIn:!0}),e.set(r,a)),this.el[o](a.el)},{reverse:n}),this.flow.computedAnimated){let r=this.el.getBoundingClientRect();e.forEach(a=>{a.willUpdate(r)})}e.forEach((r,a)=>{r.update(a.value)}),i.forEach((r,a)=>{r.update(a.value)})}willUpdate(){let t=this.el.getBoundingClientRect();this._prevOffset=t[this.justify],this.children.forEach(e=>e.willUpdate(t))}didUpdate(){let t=this.el.getBoundingClientRect();this.children.forEach(n=>n.didUpdate(t));let e=t[this.justify],i=this._prevOffset-e;i&&this.children.size&&this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}},j=class extends U{update(t){let e=new Map;this.children.forEach((i,n)=>{t.find(o=>o.key===n)||e.set(n,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof E&&i.update(0)}),this.pop(e)}},N=class extends U{update(t){let e=new Map;this.children.forEach((i,n)=>{t.find(o=>o.key===n)||e.set(n,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}},x=class{constructor(t,e,{onRemove:i,animateIn:n=!1}

16={}){this.flow=t,this.el=e,this._present=!0,this._remove=()=>{var o;this.el.remove(),(o=this._onRemove)==null||o.call(this)},this.el.classList.add("animate-presence"),this.flow.computedAnimated&&n&&this.el.animate({[b]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),this._onRemove=i}get present(){return this._present}set present(t){if(this._present!==t){if(this._present=t,t?this.el.removeAttribute("inert"):this.el.setAttribute("inert",""),!this.flow.computedAnimated){t||this._remove();return}this.el.style.setProperty("--_number-flow-d-opacity",t?"0":"-.999"),this.el.animate({[b]:t?[-.9999,0]:[.999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),t?this.flow.removeEventListener("animationsfinish",this._remove):this.flow.addEventListener("animationsfinish",this._remove,{once:!0})}}},M=class extends x{constructor(t,e,i,n){super(t.flow,i,n),this.section=t,this.value=e,this.el=i}},E=class extends M{constructor(t,e,i,n,o){var r,a;let h=(((a=(r=t.flow.digits)==null?void 0:r[n])==null?void 0:a.max)??9)+1,c=Array.from({length:h}).map((v,y)=>{let _=f("span",{className:"digit__num"},[document.createTextNode(String(y))]);return y!==i&&_.setAttribute("inert",""),_.style.setProperty("--n",String(y)),_}),d=f("span",{part:`digit ${e}-digit`,className:"digit"},c);d.style.setProperty("--current",String(i)),d.style.setProperty("--length",String(h)),super(t,i,d,o),this.pos=n,this._onAnimationsFinish=()=>{this.el.classList.remove("is-spinning")},this._numbers=c,this.length=h}willUpdate(t){let e=this.el.getBoundingClientRect();this._prevValue=this.value;let i=e[this.section.justify]-t[this.section.justify],n=e.width/2;this._prevCenter=this.section.justify==="left"?i+n:i-n}update(t){this.el.style.setProperty("--current",String(t)),this._numbers.forEach((e,i)=>i===t?e.removeAttribute("inert"):e.setAttribute("inert","")),this.value=t}didUpdate(t){let e=this.el.getBoundingClientRect(),i=e[this.section.justify]-t[this.section.justify],n=e.width/2,o=this.section.justify==="left"?i+n:i-n,r=this._prevCenter-o;r&&this.el.animate({transform:[`translateX(${r}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"});let a=this.getDelta();a&&(this.el.classList.add("is-spinning"),this.el.animate({[R]:[-a,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",this._onAnimationsFinish,{once:!0}))}getDelta(){var t;if(this.flow.plugins)for(let n of this.flow.plugins){let o=(t=n.getDelta)==null?void 0:t.call(n,this.value,this._prevValue,this);if(o!=null)return o}let e=this.value-this._prevValue,i=this.flow.computedTrend||Math.sign(e);return i<0&&this.value>this._prevValue?this.value-this.length-this._prevValue:i>0&&this.value<this._prevValue?this.length-this._prevValue+this.value:e}},X=class extends M{constructor(t,e,i,n){let o=f("span",{className:"symbol__value",textContent:i});super(t,i,f("span",{part:`symbol ${e}`,className:"symbol"},[o]),n),this.type=e,this._children=new Map,this._onChildRemove=r=>()=>{this._children.delete(r)},this._children.set(i,new x(this.flow,o,{onRemove:this._onChildRemove(i)}))}willUpdate(t){if(this.type==="decimal")return;let e=this.el.getBoundingClientRect();this._prevOffset=e[this.section.justify]-t[this.section.justify]}update(t){if(this.value!==t){let e=this._children.get(this.value);e&&(e.present=!1);let i=this._children.get(t);if(i)i.present=!0;else{let n=f("span",{className:"symbol__value",textContent:t});this.el.appendChild(n),this._children.set(t,new x(this.flow,n,{animateIn:!0,onRemove:this._onChildRemove(t)}))}}this.value=t}didUpdate(t){if(this.type==="decimal")return;let e=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify],i=this._prevOffset-e;i&&this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}};var it=s=>[B,W(s),T];var Vt=it(),pt="number-flow-connect",ct="number-flow-update",Dt=(s,{locales:t,format:e,numberPrefix:i,numberSuffix:n,nonce:o}={})=>{let r=H(s,new Intl.NumberFormat(t,e),i,n);return O(r,{nonce:o})},z=class extends ${constructor(){super(...arguments),this.connected=!1}connectedCallback(){this.connected=!0,this.dispatchEvent(new Event(pt,{bubbles:!0}))}disconnectedCallback(){this.connected=!1}get value(){return this._value}update(t){(!this._formatter||this._prevFormat!==this.format||this._prevLocales!==this.locales)&&(this._formatter=new Intl.NumberFormat(this.locales,this.format),this._prevFormat=this.format,this._prevLocales=this.locales),t!=null&&(this._value=t),this.dispatchEvent(new Event(ct,{bubbles:!0})),this.data=H(this._value,this._formatter,this.numberPrefix,this.numberSuffix)}};tt("number-flow",z);export{pt as CONNECT_EVENT,E as Digit,ct as UPDATE_EVENT,et as canAnimate,Q as continuous,z as default,tt as define,H as formatToData,D as prefersReducedMotion,Dt as renderInnerHTML,Vt as styles};