@m3e/progress-indicator 1.1.3 → 1.1.4
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.min.js
CHANGED
|
@@ -88,7 +88,7 @@ const _t=1;class kt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i)
|
|
|
88
88
|
stroke-width=${m(this,Mt,"f")}
|
|
89
89
|
fill="none"
|
|
90
90
|
stroke-linecap="round"
|
|
91
|
-
/>`:s}</svg> ${m(this,xt,"m",qt).call(this)}${m(this,xt,"m",jt).call(this)}`},qt=function(){return i`<div class="diameter-and-stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},jt=function(){return i`<div class="content" aria-hidden="true"><slot></slot></div>`},Wt=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(f(this,Et,t.clientWidth,"f"),f(this,Mt,t.clientHeight,"f"))},Bt=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(f(this,Ct,t.clientWidth,"f"),f(this,Pt,t.clientHeight,"f"))},It=function(t){if(0===m(this,Ct,"f")||0===m(this,Pt,"f"))return;const e=m(this,xt,"m",zt).call(this,t);m(this,Ut,"f")?.setAttribute("d",m(this,xt,"m",Jt).call(this,{endAngle:e}).path),m(this,Ot,"f")?.setAttribute("d",m(this,xt,"m",Gt).call(this,{gap:m(this,xt,"m",Vt).call(this,m(this,Mt,"f"),m(this,Et,"f")),startAngle:e}).path)},zt=function(t){const e=2*m(this,xt,"m",Vt).call(this,m(this,Mt,"f")),i=18+e,s=280-e,r=1.575,a=t%6.3;if(a<r)return i;if(a<3.15){const t=(a-r)/r;return i+t*t*(3-2*t)*(s-i)}if(a<4.725)return s;const n=(a-4.725)/r;return s-n*n*(3-2*n)*(s-i)},Vt=function(t,e=m(this,Ct,"f")){return t*(360/(2*Math.PI*m(this,xt,"m",Xt).call(this,e).r))},Dt=function(t){return(t-90)*(Math.PI/180)},Lt=function(t,e){const i=m(this,xt,"m",Dt).call(this,e);return{x:t.cx+t.r*Math.cos(i),y:t.cy+t.r*Math.sin(i)}},Xt=function(t){t+=m(this,Mt,"f")/2;const e=m(this,Et,"f")/2;return{cx:e+t,cy:e+t,r:e,padding:t}},Gt=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:s=m(this,Ct,"f")}){if(0===m(this,Et,"f")||0===m(this,Mt,"f"))return{path:"",viewBox:"0 0 0 0"};const r=m(this,xt,"m",Xt).call(this,s);i>0&&(t+=m(this,xt,"m",Vt).call(this,i,s),e-=m(this,xt,"m",Vt).call(this,i,s)),e-t>=360&&(e=t+359.999);const a=m(this,xt,"m",Lt).call(this,r,e),n=m(this,xt,"m",Lt).call(this,r,t);return{path:`M ${a.x} ${a.y} A ${r.r} ${r.r} 0 ${e-t<=180?"0":"1"} 0 ${n.x} ${n.y}`,viewBox:`0 0 ${m(this,Et,"f")+2*r.padding} ${m(this,Et,"f")+2*r.padding}`}},Jt=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:s=m(this,Ct,"f"),amplitude:r=m(this,Ct,"f"),steps:a=200}){if(0===m(this,Et,"f")||0===m(this,Mt,"f"))return{path:"",viewBox:"0 0 0 0"};const n=m(this,xt,"m",Xt).call(this,s);i>0&&(t+=m(this,xt,"m",Vt).call(this,i,s),e-=m(this,xt,"m",Vt).call(this,i,s));const o=m(this,xt,"m",Dt).call(this,t);let h=m(this,xt,"m",Dt).call(this,e);t===e?h=o:h<o&&(h+=2*Math.PI);const l=h-o,c=2*Math.PI*n.r/m(this,Pt,"f"),d=Math.PI/2*(c-1),p=[];for(let t=0;t<=a;t++){const e=o+(0===a?0:t/a)*l,i=Math.sin(e*c+d),s=n.r-r*i,h=s*Math.cos(e)+n.cx,m=s*Math.sin(e)+n.cy;p.push([h,m])}const f=1===p.length?`M ${p[0][0]},${p[0][1]}`:`M ${p[0][0]},${p[0][1]} `+p.slice(1).map(([t,e])=>`L ${t},${e}`).join(" ");return{path:f,viewBox:`0 0 ${m(this,Et,"f")+2*n.padding} ${m(this,Et,"f")+2*n.padding}`}},Zt.styles=[At.styles,e`:host { display: inline-flex; vertical-align: middle; aspect-ratio: 1; position: relative; align-items: center; justify-content: center; contain: strict; } .progress { --_arc-duration: 1333ms; --_cycle-duration: calc(4 * var(--_arc-duration)); --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306); --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1); } .active-track { transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1); } :host([variant="flat"]) .progress { flex: 1; align-self: stretch; pointer-events: none; } .progress, .spinner, .left, .right, .content, .circle { position: absolute; inset: 0; } .content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .diameter-and-stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .diameter-and-stroke { width: inherit; height: var(--m3e-circular-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { width: var(--m3e-circular-wavy-progress-indicator-amplitude, 0.1rem); height: var(--m3e-circular-wavy-progress-indicator-wavelength, 0.9375rem); } :host([variant="flat"]) { width: var(--m3e-circular-flat-progress-indicator-diameter, 2.5rem); } :host([variant="wavy"]) { width: var(--m3e-circular-wavy-progress-indicator-diameter, 3rem); } :host([variant="flat"][indeterminate]) { content-visibility: auto; } :host([variant="flat"][indeterminate]) .progress { animation: linear infinite linear-rotate; animation-duration: var(--_linear-rotate-duration); } :host([variant="flat"][indeterminate]) .spinner { animation: infinite both rotate-arc; animation-duration: var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } :host([variant="wavy"][indeterminate]) .spinner { transform-origin: 50% 50%; animation: wavy-spin ${1.575}s linear infinite; } .left {
|
|
91
|
+
/>`:s}</svg> ${m(this,xt,"m",qt).call(this)}${m(this,xt,"m",jt).call(this)}`},qt=function(){return i`<div class="diameter-and-stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},jt=function(){return i`<div class="content" aria-hidden="true"><slot></slot></div>`},Wt=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(f(this,Et,t.clientWidth,"f"),f(this,Mt,t.clientHeight,"f"))},Bt=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(f(this,Ct,t.clientWidth,"f"),f(this,Pt,t.clientHeight,"f"))},It=function(t){if(0===m(this,Ct,"f")||0===m(this,Pt,"f"))return;const e=m(this,xt,"m",zt).call(this,t);m(this,Ut,"f")?.setAttribute("d",m(this,xt,"m",Jt).call(this,{endAngle:e}).path),m(this,Ot,"f")?.setAttribute("d",m(this,xt,"m",Gt).call(this,{gap:m(this,xt,"m",Vt).call(this,m(this,Mt,"f"),m(this,Et,"f")),startAngle:e}).path)},zt=function(t){const e=2*m(this,xt,"m",Vt).call(this,m(this,Mt,"f")),i=18+e,s=280-e,r=1.575,a=t%6.3;if(a<r)return i;if(a<3.15){const t=(a-r)/r;return i+t*t*(3-2*t)*(s-i)}if(a<4.725)return s;const n=(a-4.725)/r;return s-n*n*(3-2*n)*(s-i)},Vt=function(t,e=m(this,Ct,"f")){return t*(360/(2*Math.PI*m(this,xt,"m",Xt).call(this,e).r))},Dt=function(t){return(t-90)*(Math.PI/180)},Lt=function(t,e){const i=m(this,xt,"m",Dt).call(this,e);return{x:t.cx+t.r*Math.cos(i),y:t.cy+t.r*Math.sin(i)}},Xt=function(t){t+=m(this,Mt,"f")/2;const e=m(this,Et,"f")/2;return{cx:e+t,cy:e+t,r:e,padding:t}},Gt=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:s=m(this,Ct,"f")}){if(0===m(this,Et,"f")||0===m(this,Mt,"f"))return{path:"",viewBox:"0 0 0 0"};const r=m(this,xt,"m",Xt).call(this,s);i>0&&(t+=m(this,xt,"m",Vt).call(this,i,s),e-=m(this,xt,"m",Vt).call(this,i,s)),e-t>=360&&(e=t+359.999);const a=m(this,xt,"m",Lt).call(this,r,e),n=m(this,xt,"m",Lt).call(this,r,t);return{path:`M ${a.x} ${a.y} A ${r.r} ${r.r} 0 ${e-t<=180?"0":"1"} 0 ${n.x} ${n.y}`,viewBox:`0 0 ${m(this,Et,"f")+2*r.padding} ${m(this,Et,"f")+2*r.padding}`}},Jt=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:s=m(this,Ct,"f"),amplitude:r=m(this,Ct,"f"),steps:a=200}){if(0===m(this,Et,"f")||0===m(this,Mt,"f"))return{path:"",viewBox:"0 0 0 0"};const n=m(this,xt,"m",Xt).call(this,s);i>0&&(t+=m(this,xt,"m",Vt).call(this,i,s),e-=m(this,xt,"m",Vt).call(this,i,s));const o=m(this,xt,"m",Dt).call(this,t);let h=m(this,xt,"m",Dt).call(this,e);t===e?h=o:h<o&&(h+=2*Math.PI);const l=h-o,c=2*Math.PI*n.r/m(this,Pt,"f"),d=Math.PI/2*(c-1),p=[];for(let t=0;t<=a;t++){const e=o+(0===a?0:t/a)*l,i=Math.sin(e*c+d),s=n.r-r*i,h=s*Math.cos(e)+n.cx,m=s*Math.sin(e)+n.cy;p.push([h,m])}const f=1===p.length?`M ${p[0][0]},${p[0][1]}`:`M ${p[0][0]},${p[0][1]} `+p.slice(1).map(([t,e])=>`L ${t},${e}`).join(" ");return{path:f,viewBox:`0 0 ${m(this,Et,"f")+2*n.padding} ${m(this,Et,"f")+2*n.padding}`}},Zt.styles=[At.styles,e`:host { display: inline-flex; vertical-align: middle; aspect-ratio: 1; position: relative; align-items: center; justify-content: center; contain: strict; } .progress { --_arc-duration: 1333ms; --_cycle-duration: calc(4 * var(--_arc-duration)); --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306); --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1); } .active-track { transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1); } :host([variant="flat"]) .progress { flex: 1; align-self: stretch; pointer-events: none; } .progress, .spinner, .left, .right, .content, .circle { position: absolute; inset: 0; } .content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .diameter-and-stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .diameter-and-stroke { width: inherit; height: var(--m3e-circular-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { width: var(--m3e-circular-wavy-progress-indicator-amplitude, 0.1rem); height: var(--m3e-circular-wavy-progress-indicator-wavelength, 0.9375rem); } :host([variant="flat"]) { width: var(--m3e-circular-flat-progress-indicator-diameter, 2.5rem); } :host([variant="wavy"]) { width: var(--m3e-circular-wavy-progress-indicator-diameter, 3rem); } :host([variant="flat"][indeterminate]) { content-visibility: auto; } :host([variant="flat"][indeterminate]) .progress { animation: linear infinite linear-rotate; animation-duration: var(--_linear-rotate-duration); } :host([variant="flat"][indeterminate]) .spinner { animation: infinite both rotate-arc; animation-duration: var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } :host([variant="wavy"][indeterminate]) .spinner { transform-origin: 50% 50%; animation: wavy-spin ${1.575}s linear infinite; } .left { clip-path: inset(0); inset: 0 50% 0 0; } .right { clip-path: inset(0); inset: 0 0 0 50%; } .circle { animation: expand-arc; animation-iteration-count: infinite; animation-fill-mode: both; animation-duration: var(--_arc-duration), var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } .left .circle { rotate: 135deg; inset: 0 -100% 0 0; } .right .circle { rotate: 100deg; inset: 0 0 0 -100%; animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms; } .track { color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${o.color.primary}); } .wave { animation: spin-reverse 8s linear infinite; transform-origin: 50% 50%; } @keyframes expand-arc { 0% { transform: rotate(265deg); } 50% { transform: rotate(130deg); } 100% { transform: rotate(265deg); } } @keyframes rotate-arc { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } @keyframes linear-rotate { to { transform: rotate(360deg); } } @keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wavy-spin { 0% { transform: rotate(0deg); } 10% { transform: rotate(90deg); } 100% { transform: rotate(360deg); } } @media (forced-colors: active) { :host([variant="flat"]) circle { fill: Canvas; } :host([variant="flat"]) .circle { border-color: var(--m3e-progress-indicator-color, ${o.color.primary}) var(--m3e-progress-indicator-color, ${o.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],Zt.__nextMaskId=0,p([W({type:Boolean,reflect:!0})],Zt.prototype,"indeterminate",void 0),Zt=Kt=p([u("m3e-circular-progress-indicator")],Zt);let le=he=class extends At{constructor(){super(...arguments),Ft.add(this),Qt.set(this,"m3e-linear-progress-mask-"+he.__nextMaskId++),Yt.set(this,0),te.set(this,0),ee.set(this,0),ie.set(this,new h(this,{skipInitial:!0,target:null,callback:()=>{m(this,Ft,"m",ae).call(this),m(this,Ft,"m",ne).call(this)}})),this.mode="determinate",this.bufferValue=0}firstUpdated(t){super.firstUpdated(t),m(this,Ft,"m",ae).call(this),m(this,Ft,"m",ne).call(this);const e=this.shadowRoot?.querySelector(".stroke");e&&m(this,ie,"f").observe(e);const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&m(this,ie,"f").observe(i)}update(t){super.update(t),t.has("mode")&&(this.ariaValueNow="indeterminate"===this.mode||"query"===this.mode?null:`${this.value}`)}updated(t){if(super.updated(t),t.has("value")||t.has("bufferValue")||t.has("max")){const t=this.shadowRoot?.querySelector(".progress");t?.style.setProperty("--_value",this.value/this.max*100+"%"),t?.style.setProperty("--_buffer-value",this.bufferValue/this.max*100+"%")}}render(){const t=Math.max(0,Math.min(this.value,this.max))/this.max*this.clientWidth,e="indeterminate"===this.mode||"query"===this.mode?this.clientWidth:t+3*m(this,ee,"f"),r="wavy"===this.variant&&m(this,Yt,"f")>0&&m(this,te,"f")>0&&m(this,ee,"f")>0?m(this,Ft,"m",oe).call(this,e):void 0;return i`<div class="progress" aria-hidden="true" style="${d({"--_translate-x":`-${t}px`})}">${r?s:i`<div class="track"></div>`} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value<=0?s:i`<div class="primary">${!r||"determinate"!==this.mode&&"buffer"!==this.mode?s:m(this,Ft,"m",se).call(this,e,r.height,r.viewBox,r.path)}</div>${"determinate"===this.mode||"buffer"===this.mode?i`<div class="gap"></div>`:s}`} ${"buffer"!==this.mode||this.bufferValue>0?i`<div class="secondary"></div>`:s} ${"buffer"===this.mode&&this.bufferValue>0?i`<div class="gap"></div>`:s} ${"buffer"===this.mode?i`<div class="buffer"></div>`:s} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value>0?i`<div class="gap"></div><div class="stop"></div>`:s} ${r&&"determinate"!==this.mode&&"buffer"!==this.mode?m(this,Ft,"m",se).call(this,e,r.height,r.viewBox,r.path):s}</div>${m(this,Ft,"m",re).call(this)}`}};Qt=new WeakMap,Yt=new WeakMap,te=new WeakMap,ee=new WeakMap,ie=new WeakMap,Ft=new WeakSet,se=function(t,e,s,a){const n="indeterminate"===this.mode||"query"===this.mode;return n||this.value/this.max!==1?i`<svg class="wave" width="${t}" height="${e}" viewBox="${s}" preserveAspectRatio="none">${n?r`
|
|
92
92
|
<mask id="${m(this,Qt,"f")}" maskUnits="userSpaceOnUse">
|
|
93
93
|
<rect width="${t}" height="${e}" fill="black" />
|
|
94
94
|
<rect class="primary" height="${e}" fill="white" />
|
|
@@ -98,5 +98,11 @@ const _t=1;class kt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i)
|
|
|
98
98
|
<rect width="${t}" height="${e}" fill="white" />
|
|
99
99
|
<rect class="primary" height="${e}" fill="black" />
|
|
100
100
|
<rect class="secondary" height="${e}" fill="black" />
|
|
101
|
-
</mask
|
|
101
|
+
</mask>
|
|
102
|
+
<g mask="${c(m(this,Qt,"f"))}">
|
|
103
|
+
<path d="${a}" stroke="currentColor" stroke-width=${m(this,Yt,"f")} fill="none" stroke-linecap="round" />
|
|
104
|
+
</g>
|
|
105
|
+
<g mask="${c(`${m(this,Qt,"f")}-inverse`)}">
|
|
106
|
+
<rect class="track" width="100%" height="${m(this,Yt,"f")}" fill="currentColor" />
|
|
107
|
+
</g>`:r`<path d="${a}" stroke="currentColor" stroke-width=${m(this,Yt,"f")} fill="none" stroke-linecap="round" />`}</svg>`:i`<div class="complete"></div>`},re=function(){return i`<div class="stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},ae=function(){const t=this.shadowRoot?.querySelector(".stroke");t&&f(this,Yt,t.clientHeight,"f")},ne=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(f(this,te,t.clientHeight,"f"),f(this,ee,t.clientWidth,"f"))},oe=function(t,e=0){const i=m(this,te,"f")+m(this,Yt,"f")/2,s=i,r=[],a=m(this,ee,"f")/2;let n=0;for(r.push(`M ${n},${s}`);n<=t;){const t=n+a,o=s+i*Math.sin(2*Math.PI*t/m(this,ee,"f")+e),h=n+a/2,l=s+i*Math.sin(2*Math.PI*(n+a/2)/m(this,ee,"f")+e);r.push(`Q ${h},${l} ${t},${o}`),n+=a}const o=`0 -1 ${t} ${2*i+2}`;return{path:r.join(" "),viewBox:o,height:m(this,Yt,"f")+2*m(this,te,"f"),padding:1}},le.styles=[At.styles,e`:host { display: block; position: relative; } .progress { width: 100%; height: 100%; position: relative; align-items: center; border-radius: var(--m3e-linear-progress-indicator-shape, ${o.shape.corner.extraSmall}); } .stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .stroke { width: 100%; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { height: var(--m3e-linear-wavy-progress-indicator-amplitude, 0.1875rem); width: var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem); } :host([mode="indeterminate"]) .amplitude-and-wavelength, :host([mode="query"]) .amplitude-and-wavelength { width: var(--m3e-linear-wavy-indeterminate-progress-indicator-wavelength, 1.5rem); } .primary, .secondary, .stop { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } .stop { aspect-ratio: 1; flex: none; } :host([variant="flat"]) { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } :host([variant="wavy"]) { height: calc( var(--m3e-linear-progress-indicator-thickness, 0.25rem) + calc(var(--m3e-linear-wavy-progress-indicator-amplitude, 0.1875rem) * 2) ); } :host([variant="wavy"]) .primary, :host([variant="wavy"]) .secondary { position: relative; height: 100%; overflow: hidden; } :host([variant="wavy"]) .complete { position: absolute; margin: auto; top: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); left: 0; right: 0; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } :host([variant="wavy"]) .secondary { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } .wave { position: absolute; display: block; } .primary .wave, .secondary .wave { margin-inline-start: calc(0px - var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem)); } :host([variant="wavy"][mode="determinate"]) .primary path, :host([variant="wavy"][mode="buffer"]) .primary path { animation: wave-slide 1.5s linear infinite; } @keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(calc(0px - var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem))); } } :host([mode="determinate"]) .progress, :host([mode="buffer"]) .progress { display: flex; overflow: hidden; } :host([mode="determinate"]) .primary, :host([mode="buffer"]) .primary { width: var(--_value, 0px); flex: none; } :host([mode="determinate"]) .gap, :host([mode="buffer"]) .gap { flex-basis: var(--m3e-linear-progress-indicator-thickness, 0.25rem); flex-shrink: 1; } :host([mode="determinate"]) .secondary, :host([mode="buffer"]) .buffer { flex: 1 1 auto; } :host([mode="buffer"]) .buffer { flex-shrink: 5; height: 100%; width: 100%; background-color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); mask-image: radial-gradient( circle, black 0, black calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2), transparent calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2) ); mask-size: calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) * 2) 100%; mask-repeat: repeat; animation: buffer 250ms linear infinite; } :host(:dir(rtl)[mode="buffer"]) .buffer { transform: scaleX(-1); } @keyframes buffer { from { mask-position: 0 0; } to { mask-position: calc(-1 * calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) * 2)) 0; } } :host([mode="buffer"]) .secondary { width: var(--_buffer-value, 0px); flex: none; } :host([mode="indeterminate"]) .primary, :host([mode="query"]) .primary { position: absolute; top: 0; height: 100%; border-radius: inherit; animation: indeterminate-primary 2.1s infinite linear; } :host([variant="wavy"][mode="indeterminate"]) .primary, :host([variant="wavy"][mode="query"]) .primary { animation-name: wavy-indeterminate-primary; } :host([mode="indeterminate"]) .secondary, :host([mode="query"]) .secondary { position: absolute; top: 0; height: 100%; border-radius: inherit; animation: indeterminate-secondary 2.1s infinite linear; animation-delay: 1.15s; animation-fill-mode: backwards; } :host([variant="wavy"][mode="indeterminate"]) .secondary, :host([variant="wavy"][mode="query"]) .secondary { animation-name: wavy-indeterminate-secondary; } :host([mode="indeterminate"]) .progress, :host([mode="query"]) .progress { overflow: hidden; position: relative; } :host(:not(:dir(rtl))[mode="query"]) .progress, :host(:dir(rtl)[mode="indeterminate"]) .progress { transform: scaleX(-1); } :host([variant="flat"]) .primary, :host([variant="flat"][mode="indeterminate"]) .secondary, :host([variant="flat"][mode="query"]) .secondary, :host([variant="wavy"]) .complete, .stop { background-color: var(--m3e-progress-indicator-color, ${o.color.primary}); } :host([variant="wavy"]) .progress { color: var(--m3e-progress-indicator-color, ${o.color.primary}); } :host([mode="determinate"]) .secondary, :host([mode="buffer"]) .secondary, :host([variant="flat"][mode="indeterminate"]) .track, :host([variant="flat"][mode="query"]) .track { background-color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { y: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); border-radius: inherit; } :host([variant="flat"][mode="indeterminate"]) .track, :host([variant="flat"][mode="query"]) .track { position: absolute; margin: auto; top: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); left: 0; right: 0; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } @keyframes indeterminate-primary { 0% { left: -145.167%; width: 8%; } 20% { left: -113.333%; width: 48%; } 60% { left: 56.333%; width: 78%; } 100% { left: 100%; width: 8%; } } @keyframes indeterminate-secondary { 0% { left: -54.888%; width: 8%; } 20% { left: -20%; width: 48%; } 60% { left: 60%; width: 78%; } 100% { left: 160%; width: 8%; } } @keyframes wavy-indeterminate-primary { 0% { transform: translateX(-145.167%); width: 8%; } 20% { transform: translateX(-113.333%); width: 48%; } 60% { transform: translateX(56.333%); width: 78%; } 100% { transform: translateX(100%); width: 8%; } } @keyframes wavy-indeterminate-secondary { 0% { transform: translateX(-54.888%); width: 8%; } 20% { transform: translateX(-20%); width: 48%; } 60% { transform: translateX(60%); width: 78%; } 100% { transform: translateX(160%); width: 8%; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],le.__nextMaskId=0,p([W({reflect:!0})],le.prototype,"mode",void 0),p([W({attribute:"buffer-value",type:Number,reflect:!0})],le.prototype,"bufferValue",void 0),le=he=p([u("m3e-linear-progress-indicator")],le);export{Zt as M3eCircularProgressIndicatorElement,le as M3eLinearProgressIndicatorElement,At as ProgressElementIndicatorBase};
|
|
102
108
|
//# sourceMappingURL=index.min.js.map
|