number-flow 0.5.2 → 0.5.3
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const m=require("esm-env"),c=(n,t,e)=>{const i=document.createElement(n),[s,r]=Array.isArray(t)?[void 0,t]:[t,e];return s&&Object.assign(i,s),r==null||r.forEach(a=>i.appendChild(a)),i},B=(n,t)=>{var e;return t==="left"?n.offsetLeft:(((e=n.offsetParent instanceof HTMLElement?n.offsetParent:null)==null?void 0:e.offsetWidth)??0)-n.offsetWidth-n.offsetLeft},O=n=>n.offsetWidth>0&&n.offsetHeight>0,D=(n,t)=>{m.BROWSER&&customElements.get(n)!==t&&customElements.define(n,t)};function H(n,t,{reverse:e=!1}={}){const i=n.length;for(let s=e?i-1:0;e?s>=0:s<i;e?s--:s++)t(n[s],s)}const F=String.raw,P=String.raw,X=m.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),z=m.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),_=m.BROWSER&&typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,w="--_number-flow-d-opacity",R="--_number-flow-d-width",v="--_number-flow-dx",A="--_number-flow-d",I=(()=>{try{return CSS.registerProperty({name:w,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:v,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:R,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:A,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),k="var(--number-flow-char-height, 1em)",h="var(--number-flow-mask-height, 0.25em)",x=`calc(${h} / 2)`,C="var(--number-flow-mask-width, 0.5em)",d=`calc(${C} / var(--scale-x))`,u="#000 0, transparent 71%",j=P`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:${k} !important}.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(${R}) / var(--width));transform:translateX(var(${v})) scaleX(var(--scale-x));margin:0 calc(-1 * ${C});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${d},#000 calc(100% - ${d}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${h},#000 calc(100% - ${h}),transparent 100% ),radial-gradient(at bottom right,${u}),radial-gradient(at bottom left,${u}),radial-gradient(at top left,${u}),radial-gradient(at top right,${u});-webkit-mask-size:100% calc(100% - ${h} * 2),calc(100% - ${d} * 2) 100%,${d} ${h},${d} ${h},${d} ${h},${d} ${h};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.
|
|
1
|
+
"use strict";const m=require("esm-env"),c=(n,t,e)=>{const i=document.createElement(n),[s,r]=Array.isArray(t)?[void 0,t]:[t,e];return s&&Object.assign(i,s),r==null||r.forEach(a=>i.appendChild(a)),i},B=(n,t)=>{var e;return t==="left"?n.offsetLeft:(((e=n.offsetParent instanceof HTMLElement?n.offsetParent:null)==null?void 0:e.offsetWidth)??0)-n.offsetWidth-n.offsetLeft},O=n=>n.offsetWidth>0&&n.offsetHeight>0,D=(n,t)=>{m.BROWSER&&customElements.get(n)!==t&&customElements.define(n,t)};function H(n,t,{reverse:e=!1}={}){const i=n.length;for(let s=e?i-1:0;e?s>=0:s<i;e?s--:s++)t(n[s],s)}const F=String.raw,P=String.raw,X=m.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("animation-timing-function","linear(1,2)"),z=m.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),_=m.BROWSER&&typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,w="--_number-flow-d-opacity",R="--_number-flow-d-width",v="--_number-flow-dx",A="--_number-flow-d",I=(()=>{try{return CSS.registerProperty({name:w,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:v,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:R,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:A,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})(),k="var(--number-flow-char-height, 1em)",h="var(--number-flow-mask-height, 0.25em)",x=`calc(${h} / 2)`,C="var(--number-flow-mask-width, 0.5em)",d=`calc(${C} / var(--scale-x))`,u="#000 0, transparent 71%",j=P`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:${k} !important}.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(${R}) / var(--width));transform:translateX(var(${v})) scaleX(var(--scale-x));margin:0 calc(-1 * ${C});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${d},#000 calc(100% - ${d}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${h},#000 calc(100% - ${h}),transparent 100% ),radial-gradient(at bottom right,${u}),radial-gradient(at bottom left,${u}),radial-gradient(at top left,${u}),radial-gradient(at top right,${u});-webkit-mask-size:100% calc(100% - ${h} * 2),calc(100% - ${d} * 2) 100%,${d} ${h},${d} ${h},${d} ${h},${d} ${h};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.number__inner{padding:${x} ${C};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${v})))}:host > :not(.number){z-index:5}.section,.symbol{display:inline-block;position:relative;isolation:isolate}.section::after{content:'\200b';display:inline-block}.section--justify-left{transform-origin:center left}.section--justify-right{transform-origin:center right}.section > [inert],.symbol > [inert]{margin:0 !important;position:absolute !important;z-index:-1}.digit{display:inline-block;position:relative;--c:var(--current) + var(${A})}.digit__num,.number .section::after{padding:${x} 0}.digit__num{display:inline-block;--offset-raw:mod(var(--length) + var(--n) - mod(var(--c),var(--length)),var(--length));--offset:calc( var(--offset-raw) - var(--length) * round(down,var(--offset-raw) / (var(--length) / 2),1) );--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y))}.digit__num[inert]{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y))}.digit:not(.is-spinning) .digit__num[inert]{display:none}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre}.section--justify-left .symbol > [inert]{left:0}.section--justify-right .symbol > [inert]{right:0}.animate-presence{opacity:calc(1 + var(${w}))}`,Y=m.BROWSER?HTMLElement:class{},q=P`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${k} !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:${x} 0}.symbol{white-space:pre}`,G=n=>`<span class="${n.type==="integer"||n.type==="fraction"?"digit":"symbol"}" part="${n.type==="integer"||n.type==="fraction"?`digit ${n.type}-digit`:`symbol ${n.type}`}">${n.value}</span>`,g=(n,t)=>`<span part="${t}">${n.reduce((e,i)=>e+G(i),"")}</span>`,Z=n=>F`<template shadowroot="open" shadowrootmode="open"
|
|
2
2
|
><style>
|
|
3
3
|
${q}</style
|
|
4
4
|
>${g(n.pre,"left")}<span part="number" class="number"
|
|
@@ -13,7 +13,7 @@ function B(n, t, { reverse: e = !1 } = {}) {
|
|
|
13
13
|
for (let s = e ? i - 1 : 0; e ? s >= 0 : s < i; e ? s-- : s++)
|
|
14
14
|
t(n[s], s);
|
|
15
15
|
}
|
|
16
|
-
const D = String.raw, M = String.raw, H = m && typeof CSS < "u" && CSS.supports && CSS.supports("animation-timing-function", "linear(1,2)"), X = m && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)"), $ = m && typeof matchMedia < "u" ? matchMedia("(prefers-reduced-motion: reduce)") : null, _ = "--_number-flow-d-opacity",
|
|
16
|
+
const D = String.raw, M = String.raw, H = m && typeof CSS < "u" && CSS.supports && CSS.supports("animation-timing-function", "linear(1,2)"), X = m && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)"), $ = m && typeof matchMedia < "u" ? matchMedia("(prefers-reduced-motion: reduce)") : null, _ = "--_number-flow-d-opacity", A = "--_number-flow-d-width", w = "--_number-flow-dx", k = "--_number-flow-d", F = (() => {
|
|
17
17
|
try {
|
|
18
18
|
return CSS.registerProperty({
|
|
19
19
|
name: _,
|
|
@@ -26,12 +26,12 @@ const D = String.raw, M = String.raw, H = m && typeof CSS < "u" && CSS.supports
|
|
|
26
26
|
inherits: !0,
|
|
27
27
|
initialValue: "0px"
|
|
28
28
|
}), CSS.registerProperty({
|
|
29
|
-
name:
|
|
29
|
+
name: A,
|
|
30
30
|
syntax: "<number>",
|
|
31
31
|
inherits: !1,
|
|
32
32
|
initialValue: "0"
|
|
33
33
|
}), CSS.registerProperty({
|
|
34
|
-
name:
|
|
34
|
+
name: k,
|
|
35
35
|
syntax: "<number>",
|
|
36
36
|
inherits: !0,
|
|
37
37
|
initialValue: "0"
|
|
@@ -39,7 +39,7 @@ const D = String.raw, M = String.raw, H = m && typeof CSS < "u" && CSS.supports
|
|
|
39
39
|
} catch {
|
|
40
40
|
return !1;
|
|
41
41
|
}
|
|
42
|
-
})(), R = "var(--number-flow-char-height, 1em)", h = "var(--number-flow-mask-height, 0.25em)", x = `calc(${h} / 2)`, C = "var(--number-flow-mask-width, 0.5em)", d = `calc(${C} / var(--scale-x))`, u = "#000 0, transparent 71%", U = M`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:${R} !important}.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(${
|
|
42
|
+
})(), R = "var(--number-flow-char-height, 1em)", h = "var(--number-flow-mask-height, 0.25em)", x = `calc(${h} / 2)`, C = "var(--number-flow-mask-width, 0.5em)", d = `calc(${C} / var(--scale-x))`, u = "#000 0, transparent 71%", U = M`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:${R} !important}.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(${A}) / var(--width));transform:translateX(var(${w})) scaleX(var(--scale-x));margin:0 calc(-1 * ${C});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${d},#000 calc(100% - ${d}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${h},#000 calc(100% - ${h}),transparent 100% ),radial-gradient(at bottom right,${u}),radial-gradient(at bottom left,${u}),radial-gradient(at top left,${u}),radial-gradient(at top right,${u});-webkit-mask-size:100% calc(100% - ${h} * 2),calc(100% - ${d} * 2) 100%,${d} ${h},${d} ${h},${d} ${h},${d} ${h};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.number__inner{padding:${x} ${C};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${w})))}:host > :not(.number){z-index:5}.section,.symbol{display:inline-block;position:relative;isolation:isolate}.section::after{content:'\200b';display:inline-block}.section--justify-left{transform-origin:center left}.section--justify-right{transform-origin:center right}.section > [inert],.symbol > [inert]{margin:0 !important;position:absolute !important;z-index:-1}.digit{display:inline-block;position:relative;--c:var(--current) + var(${k})}.digit__num,.number .section::after{padding:${x} 0}.digit__num{display:inline-block;--offset-raw:mod(var(--length) + var(--n) - mod(var(--c),var(--length)),var(--length));--offset:calc( var(--offset-raw) - var(--length) * round(down,var(--offset-raw) / (var(--length) / 2),1) );--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y))}.digit__num[inert]{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y))}.digit:not(.is-spinning) .digit__num[inert]{display:none}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre}.section--justify-left .symbol > [inert]{left:0}.section--justify-right .symbol > [inert]{right:0}.animate-presence{opacity:calc(1 + var(${_}))}`, O = m ? HTMLElement : class {
|
|
43
43
|
}, z = M`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${R} !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:${x} 0}.symbol{white-space:pre}`, I = (n) => `<span class="${n.type === "integer" || n.type === "fraction" ? "digit" : "symbol"}" part="${n.type === "integer" || n.type === "fraction" ? `digit ${n.type}-digit` : `symbol ${n.type}`}">${n.value}</span>`, g = (n, t) => `<span part="${t}">${n.reduce((e, i) => e + I(i), "")}</span>`, et = (n) => (
|
|
44
44
|
// shadowroot="open" non-standard attribute for old Chrome:
|
|
45
45
|
D`<template shadowroot="open" shadowrootmode="open"
|
|
@@ -151,7 +151,7 @@ class Z {
|
|
|
151
151
|
const e = this._prevLeft - t.left, i = this.el.offsetWidth, s = this._prevWidth - i;
|
|
152
152
|
this.el.style.setProperty("--width", String(i)), this.el.animate({
|
|
153
153
|
[w]: [`${e}px`, "0px"],
|
|
154
|
-
[
|
|
154
|
+
[A]: [s, 0]
|
|
155
155
|
}, {
|
|
156
156
|
...this.flow.transformTiming,
|
|
157
157
|
composite: "accumulate"
|
|
@@ -312,7 +312,7 @@ class L extends N {
|
|
|
312
312
|
});
|
|
313
313
|
const o = this.getDelta();
|
|
314
314
|
o && (this.el.classList.add("is-spinning"), this.el.animate({
|
|
315
|
-
[
|
|
315
|
+
[k]: [-o, 0]
|
|
316
316
|
}, {
|
|
317
317
|
...this.flow.spinTiming ?? this.flow.transformTiming,
|
|
318
318
|
composite: "accumulate"
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./continuous-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./continuous-B3Kli2lB.js");function T(o,h,l,c){const u=h.formatToParts(o);l&&u.unshift({type:"prefix",value:l}),c&&u.push({type:"suffix",value:c});const f=[],i=[],a=[],g=[],r={},s=t=>`${t}:${r[t]=(r[t]??-1)+1}`;let y="",m=!1,v=!1;for(const t of u){y+=t.value;const e=t.type==="minusSign"||t.type==="plusSign"?"sign":t.type;e==="integer"?(m=!0,i.push(...t.value.split("").map(p=>({type:e,value:parseInt(p)})))):e==="group"?i.push({type:e,value:t.value}):e==="decimal"?(v=!0,a.push({type:e,value:t.value,key:s(e)})):e==="fraction"?a.push(...t.value.split("").map(p=>({type:e,value:parseInt(p),key:s(e),pos:-1-r[e]}))):(m||v?g:f).push({type:e,value:t.value,key:s(e)})}const d=[];for(let t=i.length-1;t>=0;t--){const e=i[t];d.unshift(e.type==="integer"?{...e,key:s(e.type),pos:r[e.type]}:{...e,key:s(e.type)})}return{pre:f,integer:d,fraction:a,post:g,valueAsString:y,value:typeof o=="string"?parseFloat(o):o}}exports.Digit=n.Digit;exports.NumberFlowLite=n.NumberFlowLite;exports.canAnimate=n.canAnimate;exports.continuous=n.continuous;exports.define=n.define;exports.prefersReducedMotion=n.prefersReducedMotion;exports.renderInnerHTML=n.renderInnerHTML;exports.formatToData=T;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { D as I, N as S, a as T, c as x, d as A, p as F, r as L } from "./continuous-
|
|
1
|
+
import { D as I, N as S, a as T, c as x, d as A, p as F, r as L } from "./continuous-ybARbRnI.mjs";
|
|
2
2
|
function d(n, h, u, l) {
|
|
3
3
|
const r = h.formatToParts(n);
|
|
4
4
|
u && r.unshift({ type: "prefix", value: u }), l && r.push({ type: "suffix", value: l });
|
package/dist/plugins.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./continuous-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./continuous-B3Kli2lB.js");exports.continuous=o.continuous;
|
package/dist/plugins.mjs
CHANGED