number-flow - npm Package Compare versions

Comparing version 0.3.5 to 0.3.6

dist/index.js

@@ -1,1 +0,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={},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=F&&typeof CSS<"u"&&CSS.supports("animation-timing-function","linear(1,2)"),St=F&&typeof CSS<"u"&&CSS.supports("line-height","mod(1,1)"),B=F?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}>`,Et=(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,E,M,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 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,U,Et(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))&&gt(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 Mt(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 Mt{constructor(t,e,i,{className:n,...r}={}){this.flow=t,V.set(this,void 0),E.set(this,void 0),M.set(this,void 0),X.set(this,void 0),z.set(this,void 0),h(this,E,new rt(t,e,{justify:"right"}),"f"),h(this,M,new rt(t,i,{justify:"left"}),"f"),h(this,V,w("span",{className:"number__inner"},[s(this,E,"f").el,s(this,M,"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,E,"f").willUpdate(),s(this,M,"f").willUpdate()}update({integer:t,fraction:e}){s(this,E,"f").update(t),s(this,M,"f").update(e)}didUpdate(){const t=this.el.getBoundingClientRect();s(this,E,"f").didUpdate(),s(this,M,"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,E=new WeakMap,M=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,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 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,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 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=B;exports.render=xt;
+"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))&&gt(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;

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "0.3.5",
+  "version": "0.3.6",
   "author": {
@@ -9,0 +9,0 @@ "name": "Maxwell Barvian",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46666

increased by0.18%

No dependency changes