number-flow 0.2.2 → 0.2.3

package/dist/index.js

@@ -1 +1 @@
-"use strict";var wt=Object.defineProperty;var et=n=>{throw TypeError(n)};var xt=(n,i,t)=>i in n?wt(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t;var u=(n,i,t)=>xt(n,typeof i!="symbol"?i+"":i,t),it=(n,i,t)=>i.has(n)||et("Cannot "+t);var o=(n,i,t)=>(it(n,i,"read from private field"),t?t.call(n):i.get(n)),r=(n,i,t)=>i.has(n)?et("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(n):i.set(n,t),h=(n,i,t,s)=>(it(n,i,"write to private field"),s?s.call(n,t):i.set(n,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("esm-env"),y=(n,i,t)=>{const s=document.createElement(n),[e,a]=Array.isArray(i)?[void 0,i]:[i,t];return e&&Object.assign(s,e),a==null||a.forEach(l=>s.appendChild(l)),s},_t=(n,i)=>{typeof Element.prototype.replaceChildren>"u"?(n.innerHTML="",i.forEach(t=>n.appendChild(t))):n.replaceChildren(...i)},bt=(n,i)=>{var t;return i==="left"?n.offsetLeft:(((t=n.offsetParent instanceof HTMLElement?n.offsetParent:null)==null?void 0:t.offsetWidth)??0)-n.offsetWidth-n.offsetLeft};function St(n,i,{reverse:t=!1}={}){const s=n.length;for(let e=t?s-1:0;t?e>=0:e<s;t?e--:e++)i(n[e],e)}function Ct(n,i){const t=i.formatToParts(n),s=[],e=[],a=[],l=[],f={},c=p=>(f[p]||(f[p]=0),`${p}:${f[p]++}`);let d="",x=!1,E=!1;for(const p of t){d+=p.value;const m=p.type==="minusSign"||p.type==="plusSign"?"sign":p.type;m==="integer"?(x=!0,e.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z)})))):m==="group"?e.push({type:m,value:p.value}):m==="decimal"?(E=!0,a.push({type:m,value:p.value,key:c(m)})):m==="fraction"?a.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z),key:c(m)}))):(x||E?l:s).push({type:m,value:p.value,key:c(m)})}const _=[];for(let p=e.length-1;p>=0;p--)_.unshift({...e[p],key:c(e[p].type)});return{pre:s,integer:_,fraction:a,post:l,formatted:d}}const vt=V.BROWSER?HTMLElement:class{},kt=String.raw,ct=V.BROWSER&&typeof CSS<"u"&&CSS.supports("transition-timing-function","linear(1, 2)"),ht=V.BROWSER&&typeof CSS<"u"&&typeof CSS.registerProperty<"u",J=V.BROWSER&&typeof CSS<"u"&&typeof CSS.supports("animation-composition","accumulate")<"u";if(ht)try{CSS.registerProperty({name:"--_number-flow-scale-x",syntax:"<number>",inherits:!1,initialValue:"1"})}catch{}const dt="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",T="var(--number-flow-mask-width, 0.5em)",G=`${T} * 1/var(--_number-flow-scale-x)`,st=`calc(${G})`,nt=`linear-gradient(to bottom, transparent 0, #000 ${g}, #000 calc(100% - ${g}), transparent 100%)`,K="#000 0, transparent 71%",ft="span",$t={fontKerning:"none",display:"inline-block",lineHeight:dt,padding:`${g} 0`},ot=kt`:host{display:inline-block;direction:ltr;user-select:none;pointer-events:none;white-space:nowrap;position:relative;line-height:${dt} !important;isolation:isolate;}::slotted(${ft}){position:absolute;left:0;top:0;color:transparent !important;z-index:-1;user-select:text;pointer-events:auto;}.section{display:inline-block;padding-bottom:${g};padding-top:${g};vertical-align:top;user-select:none;}.section:not(.section--masked),.section--masked .section__inner{position:relative;isolation:isolate;}.section__inner{display:inline-block;transform-origin:inherit;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section--masked{overflow:clip;position:relative;z-index:-1;--_number-flow-scale-x:1;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(100% - ${G}) 100%,100% calc(100% - ${g} * 2),${st} ${g},${st} ${g};}.section--masked.section--justify-left{padding-right:${T};margin-right:calc(-1 * ${T});-webkit-mask-image:${nt},linear-gradient(to right,#000 0,#000 calc(100% - ${G}),transparent 100%),radial-gradient(at bottom left,${K}),radial-gradient(at top left,${K});-webkit-mask-position:left,center,right top,right bottom;}.section--masked.section--justify-right{padding-left:${T};margin-left:calc(-1 * ${T});-webkit-mask-image:${nt},linear-gradient(to left,#000 0,#000 calc(100% - ${G}),transparent 100%),radial-gradient(at bottom right,${K}),radial-gradient(at top right,${K});-webkit-mask-position:right,center,left top,left bottom;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:inline-block;position:relative;}.digit__stack{display:flex;flex-direction:column;align-items:center;gap:${g};position:absolute;width:100%;}.digit__stack > *{display:inline-block;}.digit__lt{bottom:calc(100% + ${g});}.digit__gt{top:calc(100% + ${g});}.symbol{display:inline-block;position:relative;isolation:isolate;}.symbol__value{display:inline-block;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}`;function Rt(n,i,t=60){const s=Math.trunc(n/1e3*t);return Array.from({length:s},(e,a)=>i(a/(s-1)))}function jt(n,i,t=60){if(ht)return[i(0),i(1)];const s=Math.max(Math.trunc(n/1e3*t),0),e=Array.from({length:s},(a,l)=>({...i(l/s),offset:(l+.5)/s}));return e.unshift({...i(0),offset:0}),e}const at=(n,i,t)=>n+(i-n)*t,pt={duration:500,easing:"ease-out",endDelay:400,fill:"forwards"},tt=ct?{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,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)"}:{duration:900,easing:"cubic-bezier(.32,.72,0,1)"},ut=tt;let q;var U,b,S,C,v;class Et extends vt{constructor(){super(...arguments);u(this,"xTiming",tt);u(this,"yTiming",ut);u(this,"fadeTiming",pt);u(this,"root",!1);u(this,"manual",!1);r(this,U,!1);r(this,b);r(this,S);r(this,C);r(this,v)}static define(){V.BROWSER&&customElements.define("number-flow",this)}set parts(t){if(t==null)return;const{pre:s,integer:e,fraction:a,post:l}=t;if(o(this,U))this.manual||this.willUpdate(),o(this,b).update(s),o(this,S).update(e),o(this,C).update(a),o(this,v).update(l),this.manual||this.didUpdate();else{if(this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)q||(q=new CSSStyleSheet,q.replaceSync(ot)),this.shadowRoot.adoptedStyleSheets=[q];else{const f=document.createElement("style");f.textContent=ot,this.shadowRoot.appendChild(f)}this.shadowRoot.appendChild(y("slot")),h(this,b,new rt(this,s,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,b).el),h(this,S,new lt(this,e,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,S).el),h(this,C,new lt(this,a,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,C).el),h(this,v,new rt(this,l,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,v).el)}h(this,U,!0)}willUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,b).willUpdate(t),o(this,S).willUpdate(t),o(this,C).willUpdate(t),o(this,v).willUpdate(t)}didUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,b).didUpdate(t),o(this,S).didUpdate(t),o(this,C).didUpdate(t),o(this,v).didUpdate(t)}}U=new WeakMap,b=new WeakMap,S=new WeakMap,C=new WeakMap,v=new WeakMap;class mt{constructor(i,t,{justify:s,className:e,...a},l){u(this,"flow");u(this,"el");u(this,"justify");u(this,"children",new Map);u(this,"onCharRemove",i=>()=>{this.children.delete(i)});this.flow=i,this.justify=s;const f=t.map(c=>this.addChar(c).el);f.push(document.createTextNode("​")),this.el=y("span",{...a,className:`section section--justify-${s} ${e??""}`},l?l(f):f)}addChar(i,{startDigitsAtZero:t=!1,...s}={}){const e=i.type==="integer"||i.type==="fraction"?new yt(this,i.type,t?0:i.value,{...s,onRemove:this.onCharRemove(i.key)}):new Tt(this,i.type,i.value,{...s,onRemove:this.onCharRemove(i.key)});return this.children.set(i.key,e),e}unpop(i){i.el.classList.remove("section__exiting"),i.el.style[this.justify]=""}pop(i){i.forEach(t=>{t.el.style[this.justify]=`${bt(t.el,this.justify)}px`}),i.forEach(t=>{t.el.classList.add("section__exiting"),t.present=!1})}addNewAndUpdateExisting(i,t=this.el){const s=new Map,e=new Map,a=this.justify==="left",l=a?"prepend":"append";St(i,c=>{let d;this.children.has(c.key)?(d=this.children.get(c.key),e.set(c,d),this.unpop(d),d.present=!0):(d=this.addChar(c,{startDigitsAtZero:!0,animateIn:!0}),s.set(c,d)),t[l](d.el)},{reverse:a});const f=t.getBoundingClientRect();s.forEach(c=>{c.willUpdate(f)}),s.forEach((c,d)=>{c.update(d.value)}),e.forEach((c,d)=>{c.update(d.value)})}}var k,M,A,B,N,L;class lt extends mt{constructor(t,s,{className:e,...a}){let l;super(t,s,{...a,className:`${e??""} section--masked`},f=>[l=y("span",{className:"section__inner"},f)]);r(this,k);r(this,M);r(this,A);r(this,B);r(this,N);r(this,L);h(this,k,l)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,M,s.width),h(this,A,s[this.justify]-t[this.justify]);const e=o(this,k).getBoundingClientRect();this.children.forEach(a=>a.willUpdate(e))}update(t){const s=new Map;this.children.forEach((e,a)=>{t.find(l=>l.key===a)||s.set(a,e),this.unpop(e)}),this.addNewAndUpdateExisting(t,o(this,k)),s.forEach(e=>{e instanceof yt&&e.update(0)}),this.pop(s)}didUpdate(t){var c,d,x,E;(c=o(this,B))==null||c.cancel(),(d=o(this,L))==null||d.cancel(),(x=o(this,N))==null||x.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify],a=o(this,A)-e,l=Math.max(o(this,M),.01)/Math.max(s.width,.01),f=o(this,k).getBoundingClientRect();this.children.forEach(_=>_.didUpdate(f)),h(this,B,this.el.animate({transform:[`translateX(${a}px) scaleX(${l})`,"none"]},this.flow.xTiming)),l!==1&&(h(this,L,(E=o(this,k))==null?void 0:E.animate({transform:Rt(1e3,_=>`scaleX(${1/at(l,1,_)})`)},this.flow.xTiming)),h(this,N,this.el.animate(jt(1e3,_=>({"--_number-flow-scale-x":at(l,1,_)})),this.flow.xTiming)))}}k=new WeakMap,M=new WeakMap,A=new WeakMap,B=new WeakMap,N=new WeakMap,L=new WeakMap;var W,P;class rt extends mt{constructor(){super(...arguments);r(this,W);r(this,P)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,W,s[this.justify]-t[this.justify]),this.children.forEach(e=>e.willUpdate(s))}update(t){const s=new Map;this.children.forEach((e,a)=>{t.find(l=>l.key===a)||s.set(a,e)}),this.pop(s),this.addNewAndUpdateExisting(t)}didUpdate(t){var a;(a=o(this,P))==null||a.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify];this.children.forEach(l=>l.didUpdate(s)),h(this,P,this.el.animate({transform:[`translateX(${o(this,W)-e}px)`,"none"]},this.flow.xTiming))}}W=new WeakMap,P=new WeakMap;var R,H,j;class Q{constructor(i,t,{onRemove:s,animateIn:e=!1}={}){u(this,"flow");u(this,"el");r(this,R,!0);r(this,H);r(this,j);this.flow=i,this.el=t,e&&this.el.animate({opacity:["0","1"]},i.fadeTiming),h(this,H,s)}get present(){return o(this,R)}set present(i){var s;if(o(this,R)===i)return;const t=getComputedStyle(this.el).getPropertyValue("opacity");(s=o(this,j))==null||s.cancel(),h(this,j,this.el.animate({opacity:[t,i?"1":"0"]},this.flow.fadeTiming)),i||(o(this,j).onfinish=()=>{var e;this.el.remove(),(e=o(this,H))==null||e.call(this)}),h(this,R,i)}}R=new WeakMap,H=new WeakMap,j=new WeakMap;class gt extends Q{constructor(t,s,e,a){super(t.flow,e,a);u(this,"section");u(this,"value");u(this,"el");this.section=t,this.value=s,this.el=e}}var $,O,X,z,D;class yt extends gt{constructor(t,s,e,a){super(t,e,y("span",{className:"digit",textContent:e+""}),a);r(this,$);r(this,O);r(this,X);r(this,z);r(this,D)}willUpdate(t){h(this,$,this.value);const s=this.el.getBoundingClientRect();h(this,O,s.y-t.y);const e=s[this.section.justify]-t[this.section.justify],a=s.width/2;h(this,X,this.section.justify==="left"?e+a:e-a)}update(t){this.value=t,o(this,$)!==t&&_t(this.el,[...t===0?[]:[y("span",{className:"digit__stack digit__lt"},Array.from({length:t},(s,e)=>y("span",{textContent:e+""})))],document.createTextNode(t+""),...t===9?[]:[y("span",{className:"digit__stack digit__gt"},Array.from({length:9-t},(s,e)=>y("span",{textContent:t+e+1+""})))]])}didUpdate(t){var d,x;(d=o(this,z))==null||d.cancel(),o(this,$)!==this.value&&((x=o(this,D))==null||x.cancel());const s=this.el.getBoundingClientRect(),e=s[this.section.justify]-t[this.section.justify],a=s.width/2,l=this.section.justify==="left"?e+a:e-a,f=`translateX(${o(this,X)-l}px)`,c=`translateY(calc((100% + ${g}) * ${this.value-o(this,$)} + ${o(this,O)}px))`;h(this,z,this.el.animate({transform:[J?f:`${f} ${c}`,"none"]},{...this.flow.xTiming,composite:"accumulate"})),J&&o(this,$)!==this.value&&h(this,D,this.el.animate({transform:[c,"none"]},{...this.flow.yTiming,composite:"accumulate"}))}}$=new WeakMap,O=new WeakMap,X=new WeakMap,z=new WeakMap,D=new WeakMap;var w,F,I,Y;class Tt extends gt{constructor(t,s,e,a){const l=y("span",{className:"symbol__value",textContent:e});super(t,e,y("span",{className:"symbol"},[l]),a);u(this,"type");r(this,w,new Map);r(this,F);r(this,I,t=>()=>{o(this,w).delete(t)});r(this,Y);this.type=s,o(this,w).set(e,new Q(this.flow,l,{onRemove:o(this,I).call(this,e)}))}willUpdate(t){if(this.type==="decimal")return;const s=this.el.getBoundingClientRect();h(this,F,s[this.section.justify]-t[this.section.justify])}update(t){if(this.value!==t){const s=o(this,w).get(this.value);if(s.present=!1,s.el.classList.add("symbol__exiting"),o(this,w).has(t)){const e=o(this,w).get(t);e.present=!0,e.el.classList.remove("symbol__exiting")}else{const e=y("span",{className:"symbol__value",textContent:t});this.el.appendChild(e),o(this,w).set(t,new Q(this.flow,e,{animateIn:!0,onRemove:o(this,I).call(this,t)}))}}this.value=t}didUpdate(t){var a;if(this.type==="decimal")return;(a=o(this,Y))==null||a.cancel();const e=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify];h(this,Y,this.el.animate({transform:[`translateX(${o(this,F)-e}px)`,"none"]},this.flow.xTiming))}}w=new WeakMap,F=new WeakMap,I=new WeakMap,Y=new WeakMap;exports.NumberFlowLite=Et;exports.SlottedTag=ft;exports.defaultFadeTiming=pt;exports.defaultXTiming=tt;exports.defaultYTiming=ut;exports.partitionParts=Ct;exports.slottedStyles=$t;exports.supportsAnimationComposition=J;exports.supportsLinear=ct;
+"use strict";var wt=Object.defineProperty;var et=n=>{throw TypeError(n)};var xt=(n,i,t)=>i in n?wt(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t;var u=(n,i,t)=>xt(n,typeof i!="symbol"?i+"":i,t),it=(n,i,t)=>i.has(n)||et("Cannot "+t);var o=(n,i,t)=>(it(n,i,"read from private field"),t?t.call(n):i.get(n)),r=(n,i,t)=>i.has(n)?et("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(n):i.set(n,t),h=(n,i,t,s)=>(it(n,i,"write to private field"),s?s.call(n,t):i.set(n,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("esm-env"),y=(n,i,t)=>{const s=document.createElement(n),[e,a]=Array.isArray(i)?[void 0,i]:[i,t];return e&&Object.assign(s,e),a==null||a.forEach(l=>s.appendChild(l)),s},_t=(n,i)=>{typeof Element.prototype.replaceChildren>"u"?(n.innerHTML="",i.forEach(t=>n.appendChild(t))):n.replaceChildren(...i)},bt=(n,i)=>{var t;return i==="left"?n.offsetLeft:(((t=n.offsetParent instanceof HTMLElement?n.offsetParent:null)==null?void 0:t.offsetWidth)??0)-n.offsetWidth-n.offsetLeft};function St(n,i,{reverse:t=!1}={}){const s=n.length;for(let e=t?s-1:0;t?e>=0:e<s;t?e--:e++)i(n[e],e)}function Ct(n,i){const t=i.formatToParts(n),s=[],e=[],a=[],l=[],f={},c=p=>(f[p]||(f[p]=0),`${p}:${f[p]++}`);let d="",x=!1,E=!1;for(const p of t){d+=p.value;const m=p.type==="minusSign"||p.type==="plusSign"?"sign":p.type;m==="integer"?(x=!0,e.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z)})))):m==="group"?e.push({type:m,value:p.value}):m==="decimal"?(E=!0,a.push({type:m,value:p.value,key:c(m)})):m==="fraction"?a.push(...p.value.split("").map(Z=>({type:m,value:parseInt(Z),key:c(m)}))):(x||E?l:s).push({type:m,value:p.value,key:c(m)})}const _=[];for(let p=e.length-1;p>=0;p--)_.unshift({...e[p],key:c(e[p].type)});return{pre:s,integer:_,fraction:a,post:l,formatted:d}}const vt=V.BROWSER?HTMLElement:class{},kt=String.raw,ct=V.BROWSER&&typeof CSS<"u"&&CSS.supports("transition-timing-function","linear(1, 2)"),ht=V.BROWSER&&typeof CSS<"u"&&typeof CSS.registerProperty<"u",J=V.BROWSER&&typeof CSS<"u"&&typeof CSS.supports("animation-composition","accumulate")<"u";if(ht)try{CSS.registerProperty({name:"--_number-flow-scale-x",syntax:"<number>",inherits:!1,initialValue:"1"})}catch{}const dt="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",T="var(--number-flow-mask-width, 0.5em)",G=`${T} * 1/var(--_number-flow-scale-x)`,st=`calc(${G})`,nt=`linear-gradient(to bottom, transparent 0, #000 ${g}, #000 calc(100% - ${g}), transparent 100%)`,K="#000 0, transparent 71%",ft="span",$t={fontKerning:"none",display:"inline-block",lineHeight:dt,padding:`${g} 0`},ot=kt`:host{display:inline-block;direction:ltr;user-select:none;pointer-events:none;white-space:nowrap;position:relative;line-height:${dt} !important;isolation:isolate;}::slotted(${ft}){position:absolute;left:0;top:0;color:transparent !important;z-index:-1;user-select:text;pointer-events:auto;}.section{display:inline-block;padding-bottom:${g};padding-top:${g};vertical-align:top;user-select:none;}.section:not(.section--masked),.section--masked .section__inner{position:relative;isolation:isolate;}.section__inner{display:inline-block;transform-origin:inherit;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section--masked{overflow:clip;position:relative;z-index:-1;--_number-flow-scale-x:1;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(100% - ${G}) 100%,100% calc(100% - ${g} * 2),${st} ${g},${st} ${g};}.section--masked.section--justify-left{padding-right:${T};margin-right:calc(-1 * ${T});-webkit-mask-image:${nt},linear-gradient(to right,#000 0,#000 calc(100% - ${G}),transparent 100%),radial-gradient(at bottom left,${K}),radial-gradient(at top left,${K});-webkit-mask-position:left,center,right top,right bottom;}.section--masked.section--justify-right{padding-left:${T};margin-left:calc(-1 * ${T});-webkit-mask-image:${nt},linear-gradient(to left,#000 0,#000 calc(100% - ${G}),transparent 100%),radial-gradient(at bottom right,${K}),radial-gradient(at top right,${K});-webkit-mask-position:right,center,left top,left bottom;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:inline-block;position:relative;}.digit__stack{display:flex;flex-direction:column;align-items:center;gap:${g};position:absolute;width:100%;}.digit__stack > *{display:inline-block;}.digit__lt{bottom:calc(100% + ${g});}.digit__gt{top:calc(100% + ${g});}.symbol{display:inline-block;position:relative;isolation:isolate;}.symbol__value{display:inline-block;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}`;function Rt(n,i,t=60){const s=Math.trunc(n/1e3*t);return Array.from({length:s},(e,a)=>i(a/(s-1)))}function jt(n,i,t=60){if(ht)return[i(0),i(1)];const s=Math.max(Math.trunc(n/1e3*t),0),e=Array.from({length:s},(a,l)=>({...i(l/s),offset:(l+.5)/s}));return e.unshift({...i(0),offset:0}),e}const at=(n,i,t)=>n+(i-n)*t,pt={duration:500,easing:"ease-out"},tt=ct?{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,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)"}:{duration:900,easing:"cubic-bezier(.32,.72,0,1)"},ut=tt;let q;var U,b,S,C,v;class Et extends vt{constructor(){super(...arguments);u(this,"xTiming",tt);u(this,"yTiming",ut);u(this,"fadeTiming",pt);u(this,"root",!1);u(this,"manual",!1);r(this,U,!1);r(this,b);r(this,S);r(this,C);r(this,v)}static define(){V.BROWSER&&customElements.define("number-flow",this)}set parts(t){if(t==null)return;const{pre:s,integer:e,fraction:a,post:l}=t;if(o(this,U))this.manual||this.willUpdate(),o(this,b).update(s),o(this,S).update(e),o(this,C).update(a),o(this,v).update(l),this.manual||this.didUpdate();else{if(this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)q||(q=new CSSStyleSheet,q.replaceSync(ot)),this.shadowRoot.adoptedStyleSheets=[q];else{const f=document.createElement("style");f.textContent=ot,this.shadowRoot.appendChild(f)}this.shadowRoot.appendChild(y("slot")),h(this,b,new rt(this,s,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,b).el),h(this,S,new lt(this,e,{inert:!0,ariaHidden:"true",justify:"right"})),this.shadowRoot.appendChild(o(this,S).el),h(this,C,new lt(this,a,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,C).el),h(this,v,new rt(this,l,{inert:!0,ariaHidden:"true",justify:"left"})),this.shadowRoot.appendChild(o(this,v).el)}h(this,U,!0)}willUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,b).willUpdate(t),o(this,S).willUpdate(t),o(this,C).willUpdate(t),o(this,v).willUpdate(t)}didUpdate(){const t=this.root?this.getBoundingClientRect():new DOMRect;o(this,b).didUpdate(t),o(this,S).didUpdate(t),o(this,C).didUpdate(t),o(this,v).didUpdate(t)}}U=new WeakMap,b=new WeakMap,S=new WeakMap,C=new WeakMap,v=new WeakMap;class mt{constructor(i,t,{justify:s,className:e,...a},l){u(this,"flow");u(this,"el");u(this,"justify");u(this,"children",new Map);u(this,"onCharRemove",i=>()=>{this.children.delete(i)});this.flow=i,this.justify=s;const f=t.map(c=>this.addChar(c).el);f.push(document.createTextNode("​")),this.el=y("span",{...a,className:`section section--justify-${s} ${e??""}`},l?l(f):f)}addChar(i,{startDigitsAtZero:t=!1,...s}={}){const e=i.type==="integer"||i.type==="fraction"?new yt(this,i.type,t?0:i.value,{...s,onRemove:this.onCharRemove(i.key)}):new Tt(this,i.type,i.value,{...s,onRemove:this.onCharRemove(i.key)});return this.children.set(i.key,e),e}unpop(i){i.el.classList.remove("section__exiting"),i.el.style[this.justify]=""}pop(i){i.forEach(t=>{t.el.style[this.justify]=`${bt(t.el,this.justify)}px`}),i.forEach(t=>{t.el.classList.add("section__exiting"),t.present=!1})}addNewAndUpdateExisting(i,t=this.el){const s=new Map,e=new Map,a=this.justify==="left",l=a?"prepend":"append";St(i,c=>{let d;this.children.has(c.key)?(d=this.children.get(c.key),e.set(c,d),this.unpop(d),d.present=!0):(d=this.addChar(c,{startDigitsAtZero:!0,animateIn:!0}),s.set(c,d)),t[l](d.el)},{reverse:a});const f=t.getBoundingClientRect();s.forEach(c=>{c.willUpdate(f)}),s.forEach((c,d)=>{c.update(d.value)}),e.forEach((c,d)=>{c.update(d.value)})}}var k,M,A,B,N,L;class lt extends mt{constructor(t,s,{className:e,...a}){let l;super(t,s,{...a,className:`${e??""} section--masked`},f=>[l=y("span",{className:"section__inner"},f)]);r(this,k);r(this,M);r(this,A);r(this,B);r(this,N);r(this,L);h(this,k,l)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,M,s.width),h(this,A,s[this.justify]-t[this.justify]);const e=o(this,k).getBoundingClientRect();this.children.forEach(a=>a.willUpdate(e))}update(t){const s=new Map;this.children.forEach((e,a)=>{t.find(l=>l.key===a)||s.set(a,e),this.unpop(e)}),this.addNewAndUpdateExisting(t,o(this,k)),s.forEach(e=>{e instanceof yt&&e.update(0)}),this.pop(s)}didUpdate(t){var c,d,x,E;(c=o(this,B))==null||c.cancel(),(d=o(this,L))==null||d.cancel(),(x=o(this,N))==null||x.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify],a=o(this,A)-e,l=Math.max(o(this,M),.01)/Math.max(s.width,.01),f=o(this,k).getBoundingClientRect();this.children.forEach(_=>_.didUpdate(f)),h(this,B,this.el.animate({transform:[`translateX(${a}px) scaleX(${l})`,"none"]},this.flow.xTiming)),l!==1&&(h(this,L,(E=o(this,k))==null?void 0:E.animate({transform:Rt(1e3,_=>`scaleX(${1/at(l,1,_)})`)},this.flow.xTiming)),h(this,N,this.el.animate(jt(1e3,_=>({"--_number-flow-scale-x":at(l,1,_)})),this.flow.xTiming)))}}k=new WeakMap,M=new WeakMap,A=new WeakMap,B=new WeakMap,N=new WeakMap,L=new WeakMap;var W,P;class rt extends mt{constructor(){super(...arguments);r(this,W);r(this,P)}willUpdate(t){const s=this.el.getBoundingClientRect();h(this,W,s[this.justify]-t[this.justify]),this.children.forEach(e=>e.willUpdate(s))}update(t){const s=new Map;this.children.forEach((e,a)=>{t.find(l=>l.key===a)||s.set(a,e)}),this.pop(s),this.addNewAndUpdateExisting(t)}didUpdate(t){var a;(a=o(this,P))==null||a.cancel();const s=this.el.getBoundingClientRect(),e=s[this.justify]-t[this.justify];this.children.forEach(l=>l.didUpdate(s)),h(this,P,this.el.animate({transform:[`translateX(${o(this,W)-e}px)`,"none"]},this.flow.xTiming))}}W=new WeakMap,P=new WeakMap;var R,H,j;class Q{constructor(i,t,{onRemove:s,animateIn:e=!1}={}){u(this,"flow");u(this,"el");r(this,R,!0);r(this,H);r(this,j);this.flow=i,this.el=t,e&&this.el.animate({opacity:["0","1"]},i.fadeTiming),h(this,H,s)}get present(){return o(this,R)}set present(i){var s;if(o(this,R)===i)return;const t=getComputedStyle(this.el).getPropertyValue("opacity");(s=o(this,j))==null||s.cancel(),h(this,j,this.el.animate({opacity:[t,i?"1":"0"]},this.flow.fadeTiming)),i||(o(this,j).onfinish=()=>{var e;this.el.remove(),(e=o(this,H))==null||e.call(this)}),h(this,R,i)}}R=new WeakMap,H=new WeakMap,j=new WeakMap;class gt extends Q{constructor(t,s,e,a){super(t.flow,e,a);u(this,"section");u(this,"value");u(this,"el");this.section=t,this.value=s,this.el=e}}var $,O,X,z,D;class yt extends gt{constructor(t,s,e,a){super(t,e,y("span",{className:"digit",textContent:e+""}),a);r(this,$);r(this,O);r(this,X);r(this,z);r(this,D)}willUpdate(t){h(this,$,this.value);const s=this.el.getBoundingClientRect();h(this,O,s.y-t.y);const e=s[this.section.justify]-t[this.section.justify],a=s.width/2;h(this,X,this.section.justify==="left"?e+a:e-a)}update(t){this.value=t,o(this,$)!==t&&_t(this.el,[...t===0?[]:[y("span",{className:"digit__stack digit__lt"},Array.from({length:t},(s,e)=>y("span",{textContent:e+""})))],document.createTextNode(t+""),...t===9?[]:[y("span",{className:"digit__stack digit__gt"},Array.from({length:9-t},(s,e)=>y("span",{textContent:t+e+1+""})))]])}didUpdate(t){var d,x;(d=o(this,z))==null||d.cancel(),o(this,$)!==this.value&&((x=o(this,D))==null||x.cancel());const s=this.el.getBoundingClientRect(),e=s[this.section.justify]-t[this.section.justify],a=s.width/2,l=this.section.justify==="left"?e+a:e-a,f=`translateX(${o(this,X)-l}px)`,c=`translateY(calc((100% + ${g}) * ${this.value-o(this,$)} + ${o(this,O)}px))`;h(this,z,this.el.animate({transform:[J?f:`${f} ${c}`,"none"]},{...this.flow.xTiming,composite:"accumulate"})),J&&o(this,$)!==this.value&&h(this,D,this.el.animate({transform:[c,"none"]},{...this.flow.yTiming,composite:"accumulate"}))}}$=new WeakMap,O=new WeakMap,X=new WeakMap,z=new WeakMap,D=new WeakMap;var w,F,I,Y;class Tt extends gt{constructor(t,s,e,a){const l=y("span",{className:"symbol__value",textContent:e});super(t,e,y("span",{className:"symbol"},[l]),a);u(this,"type");r(this,w,new Map);r(this,F);r(this,I,t=>()=>{o(this,w).delete(t)});r(this,Y);this.type=s,o(this,w).set(e,new Q(this.flow,l,{onRemove:o(this,I).call(this,e)}))}willUpdate(t){if(this.type==="decimal")return;const s=this.el.getBoundingClientRect();h(this,F,s[this.section.justify]-t[this.section.justify])}update(t){if(this.value!==t){const s=o(this,w).get(this.value);if(s.present=!1,s.el.classList.add("symbol__exiting"),o(this,w).has(t)){const e=o(this,w).get(t);e.present=!0,e.el.classList.remove("symbol__exiting")}else{const e=y("span",{className:"symbol__value",textContent:t});this.el.appendChild(e),o(this,w).set(t,new Q(this.flow,e,{animateIn:!0,onRemove:o(this,I).call(this,t)}))}}this.value=t}didUpdate(t){var a;if(this.type==="decimal")return;(a=o(this,Y))==null||a.cancel();const e=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify];h(this,Y,this.el.animate({transform:[`translateX(${o(this,F)-e}px)`,"none"]},this.flow.xTiming))}}w=new WeakMap,F=new WeakMap,I=new WeakMap,Y=new WeakMap;exports.NumberFlowLite=Et;exports.SlottedTag=ft;exports.defaultFadeTiming=pt;exports.defaultXTiming=tt;exports.defaultYTiming=ut;exports.partitionParts=Ct;exports.slottedStyles=$t;exports.supportsAnimationComposition=J;exports.supportsLinear=ct;

package/dist/index.mjs

@@ -71,12 +71,7 @@ function vt(n, i, t = 60) {
     offset: 0
   }), e;
 }
-const ot = (n, i, t) => n + (i - n) * t, $t = {
-  duration: 500,
-  easing: "ease-out",
-  endDelay: 400,
-  fill: "forwards"
-}, ht = bt ? {
+const ot = (n, i, t) => n + (i - n) * t, $t = { duration: 500, easing: "ease-out" }, ht = bt ? {
   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,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)"
 } : {
@@ -317,7 +312,7 @@ class ft extends J {
     this.section = t, this.value = s, this.el = e;
   }
 }
-var S, X, z, D, O;
+var S, X, z, O, D;
 class pt extends ft {
   constructor(t, s, e, a) {
     super(t, e, y("span", {
@@ -329,8 +324,8 @@ class pt extends ft {
     // Relative to parent:
     r(this, X);
     r(this, z);
-    r(this, D);
     r(this, O);
+    r(this, D);
   }
   willUpdate(t) {
     h(this, S, this.value);
@@ -352,15 +347,15 @@ class pt extends ft {
   }
   didUpdate(t) {
     var d, x;
-    (d = o(this, D)) == null || d.cancel(), o(this, S) !== this.value && ((x = o(this, O)) == null || x.cancel());
+    (d = o(this, O)) == null || d.cancel(), o(this, S) !== this.value && ((x = o(this, D)) == null || x.cancel());
     const s = this.el.getBoundingClientRect(), e = s[this.section.justify] - t[this.section.justify], a = s.width / 2, l = this.section.justify === "left" ? e + a : e - a, f = `translateX(${o(this, z) - l}px)`, c = `translateY(calc((100% + ${g}) * ${this.value - o(this, S)} + ${o(this, X)}px))`;
-    h(this, D, this.el.animate({
+    h(this, O, this.el.animate({
       transform: [et ? f : `${f} ${c}`, "none"]
     }, {
       ...this.flow.xTiming,
       composite: "accumulate"
       // in case there's an in-flight y animation
-    })), et && o(this, S) !== this.value && h(this, O, this.el.animate({
+    })), et && o(this, S) !== this.value && h(this, D, this.el.animate({
       transform: [c, "none"]
     }, {
       ...this.flow.yTiming,
@@ -368,7 +363,7 @@ class pt extends ft {
     }));
   }
 }
-S = new WeakMap(), X = new WeakMap(), z = new WeakMap(), D = new WeakMap(), O = new WeakMap();
+S = new WeakMap(), X = new WeakMap(), z = new WeakMap(), O = new WeakMap(), D = new WeakMap();
 var w, I, F, V;
 class jt extends ft {
   constructor(t, s, e, a) {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.2",
+  "version": "0.2.3",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",