number-flow 0.3.8 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +10 -1
- package/dist/index.mjs +188 -175
- package/dist/ssr.d.ts +1 -4
- package/dist/styles.d.ts +1 -0
- package/dist/util/string.d.ts +6 -0
- package/package.json +5 -1
- package/dist/util/css.d.ts +0 -3
- package/dist/util/env.d.ts +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type Data } from './formatter';
|
|
|
2
2
|
import { ServerSafeHTMLElement } from './ssr';
|
|
3
3
|
export { define } from './util/dom';
|
|
4
4
|
export { prefersReducedMotion } from './styles';
|
|
5
|
-
export {
|
|
5
|
+
export { renderInnerHTML } from './ssr';
|
|
6
6
|
export * from './formatter';
|
|
7
7
|
export declare const canAnimate: boolean;
|
|
8
8
|
type RawTrend = boolean | 'increasing' | 'decreasing';
|
package/dist/index.js
CHANGED
|
@@ -1 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(a,t,e,i){if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?a!==t||!i:!t.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?i:e==="a"?i.call(a):i?i.value:t.get(a)}function h(a,t,e,i,n){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!n:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?n.call(a,e):n?n.value=e:t.set(a,e),e}const O=typeof window<"u",w=(a,t,e)=>{const i=document.createElement(a),[n,l]=Array.isArray(t)?[void 0,t]:[t,e];return n&&Object.assign(i,n),l==null||l.forEach(r=>i.appendChild(r)),i},wt=(a,t)=>{var e;return t==="left"?a.offsetLeft:(((e=a.offsetParent instanceof HTMLElement?a.offsetParent:null)==null?void 0:e.offsetWidth)??0)-a.offsetWidth-a.offsetLeft},yt=a=>a.offsetWidth>0&&a.offsetHeight>0,vt=(a,t)=>{if(!(!O||customElements.get(a)===t))return customElements.define(a,t)};function _t(a,t,{reverse:e=!1}={}){const i=a.length;for(let n=e?i-1:0;e?n>=0:n<i;e?n--:n++)t(a[n],n)}function bt(a,t,e,i){const n=t.formatToParts(a);e&&n.unshift({type:"prefix",value:e}),i&&n.push({type:"suffix",value:i});const l=[],r=[],o=[],m=[],u={},p=f=>`${f}:${u[f]=(u[f]??-1)+1}`;let P="",d=!1,y=!1;for(const f of n){P+=f.value;const c=f.type==="minusSign"||f.type==="plusSign"?"sign":f.type;c==="integer"?(d=!0,r.push(...f.value.split("").map(tt=>({type:c,value:parseInt(tt)})))):c==="group"?r.push({type:c,value:f.value}):c==="decimal"?(y=!0,o.push({type:c,value:f.value,key:p(c)})):c==="fraction"?o.push(...f.value.split("").map(tt=>({type:c,value:parseInt(tt),key:p(c),place:-1-u[c]}))):(d||y?m:l).push({type:c,value:f.value,key:p(c)})}const rt=[];for(let f=r.length-1;f>=0;f--){const c=r[f];rt.unshift(c.type==="integer"?{...c,key:p(c.type),place:u[c.type]}:{...c,key:p(c.type)})}return{pre:l,integer:rt,fraction:o,post:m,valueAsString:P,value:typeof a=="string"?parseFloat(a):a}}const St=String.raw,xt=O&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),kt=O&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),V=O&&matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,J="--_number-flow-d-opacity",at="--_number-flow-d-width",Q="--_number-flow-dx",ot="--_number-flow-d",$t=(()=>{try{return CSS.registerProperty({name:J,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:Q,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:at,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:ot,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),ft="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",U=`calc(${g} / 2)`,et="var(--number-flow-mask-width, 0.5em)",x=`calc(${et} / var(--scale-x))`,B="#000 0, transparent 71%",it="span",lt=St`:host{display:inline-flex;align-items:baseline;direction:ltr;white-space:nowrap;position:relative;line-height:${ft} !important;isolation:isolate;}::slotted(${it}){position:absolute;left:0;top:0;color:transparent !important;will-change:unset !important;z-index:-5;}:host > .number,:host > .section{pointer-events:none;user-select:none;}.number,.number__inner{display:inline-flex;align-items:baseline;transform-origin:left top;}:host([data-will-change]) .number,:host([data-will-change]) .number__inner{will-change:transform;}.number{--scale-x:calc(1 + var(${at}) / var(--width));transform:translateX(var(${Q})) scaleX(var(--scale-x));margin:0 calc(-1 * ${et});position:relative;z-index:-1;overflow:clip;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${x},#000 calc(100% - ${x}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${B}),radial-gradient(at bottom left,${B}),radial-gradient(at top left,${B}),radial-gradient(at top right,${B});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${x} * 2) 100%,${x} ${g},${x} ${g},${x} ${g},${x} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:0 ${et};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${Q})));}.section{display:inline-flex;align-items:baseline;padding-bottom:${U};padding-top:${U};position:relative;isolation:isolate;}.section::after{content:'\200b';display:block;padding:${U} 0;}:host([data-will-change]) .section{will-change:transform;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting{position:absolute !important;z-index:-1;}.digit{display:block;position:relative;--c:var(--current) + var(${ot});}:host([data-will-change]) .digit,:host([data-will-change]) .digit__num{will-change:transform;}.digit__num{display:block;padding:${U} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-flex;align-items:baseline;position:relative;isolation:isolate;padding:${U} 0;}:host([data-will-change]) .symbol{will-change:transform;}.symbol__value{display:block;mix-blend-mode:plus-lighter;white-space:pre;}.symbol__exiting{position:absolute;z-index:-1;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${J}));}`,Mt=O?HTMLElement:class{},Et=({valueAsString:a,willChange:t})=>`<${it} style="font-kerning: none; display: inline-block; line-height: ${ft}; padding: ${g} 0;${t?"will-change: transform":""}">${a}</${it}>`,Nt=(a,t)=>a!=null&&t==null?a:a==null&&t!=null?t:a!=null&&t!=null?Math.max(a,t):null;var W,L,k,$,M,v,R,T,j,C,X,E,N,z,I,G,A,Y,F,D,_,K,st,b,Z,q;const dt=kt&&xt&&$t;var S;(function(a){a[a.UP=1]="UP",a[a.DOWN=-1]="DOWN",a[a.NONE=0]="NONE"})(S||(S={}));let H;class pt extends Mt{constructor(){super(...arguments),this.transformTiming=this.constructor.defaultProps.transformTiming,this.spinTiming=this.constructor.defaultProps.spinTiming,this.opacityTiming=this.constructor.defaultProps.opacityTiming,this.respectMotionPreference=this.constructor.defaultProps.respectMotionPreference,this.trend=this.constructor.defaultProps.trend,this.continuous=this.constructor.defaultProps.continuous,W.set(this,this.constructor.defaultProps.animated),L.set(this,!1),k.set(this,void 0),$.set(this,void 0),M.set(this,void 0),v.set(this,void 0),R.set(this,void 0),T.set(this,s(this,W,"f")),j.set(this,void 0),this.manual=!1,C.set(this,void 0)}get animated(){return s(this,W,"f")}set animated(t){var e;this.animated!==t&&(h(this,W,t,"f"),(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}get created(){return s(this,L,"f")}get computedTrend(){return s(this,v,"f")}get startingPlace(){return s(this,R,"f")}get computedAnimated(){return s(this,T,"f")}set data(t){if(t==null)return;const{pre:e,integer:i,fraction:n,post:l,value:r}=t;if(s(this,L,"f")){const o=s(this,j,"f");if(h(this,j,t,"f"),this.trend===!0?h(this,v,Math.sign(r-o.value),"f"):this.trend==="increasing"?h(this,v,S.UP,"f"):this.trend==="decreasing"?h(this,v,S.DOWN,"f"):h(this,v,S.NONE,"f"),h(this,R,void 0,"f"),s(this,v,"f")!==S.NONE&&this.continuous){const m=o.integer.concat(o.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),u=t.integer.concat(t.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),p=m.find(d=>!u.find(y=>y.place===d.place&&y.value===d.value)),P=u.find(d=>!m.find(y=>d.place===y.place&&d.value===y.value));h(this,R,Nt(p==null?void 0:p.place,P==null?void 0:P.place),"f")}h(this,T,dt&&s(this,W,"f")&&(!this.respectMotionPreference||!(V!=null&&V.matches))&&yt(this),"f"),this.manual||this.willUpdate(),s(this,k,"f").update(e),s(this,$,"f").update({integer:i,fraction:n}),s(this,M,"f").update(l),this.manual||this.didUpdate()}else{if(h(this,j,t,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)H||(H=new CSSStyleSheet,H.replaceSync(lt)),this.shadowRoot.adoptedStyleSheets=[H];else{const o=document.createElement("style");o.textContent=lt,this.shadowRoot.appendChild(o)}this.shadowRoot.appendChild(w("slot")),h(this,k,new ct(this,e,{inert:!0,ariaHidden:"true",justify:"right"}),"f"),this.shadowRoot.appendChild(s(this,k,"f").el),h(this,$,new Pt(this,i,n,{inert:!0,ariaHidden:"true"}),"f"),this.shadowRoot.appendChild(s(this,$,"f").el),h(this,M,new ct(this,l,{inert:!0,ariaHidden:"true",justify:"left"}),"f"),this.shadowRoot.appendChild(s(this,M,"f").el)}h(this,L,!0,"f")}willUpdate(){s(this,k,"f").willUpdate(),s(this,$,"f").willUpdate(),s(this,M,"f").willUpdate()}didUpdate(){if(!s(this,T,"f"))return;s(this,C,"f")?s(this,C,"f").abort():this.dispatchEvent(new Event("animationsstart")),s(this,k,"f").didUpdate(),s(this,$,"f").didUpdate(),s(this,M,"f").didUpdate();const t=new AbortController;Promise.all(this.shadowRoot.getAnimations().map(e=>e.finished)).then(()=>{t.signal.aborted||(this.dispatchEvent(new Event("animationsfinish")),h(this,C,void 0,"f"))}),h(this,C,t,"f")}}W=new WeakMap,L=new WeakMap,k=new WeakMap,$=new WeakMap,M=new WeakMap,v=new WeakMap,R=new WeakMap,T=new WeakMap,j=new WeakMap,C=new WeakMap;pt.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,.996,.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:!0,continuous:!1,respectMotionPreference:!0};class Pt{constructor(t,e,i,{className:n,...l}={}){this.flow=t,X.set(this,void 0),E.set(this,void 0),N.set(this,void 0),z.set(this,void 0),I.set(this,void 0),h(this,E,new ht(t,e,{justify:"right"}),"f"),h(this,N,new ht(t,i,{justify:"left"}),"f"),h(this,X,w("span",{className:"number__inner"},[s(this,E,"f").el,s(this,N,"f").el]),"f"),this.el=w("span",{...l,className:`number ${n??""}`},[s(this,X,"f")])}willUpdate(){h(this,z,this.el.offsetWidth,"f"),h(this,I,this.el.getBoundingClientRect().left,"f"),s(this,E,"f").willUpdate(),s(this,N,"f").willUpdate()}update({integer:t,fraction:e}){s(this,E,"f").update(t),s(this,N,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();s(this,E,"f").didUpdate(),s(this,N,"f").didUpdate();const e=s(this,I,"f")-t.left,i=this.el.offsetWidth,n=s(this,z,"f")-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[Q]:[`${e}px`,"0px"],[at]:[n,0]},{...this.flow.transformTiming,composite:"accumulate"})}}X=new WeakMap,E=new WeakMap,N=new WeakMap,z=new WeakMap,I=new WeakMap;class ut{constructor(t,e,{justify:i,className:n,...l},r){this.flow=t,this.children=new Map,this.onCharRemove=m=>()=>{this.children.delete(m)},G.set(this,void 0),this.justify=i;const o=e.map(m=>this.addChar(m).el);this.el=w("span",{...l,className:`section section--justify-${i} ${n??""}`},r?r(o):o)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){const n=t.type==="integer"||t.type==="fraction"?new gt(this,t.type,e?0:t.value,t.place,{...i,onRemove:this.onCharRemove(t.key)}):new Wt(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,n),n}unpop(t){t.el.classList.remove("section__exiting"),t.el.style[this.justify]=""}pop(t){t.forEach(e=>{e.el.style[this.justify]=`${wt(e.el,this.justify)}px`}),t.forEach(e=>{e.el.classList.add("section__exiting"),e.present=!1})}addNewAndUpdateExisting(t){const e=new Map,i=new Map,n=this.justify==="left",l=n?"prepend":"append";if(_t(t,r=>{let o;this.children.has(r.key)?(o=this.children.get(r.key),i.set(r,o),this.unpop(o),o.present=!0):(o=this.addChar(r,{startDigitsAtZero:!0,animateIn:!0}),e.set(r,o)),this.el[l](o.el)},{reverse:n}),this.flow.computedAnimated){const r=this.el.getBoundingClientRect();e.forEach(o=>{o.willUpdate(r)})}e.forEach((r,o)=>{r.update(o.value)}),i.forEach((r,o)=>{r.update(o.value)})}willUpdate(){const t=this.el.getBoundingClientRect();h(this,G,t[this.justify],"f"),this.children.forEach(e=>e.willUpdate(t))}didUpdate(){const t=this.el.getBoundingClientRect();this.children.forEach(n=>n.didUpdate(t));const e=t[this.justify],i=s(this,G,"f")-e;i&&this.children.size&&this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}G=new WeakMap;class ht extends ut{update(t){const e=new Map;this.children.forEach((i,n)=>{t.find(l=>l.key===n)||e.set(n,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof gt&&i.update(0)}),this.pop(e)}}class ct extends ut{update(t){const e=new Map;this.children.forEach((i,n)=>{t.find(l=>l.key===n)||e.set(n,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}}class nt{constructor(t,e,{onRemove:i,animateIn:n=!1}={}){this.flow=t,this.el=e,A.set(this,!0),Y.set(this,void 0),F.set(this,()=>{var l;this.el.remove(),(l=s(this,Y,"f"))==null||l.call(this)}),this.el.classList.add("animate-presence"),this.flow.computedAnimated&&n&&this.el.animate({[J]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),h(this,Y,i,"f")}get present(){return s(this,A,"f")}set present(t){if(s(this,A,"f")!==t){if(h(this,A,t,"f"),!this.flow.computedAnimated){t||s(this,F,"f").call(this);return}this.el.style.setProperty("--_number-flow-d-opacity",t?"0":"-.999"),this.el.animate({[J]:t?[-.9999,0]:[.999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),t?this.flow.removeEventListener("animationsfinish",s(this,F,"f")):this.flow.addEventListener("animationsfinish",s(this,F,"f"),{once:!0})}}}A=new WeakMap,Y=new WeakMap,F=new WeakMap;class mt extends nt{constructor(t,e,i,n){super(t.flow,i,n),this.section=t,this.value=e,this.el=i}}class gt extends mt{constructor(t,e,i,n,l){const r=Array.from({length:10}).map((m,u)=>{const p=w("span",{className:`digit__num${u===i?" is-current":""}`},[document.createTextNode(String(u))]);return p.style.setProperty("--n",String(u)),p}),o=w("span",{className:"digit"},r);o.style.setProperty("--current",String(i)),super(t,i,o,l),this.place=n,D.set(this,void 0),_.set(this,void 0),K.set(this,void 0),st.set(this,()=>{this.el.classList.remove("is-spinning")}),h(this,D,r,"f")}willUpdate(t){const e=this.el.getBoundingClientRect();h(this,_,this.value,"f");const i=e[this.section.justify]-t[this.section.justify],n=e.width/2;h(this,K,this.section.justify==="left"?i+n:i-n,"f")}update(t){var e,i;(e=s(this,D,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=s(this,D,"f")[t])==null||i.classList.add("is-current"),this.value=t}didUpdate(t){const e=this.el.getBoundingClientRect(),i=e[this.section.justify]-t[this.section.justify],n=e.width/2,l=this.section.justify==="left"?i+n:i-n,r=s(this,K,"f")-l;r&&this.el.animate({transform:[`translateX(${r}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"});const o=this.diff;o&&(this.el.classList.add("is-spinning"),this.el.animate({[ot]:[-o,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",s(this,st,"f"),{once:!0}))}get diff(){let t=this.flow.computedTrend;const e=this.value-s(this,_,"f");return!e&&this.flow.startingPlace!=null&&this.flow.startingPlace>=this.place?10*t:(t||(t=Math.sign(e)),t===S.DOWN&&this.value>s(this,_,"f")?this.value-10-s(this,_,"f"):t===S.UP&&this.value<s(this,_,"f")?10-s(this,_,"f")+this.value:e)}}D=new WeakMap,_=new WeakMap,K=new WeakMap,st=new WeakMap;class Wt extends mt{constructor(t,e,i,n){const l=w("span",{className:"symbol__value",textContent:i});super(t,i,w("span",{className:"symbol"},[l]),n),this.type=e,b.set(this,new Map),Z.set(this,void 0),q.set(this,r=>()=>{s(this,b,"f").delete(r)}),s(this,b,"f").set(i,new nt(this.flow,l,{onRemove:s(this,q,"f").call(this,i)}))}willUpdate(t){if(this.type==="decimal")return;const e=this.el.getBoundingClientRect();h(this,Z,e[this.section.justify]-t[this.section.justify],"f")}update(t){if(this.value!==t){const e=s(this,b,"f").get(this.value);if(e.present=!1,e.el.classList.add("symbol__exiting"),s(this,b,"f").has(t)){const i=s(this,b,"f").get(t);i.present=!0,i.el.classList.remove("symbol__exiting")}else{const i=w("span",{className:"symbol__value",textContent:t});this.el.appendChild(i),s(this,b,"f").set(t,new nt(this.flow,i,{animateIn:!0,onRemove:s(this,q,"f").call(this,t)}))}}this.value=t}didUpdate(t){if(this.type==="decimal")return;const i=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify],n=s(this,Z,"f")-i;n&&this.el.animate({transform:[`translateX(${n}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}b=new WeakMap,Z=new WeakMap,q=new WeakMap;exports.NumberFlowLite=pt;exports.canAnimate=dt;exports.define=vt;exports.formatToData=bt;exports.prefersReducedMotion=V;exports.render=Et;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("esm-env");function n(s,t,e,i){if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?s!==t||!i:!t.has(s))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?i:e==="a"?i.call(s):i?i.value:t.get(s)}function c(s,t,e,i,a){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?s!==t||!a:!t.has(s))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?a.call(s,e):a?a.value=e:t.set(s,e),e}const S=(s,t,e)=>{const i=document.createElement(s),[a,l]=Array.isArray(t)?[void 0,t]:[t,e];return a&&Object.assign(i,a),l==null||l.forEach(r=>i.appendChild(r)),i},yt=(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},vt=s=>s.offsetWidth>0&&s.offsetHeight>0,_t=(s,t)=>{if(!(!O.BROWSER||customElements.get(s)===t))return customElements.define(s,t)};function bt(s,t,{reverse:e=!1}={}){const i=s.length;for(let a=e?i-1:0;e?a>=0:a<i;e?a--:a++)t(s[a],a)}function St(s,t,e,i){const a=t.formatToParts(s);e&&a.unshift({type:"prefix",value:e}),i&&a.push({type:"suffix",value:i});const l=[],r=[],o=[],m=[],u={},p=f=>`${f}:${u[f]=(u[f]??-1)+1}`;let N="",d=!1,w=!1;for(const f of a){N+=f.value;const h=f.type==="minusSign"||f.type==="plusSign"?"sign":f.type;h==="integer"?(d=!0,r.push(...f.value.split("").map(et=>({type:h,value:parseInt(et)})))):h==="group"?r.push({type:h,value:f.value}):h==="decimal"?(w=!0,o.push({type:h,value:f.value,key:p(h)})):h==="fraction"?o.push(...f.value.split("").map(et=>({type:h,value:parseInt(et),key:p(h),place:-1-u[h]}))):(d||w?m:l).push({type:h,value:f.value,key:p(h)})}const lt=[];for(let f=r.length-1;f>=0;f--){const h=r[f];lt.unshift(h.type==="integer"?{...h,key:p(h.type),place:u[h.type]}:{...h,key:p(h.type)})}return{pre:l,integer:lt,fraction:o,post:m,valueAsString:N,value:typeof s=="string"?parseFloat(s):s}}const $t=String.raw,dt=String.raw,kt=O.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),Et=O.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),H=O.BROWSER&&typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,Q="--_number-flow-d-opacity",at="--_number-flow-d-width",tt="--_number-flow-dx",ot="--_number-flow-d",Mt=(()=>{try{return CSS.registerProperty({name:Q,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:tt,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:at,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:ot,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),rt="var(--number-flow-char-height, 1em)",g="var(--number-flow-mask-height, 0.25em)",X=`calc(${g} / 2)`,it="var(--number-flow-mask-width, 0.5em)",$=`calc(${it} / var(--scale-x))`,D="#000 0, transparent 71%",ct=dt`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${rt} !important;isolation:isolate;}.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(${at}) / var(--width));transform:translateX(var(${tt})) scaleX(var(--scale-x));margin:0 calc(-1 * ${it});position:relative;z-index:-1;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${$},#000 calc(100% - ${$}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${D}),radial-gradient(at bottom left,${D}),radial-gradient(at top left,${D}),radial-gradient(at top right,${D});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${$} * 2) 100%,${$} ${g},${$} ${g},${$} ${g},${$} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:${X} ${it};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${tt})));}.section{display:inline-block;position:relative;isolation:isolate;}.section::after{content:'\200b';display:inline-block;padding:${X} 0;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting,.symbol__exiting{margin:0 !important;position:absolute !important;z-index:-1;}.digit{display:inline-block;position:relative;--c:var(--current) + var(${ot});}.digit__num{display:inline-block;padding:${X} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-block;position:relative;isolation:isolate;}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${Q}));}`,xt=O.BROWSER?HTMLElement:class{},Wt=dt`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${rt} !important;}span{display:inline-block;}:host([data-will-change]) span{will-change:transform;}.number,.digit{padding:${X} 0;}.symbol{white-space:pre;}`,Nt=s=>`<span class="${s.type==="integer"||s.type==="fraction"?"digit":"symbol"}" part="${s.type==="integer"||s.type==="fraction"?`digit ${s.type}-digit`:s.type}">${s.value}</span>`,B=(s,t)=>`<span part="${t}">${s.reduce((e,i)=>e+Nt(i),"")}</span>`,Pt=s=>$t`<template shadowroot="open" shadowrootmode="open"
|
|
2
|
+
><style>
|
|
3
|
+
${Wt}</style
|
|
4
|
+
>${B(s.pre,"left")}<span part="number" class="number"
|
|
5
|
+
>${B(s.integer,"integer")}${B(s.fraction,"fraction")}</span
|
|
6
|
+
>${B(s.post,"right")}</template
|
|
7
|
+
><span
|
|
8
|
+
style="font-kerning: none; display: inline-block; line-height: ${rt} !important; padding: ${g} 0;"
|
|
9
|
+
>${s.valueAsString}</span
|
|
10
|
+
>`,Ct=(s,t)=>s!=null&&t==null?s:s==null&&t!=null?t:s!=null&&t!=null?Math.max(s,t):null;var P,R,k,E,M,y,L,T,U,C,I,x,W,z,G,Y,j,q,A,F,v,K,st,_,Z,J;const pt=Et&&kt&&Mt;var b;(function(s){s[s.UP=1]="UP",s[s.DOWN=-1]="DOWN",s[s.NONE=0]="NONE"})(b||(b={}));let V;class ut extends xt{constructor(){super(...arguments),this.transformTiming=this.constructor.defaultProps.transformTiming,this.spinTiming=this.constructor.defaultProps.spinTiming,this.opacityTiming=this.constructor.defaultProps.opacityTiming,this.respectMotionPreference=this.constructor.defaultProps.respectMotionPreference,this.trend=this.constructor.defaultProps.trend,this.continuous=this.constructor.defaultProps.continuous,P.set(this,this.constructor.defaultProps.animated),R.set(this,!1),k.set(this,void 0),E.set(this,void 0),M.set(this,void 0),y.set(this,void 0),L.set(this,void 0),T.set(this,n(this,P,"f")),U.set(this,void 0),this.manual=!1,C.set(this,void 0)}get animated(){return n(this,P,"f")}set animated(t){var e;this.animated!==t&&(c(this,P,t,"f"),(e=this.shadowRoot)==null||e.getAnimations().forEach(i=>i.finish()))}get created(){return n(this,R,"f")}get computedTrend(){return n(this,y,"f")}get startingPlace(){return n(this,L,"f")}get computedAnimated(){return n(this,T,"f")}set data(t){if(t==null)return;const{pre:e,integer:i,fraction:a,post:l,value:r}=t;if(n(this,R,"f")){const o=n(this,U,"f");if(c(this,U,t,"f"),this.trend===!0?c(this,y,Math.sign(r-o.value),"f"):this.trend==="increasing"?c(this,y,b.UP,"f"):this.trend==="decreasing"?c(this,y,b.DOWN,"f"):c(this,y,b.NONE,"f"),c(this,L,void 0,"f"),n(this,y,"f")!==b.NONE&&this.continuous){const m=o.integer.concat(o.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),u=t.integer.concat(t.fraction).filter(d=>d.type==="integer"||d.type==="fraction"),p=m.find(d=>!u.find(w=>w.place===d.place&&w.value===d.value)),N=u.find(d=>!m.find(w=>d.place===w.place&&d.value===w.value));c(this,L,Ct(p==null?void 0:p.place,N==null?void 0:N.place),"f")}c(this,T,pt&&n(this,P,"f")&&(!this.respectMotionPreference||!(H!=null&&H.matches))&&vt(this),"f"),this.manual||this.willUpdate(),n(this,k,"f").update(e),n(this,E,"f").update({integer:i,fraction:a}),n(this,M,"f").update(l),this.manual||this.didUpdate()}else{if(c(this,U,t,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)V||(V=new CSSStyleSheet,V.replaceSync(ct)),this.shadowRoot.adoptedStyleSheets=[V];else{const o=document.createElement("style");o.textContent=ct,this.shadowRoot.appendChild(o)}c(this,k,new ft(this,e,{justify:"right",part:"left"}),"f"),this.shadowRoot.appendChild(n(this,k,"f").el),c(this,E,new Rt(this,i,a),"f"),this.shadowRoot.appendChild(n(this,E,"f").el),c(this,M,new ft(this,l,{justify:"left",part:"right"}),"f"),this.shadowRoot.appendChild(n(this,M,"f").el)}c(this,R,!0,"f")}willUpdate(){n(this,k,"f").willUpdate(),n(this,E,"f").willUpdate(),n(this,M,"f").willUpdate()}didUpdate(){if(!n(this,T,"f"))return;n(this,C,"f")?n(this,C,"f").abort():this.dispatchEvent(new Event("animationsstart")),n(this,k,"f").didUpdate(),n(this,E,"f").didUpdate(),n(this,M,"f").didUpdate();const t=new AbortController;Promise.all(this.shadowRoot.getAnimations().map(e=>e.finished)).then(()=>{t.signal.aborted||(this.dispatchEvent(new Event("animationsfinish")),c(this,C,void 0,"f"))}),c(this,C,t,"f")}}P=new WeakMap,R=new WeakMap,k=new WeakMap,E=new WeakMap,M=new WeakMap,y=new WeakMap,L=new WeakMap,T=new WeakMap,U=new WeakMap,C=new WeakMap;ut.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,.996,.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:!0,continuous:!1,respectMotionPreference:!0};class Rt{constructor(t,e,i,{className:a,...l}={}){this.flow=t,I.set(this,void 0),x.set(this,void 0),W.set(this,void 0),z.set(this,void 0),G.set(this,void 0),c(this,x,new ht(t,e,{justify:"right",part:"integer"}),"f"),c(this,W,new ht(t,i,{justify:"left",part:"fraction"}),"f"),c(this,I,S("span",{className:"number__inner"},[n(this,x,"f").el,n(this,W,"f").el]),"f"),this.el=S("span",{...l,part:"number",className:`number ${a??""}`},[n(this,I,"f")])}willUpdate(){c(this,z,this.el.offsetWidth,"f"),c(this,G,this.el.getBoundingClientRect().left,"f"),n(this,x,"f").willUpdate(),n(this,W,"f").willUpdate()}update({integer:t,fraction:e}){n(this,x,"f").update(t),n(this,W,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();n(this,x,"f").didUpdate(),n(this,W,"f").didUpdate();const e=n(this,G,"f")-t.left,i=this.el.offsetWidth,a=n(this,z,"f")-i;this.el.style.setProperty("--width",String(i)),this.el.animate({[tt]:[`${e}px`,"0px"],[at]:[a,0]},{...this.flow.transformTiming,composite:"accumulate"})}}I=new WeakMap,x=new WeakMap,W=new WeakMap,z=new WeakMap,G=new WeakMap;class mt{constructor(t,e,{justify:i,className:a,...l},r){this.flow=t,this.children=new Map,this.onCharRemove=m=>()=>{this.children.delete(m)},Y.set(this,void 0),this.justify=i;const o=e.map(m=>this.addChar(m).el);this.el=S("span",{...l,className:`section section--justify-${i} ${a??""}`},r?r(o):o)}addChar(t,{startDigitsAtZero:e=!1,...i}={}){const a=t.type==="integer"||t.type==="fraction"?new wt(this,t.type,e?0:t.value,t.place,{...i,onRemove:this.onCharRemove(t.key)}):new Lt(this,t.type,t.value,{...i,onRemove:this.onCharRemove(t.key)});return this.children.set(t.key,a),a}unpop(t){t.el.classList.remove("section__exiting"),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]=`${yt(e.el,this.justify)}px`}),t.forEach(e=>{e.el.classList.add("section__exiting"),e.present=!1})}addNewAndUpdateExisting(t){const e=new Map,i=new Map,a=this.justify==="left",l=a?"prepend":"append";if(bt(t,r=>{let o;this.children.has(r.key)?(o=this.children.get(r.key),i.set(r,o),this.unpop(o),o.present=!0):(o=this.addChar(r,{startDigitsAtZero:!0,animateIn:!0}),e.set(r,o)),this.el[l](o.el)},{reverse:a}),this.flow.computedAnimated){const r=this.el.getBoundingClientRect();e.forEach(o=>{o.willUpdate(r)})}e.forEach((r,o)=>{r.update(o.value)}),i.forEach((r,o)=>{r.update(o.value)})}willUpdate(){const t=this.el.getBoundingClientRect();c(this,Y,t[this.justify],"f"),this.children.forEach(e=>e.willUpdate(t))}didUpdate(){const t=this.el.getBoundingClientRect();this.children.forEach(a=>a.didUpdate(t));const e=t[this.justify],i=n(this,Y,"f")-e;i&&this.children.size&&this.el.animate({transform:[`translateX(${i}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}Y=new WeakMap;class ht extends mt{update(t){const e=new Map;this.children.forEach((i,a)=>{t.find(l=>l.key===a)||e.set(a,i),this.unpop(i)}),this.addNewAndUpdateExisting(t),e.forEach(i=>{i instanceof wt&&i.update(0)}),this.pop(e)}}class ft extends mt{update(t){const e=new Map;this.children.forEach((i,a)=>{t.find(l=>l.key===a)||e.set(a,i)}),this.pop(e),this.addNewAndUpdateExisting(t)}}class nt{constructor(t,e,{onRemove:i,animateIn:a=!1}={}){this.flow=t,this.el=e,j.set(this,!0),q.set(this,void 0),A.set(this,()=>{var l;this.el.remove(),(l=n(this,q,"f"))==null||l.call(this)}),this.el.classList.add("animate-presence"),this.flow.computedAnimated&&a&&this.el.animate({[Q]:[-.9999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),c(this,q,i,"f")}get present(){return n(this,j,"f")}set present(t){if(n(this,j,"f")!==t){if(c(this,j,t,"f"),!this.flow.computedAnimated){t||n(this,A,"f").call(this);return}this.el.style.setProperty("--_number-flow-d-opacity",t?"0":"-.999"),this.el.animate({[Q]:t?[-.9999,0]:[.999,0]},{...this.flow.opacityTiming,composite:"accumulate"}),t?this.flow.removeEventListener("animationsfinish",n(this,A,"f")):this.flow.addEventListener("animationsfinish",n(this,A,"f"),{once:!0})}}}j=new WeakMap,q=new WeakMap,A=new WeakMap;class gt extends nt{constructor(t,e,i,a){super(t.flow,i,a),this.section=t,this.value=e,this.el=i}}class wt extends gt{constructor(t,e,i,a,l){const r=Array.from({length:10}).map((m,u)=>{const p=S("span",{className:`digit__num${u===i?" is-current":""}`},[document.createTextNode(String(u))]);return p.style.setProperty("--n",String(u)),p}),o=S("span",{part:`digit ${e}-digit`,className:"digit"},r);o.style.setProperty("--current",String(i)),super(t,i,o,l),this.place=a,F.set(this,void 0),v.set(this,void 0),K.set(this,void 0),st.set(this,()=>{this.el.classList.remove("is-spinning")}),c(this,F,r,"f")}willUpdate(t){const e=this.el.getBoundingClientRect();c(this,v,this.value,"f");const i=e[this.section.justify]-t[this.section.justify],a=e.width/2;c(this,K,this.section.justify==="left"?i+a:i-a,"f")}update(t){var e,i;(e=n(this,F,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=n(this,F,"f")[t])==null||i.classList.add("is-current"),this.value=t}didUpdate(t){const e=this.el.getBoundingClientRect(),i=e[this.section.justify]-t[this.section.justify],a=e.width/2,l=this.section.justify==="left"?i+a:i-a,r=n(this,K,"f")-l;r&&this.el.animate({transform:[`translateX(${r}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"});const o=this.diff;o&&(this.el.classList.add("is-spinning"),this.el.animate({[ot]:[-o,0]},{...this.flow.spinTiming??this.flow.transformTiming,composite:"accumulate"}),this.flow.addEventListener("animationsfinish",n(this,st,"f"),{once:!0}))}get diff(){let t=this.flow.computedTrend;const e=this.value-n(this,v,"f");return!e&&this.flow.startingPlace!=null&&this.flow.startingPlace>=this.place?10*t:(t||(t=Math.sign(e)),t===b.DOWN&&this.value>n(this,v,"f")?this.value-10-n(this,v,"f"):t===b.UP&&this.value<n(this,v,"f")?10-n(this,v,"f")+this.value:e)}}F=new WeakMap,v=new WeakMap,K=new WeakMap,st=new WeakMap;class Lt extends gt{constructor(t,e,i,a){const l=S("span",{className:"symbol__value",textContent:i});super(t,i,S("span",{part:e,className:"symbol"},[l]),a),this.type=e,_.set(this,new Map),Z.set(this,void 0),J.set(this,r=>()=>{n(this,_,"f").delete(r)}),n(this,_,"f").set(i,new nt(this.flow,l,{onRemove:n(this,J,"f").call(this,i)}))}willUpdate(t){if(this.type==="decimal")return;const e=this.el.getBoundingClientRect();c(this,Z,e[this.section.justify]-t[this.section.justify],"f")}update(t){if(this.value!==t){const e=n(this,_,"f").get(this.value);if(e.present=!1,e.el.classList.add("symbol__exiting"),n(this,_,"f").has(t)){const i=n(this,_,"f").get(t);i.present=!0,i.el.classList.remove("symbol__exiting")}else{const i=S("span",{className:"symbol__value",textContent:t});this.el.appendChild(i),n(this,_,"f").set(t,new nt(this.flow,i,{animateIn:!0,onRemove:n(this,J,"f").call(this,t)}))}}this.value=t}didUpdate(t){if(this.type==="decimal")return;const i=this.el.getBoundingClientRect()[this.section.justify]-t[this.section.justify],a=n(this,Z,"f")-i;a&&this.el.animate({transform:[`translateX(${a}px)`,"none"]},{...this.flow.transformTiming,composite:"accumulate"})}}_=new WeakMap,Z=new WeakMap,J=new WeakMap;exports.NumberFlowLite=ut;exports.canAnimate=pt;exports.define=_t;exports.formatToData=St;exports.prefersReducedMotion=H;exports.renderInnerHTML=Pt;
|
package/dist/index.mjs
CHANGED
|
@@ -1,52 +1,53 @@
|
|
|
1
|
-
|
|
1
|
+
import { BROWSER as D } from "esm-env";
|
|
2
|
+
function n(s, t, e, i) {
|
|
2
3
|
if (e === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
|
|
3
|
-
if (typeof t == "function" ?
|
|
4
|
-
return e === "m" ? i : e === "a" ? i.call(
|
|
4
|
+
if (typeof t == "function" ? s !== t || !i : !t.has(s)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
5
|
+
return e === "m" ? i : e === "a" ? i.call(s) : i ? i.value : t.get(s);
|
|
5
6
|
}
|
|
6
|
-
function h(
|
|
7
|
+
function h(s, t, e, i, a) {
|
|
7
8
|
if (i === "m") throw new TypeError("Private method is not writable");
|
|
8
|
-
if (i === "a" && !
|
|
9
|
-
if (typeof t == "function" ?
|
|
10
|
-
return i === "a" ?
|
|
9
|
+
if (i === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
|
|
10
|
+
if (typeof t == "function" ? s !== t || !a : !t.has(s)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
11
|
+
return i === "a" ? a.call(s, e) : a ? a.value = e : t.set(s, e), e;
|
|
11
12
|
}
|
|
12
|
-
const
|
|
13
|
-
const i = document.createElement(
|
|
14
|
-
return
|
|
15
|
-
},
|
|
13
|
+
const S = (s, t, e) => {
|
|
14
|
+
const i = document.createElement(s), [a, l] = Array.isArray(t) ? [void 0, t] : [t, e];
|
|
15
|
+
return a && Object.assign(i, a), l == null || l.forEach((r) => i.appendChild(r)), i;
|
|
16
|
+
}, gt = (s, t) => {
|
|
16
17
|
var e;
|
|
17
|
-
return t === "left" ?
|
|
18
|
-
},
|
|
19
|
-
if (!(!
|
|
20
|
-
return customElements.define(
|
|
18
|
+
return t === "left" ? s.offsetLeft : (((e = s.offsetParent instanceof HTMLElement ? s.offsetParent : null) == null ? void 0 : e.offsetWidth) ?? 0) - s.offsetWidth - s.offsetLeft;
|
|
19
|
+
}, wt = (s) => s.offsetWidth > 0 && s.offsetHeight > 0, Ut = (s, t) => {
|
|
20
|
+
if (!(!D || customElements.get(s) === t))
|
|
21
|
+
return customElements.define(s, t);
|
|
21
22
|
};
|
|
22
|
-
function
|
|
23
|
-
const i =
|
|
24
|
-
for (let
|
|
25
|
-
t(a
|
|
23
|
+
function yt(s, t, { reverse: e = !1 } = {}) {
|
|
24
|
+
const i = s.length;
|
|
25
|
+
for (let a = e ? i - 1 : 0; e ? a >= 0 : a < i; e ? a-- : a++)
|
|
26
|
+
t(s[a], a);
|
|
26
27
|
}
|
|
27
|
-
function
|
|
28
|
-
const
|
|
29
|
-
e &&
|
|
28
|
+
function Lt(s, t, e, i) {
|
|
29
|
+
const a = t.formatToParts(s);
|
|
30
|
+
e && a.unshift({ type: "prefix", value: e }), i && a.push({ type: "suffix", value: i });
|
|
30
31
|
const l = [], r = [], o = [], m = [], u = {}, p = (f) => `${f}:${u[f] = (u[f] ?? -1) + 1}`;
|
|
31
|
-
let P = "", d = !1,
|
|
32
|
-
for (const f of
|
|
32
|
+
let P = "", d = !1, w = !1;
|
|
33
|
+
for (const f of a) {
|
|
33
34
|
P += f.value;
|
|
34
35
|
const c = f.type === "minusSign" || f.type === "plusSign" ? "sign" : f.type;
|
|
35
|
-
c === "integer" ? (d = !0, r.push(...f.value.split("").map((
|
|
36
|
+
c === "integer" ? (d = !0, r.push(...f.value.split("").map((tt) => ({ type: c, value: parseInt(tt) })))) : c === "group" ? r.push({ type: c, value: f.value }) : c === "decimal" ? (w = !0, o.push({ type: c, value: f.value, key: p(c) })) : c === "fraction" ? o.push(...f.value.split("").map((tt) => ({
|
|
36
37
|
type: c,
|
|
37
|
-
value: parseInt(
|
|
38
|
+
value: parseInt(tt),
|
|
38
39
|
key: p(c),
|
|
39
40
|
place: -1 - u[c]
|
|
40
|
-
}))) : (d ||
|
|
41
|
+
}))) : (d || w ? m : l).push({
|
|
41
42
|
type: c,
|
|
42
43
|
value: f.value,
|
|
43
44
|
key: p(c)
|
|
44
45
|
});
|
|
45
46
|
}
|
|
46
|
-
const
|
|
47
|
+
const lt = [];
|
|
47
48
|
for (let f = r.length - 1; f >= 0; f--) {
|
|
48
49
|
const c = r[f];
|
|
49
|
-
|
|
50
|
+
lt.unshift(c.type === "integer" ? {
|
|
50
51
|
...c,
|
|
51
52
|
key: p(c.type),
|
|
52
53
|
place: u[c.type]
|
|
@@ -57,22 +58,22 @@ function Pt(a, t, e, i) {
|
|
|
57
58
|
}
|
|
58
59
|
return {
|
|
59
60
|
pre: l,
|
|
60
|
-
integer:
|
|
61
|
+
integer: lt,
|
|
61
62
|
fraction: o,
|
|
62
63
|
post: m,
|
|
63
64
|
valueAsString: P,
|
|
64
|
-
value: typeof
|
|
65
|
+
value: typeof s == "string" ? parseFloat(s) : s
|
|
65
66
|
};
|
|
66
67
|
}
|
|
67
|
-
const
|
|
68
|
+
const vt = String.raw, dt = String.raw, _t = D && typeof CSS < "u" && CSS.supports && CSS.supports("animation-timing-function", "linear(1,2)"), bt = D && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)"), et = D && typeof matchMedia < "u" ? matchMedia("(prefers-reduced-motion: reduce)") : null, J = "--_number-flow-d-opacity", at = "--_number-flow-d-width", Q = "--_number-flow-dx", ot = "--_number-flow-d", St = (() => {
|
|
68
69
|
try {
|
|
69
70
|
return CSS.registerProperty({
|
|
70
|
-
name:
|
|
71
|
+
name: J,
|
|
71
72
|
syntax: "<number>",
|
|
72
73
|
inherits: !1,
|
|
73
74
|
initialValue: "0"
|
|
74
75
|
}), CSS.registerProperty({
|
|
75
|
-
name:
|
|
76
|
+
name: Q,
|
|
76
77
|
syntax: "<length>",
|
|
77
78
|
inherits: !0,
|
|
78
79
|
initialValue: "0px"
|
|
@@ -90,87 +91,94 @@ const yt = String.raw, vt = O && typeof CSS < "u" && CSS.supports && CSS.support
|
|
|
90
91
|
} catch {
|
|
91
92
|
return !1;
|
|
92
93
|
}
|
|
93
|
-
})(),
|
|
94
|
-
},
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
94
|
+
})(), rt = "var(--number-flow-char-height, 1em)", g = "var(--number-flow-mask-height, 0.25em)", H = `calc(${g} / 2)`, it = "var(--number-flow-mask-width, 0.5em)", $ = `calc(${it} / var(--scale-x))`, O = "#000 0, transparent 71%", ht = dt`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${rt} !important;isolation:isolate;}.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(${at}) / var(--width));transform:translateX(var(${Q})) scaleX(var(--scale-x));margin:0 calc(-1 * ${it});position:relative;z-index:-1;-webkit-mask-image:linear-gradient( to right,transparent 0,#000 ${$},#000 calc(100% - ${$}),transparent ),linear-gradient( to bottom,transparent 0,#000 ${g},#000 calc(100% - ${g}),transparent 100% ),radial-gradient(at bottom right,${O}),radial-gradient(at bottom left,${O}),radial-gradient(at top left,${O}),radial-gradient(at top right,${O});-webkit-mask-size:100% calc(100% - ${g} * 2),calc(100% - ${$} * 2) 100%,${$} ${g},${$} ${g},${$} ${g},${$} ${g};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;}.number__inner{padding:${H} ${it};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${Q})));}.section{display:inline-block;position:relative;isolation:isolate;}.section::after{content:'\200b';display:inline-block;padding:${H} 0;}.section--justify-left{transform-origin:center left;}.section--justify-right{transform-origin:center right;}.section__exiting,.symbol__exiting{margin:0 !important;position:absolute !important;z-index:-1;}.digit{display:inline-block;position:relative;--c:var(--current) + var(${ot});}.digit__num{display:inline-block;padding:${H} 0;--offset-raw:mod(10 + var(--n) - mod(var(--c),10),10);--offset:calc(var(--offset-raw) - 10 * round(down,var(--offset-raw) / 5,1));--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y));}.digit__num:not(.is-current){position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y));}.digit:not(.is-spinning) .digit__num:not(.is-current){display:none;}.symbol{display:inline-block;position:relative;isolation:isolate;}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre;}.section--justify-left .symbol__exiting{left:0;}.section--justify-right .symbol__exiting{right:0;}.animate-presence{opacity:calc(1 + var(${J}));}`, $t = D ? HTMLElement : class {
|
|
95
|
+
}, kt = dt`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${rt} !important;}span{display:inline-block;}:host([data-will-change]) span{will-change:transform;}.number,.digit{padding:${H} 0;}.symbol{white-space:pre;}`, xt = (s) => `<span class="${s.type === "integer" || s.type === "fraction" ? "digit" : "symbol"}" part="${s.type === "integer" || s.type === "fraction" ? `digit ${s.type}-digit` : s.type}">${s.value}</span>`, B = (s, t) => `<span part="${t}">${s.reduce((e, i) => e + xt(i), "")}</span>`, Rt = (s) => (
|
|
96
|
+
// shadowroot="open" non-standard attribute for old Chrome:
|
|
97
|
+
vt`<template shadowroot="open" shadowrootmode="open"
|
|
98
|
+
><style>
|
|
99
|
+
${kt}</style
|
|
100
|
+
>${B(s.pre, "left")}<span part="number" class="number"
|
|
101
|
+
>${B(s.integer, "integer")}${B(s.fraction, "fraction")}</span
|
|
102
|
+
>${B(s.post, "right")}</template
|
|
103
|
+
><span
|
|
104
|
+
style="font-kerning: none; display: inline-block; line-height: ${rt} !important; padding: ${g} 0;"
|
|
105
|
+
>${s.valueAsString}</span
|
|
106
|
+
>`
|
|
107
|
+
), Et = (s, t) => s != null && t == null ? s : s == null && t != null ? t : s != null && t != null ? Math.max(s, t) : null;
|
|
108
|
+
var W, U, k, x, E, y, L, R, T, C, X, M, N, I, z, G, j, Y, A, F, v, K, st, _, Z, q;
|
|
109
|
+
const Mt = bt && _t && St;
|
|
110
|
+
var b;
|
|
111
|
+
(function(s) {
|
|
112
|
+
s[s.UP = 1] = "UP", s[s.DOWN = -1] = "DOWN", s[s.NONE = 0] = "NONE";
|
|
113
|
+
})(b || (b = {}));
|
|
114
|
+
let V;
|
|
115
|
+
class Nt extends $t {
|
|
103
116
|
constructor() {
|
|
104
|
-
super(...arguments), this.transformTiming = this.constructor.defaultProps.transformTiming, this.spinTiming = this.constructor.defaultProps.spinTiming, this.opacityTiming = this.constructor.defaultProps.opacityTiming, this.respectMotionPreference = this.constructor.defaultProps.respectMotionPreference, this.trend = this.constructor.defaultProps.trend, this.continuous = this.constructor.defaultProps.continuous, W.set(this, this.constructor.defaultProps.animated),
|
|
117
|
+
super(...arguments), this.transformTiming = this.constructor.defaultProps.transformTiming, this.spinTiming = this.constructor.defaultProps.spinTiming, this.opacityTiming = this.constructor.defaultProps.opacityTiming, this.respectMotionPreference = this.constructor.defaultProps.respectMotionPreference, this.trend = this.constructor.defaultProps.trend, this.continuous = this.constructor.defaultProps.continuous, W.set(this, this.constructor.defaultProps.animated), U.set(this, !1), k.set(this, void 0), x.set(this, void 0), E.set(this, void 0), y.set(this, void 0), L.set(this, void 0), R.set(this, n(this, W, "f")), T.set(this, void 0), this.manual = !1, C.set(this, void 0);
|
|
105
118
|
}
|
|
106
119
|
get animated() {
|
|
107
|
-
return
|
|
120
|
+
return n(this, W, "f");
|
|
108
121
|
}
|
|
109
122
|
set animated(t) {
|
|
110
123
|
var e;
|
|
111
124
|
this.animated !== t && (h(this, W, t, "f"), (e = this.shadowRoot) == null || e.getAnimations().forEach((i) => i.finish()));
|
|
112
125
|
}
|
|
113
126
|
get created() {
|
|
114
|
-
return
|
|
127
|
+
return n(this, U, "f");
|
|
115
128
|
}
|
|
116
129
|
get computedTrend() {
|
|
117
|
-
return
|
|
130
|
+
return n(this, y, "f");
|
|
118
131
|
}
|
|
119
132
|
get startingPlace() {
|
|
120
|
-
return
|
|
133
|
+
return n(this, L, "f");
|
|
121
134
|
}
|
|
122
135
|
get computedAnimated() {
|
|
123
|
-
return
|
|
136
|
+
return n(this, R, "f");
|
|
124
137
|
}
|
|
125
138
|
set data(t) {
|
|
126
139
|
if (t == null)
|
|
127
140
|
return;
|
|
128
|
-
const { pre: e, integer: i, fraction:
|
|
129
|
-
if (
|
|
130
|
-
const o =
|
|
131
|
-
if (h(this, T, t, "f"), this.trend === !0 ? h(this,
|
|
132
|
-
const m = o.integer.concat(o.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), u = t.integer.concat(t.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), p = m.find((d) => !u.find((
|
|
133
|
-
h(this,
|
|
141
|
+
const { pre: e, integer: i, fraction: a, post: l, value: r } = t;
|
|
142
|
+
if (n(this, U, "f")) {
|
|
143
|
+
const o = n(this, T, "f");
|
|
144
|
+
if (h(this, T, t, "f"), this.trend === !0 ? h(this, y, Math.sign(r - o.value), "f") : this.trend === "increasing" ? h(this, y, b.UP, "f") : this.trend === "decreasing" ? h(this, y, b.DOWN, "f") : h(this, y, b.NONE, "f"), h(this, L, void 0, "f"), n(this, y, "f") !== b.NONE && this.continuous) {
|
|
145
|
+
const m = o.integer.concat(o.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), u = t.integer.concat(t.fraction).filter((d) => d.type === "integer" || d.type === "fraction"), p = m.find((d) => !u.find((w) => w.place === d.place && w.value === d.value)), P = u.find((d) => !m.find((w) => d.place === w.place && d.value === w.value));
|
|
146
|
+
h(this, L, Et(p == null ? void 0 : p.place, P == null ? void 0 : P.place), "f");
|
|
134
147
|
}
|
|
135
|
-
h(this,
|
|
136
|
-
|
|
148
|
+
h(this, R, Mt && n(this, W, "f") && (!this.respectMotionPreference || !(et != null && et.matches)) && // https://github.com/barvian/number-flow/issues/9
|
|
149
|
+
wt(this), "f"), this.manual || this.willUpdate(), n(this, k, "f").update(e), n(this, x, "f").update({ integer: i, fraction: a }), n(this, E, "f").update(l), this.manual || this.didUpdate();
|
|
137
150
|
} else {
|
|
138
151
|
if (h(this, T, t, "f"), this.attachShadow({ mode: "open" }), typeof CSSStyleSheet < "u" && this.shadowRoot.adoptedStyleSheets)
|
|
139
|
-
|
|
152
|
+
V || (V = new CSSStyleSheet(), V.replaceSync(ht)), this.shadowRoot.adoptedStyleSheets = [V];
|
|
140
153
|
else {
|
|
141
154
|
const o = document.createElement("style");
|
|
142
|
-
o.textContent =
|
|
155
|
+
o.textContent = ht, this.shadowRoot.appendChild(o);
|
|
143
156
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}), "f"), this.shadowRoot.appendChild(s(this, $, "f").el), h(this, E, new ct(this, l, {
|
|
152
|
-
inert: !0,
|
|
153
|
-
ariaHidden: "true",
|
|
154
|
-
justify: "left"
|
|
155
|
-
}), "f"), this.shadowRoot.appendChild(s(this, E, "f").el);
|
|
157
|
+
h(this, k, new ft(this, e, {
|
|
158
|
+
justify: "right",
|
|
159
|
+
part: "left"
|
|
160
|
+
}), "f"), this.shadowRoot.appendChild(n(this, k, "f").el), h(this, x, new Pt(this, i, a), "f"), this.shadowRoot.appendChild(n(this, x, "f").el), h(this, E, new ft(this, l, {
|
|
161
|
+
justify: "left",
|
|
162
|
+
part: "right"
|
|
163
|
+
}), "f"), this.shadowRoot.appendChild(n(this, E, "f").el);
|
|
156
164
|
}
|
|
157
|
-
h(this,
|
|
165
|
+
h(this, U, !0, "f");
|
|
158
166
|
}
|
|
159
167
|
willUpdate() {
|
|
160
|
-
|
|
168
|
+
n(this, k, "f").willUpdate(), n(this, x, "f").willUpdate(), n(this, E, "f").willUpdate();
|
|
161
169
|
}
|
|
162
170
|
didUpdate() {
|
|
163
|
-
if (!
|
|
171
|
+
if (!n(this, R, "f"))
|
|
164
172
|
return;
|
|
165
|
-
|
|
173
|
+
n(this, C, "f") ? n(this, C, "f").abort() : this.dispatchEvent(new Event("animationsstart")), n(this, k, "f").didUpdate(), n(this, x, "f").didUpdate(), n(this, E, "f").didUpdate();
|
|
166
174
|
const t = new AbortController();
|
|
167
175
|
Promise.all(this.shadowRoot.getAnimations().map((e) => e.finished)).then(() => {
|
|
168
176
|
t.signal.aborted || (this.dispatchEvent(new Event("animationsfinish")), h(this, C, void 0, "f"));
|
|
169
177
|
}), h(this, C, t, "f");
|
|
170
178
|
}
|
|
171
179
|
}
|
|
172
|
-
W = /* @__PURE__ */ new WeakMap(),
|
|
173
|
-
|
|
180
|
+
W = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap();
|
|
181
|
+
Nt.defaultProps = {
|
|
174
182
|
transformTiming: {
|
|
175
183
|
duration: 900,
|
|
176
184
|
// Make sure to keep this minified:
|
|
@@ -183,76 +191,79 @@ $t.defaultProps = {
|
|
|
183
191
|
continuous: !1,
|
|
184
192
|
respectMotionPreference: !0
|
|
185
193
|
};
|
|
186
|
-
class
|
|
187
|
-
constructor(t, e, i, { className:
|
|
188
|
-
this.flow = t,
|
|
189
|
-
justify: "right"
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
194
|
+
class Pt {
|
|
195
|
+
constructor(t, e, i, { className: a, ...l } = {}) {
|
|
196
|
+
this.flow = t, X.set(this, void 0), M.set(this, void 0), N.set(this, void 0), I.set(this, void 0), z.set(this, void 0), h(this, M, new ct(t, e, {
|
|
197
|
+
justify: "right",
|
|
198
|
+
part: "integer"
|
|
199
|
+
}), "f"), h(this, N, new ct(t, i, {
|
|
200
|
+
justify: "left",
|
|
201
|
+
part: "fraction"
|
|
202
|
+
}), "f"), h(this, X, S("span", {
|
|
193
203
|
className: "number__inner"
|
|
194
|
-
}, [
|
|
204
|
+
}, [n(this, M, "f").el, n(this, N, "f").el]), "f"), this.el = S("span", {
|
|
195
205
|
...l,
|
|
196
|
-
|
|
197
|
-
|
|
206
|
+
part: "number",
|
|
207
|
+
className: `number ${a ?? ""}`
|
|
208
|
+
}, [n(this, X, "f")]);
|
|
198
209
|
}
|
|
199
210
|
willUpdate() {
|
|
200
|
-
h(this,
|
|
211
|
+
h(this, I, this.el.offsetWidth, "f"), h(this, z, this.el.getBoundingClientRect().left, "f"), n(this, M, "f").willUpdate(), n(this, N, "f").willUpdate();
|
|
201
212
|
}
|
|
202
213
|
update({ integer: t, fraction: e }) {
|
|
203
|
-
|
|
214
|
+
n(this, M, "f").update(t), n(this, N, "f").update(e);
|
|
204
215
|
}
|
|
205
216
|
didUpdate() {
|
|
206
217
|
const t = this.el.getBoundingClientRect();
|
|
207
|
-
|
|
208
|
-
const e =
|
|
218
|
+
n(this, M, "f").didUpdate(), n(this, N, "f").didUpdate();
|
|
219
|
+
const e = n(this, z, "f") - t.left, i = this.el.offsetWidth, a = n(this, I, "f") - i;
|
|
209
220
|
this.el.style.setProperty("--width", String(i)), this.el.animate({
|
|
210
|
-
[
|
|
211
|
-
[at]: [
|
|
221
|
+
[Q]: [`${e}px`, "0px"],
|
|
222
|
+
[at]: [a, 0]
|
|
212
223
|
}, {
|
|
213
224
|
...this.flow.transformTiming,
|
|
214
225
|
composite: "accumulate"
|
|
215
226
|
});
|
|
216
227
|
}
|
|
217
228
|
}
|
|
218
|
-
|
|
219
|
-
class
|
|
220
|
-
constructor(t, e, { justify: i, className:
|
|
229
|
+
X = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap();
|
|
230
|
+
class pt {
|
|
231
|
+
constructor(t, e, { justify: i, className: a, ...l }, r) {
|
|
221
232
|
this.flow = t, this.children = /* @__PURE__ */ new Map(), this.onCharRemove = (m) => () => {
|
|
222
233
|
this.children.delete(m);
|
|
223
|
-
},
|
|
234
|
+
}, G.set(this, void 0), this.justify = i;
|
|
224
235
|
const o = e.map((m) => this.addChar(m).el);
|
|
225
|
-
this.el =
|
|
236
|
+
this.el = S("span", {
|
|
226
237
|
...l,
|
|
227
|
-
className: `section section--justify-${i} ${
|
|
238
|
+
className: `section section--justify-${i} ${a ?? ""}`
|
|
228
239
|
}, r ? r(o) : o);
|
|
229
240
|
}
|
|
230
241
|
addChar(t, { startDigitsAtZero: e = !1, ...i } = {}) {
|
|
231
|
-
const
|
|
242
|
+
const a = t.type === "integer" || t.type === "fraction" ? new mt(this, t.type, e ? 0 : t.value, t.place, {
|
|
232
243
|
...i,
|
|
233
244
|
onRemove: this.onCharRemove(t.key)
|
|
234
|
-
}) : new
|
|
245
|
+
}) : new Wt(this, t.type, t.value, {
|
|
235
246
|
...i,
|
|
236
247
|
onRemove: this.onCharRemove(t.key)
|
|
237
248
|
});
|
|
238
|
-
return this.children.set(t.key,
|
|
249
|
+
return this.children.set(t.key, a), a;
|
|
239
250
|
}
|
|
240
251
|
unpop(t) {
|
|
241
|
-
t.el.classList.remove("section__exiting"), t.el.style[this.justify] = "";
|
|
252
|
+
t.el.classList.remove("section__exiting"), t.el.style.top = "", t.el.style[this.justify] = "";
|
|
242
253
|
}
|
|
243
254
|
pop(t) {
|
|
244
255
|
t.forEach((e) => {
|
|
245
|
-
e.el.style[this.justify] = `${
|
|
256
|
+
e.el.style.top = `${e.el.offsetTop}px`, e.el.style[this.justify] = `${gt(e.el, this.justify)}px`;
|
|
246
257
|
}), t.forEach((e) => {
|
|
247
258
|
e.el.classList.add("section__exiting"), e.present = !1;
|
|
248
259
|
});
|
|
249
260
|
}
|
|
250
261
|
addNewAndUpdateExisting(t) {
|
|
251
|
-
const e = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(),
|
|
252
|
-
if (
|
|
262
|
+
const e = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = this.justify === "left", l = a ? "prepend" : "append";
|
|
263
|
+
if (yt(t, (r) => {
|
|
253
264
|
let o;
|
|
254
265
|
this.children.has(r.key) ? (o = this.children.get(r.key), i.set(r, o), this.unpop(o), o.present = !0) : (o = this.addChar(r, { startDigitsAtZero: !0, animateIn: !0 }), e.set(r, o)), this.el[l](o.el);
|
|
255
|
-
}, { reverse:
|
|
266
|
+
}, { reverse: a }), this.flow.computedAnimated) {
|
|
256
267
|
const r = this.el.getBoundingClientRect();
|
|
257
268
|
e.forEach((o) => {
|
|
258
269
|
o.willUpdate(r);
|
|
@@ -266,12 +277,12 @@ class dt {
|
|
|
266
277
|
}
|
|
267
278
|
willUpdate() {
|
|
268
279
|
const t = this.el.getBoundingClientRect();
|
|
269
|
-
h(this,
|
|
280
|
+
h(this, G, t[this.justify], "f"), this.children.forEach((e) => e.willUpdate(t));
|
|
270
281
|
}
|
|
271
282
|
didUpdate() {
|
|
272
283
|
const t = this.el.getBoundingClientRect();
|
|
273
|
-
this.children.forEach((
|
|
274
|
-
const e = t[this.justify], i =
|
|
284
|
+
this.children.forEach((a) => a.didUpdate(t));
|
|
285
|
+
const e = t[this.justify], i = n(this, G, "f") - e;
|
|
275
286
|
i && this.children.size && this.el.animate({
|
|
276
287
|
transform: [`translateX(${i}px)`, "none"]
|
|
277
288
|
}, {
|
|
@@ -280,87 +291,88 @@ class dt {
|
|
|
280
291
|
});
|
|
281
292
|
}
|
|
282
293
|
}
|
|
283
|
-
|
|
284
|
-
class
|
|
294
|
+
G = /* @__PURE__ */ new WeakMap();
|
|
295
|
+
class ct extends pt {
|
|
285
296
|
update(t) {
|
|
286
297
|
const e = /* @__PURE__ */ new Map();
|
|
287
|
-
this.children.forEach((i,
|
|
288
|
-
t.find((l) => l.key ===
|
|
298
|
+
this.children.forEach((i, a) => {
|
|
299
|
+
t.find((l) => l.key === a) || e.set(a, i), this.unpop(i);
|
|
289
300
|
}), this.addNewAndUpdateExisting(t), e.forEach((i) => {
|
|
290
|
-
i instanceof
|
|
301
|
+
i instanceof mt && i.update(0);
|
|
291
302
|
}), this.pop(e);
|
|
292
303
|
}
|
|
293
304
|
}
|
|
294
|
-
class
|
|
305
|
+
class ft extends pt {
|
|
295
306
|
update(t) {
|
|
296
307
|
const e = /* @__PURE__ */ new Map();
|
|
297
|
-
this.children.forEach((i,
|
|
298
|
-
t.find((l) => l.key ===
|
|
308
|
+
this.children.forEach((i, a) => {
|
|
309
|
+
t.find((l) => l.key === a) || e.set(a, i);
|
|
299
310
|
}), this.pop(e), this.addNewAndUpdateExisting(t);
|
|
300
311
|
}
|
|
301
312
|
}
|
|
302
313
|
class nt {
|
|
303
|
-
constructor(t, e, { onRemove: i, animateIn:
|
|
304
|
-
this.flow = t, this.el = e,
|
|
314
|
+
constructor(t, e, { onRemove: i, animateIn: a = !1 } = {}) {
|
|
315
|
+
this.flow = t, this.el = e, j.set(this, !0), Y.set(this, void 0), A.set(this, () => {
|
|
305
316
|
var l;
|
|
306
|
-
this.el.remove(), (l =
|
|
307
|
-
}), this.el.classList.add("animate-presence"), this.flow.computedAnimated &&
|
|
308
|
-
[
|
|
317
|
+
this.el.remove(), (l = n(this, Y, "f")) == null || l.call(this);
|
|
318
|
+
}), this.el.classList.add("animate-presence"), this.flow.computedAnimated && a && this.el.animate({
|
|
319
|
+
[J]: [-0.9999, 0]
|
|
309
320
|
}, {
|
|
310
321
|
...this.flow.opacityTiming,
|
|
311
322
|
composite: "accumulate"
|
|
312
|
-
}), h(this,
|
|
323
|
+
}), h(this, Y, i, "f");
|
|
313
324
|
}
|
|
314
325
|
get present() {
|
|
315
|
-
return
|
|
326
|
+
return n(this, j, "f");
|
|
316
327
|
}
|
|
317
328
|
set present(t) {
|
|
318
|
-
if (
|
|
319
|
-
if (h(this,
|
|
320
|
-
t ||
|
|
329
|
+
if (n(this, j, "f") !== t) {
|
|
330
|
+
if (h(this, j, t, "f"), !this.flow.computedAnimated) {
|
|
331
|
+
t || n(this, A, "f").call(this);
|
|
321
332
|
return;
|
|
322
333
|
}
|
|
323
334
|
this.el.style.setProperty("--_number-flow-d-opacity", t ? "0" : "-.999"), this.el.animate({
|
|
324
|
-
[
|
|
335
|
+
[J]: t ? [-0.9999, 0] : [0.999, 0]
|
|
325
336
|
}, {
|
|
326
337
|
...this.flow.opacityTiming,
|
|
327
338
|
composite: "accumulate"
|
|
328
|
-
}), t ? this.flow.removeEventListener("animationsfinish",
|
|
339
|
+
}), t ? this.flow.removeEventListener("animationsfinish", n(this, A, "f")) : this.flow.addEventListener("animationsfinish", n(this, A, "f"), {
|
|
329
340
|
once: !0
|
|
330
341
|
});
|
|
331
342
|
}
|
|
332
343
|
}
|
|
333
344
|
}
|
|
334
|
-
|
|
335
|
-
class
|
|
336
|
-
constructor(t, e, i,
|
|
337
|
-
super(t.flow, i,
|
|
345
|
+
j = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap();
|
|
346
|
+
class ut extends nt {
|
|
347
|
+
constructor(t, e, i, a) {
|
|
348
|
+
super(t.flow, i, a), this.section = t, this.value = e, this.el = i;
|
|
338
349
|
}
|
|
339
350
|
}
|
|
340
|
-
class
|
|
341
|
-
constructor(t, e, i,
|
|
351
|
+
class mt extends ut {
|
|
352
|
+
constructor(t, e, i, a, l) {
|
|
342
353
|
const r = Array.from({ length: 10 }).map((m, u) => {
|
|
343
|
-
const p =
|
|
354
|
+
const p = S("span", { className: `digit__num${u === i ? " is-current" : ""}` }, [document.createTextNode(String(u))]);
|
|
344
355
|
return p.style.setProperty("--n", String(u)), p;
|
|
345
|
-
}), o =
|
|
356
|
+
}), o = S("span", {
|
|
357
|
+
part: `digit ${e}-digit`,
|
|
346
358
|
className: "digit"
|
|
347
359
|
}, r);
|
|
348
|
-
o.style.setProperty("--current", String(i)), super(t, i, o, l), this.place =
|
|
360
|
+
o.style.setProperty("--current", String(i)), super(t, i, o, l), this.place = a, F.set(this, void 0), v.set(this, void 0), K.set(this, void 0), st.set(this, () => {
|
|
349
361
|
this.el.classList.remove("is-spinning");
|
|
350
|
-
}), h(this,
|
|
362
|
+
}), h(this, F, r, "f");
|
|
351
363
|
}
|
|
352
364
|
willUpdate(t) {
|
|
353
365
|
const e = this.el.getBoundingClientRect();
|
|
354
|
-
h(this,
|
|
355
|
-
const i = e[this.section.justify] - t[this.section.justify],
|
|
356
|
-
h(this,
|
|
366
|
+
h(this, v, this.value, "f");
|
|
367
|
+
const i = e[this.section.justify] - t[this.section.justify], a = e.width / 2;
|
|
368
|
+
h(this, K, this.section.justify === "left" ? i + a : i - a, "f");
|
|
357
369
|
}
|
|
358
370
|
update(t) {
|
|
359
371
|
var e, i;
|
|
360
|
-
(e =
|
|
372
|
+
(e = n(this, F, "f")[this.value]) == null || e.classList.remove("is-current"), this.el.style.setProperty("--current", String(t)), (i = n(this, F, "f")[t]) == null || i.classList.add("is-current"), this.value = t;
|
|
361
373
|
}
|
|
362
374
|
didUpdate(t) {
|
|
363
|
-
const e = this.el.getBoundingClientRect(), i = e[this.section.justify] - t[this.section.justify],
|
|
375
|
+
const e = this.el.getBoundingClientRect(), i = e[this.section.justify] - t[this.section.justify], a = e.width / 2, l = this.section.justify === "left" ? i + a : i - a, r = n(this, K, "f") - l;
|
|
364
376
|
r && this.el.animate({
|
|
365
377
|
transform: [`translateX(${r}px)`, "none"]
|
|
366
378
|
}, {
|
|
@@ -373,49 +385,50 @@ class ut extends pt {
|
|
|
373
385
|
}, {
|
|
374
386
|
...this.flow.spinTiming ?? this.flow.transformTiming,
|
|
375
387
|
composite: "accumulate"
|
|
376
|
-
}), this.flow.addEventListener("animationsfinish",
|
|
388
|
+
}), this.flow.addEventListener("animationsfinish", n(this, st, "f"), { once: !0 }));
|
|
377
389
|
}
|
|
378
390
|
get diff() {
|
|
379
391
|
let t = this.flow.computedTrend;
|
|
380
|
-
const e = this.value -
|
|
381
|
-
return !e && this.flow.startingPlace != null && this.flow.startingPlace >= this.place ? 10 * t : (t || (t = Math.sign(e)), t ===
|
|
392
|
+
const e = this.value - n(this, v, "f");
|
|
393
|
+
return !e && this.flow.startingPlace != null && this.flow.startingPlace >= this.place ? 10 * t : (t || (t = Math.sign(e)), t === b.DOWN && this.value > n(this, v, "f") ? this.value - 10 - n(this, v, "f") : t === b.UP && this.value < n(this, v, "f") ? 10 - n(this, v, "f") + this.value : e);
|
|
382
394
|
}
|
|
383
395
|
}
|
|
384
|
-
|
|
385
|
-
class
|
|
386
|
-
constructor(t, e, i,
|
|
387
|
-
const l =
|
|
396
|
+
F = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), st = /* @__PURE__ */ new WeakMap();
|
|
397
|
+
class Wt extends ut {
|
|
398
|
+
constructor(t, e, i, a) {
|
|
399
|
+
const l = S("span", {
|
|
388
400
|
className: "symbol__value",
|
|
389
401
|
textContent: i
|
|
390
402
|
});
|
|
391
|
-
super(t, i,
|
|
403
|
+
super(t, i, S("span", {
|
|
404
|
+
part: e,
|
|
392
405
|
className: "symbol"
|
|
393
|
-
}, [l]),
|
|
394
|
-
|
|
395
|
-
}),
|
|
396
|
-
onRemove:
|
|
406
|
+
}, [l]), a), this.type = e, _.set(this, /* @__PURE__ */ new Map()), Z.set(this, void 0), q.set(this, (r) => () => {
|
|
407
|
+
n(this, _, "f").delete(r);
|
|
408
|
+
}), n(this, _, "f").set(i, new nt(this.flow, l, {
|
|
409
|
+
onRemove: n(this, q, "f").call(this, i)
|
|
397
410
|
}));
|
|
398
411
|
}
|
|
399
412
|
willUpdate(t) {
|
|
400
413
|
if (this.type === "decimal")
|
|
401
414
|
return;
|
|
402
415
|
const e = this.el.getBoundingClientRect();
|
|
403
|
-
h(this,
|
|
416
|
+
h(this, Z, e[this.section.justify] - t[this.section.justify], "f");
|
|
404
417
|
}
|
|
405
418
|
update(t) {
|
|
406
419
|
if (this.value !== t) {
|
|
407
|
-
const e =
|
|
408
|
-
if (e.present = !1, e.el.classList.add("symbol__exiting"),
|
|
409
|
-
const i =
|
|
420
|
+
const e = n(this, _, "f").get(this.value);
|
|
421
|
+
if (e.present = !1, e.el.classList.add("symbol__exiting"), n(this, _, "f").has(t)) {
|
|
422
|
+
const i = n(this, _, "f").get(t);
|
|
410
423
|
i.present = !0, i.el.classList.remove("symbol__exiting");
|
|
411
424
|
} else {
|
|
412
|
-
const i =
|
|
425
|
+
const i = S("span", {
|
|
413
426
|
className: "symbol__value",
|
|
414
427
|
textContent: t
|
|
415
428
|
});
|
|
416
|
-
this.el.appendChild(i),
|
|
429
|
+
this.el.appendChild(i), n(this, _, "f").set(t, new nt(this.flow, i, {
|
|
417
430
|
animateIn: !0,
|
|
418
|
-
onRemove:
|
|
431
|
+
onRemove: n(this, q, "f").call(this, t)
|
|
419
432
|
}));
|
|
420
433
|
}
|
|
421
434
|
}
|
|
@@ -424,18 +437,18 @@ class Mt extends pt {
|
|
|
424
437
|
didUpdate(t) {
|
|
425
438
|
if (this.type === "decimal")
|
|
426
439
|
return;
|
|
427
|
-
const i = this.el.getBoundingClientRect()[this.section.justify] - t[this.section.justify],
|
|
428
|
-
|
|
429
|
-
transform: [`translateX(${
|
|
440
|
+
const i = this.el.getBoundingClientRect()[this.section.justify] - t[this.section.justify], a = n(this, Z, "f") - i;
|
|
441
|
+
a && this.el.animate({
|
|
442
|
+
transform: [`translateX(${a}px)`, "none"]
|
|
430
443
|
}, { ...this.flow.transformTiming, composite: "accumulate" });
|
|
431
444
|
}
|
|
432
445
|
}
|
|
433
|
-
|
|
446
|
+
_ = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap();
|
|
434
447
|
export {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
448
|
+
Nt as NumberFlowLite,
|
|
449
|
+
Mt as canAnimate,
|
|
450
|
+
Ut as define,
|
|
451
|
+
Lt as formatToData,
|
|
452
|
+
et as prefersReducedMotion,
|
|
453
|
+
Rt as renderInnerHTML
|
|
441
454
|
};
|
package/dist/ssr.d.ts
CHANGED
|
@@ -3,7 +3,4 @@ export declare const ServerSafeHTMLElement: {
|
|
|
3
3
|
new (): HTMLElement;
|
|
4
4
|
prototype: HTMLElement;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
7
|
-
willChange?: boolean;
|
|
8
|
-
};
|
|
9
|
-
export declare const render: ({ valueAsString, willChange }: RenderProps) => string;
|
|
6
|
+
export declare const renderInnerHTML: (data: Data) => string;
|
package/dist/styles.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export declare const deltaVar = "--_number-flow-d";
|
|
|
8
8
|
export declare const supportsAtProperty: boolean;
|
|
9
9
|
export declare const charHeight = "var(--number-flow-char-height, 1em)";
|
|
10
10
|
export declare const maskHeight = "var(--number-flow-mask-height, 0.25em)";
|
|
11
|
+
export declare const halfMaskHeight = "calc(var(--number-flow-mask-height, 0.25em) / 2)";
|
|
11
12
|
export declare const SlottedTag = "span";
|
|
12
13
|
declare const styles: string;
|
|
13
14
|
export default styles;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.3.
|
|
6
|
+
"version": "0.3.9",
|
|
7
7
|
"author": {
|
|
8
8
|
"name": "Maxwell Barvian",
|
|
9
9
|
"email": "max@barvian.me",
|
|
@@ -50,11 +50,15 @@
|
|
|
50
50
|
"magic-string": "^0.30.11",
|
|
51
51
|
"parse-literals": "^1.2.1",
|
|
52
52
|
"playwright": "^1.48.0",
|
|
53
|
+
"rollup-plugin-minify-html-literals-v3": "^1.3.4",
|
|
53
54
|
"tslib": "^2.7.0",
|
|
54
55
|
"typescript": "^5.6.2",
|
|
55
56
|
"vite": "^5.4.3",
|
|
56
57
|
"vitest": "^2.1.2"
|
|
57
58
|
},
|
|
59
|
+
"dependencies": {
|
|
60
|
+
"esm-env": "^1.1.4"
|
|
61
|
+
},
|
|
58
62
|
"scripts": {
|
|
59
63
|
"build": "vite build --mode production",
|
|
60
64
|
"dev": "vite build --mode development --watch",
|
package/dist/util/css.d.ts
DELETED
package/dist/util/env.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const BROWSER: boolean;
|