@m3e/web 2.0.3 → 2.0.5

package/dist/progress-indicator.min.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{LitElement as t,css as e,html as i,nothing as r,svg as a}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{ifDefined as h}from"lit/directives/if-defined.js";import{AttachInternals as l,Role as d,DesignToken as c,ResizeController as m,AnimationLoopController as f,resolveFragmentUrl as p,safeStyleMap as v}from"@m3e/web/core";function u(t,e,i,r){var a,s=arguments.length,o=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o);return s>3&&o&&Object.defineProperty(e,i,o),o}function g(t,e,i,r){if("a"===i&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?r:"a"===i?r.call(t):r?r.value:e.get(t)}function w(t,e,i,r,a){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?a.call(t,i):a?a.value=i:e.set(t,i),i}"function"==typeof SuppressedError&&SuppressedError;class y extends(l(d(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 k,$,b,x,M,q,C,_,A,W,B,S,R,j,P,I,X,V,T,U,E,N,O,H,z;y.styles=e`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,u([s({type:Number,reflect:!0})],y.prototype,"value",void 0),u([s({type:Number})],y.prototype,"max",void 0),u([s({reflect:!0})],y.prototype,"variant",void 0);let G=z=class extends y{constructor(){super(...arguments),k.add(this),$.set(this,"m3e-circular-progress-mask-"+z.__nextMaskId++),b.set(this,0),x.set(this,0),M.set(this,0),q.set(this,0),C.set(this,void 0),_.set(this,void 0),A.set(this,new m(this,{skipInitial:!0,target:null,callback:()=>{g(this,k,"m",P).call(this),g(this,k,"m",I).call(this)}})),W.set(this,new f(this,(t,e)=>g(this,k,"m",X).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&&(g(this,k,"m",P).call(this),g(this,A,"f").observe(e));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(g(this,k,"m",P).call(this),g(this,A,"f").observe(i))}updated(t){super.updated(t),t.has("indeterminate")&&(w(this,C,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),w(this,_,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?g(this,W,"f").start():g(this,W,"f").stop())}render(){return"wavy"===this.variant?g(this,k,"m",S).call(this):g(this,k,"m",B).call(this)}};var D,L,Q,F,J,K,Y,Z,tt,et,it,rt;$=new WeakMap,b=new WeakMap,x=new WeakMap,M=new WeakMap,q=new WeakMap,C=new WeakMap,_=new WeakMap,A=new WeakMap,W=new WeakMap,k=new WeakSet,B=function(){if(this.indeterminate){const t=g(this,k,"m",O).call(this,{startAngle:-45,endAngle:90+g(this,x,"f")}),e=g(this,k,"m",O).call(this,{startAngle:-g(this,x,"f"),endAngle:135});return i`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${t.viewBox}" class="circle"><path class="active-track" d="${t.path}" stroke="currentColor" stroke-width="${g(this,x,"f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${e.viewBox}" class="circle"><path class="active-track" d="${e.path}" stroke="currentColor" stroke-width="${g(this,x,"f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${g(this,k,"m",R).call(this)}`}const t=g(this,k,"m",T).call(this,2*g(this,x,"f"),g(this,b,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const s=g(this,k,"m",O).call(this,{gap:e<360?g(this,x,"f"):0,endAngle:e}),o=g(this,k,"m",O).call(this,{gap:e>0?g(this,x,"f"):0,startAngle:e,endAngle:360});return i`<div class="progress" aria-hidden="true"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${s.viewBox}">${e>0?a`<path
+import{LitElement as t,css as e,html as i,nothing as r,svg as a}from"lit";import{property as s}from"lit/decorators.js";import{classMap as o}from"lit/directives/class-map.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{AttachInternals as h,Role as l,DesignToken as d,customElement as c,ResizeController as m,AnimationLoopController as f,resolveFragmentUrl as p,safeStyleMap as v}from"@m3e/web/core";function u(t,e,i,r){var a,s=arguments.length,o=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o);return s>3&&o&&Object.defineProperty(e,i,o),o}function g(t,e,i,r){if("a"===i&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?r:"a"===i?r.call(t):r?r.value:e.get(t)}function w(t,e,i,r,a){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?a.call(t,i):a?a.value=i:e.set(t,i),i}"function"==typeof SuppressedError&&SuppressedError;class y extends(h(l(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 k,$,b,x,M,q,C,_,A,W,B,S,R,j,P,I,X,V,T,U,E,N,O,H,z;y.styles=e`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,u([s({type:Number,reflect:!0})],y.prototype,"value",void 0),u([s({type:Number})],y.prototype,"max",void 0),u([s({reflect:!0})],y.prototype,"variant",void 0);let G=z=class extends y{constructor(){super(...arguments),k.add(this),$.set(this,"m3e-circular-progress-mask-"+z.__nextMaskId++),b.set(this,0),x.set(this,0),M.set(this,0),q.set(this,0),C.set(this,void 0),_.set(this,void 0),A.set(this,new m(this,{skipInitial:!0,target:null,callback:()=>{g(this,k,"m",P).call(this),g(this,k,"m",I).call(this)}})),W.set(this,new f(this,(t,e)=>g(this,k,"m",X).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&&(g(this,k,"m",P).call(this),g(this,A,"f").observe(e));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(g(this,k,"m",P).call(this),g(this,A,"f").observe(i))}updated(t){super.updated(t),t.has("indeterminate")&&(w(this,C,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),w(this,_,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?g(this,W,"f").start():g(this,W,"f").stop())}render(){return"wavy"===this.variant?g(this,k,"m",S).call(this):g(this,k,"m",B).call(this)}};var D,L,Q,F,J,K,Y,Z,tt,et,it,rt;$=new WeakMap,b=new WeakMap,x=new WeakMap,M=new WeakMap,q=new WeakMap,C=new WeakMap,_=new WeakMap,A=new WeakMap,W=new WeakMap,k=new WeakSet,B=function(){if(this.indeterminate){const t=g(this,k,"m",O).call(this,{startAngle:-45,endAngle:90+g(this,x,"f")}),e=g(this,k,"m",O).call(this,{startAngle:-g(this,x,"f"),endAngle:135});return i`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${t.viewBox}" class="circle"><path class="active-track" d="${t.path}" stroke="currentColor" stroke-width="${g(this,x,"f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${e.viewBox}" class="circle"><path class="active-track" d="${e.path}" stroke="currentColor" stroke-width="${g(this,x,"f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${g(this,k,"m",R).call(this)}`}const t=g(this,k,"m",T).call(this,2*g(this,x,"f"),g(this,b,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const s=g(this,k,"m",O).call(this,{gap:e<360?g(this,x,"f"):0,endAngle:e}),o=g(this,k,"m",O).call(this,{gap:e>0?g(this,x,"f"):0,startAngle:e,endAngle:360});return i`<div class="progress" aria-hidden="true"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${s.viewBox}">${e>0?a`<path
             class="active-track"
             d="${s.path}"
             stroke="currentColor"
@@ -17,10 +17,10 @@ import{LitElement as t,css as e,html as i,nothing as r,svg as a}from"lit";import
                 stroke-width=${g(this,x,"f")}
                 fill="none"
                 stroke-linecap="round"
-              />`:r}</svg></div>${g(this,k,"m",R).call(this)}${g(this,k,"m",j).call(this)}`},S=function(){if(this.indeterminate)return i`<div class="progress" aria-hidden="true"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${g(this,k,"m",H).call(this,{endAngle:20}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${g(this,x,"f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${g(this,x,"f")}" fill="none" stroke-linecap="round"/></svg></div>${g(this,k,"m",R).call(this)}`;const t=g(this,k,"m",T).call(this,2*g(this,x,"f"),g(this,b,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const s=e<=t+t/2||360==e?0:g(this,M,"f"),o=g(this,k,"m",O).call(this,{gap:e<360?g(this,x,"f"):0,endAngle:e}),l=0==s?o:g(this,k,"m",H).call(this,{endAngle:360,amplitude:s}),d=g(this,k,"m",O).call(this,{gap:e>0?g(this,x,"f"):0,startAngle:e,endAngle:360}),c=s>0?s+g(this,x,"f")/2:g(this,x,"f");return i`<svg class="progress" viewBox="${d.viewBox}" aria-hidden="true">${e>0?a`${s>0?a`<defs>
+              />`:r}</svg></div>${g(this,k,"m",R).call(this)}${g(this,k,"m",j).call(this)}`},S=function(){if(this.indeterminate)return i`<div class="progress" aria-hidden="true"><svg width="${g(this,b,"f")}" height="${g(this,b,"f")}" viewBox="${g(this,k,"m",H).call(this,{endAngle:20}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${g(this,x,"f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${g(this,x,"f")}" fill="none" stroke-linecap="round"/></svg></div>${g(this,k,"m",R).call(this)}`;const t=g(this,k,"m",T).call(this,2*g(this,x,"f"),g(this,b,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const s=e<=t+t/2||360==e?0:g(this,M,"f"),h=g(this,k,"m",O).call(this,{gap:e<360?g(this,x,"f"):0,endAngle:e}),l=0==s?h:g(this,k,"m",H).call(this,{endAngle:360,amplitude:s}),d=g(this,k,"m",O).call(this,{gap:e>0?g(this,x,"f"):0,startAngle:e,endAngle:360}),c=s>0?s+g(this,x,"f")/2:g(this,x,"f");return i`<svg class="progress" viewBox="${d.viewBox}" aria-hidden="true">${e>0?a`${s>0?a`<defs>
           <mask id="${g(this,$,"f")}">
             <path
-              d="${o.path}"
+              d="${h.path}"
               stroke="white"
               stroke-width="${g(this,x,"f")+c}"
               fill="none"
@@ -28,9 +28,9 @@ import{LitElement as t,css as e,html as i,nothing as r,svg as a}from"lit";import
             />
           </mask>
         </defs>`:r}
-        <g class="active-track" mask="${h(s>0?p(g(this,$,"f")):void 0)}">
+        <g class="active-track" mask="${n(s>0?p(g(this,$,"f")):void 0)}">
           <path
-            class="${n({wave:s>0})}"
+            class="${o({wave:s>0})}"
             d="${l.path}"
             stroke="currentColor"
             stroke-width=${g(this,x,"f")}
@@ -45,7 +45,7 @@ import{LitElement as t,css as e,html as i,nothing as r,svg as a}from"lit";import
                 stroke-width=${g(this,x,"f")}
                 fill="none"
                 stroke-linecap="round"
-              />`:r}</svg> ${g(this,k,"m",R).call(this)}${g(this,k,"m",j).call(this)}`},R=function(){return i`<div class="diameter-and-stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},j=function(){return i`<div class="content" aria-hidden="true"><slot></slot></div>`},P=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(w(this,b,t.clientWidth,"f"),w(this,x,t.clientHeight,"f"))},I=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(w(this,M,t.clientWidth,"f"),w(this,q,t.clientHeight,"f"))},X=function(t){if(0===g(this,M,"f")||0===g(this,q,"f"))return;const e=g(this,k,"m",V).call(this,t);g(this,C,"f")?.setAttribute("d",g(this,k,"m",H).call(this,{endAngle:e}).path),g(this,_,"f")?.setAttribute("d",g(this,k,"m",O).call(this,{gap:g(this,k,"m",T).call(this,g(this,x,"f"),g(this,b,"f")),startAngle:e}).path)},V=function(t){const e=2*g(this,k,"m",T).call(this,g(this,x,"f")),i=18+e,r=280-e,a=1.575,s=t%6.3;if(s<a)return i;if(s<3.15){const t=(s-a)/a;return i+t*t*(3-2*t)*(r-i)}if(s<4.725)return r;const o=(s-4.725)/a;return r-o*o*(3-2*o)*(r-i)},T=function(t,e=g(this,M,"f")){return t*(360/(2*Math.PI*g(this,k,"m",N).call(this,e).r))},U=function(t){return(t-90)*(Math.PI/180)},E=function(t,e){const i=g(this,k,"m",U).call(this,e);return{x:t.cx+t.r*Math.cos(i),y:t.cy+t.r*Math.sin(i)}},N=function(t){t+=g(this,x,"f")/2;const e=g(this,b,"f")/2;return{cx:e+t,cy:e+t,r:e,padding:t}},O=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:r=g(this,M,"f")}){if(0===g(this,b,"f")||0===g(this,x,"f"))return{path:"",viewBox:"0 0 0 0"};const a=g(this,k,"m",N).call(this,r);i>0&&(t+=g(this,k,"m",T).call(this,i,r),e-=g(this,k,"m",T).call(this,i,r)),e-t>=360&&(e=t+359.999);const s=g(this,k,"m",E).call(this,a,e),o=g(this,k,"m",E).call(this,a,t);return{path:`M ${s.x} ${s.y} A ${a.r} ${a.r} 0 ${e-t<=180?"0":"1"} 0 ${o.x} ${o.y}`,viewBox:`0 0 ${g(this,b,"f")+2*a.padding} ${g(this,b,"f")+2*a.padding}`}},H=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:r=g(this,M,"f"),amplitude:a=g(this,M,"f"),steps:s=200}){if(0===g(this,b,"f")||0===g(this,x,"f"))return{path:"",viewBox:"0 0 0 0"};const o=g(this,k,"m",N).call(this,r);i>0&&(t+=g(this,k,"m",T).call(this,i,r),e-=g(this,k,"m",T).call(this,i,r));const n=g(this,k,"m",U).call(this,t);let h=g(this,k,"m",U).call(this,e);t===e?h=n:h<n&&(h+=2*Math.PI);const l=h-n,d=2*Math.PI*o.r/g(this,q,"f"),c=Math.PI/2*(d-1),m=[];for(let t=0;t<=s;t++){const e=n+(0===s?0:t/s)*l,i=Math.sin(e*d+c),r=o.r-a*i,h=r*Math.cos(e)+o.cx,f=r*Math.sin(e)+o.cy;m.push([h,f])}return{path:1===m.length?`M ${m[0][0]},${m[0][1]}`:`M ${m[0][0]},${m[0][1]} `+m.slice(1).map(([t,e])=>`L ${t},${e}`).join(" "),viewBox:`0 0 ${g(this,b,"f")+2*o.padding} ${g(this,b,"f")+2*o.padding}`}},G.styles=[y.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, ${c.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${c.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, ${c.color.primary}) var(--m3e-progress-indicator-color, ${c.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],G.__nextMaskId=0,u([s({type:Boolean,reflect:!0})],G.prototype,"indeterminate",void 0),G=z=u([o("m3e-circular-progress-indicator")],G);let at=rt=class extends y{constructor(){super(...arguments),D.add(this),L.set(this,"m3e-linear-progress-mask-"+rt.__nextMaskId++),Q.set(this,0),F.set(this,0),J.set(this,0),K.set(this,new m(this,{skipInitial:!0,target:null,callback:()=>{g(this,D,"m",tt).call(this),g(this,D,"m",et).call(this)}})),this.mode="determinate",this.bufferValue=0}firstUpdated(t){super.firstUpdated(t),g(this,D,"m",tt).call(this),g(this,D,"m",et).call(this);const e=this.shadowRoot?.querySelector(".stroke");e&&g(this,K,"f").observe(e);const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&g(this,K,"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*g(this,J,"f"),a="wavy"===this.variant&&g(this,Q,"f")>0&&g(this,F,"f")>0&&g(this,J,"f")>0?g(this,D,"m",it).call(this,e):void 0;return i`<div class="progress" aria-hidden="true" style="${v({"--_translate-x":`-${t}px`})}">${a?r:i`<div class="track"></div>`} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value<=0?r:i`<div class="primary">${!a||"determinate"!==this.mode&&"buffer"!==this.mode?r:g(this,D,"m",Y).call(this,e,a.height,a.viewBox,a.path)}</div>${"determinate"===this.mode||"buffer"===this.mode?i`<div class="gap"></div>`:r}`} ${"buffer"!==this.mode||this.bufferValue>0?i`<div class="secondary"></div>`:r} ${"buffer"===this.mode&&this.bufferValue>0?i`<div class="gap"></div>`:r} ${"buffer"===this.mode?i`<div class="buffer"></div>`:r} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value>0?i`<div class="gap"></div><div class="stop"></div>`:r} ${a&&"determinate"!==this.mode&&"buffer"!==this.mode?g(this,D,"m",Y).call(this,e,a.height,a.viewBox,a.path):r}</div>${g(this,D,"m",Z).call(this)}`}};L=new WeakMap,Q=new WeakMap,F=new WeakMap,J=new WeakMap,K=new WeakMap,D=new WeakSet,Y=function(t,e,r,s){const o="indeterminate"===this.mode||"query"===this.mode;return o||this.value/this.max!==1?i`<svg class="wave" width="${t}" height="${e}" viewBox="${r}" preserveAspectRatio="none">${o?a`
+              />`:r}</svg> ${g(this,k,"m",R).call(this)}${g(this,k,"m",j).call(this)}`},R=function(){return i`<div class="diameter-and-stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},j=function(){return i`<div class="content" aria-hidden="true"><slot></slot></div>`},P=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(w(this,b,t.clientWidth,"f"),w(this,x,t.clientHeight,"f"))},I=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(w(this,M,t.clientWidth,"f"),w(this,q,t.clientHeight,"f"))},X=function(t){if(0===g(this,M,"f")||0===g(this,q,"f"))return;const e=g(this,k,"m",V).call(this,t);g(this,C,"f")?.setAttribute("d",g(this,k,"m",H).call(this,{endAngle:e}).path),g(this,_,"f")?.setAttribute("d",g(this,k,"m",O).call(this,{gap:g(this,k,"m",T).call(this,g(this,x,"f"),g(this,b,"f")),startAngle:e}).path)},V=function(t){const e=2*g(this,k,"m",T).call(this,g(this,x,"f")),i=18+e,r=280-e,a=1.575,s=t%6.3;if(s<a)return i;if(s<3.15){const t=(s-a)/a;return i+t*t*(3-2*t)*(r-i)}if(s<4.725)return r;const o=(s-4.725)/a;return r-o*o*(3-2*o)*(r-i)},T=function(t,e=g(this,M,"f")){return t*(360/(2*Math.PI*g(this,k,"m",N).call(this,e).r))},U=function(t){return(t-90)*(Math.PI/180)},E=function(t,e){const i=g(this,k,"m",U).call(this,e);return{x:t.cx+t.r*Math.cos(i),y:t.cy+t.r*Math.sin(i)}},N=function(t){t+=g(this,x,"f")/2;const e=g(this,b,"f")/2;return{cx:e+t,cy:e+t,r:e,padding:t}},O=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:r=g(this,M,"f")}){if(0===g(this,b,"f")||0===g(this,x,"f"))return{path:"",viewBox:"0 0 0 0"};const a=g(this,k,"m",N).call(this,r);i>0&&(t+=g(this,k,"m",T).call(this,i,r),e-=g(this,k,"m",T).call(this,i,r)),e-t>=360&&(e=t+359.999);const s=g(this,k,"m",E).call(this,a,e),o=g(this,k,"m",E).call(this,a,t);return{path:`M ${s.x} ${s.y} A ${a.r} ${a.r} 0 ${e-t<=180?"0":"1"} 0 ${o.x} ${o.y}`,viewBox:`0 0 ${g(this,b,"f")+2*a.padding} ${g(this,b,"f")+2*a.padding}`}},H=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:r=g(this,M,"f"),amplitude:a=g(this,M,"f"),steps:s=200}){if(0===g(this,b,"f")||0===g(this,x,"f"))return{path:"",viewBox:"0 0 0 0"};const o=g(this,k,"m",N).call(this,r);i>0&&(t+=g(this,k,"m",T).call(this,i,r),e-=g(this,k,"m",T).call(this,i,r));const n=g(this,k,"m",U).call(this,t);let h=g(this,k,"m",U).call(this,e);t===e?h=n:h<n&&(h+=2*Math.PI);const l=h-n,d=2*Math.PI*o.r/g(this,q,"f"),c=Math.PI/2*(d-1),m=[];for(let t=0;t<=s;t++){const e=n+(0===s?0:t/s)*l,i=Math.sin(e*d+c),r=o.r-a*i,h=r*Math.cos(e)+o.cx,f=r*Math.sin(e)+o.cy;m.push([h,f])}return{path:1===m.length?`M ${m[0][0]},${m[0][1]}`:`M ${m[0][0]},${m[0][1]} `+m.slice(1).map(([t,e])=>`L ${t},${e}`).join(" "),viewBox:`0 0 ${g(this,b,"f")+2*o.padding} ${g(this,b,"f")+2*o.padding}`}},G.styles=[y.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, ${d.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${d.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, ${d.color.primary}) var(--m3e-progress-indicator-color, ${d.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],G.__nextMaskId=0,u([s({type:Boolean,reflect:!0})],G.prototype,"indeterminate",void 0),G=z=u([c("m3e-circular-progress-indicator")],G);let at=rt=class extends y{constructor(){super(...arguments),D.add(this),L.set(this,"m3e-linear-progress-mask-"+rt.__nextMaskId++),Q.set(this,0),F.set(this,0),J.set(this,0),K.set(this,new m(this,{skipInitial:!0,target:null,callback:()=>{g(this,D,"m",tt).call(this),g(this,D,"m",et).call(this)}})),this.mode="determinate",this.bufferValue=0}firstUpdated(t){super.firstUpdated(t),g(this,D,"m",tt).call(this),g(this,D,"m",et).call(this);const e=this.shadowRoot?.querySelector(".stroke");e&&g(this,K,"f").observe(e);const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&g(this,K,"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*g(this,J,"f"),a="wavy"===this.variant&&g(this,Q,"f")>0&&g(this,F,"f")>0&&g(this,J,"f")>0?g(this,D,"m",it).call(this,e):void 0;return i`<div class="progress" aria-hidden="true" style="${v({"--_translate-x":`-${t}px`})}">${a?r:i`<div class="track"></div>`} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value<=0?r:i`<div class="primary">${!a||"determinate"!==this.mode&&"buffer"!==this.mode?r:g(this,D,"m",Y).call(this,e,a.height,a.viewBox,a.path)}</div>${"determinate"===this.mode||"buffer"===this.mode?i`<div class="gap"></div>`:r}`} ${"buffer"!==this.mode||this.bufferValue>0?i`<div class="secondary"></div>`:r} ${"buffer"===this.mode&&this.bufferValue>0?i`<div class="gap"></div>`:r} ${"buffer"===this.mode?i`<div class="buffer"></div>`:r} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value>0?i`<div class="gap"></div><div class="stop"></div>`:r} ${a&&"determinate"!==this.mode&&"buffer"!==this.mode?g(this,D,"m",Y).call(this,e,a.height,a.viewBox,a.path):r}</div>${g(this,D,"m",Z).call(this)}`}};L=new WeakMap,Q=new WeakMap,F=new WeakMap,J=new WeakMap,K=new WeakMap,D=new WeakSet,Y=function(t,e,r,s){const o="indeterminate"===this.mode||"query"===this.mode;return o||this.value/this.max!==1?i`<svg class="wave" width="${t}" height="${e}" viewBox="${r}" preserveAspectRatio="none">${o?a`
         <mask id="${g(this,L,"f")}" maskUnits="userSpaceOnUse">
           <rect width="${t}" height="${e}" fill="black" />
           <rect class="primary" height="${e}" fill="white" />
@@ -61,5 +61,5 @@ import{LitElement as t,css as e,html as i,nothing as r,svg as a}from"lit";import
         </g>
         <g mask="${p(`${g(this,L,"f")}-inverse`)}">
           <rect class="track" width="100%" height="${g(this,Q,"f")}" fill="currentColor" />
-        </g>`:a`<path d="${s}" stroke="currentColor" stroke-width=${g(this,Q,"f")} fill="none" stroke-linecap="round" />`}</svg>`:i`<div class="complete"></div>`},Z=function(){return i`<div class="stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},tt=function(){const t=this.shadowRoot?.querySelector(".stroke");t&&w(this,Q,t.clientHeight,"f")},et=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(w(this,F,t.clientHeight,"f"),w(this,J,t.clientWidth,"f"))},it=function(t,e=0){const i=g(this,F,"f")+g(this,Q,"f")/2,r=i,a=[],s=g(this,J,"f")/2;let o=0;for(a.push(`M ${o},${r}`);o<=t;){const t=o+s,n=r+i*Math.sin(2*Math.PI*t/g(this,J,"f")+e),h=o+s/2,l=r+i*Math.sin(2*Math.PI*(o+s/2)/g(this,J,"f")+e);a.push(`Q ${h},${l} ${t},${n}`),o+=s}const n=`0 -1 ${t} ${2*i+2}`;return{path:a.join(" "),viewBox:n,height:g(this,Q,"f")+2*g(this,F,"f"),padding:1}},at.styles=[y.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, ${c.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, ${c.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, ${c.color.primary}); } :host([variant="wavy"]) .progress { color: var(--m3e-progress-indicator-color, ${c.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, ${c.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { color: var(--m3e-progress-indicator-track-color, ${c.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; } }`],at.__nextMaskId=0,u([s({reflect:!0})],at.prototype,"mode",void 0),u([s({attribute:"buffer-value",type:Number,reflect:!0})],at.prototype,"bufferValue",void 0),at=rt=u([o("m3e-linear-progress-indicator")],at);export{G as M3eCircularProgressIndicatorElement,at as M3eLinearProgressIndicatorElement,y as ProgressElementIndicatorBase};
+        </g>`:a`<path d="${s}" stroke="currentColor" stroke-width=${g(this,Q,"f")} fill="none" stroke-linecap="round" />`}</svg>`:i`<div class="complete"></div>`},Z=function(){return i`<div class="stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},tt=function(){const t=this.shadowRoot?.querySelector(".stroke");t&&w(this,Q,t.clientHeight,"f")},et=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(w(this,F,t.clientHeight,"f"),w(this,J,t.clientWidth,"f"))},it=function(t,e=0){const i=g(this,F,"f")+g(this,Q,"f")/2,r=i,a=[],s=g(this,J,"f")/2;let o=0;for(a.push(`M ${o},${r}`);o<=t;){const t=o+s,n=r+i*Math.sin(2*Math.PI*t/g(this,J,"f")+e),h=o+s/2,l=r+i*Math.sin(2*Math.PI*(o+s/2)/g(this,J,"f")+e);a.push(`Q ${h},${l} ${t},${n}`),o+=s}const n=`0 -1 ${t} ${2*i+2}`;return{path:a.join(" "),viewBox:n,height:g(this,Q,"f")+2*g(this,F,"f"),padding:1}},at.styles=[y.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, ${d.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, ${d.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, ${d.color.primary}); } :host([variant="wavy"]) .progress { color: var(--m3e-progress-indicator-color, ${d.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, ${d.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { color: var(--m3e-progress-indicator-track-color, ${d.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; } }`],at.__nextMaskId=0,u([s({reflect:!0})],at.prototype,"mode",void 0),u([s({attribute:"buffer-value",type:Number,reflect:!0})],at.prototype,"bufferValue",void 0),at=rt=u([c("m3e-linear-progress-indicator")],at);export{G as M3eCircularProgressIndicatorElement,at as M3eLinearProgressIndicatorElement,y as ProgressElementIndicatorBase};
 //# sourceMappingURL=progress-indicator.min.js.map