@m3e/progress-indicator 1.1.5 → 1.1.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.min.js
CHANGED
|
@@ -46,7 +46,7 @@ const _t=1;class kt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i)
|
|
|
46
46
|
* @license
|
|
47
47
|
* Copyright 2018 Google LLC
|
|
48
48
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
49
|
-
*/class At extends(a(n(t,"progressbar"),!0)){constructor(){super(...arguments),this.value=0,this.max=100,this.variant="flat"}connectedCallback(){super.connectedCallback(),this.ariaValueMin="0"}update(t){super.update(t),t.has("value")&&(this.ariaValueNow=`${this.value}`),t.has("max")&&(this.ariaValueMax=`${this.max}`)}}var xt,St,Et,Mt,Ct,Pt,Ut,Ot,Tt,Rt,Ht,Nt,qt,jt,Wt,Bt,It,zt,Vt,Dt,Lt,Xt,Gt,Jt,Kt;At.styles=e`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,p([W({type:Number,reflect:!0})],At.prototype,"value",void 0),p([W({type:Number})],At.prototype,"max",void 0),p([W({reflect:!0})],At.prototype,"variant",void 0);let Zt=Kt=class extends At{constructor(){super(...arguments),xt.add(this),St.set(this,"m3e-circular-progress-mask-"+Kt.__nextMaskId++),Et.set(this,0),Mt.set(this,0),Ct.set(this,0),Pt.set(this,0),Ut.set(this,void 0),Ot.set(this,void 0),Tt.set(this,new h(this,{skipInitial:!0,target:null,callback:()=>{m(this,xt,"m",Wt).call(this),m(this,xt,"m",Bt).call(this)}})),Rt.set(this,new l(this,(t,e)=>m(this,xt,"m",It).call(this,e))),this.indeterminate=!1}update(t){super.update(t),t.has("indeterminate")&&(this.ariaValueNow=this.indeterminate?null:`${this.value}`)}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot?.querySelector(".diameter-and-stroke");e&&(m(this,xt,"m",Wt).call(this),m(this,Tt,"f").observe(e));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(m(this,xt,"m",Wt).call(this),m(this,Tt,"f").observe(i))}updated(t){super.updated(t),t.has("indeterminate")&&(f(this,Ut,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),f(this,Ot,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?m(this,Rt,"f").start():m(this,Rt,"f").stop())}render(){return"wavy"===this.variant?m(this,xt,"m",Nt).call(this):m(this,xt,"m",Ht).call(this)}};var Ft,Qt,Yt,te,ee,ie,se,re,ae,ne,oe,he;St=new WeakMap,Et=new WeakMap,Mt=new WeakMap,Ct=new WeakMap,Pt=new WeakMap,Ut=new WeakMap,Ot=new WeakMap,Tt=new WeakMap,Rt=new WeakMap,xt=new WeakSet,Ht=function(){if(this.indeterminate){const t=m(this,xt,"m",Gt).call(this,{startAngle:-45,endAngle:90+m(this,Mt,"f")}),e=m(this,xt,"m",Gt).call(this,{startAngle:-m(this,Mt,"f"),endAngle:135});return i`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${
|
|
49
|
+
*/class At extends(a(n(t,"progressbar"),!0)){constructor(){super(...arguments),this.value=0,this.max=100,this.variant="flat"}connectedCallback(){super.connectedCallback(),this.ariaValueMin="0"}update(t){super.update(t),t.has("value")&&(this.ariaValueNow=`${this.value}`),t.has("max")&&(this.ariaValueMax=`${this.max}`)}}var xt,St,Et,Mt,Ct,Pt,Ut,Ot,Tt,Rt,Ht,Nt,qt,jt,Wt,Bt,It,zt,Vt,Dt,Lt,Xt,Gt,Jt,Kt;At.styles=e`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,p([W({type:Number,reflect:!0})],At.prototype,"value",void 0),p([W({type:Number})],At.prototype,"max",void 0),p([W({reflect:!0})],At.prototype,"variant",void 0);let Zt=Kt=class extends At{constructor(){super(...arguments),xt.add(this),St.set(this,"m3e-circular-progress-mask-"+Kt.__nextMaskId++),Et.set(this,0),Mt.set(this,0),Ct.set(this,0),Pt.set(this,0),Ut.set(this,void 0),Ot.set(this,void 0),Tt.set(this,new h(this,{skipInitial:!0,target:null,callback:()=>{m(this,xt,"m",Wt).call(this),m(this,xt,"m",Bt).call(this)}})),Rt.set(this,new l(this,(t,e)=>m(this,xt,"m",It).call(this,e))),this.indeterminate=!1}update(t){super.update(t),t.has("indeterminate")&&(this.ariaValueNow=this.indeterminate?null:`${this.value}`)}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot?.querySelector(".diameter-and-stroke");e&&(m(this,xt,"m",Wt).call(this),m(this,Tt,"f").observe(e));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(m(this,xt,"m",Wt).call(this),m(this,Tt,"f").observe(i))}updated(t){super.updated(t),t.has("indeterminate")&&(f(this,Ut,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),f(this,Ot,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?m(this,Rt,"f").start():m(this,Rt,"f").stop())}render(){return"wavy"===this.variant?m(this,xt,"m",Nt).call(this):m(this,xt,"m",Ht).call(this)}};var Ft,Qt,Yt,te,ee,ie,se,re,ae,ne,oe,he;St=new WeakMap,Et=new WeakMap,Mt=new WeakMap,Ct=new WeakMap,Pt=new WeakMap,Ut=new WeakMap,Ot=new WeakMap,Tt=new WeakMap,Rt=new WeakMap,xt=new WeakSet,Ht=function(){if(this.indeterminate){const t=m(this,xt,"m",Gt).call(this,{startAngle:-45,endAngle:90+m(this,Mt,"f")}),e=m(this,xt,"m",Gt).call(this,{startAngle:-m(this,Mt,"f"),endAngle:135});return i`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${m(this,Et,"f")}" height="${m(this,Et,"f")}" viewBox="${t.viewBox}" class="circle"><path class="active-track" d="${t.path}" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg width="${m(this,Et,"f")}" height="${m(this,Et,"f")}" viewBox="${e.viewBox}" class="circle"><path class="active-track" d="${e.path}" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${m(this,xt,"m",qt).call(this)}`}const t=m(this,xt,"m",Vt).call(this,2*m(this,Mt,"f"),m(this,Et,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const a=m(this,xt,"m",Gt).call(this,{gap:e<360?m(this,Mt,"f"):0,endAngle:e}),n=m(this,xt,"m",Gt).call(this,{gap:e>0?m(this,Mt,"f"):0,startAngle:e,endAngle:360});return i`<div class="progress" aria-hidden="true"><svg width="${m(this,Et,"f")}" height="${m(this,Et,"f")}" viewBox="${a.viewBox}">${e>0?r`<path
|
|
50
50
|
class="active-track"
|
|
51
51
|
d="${a.path}"
|
|
52
52
|
stroke="currentColor"
|
|
@@ -60,7 +60,7 @@ const _t=1;class kt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i)
|
|
|
60
60
|
stroke-width=${m(this,Mt,"f")}
|
|
61
61
|
fill="none"
|
|
62
62
|
stroke-linecap="round"
|
|
63
|
-
/>`:s}</svg></div>${m(this,xt,"m",qt).call(this)}${m(this,xt,"m",jt).call(this)}`},Nt=function(){if(this.indeterminate)return i`<div class="progress" aria-hidden="true"><svg viewBox="${m(this,xt,"m",Jt).call(this,{endAngle:20}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div>${m(this,xt,"m",qt).call(this)}`;const t=m(this,xt,"m",Vt).call(this,2*m(this,Mt,"f"),m(this,Et,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const a=e<=t+t/2||360==e?0:m(this,Ct,"f"),n=m(this,xt,"m",Gt).call(this,{gap:e<360?m(this,Mt,"f"):0,endAngle:e}),o=0==a?n:m(this,xt,"m",Jt).call(this,{endAngle:360,amplitude:a}),h=m(this,xt,"m",Gt).call(this,{gap:e>0?m(this,Mt,"f"):0,startAngle:e,endAngle:360}),l=a>0?a+m(this,Mt,"f")/2:m(this,Mt,"f");return i`<svg class="progress" viewBox="${h.viewBox}" aria-hidden="true">${e>0?r`${a>0?r`<defs>
|
|
63
|
+
/>`:s}</svg></div>${m(this,xt,"m",qt).call(this)}${m(this,xt,"m",jt).call(this)}`},Nt=function(){if(this.indeterminate)return i`<div class="progress" aria-hidden="true"><svg width="${m(this,Et,"f")}" height="${m(this,Et,"f")}" viewBox="${m(this,xt,"m",Jt).call(this,{endAngle:20}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div>${m(this,xt,"m",qt).call(this)}`;const t=m(this,xt,"m",Vt).call(this,2*m(this,Mt,"f"),m(this,Et,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const a=e<=t+t/2||360==e?0:m(this,Ct,"f"),n=m(this,xt,"m",Gt).call(this,{gap:e<360?m(this,Mt,"f"):0,endAngle:e}),o=0==a?n:m(this,xt,"m",Jt).call(this,{endAngle:360,amplitude:a}),h=m(this,xt,"m",Gt).call(this,{gap:e>0?m(this,Mt,"f"):0,startAngle:e,endAngle:360}),l=a>0?a+m(this,Mt,"f")/2:m(this,Mt,"f");return i`<svg class="progress" viewBox="${h.viewBox}" aria-hidden="true">${e>0?r`${a>0?r`<defs>
|
|
64
64
|
<mask id="${m(this,St,"f")}">
|
|
65
65
|
<path
|
|
66
66
|
d="${n.path}"
|
|
@@ -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)
|
|
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; } .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]) .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" />
|