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