number-flow 0.3.6 → 0.3.7
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 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +33 -30
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export declare class NumberFlowLite extends ServerSafeHTMLElement implements Pro
|
|
|
32
32
|
continuous: boolean;
|
|
33
33
|
get animated(): boolean;
|
|
34
34
|
set animated(val: boolean);
|
|
35
|
+
get created(): boolean;
|
|
35
36
|
get computedTrend(): Trend | undefined;
|
|
36
37
|
get startingPlace(): number | null | undefined;
|
|
37
38
|
get computedAnimated(): boolean;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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 F=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(!(!F||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={},p=c=>{const f=o[c]==null?o[c]=0:++o[c];return`${c}:${f}`};let u="",m=!1,P=!1;for(const c of e){u+=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:p(f)})):f==="fraction"?r.push(...c.value.split("").map(Q=>({type:f,value:parseInt(Q),key:p(f),place:-1-o[f]}))):(m||P?l:i).push({type:f,value:c.value,key:p(f)})}const d=[];for(let c=n.length-1;c>=0;c--){const f=n[c];d.unshift(f.type==="integer"?{...f,key:p(f.type),place:o[f.type]}:{...f,key:p(f.type)})}return{pre:i,integer:d,fraction:r,post:l,formatted:u,value:typeof a=="string"?parseFloat(a):a}}const _t=String.raw,bt=F&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),St=F&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),B=F&&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))`,D="#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,${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% - ${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=F?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,H,k,$,x,y,U,L,R,W,V,M,E,X,z,I,j,G,T,A,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 O;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),H.set(this,!1),k.set(this,void 0),$.set(this,void 0),x.set(this,void 0),y.set(this,void 0),U.set(this,void 0),L.set(this,s(this,N,"f")),R.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 computedTrend(){return s(this,y,"f")}get startingPlace(){return s(this,U,"f")}get computedAnimated(){return s(this,L,"f")}set parts(t){if(t==null)return;const{pre:e,integer:i,fraction:n,post:r,value:l}=t;if(s(this,H,"f")){const o=s(this,R,"f");if(h(this,R,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,U,void 0,"f"),s(this,y,"f")!==b.NONE&&this.continuous){const p=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"),m=p.find(d=>!u.find(c=>c.place===d.place&&c.value===d.value)),P=u.find(d=>!p.find(c=>d.place===c.place&&d.value===c.value));h(this,U,Mt(m==null?void 0:m.place,P==null?void 0:P.place),"f")}h(this,L,ct&&s(this,N,"f")&&(!this.respectMotionPreference||!(B!=null&&B.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,R,t,"f"),this.attachShadow({mode:"open"}),typeof CSSStyleSheet<"u"&&this.shadowRoot.adoptedStyleSheets)O||(O=new CSSStyleSheet,O.replaceSync(ot)),this.shadowRoot.adoptedStyleSheets=[O];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,H,!0,"f")}willUpdate(){s(this,k,"f").willUpdate(),s(this,$,"f").willUpdate(),s(this,x,"f").willUpdate()}didUpdate(){if(!s(this,L,"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,H=new WeakMap,k=new WeakMap,$=new WeakMap,x=new WeakMap,y=new WeakMap,U=new WeakMap,L=new WeakMap,R=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=p=>()=>{this.children.delete(p)},I.set(this,void 0),this.justify=i;const o=e.map(p=>this.addChar(p).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 ut(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 ut&&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,j.set(this,!0),G.set(this,void 0),T.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,j,"f")}set present(t){if(s(this,j,"f")!==t){if(h(this,j,t,"f"),!this.flow.computedAnimated){t||s(this,T,"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,T,"f")):this.flow.addEventListener("animationsfinish",s(this,T,"f"),{once:!0})}}}j=new WeakMap,G=new WeakMap,T=new WeakMap;class pt extends st{constructor(t,e,i,n){super(t.flow,i,n),this.section=t,this.value=e,this.el=i}}class ut extends pt{constructor(t,e,i,n,r){const l=Array.from({length:10}).map((p,u)=>{const m=w("span",{className:`digit__num${u===i?" is-current":""}`},[document.createTextNode(String(u))]);return m.style.setProperty("--n",String(u)),m}),o=w("span",{className:"digit"},l);o.style.setProperty("--current",String(i)),super(t,i,o,r),this.place=n,A.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,A,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,A,"f")[this.value])==null||e.classList.remove("is-current"),this.el.style.setProperty("--current",String(t)),(i=s(this,A,"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)}}A=new WeakMap,v=new WeakMap,Y=new WeakMap,it=new WeakMap;class Pt extends pt{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=B;exports.render=xt;
|
|
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;
|
package/dist/index.mjs
CHANGED
|
@@ -9,14 +9,14 @@ function h(a, t, e, i, n) {
|
|
|
9
9
|
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");
|
|
10
10
|
return i === "a" ? n.call(a, e) : n ? n.value = e : t.set(a, e), e;
|
|
11
11
|
}
|
|
12
|
-
const
|
|
12
|
+
const D = typeof window < "u", w = (a, t, e) => {
|
|
13
13
|
const i = document.createElement(a), [n, r] = Array.isArray(t) ? [void 0, t] : [t, e];
|
|
14
14
|
return n && Object.assign(i, n), r == null || r.forEach((l) => i.appendChild(l)), i;
|
|
15
15
|
}, pt = (a, t) => {
|
|
16
16
|
var e;
|
|
17
17
|
return t === "left" ? a.offsetLeft : (((e = a.offsetParent instanceof HTMLElement ? a.offsetParent : null) == null ? void 0 : e.offsetWidth) ?? 0) - a.offsetWidth - a.offsetLeft;
|
|
18
18
|
}, ut = (a) => a.offsetWidth > 0 && a.offsetHeight > 0, Et = (a, t) => {
|
|
19
|
-
if (!(!
|
|
19
|
+
if (!(!D || customElements.get(a) === t))
|
|
20
20
|
return customElements.define(a, t);
|
|
21
21
|
};
|
|
22
22
|
function mt(a, t, { reverse: e = !1 } = {}) {
|
|
@@ -65,7 +65,7 @@ function Mt(a, t) {
|
|
|
65
65
|
value: typeof a == "string" ? parseFloat(a) : a
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
|
-
const gt = String.raw, wt =
|
|
68
|
+
const gt = String.raw, wt = D && typeof CSS < "u" && CSS.supports && CSS.supports("animation-timing-function", "linear(1,2)"), yt = D && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)"), Q = D && matchMedia ? matchMedia("(prefers-reduced-motion: reduce)") : null, Z = "--_number-flow-d-opacity", nt = "--_number-flow-d-width", q = "--_number-flow-dx", at = "--_number-flow-d", _t = (() => {
|
|
69
69
|
try {
|
|
70
70
|
return CSS.registerProperty({
|
|
71
71
|
name: Z,
|
|
@@ -91,18 +91,18 @@ const gt = String.raw, wt = F && typeof CSS < "u" && CSS.supports && CSS.support
|
|
|
91
91
|
} catch {
|
|
92
92
|
return !1;
|
|
93
93
|
}
|
|
94
|
-
})(), 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))`,
|
|
94
|
+
})(), 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 = gt`: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(${q})) 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(${q})));}.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(${Z}));}`, vt = D ? HTMLElement : class {
|
|
95
95
|
}, Nt = ({ formatted: a, willChange: t }) => `<${et} style="font-kerning: none; display: inline-block; line-height: ${ht}; padding: ${g} 0;${t ? "will-change: transform" : ""}">${a}</${et}>`, bt = (a, t) => a != null && t == null ? a : a == null && t != null ? t : a != null && t != null ? Math.max(a, t) : null;
|
|
96
|
-
var P,
|
|
96
|
+
var P, U, k, x, $, y, L, R, j, W, H, E, M, V, X, z, T, I, A, F, _, G, it, v, Y, K;
|
|
97
97
|
const St = yt && wt && _t;
|
|
98
98
|
var b;
|
|
99
99
|
(function(a) {
|
|
100
100
|
a[a.UP = 1] = "UP", a[a.DOWN = -1] = "DOWN", a[a.NONE = 0] = "NONE";
|
|
101
101
|
})(b || (b = {}));
|
|
102
|
-
let
|
|
102
|
+
let B;
|
|
103
103
|
class kt extends vt {
|
|
104
104
|
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, P.set(this, this.constructor.defaultProps.animated),
|
|
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, P.set(this, this.constructor.defaultProps.animated), U.set(this, !1), k.set(this, void 0), x.set(this, void 0), $.set(this, void 0), y.set(this, void 0), L.set(this, void 0), R.set(this, s(this, P, "f")), j.set(this, void 0), this.manual = !1, W.set(this, void 0);
|
|
106
106
|
}
|
|
107
107
|
get animated() {
|
|
108
108
|
return s(this, P, "f");
|
|
@@ -111,30 +111,33 @@ class kt extends vt {
|
|
|
111
111
|
var e;
|
|
112
112
|
this.animated !== t && (h(this, P, t, "f"), (e = this.shadowRoot) == null || e.getAnimations().forEach((i) => i.finish()));
|
|
113
113
|
}
|
|
114
|
+
get created() {
|
|
115
|
+
return s(this, U, "f");
|
|
116
|
+
}
|
|
114
117
|
get computedTrend() {
|
|
115
118
|
return s(this, y, "f");
|
|
116
119
|
}
|
|
117
120
|
get startingPlace() {
|
|
118
|
-
return s(this,
|
|
121
|
+
return s(this, L, "f");
|
|
119
122
|
}
|
|
120
123
|
get computedAnimated() {
|
|
121
|
-
return s(this,
|
|
124
|
+
return s(this, R, "f");
|
|
122
125
|
}
|
|
123
126
|
set parts(t) {
|
|
124
127
|
if (t == null)
|
|
125
128
|
return;
|
|
126
129
|
const { pre: e, integer: i, fraction: n, post: r, value: l } = t;
|
|
127
|
-
if (s(this,
|
|
128
|
-
const o = s(this,
|
|
129
|
-
if (h(this,
|
|
130
|
+
if (s(this, U, "f")) {
|
|
131
|
+
const o = s(this, j, "f");
|
|
132
|
+
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) {
|
|
130
133
|
const p = 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"), m = p.find((d) => !u.find((c) => c.place === d.place && c.value === d.value)), N = u.find((d) => !p.find((c) => d.place === c.place && d.value === c.value));
|
|
131
|
-
h(this,
|
|
134
|
+
h(this, L, bt(m == null ? void 0 : m.place, N == null ? void 0 : N.place), "f");
|
|
132
135
|
}
|
|
133
|
-
h(this,
|
|
136
|
+
h(this, R, St && s(this, P, "f") && (!this.respectMotionPreference || !(Q != null && Q.matches)) && // https://github.com/barvian/number-flow/issues/9
|
|
134
137
|
ut(this), "f"), this.manual || this.willUpdate(), s(this, k, "f").update(e), s(this, x, "f").update({ integer: i, fraction: n }), s(this, $, "f").update(r), this.manual || this.didUpdate();
|
|
135
138
|
} else {
|
|
136
|
-
if (h(this,
|
|
137
|
-
|
|
139
|
+
if (h(this, j, t, "f"), this.attachShadow({ mode: "open" }), typeof CSSStyleSheet < "u" && this.shadowRoot.adoptedStyleSheets)
|
|
140
|
+
B || (B = new CSSStyleSheet(), B.replaceSync(ot)), this.shadowRoot.adoptedStyleSheets = [B];
|
|
138
141
|
else {
|
|
139
142
|
const o = document.createElement("style");
|
|
140
143
|
o.textContent = ot, this.shadowRoot.appendChild(o);
|
|
@@ -152,13 +155,13 @@ class kt extends vt {
|
|
|
152
155
|
justify: "left"
|
|
153
156
|
}), "f"), this.shadowRoot.appendChild(s(this, $, "f").el);
|
|
154
157
|
}
|
|
155
|
-
h(this,
|
|
158
|
+
h(this, U, !0, "f");
|
|
156
159
|
}
|
|
157
160
|
willUpdate() {
|
|
158
161
|
s(this, k, "f").willUpdate(), s(this, x, "f").willUpdate(), s(this, $, "f").willUpdate();
|
|
159
162
|
}
|
|
160
163
|
didUpdate() {
|
|
161
|
-
if (!s(this,
|
|
164
|
+
if (!s(this, R, "f"))
|
|
162
165
|
return;
|
|
163
166
|
s(this, W, "f") ? s(this, W, "f").abort() : this.dispatchEvent(new Event("animationsstart")), s(this, k, "f").didUpdate(), s(this, x, "f").didUpdate(), s(this, $, "f").didUpdate();
|
|
164
167
|
const t = new AbortController();
|
|
@@ -167,7 +170,7 @@ class kt extends vt {
|
|
|
167
170
|
}), h(this, W, t, "f");
|
|
168
171
|
}
|
|
169
172
|
}
|
|
170
|
-
P = /* @__PURE__ */ new WeakMap(),
|
|
173
|
+
P = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap();
|
|
171
174
|
kt.defaultProps = {
|
|
172
175
|
transformTiming: {
|
|
173
176
|
duration: 900,
|
|
@@ -299,7 +302,7 @@ class lt extends ct {
|
|
|
299
302
|
}
|
|
300
303
|
class st {
|
|
301
304
|
constructor(t, e, { onRemove: i, animateIn: n = !1 } = {}) {
|
|
302
|
-
this.flow = t, this.el = e,
|
|
305
|
+
this.flow = t, this.el = e, T.set(this, !0), I.set(this, void 0), A.set(this, () => {
|
|
303
306
|
var r;
|
|
304
307
|
this.el.remove(), (r = s(this, I, "f")) == null || r.call(this);
|
|
305
308
|
}), this.el.classList.add("animate-presence"), this.flow.computedAnimated && n && this.el.animate({
|
|
@@ -310,12 +313,12 @@ class st {
|
|
|
310
313
|
}), h(this, I, i, "f");
|
|
311
314
|
}
|
|
312
315
|
get present() {
|
|
313
|
-
return s(this,
|
|
316
|
+
return s(this, T, "f");
|
|
314
317
|
}
|
|
315
318
|
set present(t) {
|
|
316
|
-
if (s(this,
|
|
317
|
-
if (h(this,
|
|
318
|
-
t || s(this,
|
|
319
|
+
if (s(this, T, "f") !== t) {
|
|
320
|
+
if (h(this, T, t, "f"), !this.flow.computedAnimated) {
|
|
321
|
+
t || s(this, A, "f").call(this);
|
|
319
322
|
return;
|
|
320
323
|
}
|
|
321
324
|
this.el.style.setProperty("--_number-flow-d-opacity", t ? "0" : "-.999"), this.el.animate({
|
|
@@ -323,13 +326,13 @@ class st {
|
|
|
323
326
|
}, {
|
|
324
327
|
...this.flow.opacityTiming,
|
|
325
328
|
composite: "accumulate"
|
|
326
|
-
}), t ? this.flow.removeEventListener("animationsfinish", s(this,
|
|
329
|
+
}), t ? this.flow.removeEventListener("animationsfinish", s(this, A, "f")) : this.flow.addEventListener("animationsfinish", s(this, A, "f"), {
|
|
327
330
|
once: !0
|
|
328
331
|
});
|
|
329
332
|
}
|
|
330
333
|
}
|
|
331
334
|
}
|
|
332
|
-
|
|
335
|
+
T = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap();
|
|
333
336
|
class ft extends st {
|
|
334
337
|
constructor(t, e, i, n) {
|
|
335
338
|
super(t.flow, i, n), this.section = t, this.value = e, this.el = i;
|
|
@@ -343,9 +346,9 @@ class dt extends ft {
|
|
|
343
346
|
}), o = w("span", {
|
|
344
347
|
className: "digit"
|
|
345
348
|
}, l);
|
|
346
|
-
o.style.setProperty("--current", String(i)), super(t, i, o, r), this.place = n,
|
|
349
|
+
o.style.setProperty("--current", String(i)), super(t, i, o, r), this.place = n, F.set(this, void 0), _.set(this, void 0), G.set(this, void 0), it.set(this, () => {
|
|
347
350
|
this.el.classList.remove("is-spinning");
|
|
348
|
-
}), h(this,
|
|
351
|
+
}), h(this, F, l, "f");
|
|
349
352
|
}
|
|
350
353
|
willUpdate(t) {
|
|
351
354
|
const e = this.el.getBoundingClientRect();
|
|
@@ -355,7 +358,7 @@ class dt extends ft {
|
|
|
355
358
|
}
|
|
356
359
|
update(t) {
|
|
357
360
|
var e, i;
|
|
358
|
-
(e = s(this,
|
|
361
|
+
(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;
|
|
359
362
|
}
|
|
360
363
|
didUpdate(t) {
|
|
361
364
|
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;
|
|
@@ -379,7 +382,7 @@ class dt extends ft {
|
|
|
379
382
|
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, _, "f") ? this.value - 10 - s(this, _, "f") : t === b.UP && this.value < s(this, _, "f") ? 10 - s(this, _, "f") + this.value : e);
|
|
380
383
|
}
|
|
381
384
|
}
|
|
382
|
-
|
|
385
|
+
F = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), it = /* @__PURE__ */ new WeakMap();
|
|
383
386
|
class $t extends ft {
|
|
384
387
|
constructor(t, e, i, n) {
|
|
385
388
|
const r = w("span", {
|