@m3e/web 2.1.0 → 2.1.2

package/dist/progress-indicator.min.js

@@ -3,63 +3,63 @@
  * 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}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),queueMicrotask(()=>this.requestUpdate())}})),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{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as i}from"tslib";import{LitElement as r,css as a,html as s,nothing as o,svg as n}from"lit";import{property as h}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ReconnectedCallback as c,AttachInternals as m,Role as f,DesignToken as p,customElement as v,ResizeController as u,AnimationLoopController as g,resolveFragmentUrl as w,safeStyleMap as k}from"@m3e/web/core";class y extends(c(m(f(r,"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 $,b,x,M,q,C,_,A,W,B,S,I,R,X,V,U,j,P,N,T,H,z,G,O,L,Q;y.styles=a`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,t([h({type:Number,reflect:!0})],y.prototype,"value",void 0),t([h({type:Number})],y.prototype,"max",void 0),t([h({reflect:!0})],y.prototype,"variant",void 0);let D=Q=class extends y{constructor(){super(...arguments),$.add(this),b.set(this,"m3e-circular-progress-mask-"+Q.__nextMaskId++),x.set(this,0),M.set(this,0),q.set(this,0),C.set(this,0),_.set(this,void 0),A.set(this,void 0),W.set(this,new u(this,{skipInitial:!0,target:null,callback:()=>{e(this,$,"m",U).call(this),e(this,$,"m",j).call(this),queueMicrotask(()=>this.requestUpdate())}})),B.set(this,new g(this,(t,i)=>e(this,$,"m",P).call(this,i))),this.indeterminate=!1}update(t){super.update(t),t.has("indeterminate")&&(this.ariaValueNow=this.indeterminate?null:`${this.value}`)}reconnectedCallback(){super.reconnectedCallback(),e(this,$,"m",S).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,$,"m",S).call(this)}updated(t){super.updated(t),t.has("indeterminate")&&(i(this,_,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),i(this,A,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?e(this,B,"f").start():e(this,B,"f").stop())}render(){return"wavy"===this.variant?e(this,$,"m",R).call(this):e(this,$,"m",I).call(this)}};var E,F,J,K,Y,Z,tt,et,it,rt,at,st,ot;b=new WeakMap,x=new WeakMap,M=new WeakMap,q=new WeakMap,C=new WeakMap,_=new WeakMap,A=new WeakMap,W=new WeakMap,B=new WeakMap,$=new WeakSet,S=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(e(this,$,"m",U).call(this),e(this,W,"f").observe(t));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(e(this,$,"m",U).call(this),e(this,W,"f").observe(i))},I=function(){if(this.indeterminate){const t=e(this,$,"m",O).call(this,{startAngle:-45,endAngle:90+e(this,M,"f")}),i=e(this,$,"m",O).call(this,{startAngle:-e(this,M,"f"),endAngle:135});return s`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${t.viewBox}" class="circle"><path class="active-track" d="${t.path}" stroke="currentColor" stroke-width="${e(this,M,"f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${i.viewBox}" class="circle"><path class="active-track" d="${i.path}" stroke="currentColor" stroke-width="${e(this,M,"f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${e(this,$,"m",X).call(this)}`}const t=e(this,$,"m",T).call(this,2*e(this,M,"f"),e(this,x,"f"));let i=this.value/this.max*360;i>0&&(i=Math.max(0,t,i));const r=e(this,$,"m",O).call(this,{gap:i<360?e(this,M,"f"):0,endAngle:i}),a=e(this,$,"m",O).call(this,{gap:i>0?e(this,M,"f"):0,startAngle:i,endAngle:360});return s`<div class="progress" aria-hidden="true"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${r.viewBox}">${i>0?n`<path
             class="active-track"
-            d="${s.path}"
+            d="${r.path}"
             stroke="currentColor"
-            stroke-width=${g(this,x,"f")}
+            stroke-width=${e(this,M,"f")}
             fill="none"
             stroke-linecap="round"
-          />`:r} ${360-e>=t?a`<path
+          />`:o} ${360-i>=t?n`<path
                 class="track"
-                d="${o.path}"
+                d="${a.path}"
                 stroke="currentColor"
-                stroke-width=${g(this,x,"f")}
+                stroke-width=${e(this,M,"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"),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")}">
+              />`:o}</svg></div>${e(this,$,"m",X).call(this)}${e(this,$,"m",V).call(this)}`},R=function(){if(this.indeterminate)return s`<div class="progress" aria-hidden="true"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${e(this,$,"m",L).call(this,{endAngle:20}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${e(this,M,"f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${e(this,M,"f")}" fill="none" stroke-linecap="round"/></svg></div>${e(this,$,"m",X).call(this)}`;const t=e(this,$,"m",T).call(this,2*e(this,M,"f"),e(this,x,"f"));let i=this.value/this.max*360;i>0&&(i=Math.max(0,t,i));const r=i<=t+t/2||360==i?0:e(this,q,"f"),a=e(this,$,"m",O).call(this,{gap:i<360?e(this,M,"f"):0,endAngle:i}),h=0==r?a:e(this,$,"m",L).call(this,{endAngle:360,amplitude:r}),c=e(this,$,"m",O).call(this,{gap:i>0?e(this,M,"f"):0,startAngle:i,endAngle:360}),m=r>0?r+e(this,M,"f")/2:e(this,M,"f");return s`<svg class="progress" viewBox="${c.viewBox}" aria-hidden="true">${i>0?n`${r>0?n`<defs>
+          <mask id="${e(this,b,"f")}">
             <path
-              d="${h.path}"
+              d="${a.path}"
               stroke="white"
-              stroke-width="${g(this,x,"f")+c}"
+              stroke-width="${e(this,M,"f")+m}"
               fill="none"
               stroke-linecap="round"
             />
           </mask>
-        </defs>`:r}
-        <g class="active-track" mask="${n(s>0?p(g(this,$,"f")):void 0)}">
+        </defs>`:o}
+        <g class="active-track" mask="${d(r>0?w(e(this,b,"f")):void 0)}">
           <path
-            class="${o({wave:s>0})}"
-            d="${l.path}"
+            class="${l({wave:r>0})}"
+            d="${h.path}"
             stroke="currentColor"
-            stroke-width=${g(this,x,"f")}
+            stroke-width=${e(this,M,"f")}
             stroke-linecap="round"
             stroke-linejoin="round"
             fill="none"
           />
-        </g>`:r} ${360-e>=t?a`<path
+        </g>`:o} ${360-i>=t?n`<path
                 class="track"
-                d="${d.path}"
+                d="${c.path}"
                 stroke="currentColor"
-                stroke-width=${g(this,x,"f")}
+                stroke-width=${e(this,M,"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, ${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),queueMicrotask(()=>this.requestUpdate())}})),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" />
-          <rect class="secondary" height="${e}" fill="white" />
+              />`:o}</svg> ${e(this,$,"m",X).call(this)}${e(this,$,"m",V).call(this)}`},X=function(){return s`<div class="diameter-and-stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},V=function(){return s`<div class="content" aria-hidden="true"><slot></slot></div>`},U=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(i(this,x,t.clientWidth,"f"),i(this,M,t.clientHeight,"f"))},j=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(i(this,q,t.clientWidth,"f"),i(this,C,t.clientHeight,"f"))},P=function(t){if(0===e(this,q,"f")||0===e(this,C,"f"))return;const i=e(this,$,"m",N).call(this,t);e(this,_,"f")?.setAttribute("d",e(this,$,"m",L).call(this,{endAngle:i}).path),e(this,A,"f")?.setAttribute("d",e(this,$,"m",O).call(this,{gap:e(this,$,"m",T).call(this,e(this,M,"f"),e(this,x,"f")),startAngle:i}).path)},N=function(t){const i=2*e(this,$,"m",T).call(this,e(this,M,"f")),r=18+i,a=280-i,s=1.575,o=t%6.3;if(o<s)return r;if(o<3.15){const t=(o-s)/s;return r+t*t*(3-2*t)*(a-r)}if(o<4.725)return a;const n=(o-4.725)/s;return a-n*n*(3-2*n)*(a-r)},T=function(t,i=e(this,q,"f")){return t*(360/(2*Math.PI*e(this,$,"m",G).call(this,i).r))},H=function(t){return(t-90)*(Math.PI/180)},z=function(t,i){const r=e(this,$,"m",H).call(this,i);return{x:t.cx+t.r*Math.cos(r),y:t.cy+t.r*Math.sin(r)}},G=function(t){t+=e(this,M,"f")/2;const i=e(this,x,"f")/2;return{cx:i+t,cy:i+t,r:i,padding:t}},O=function({startAngle:t=0,endAngle:i=360,gap:r=0,padding:a=e(this,q,"f")}){if(0===e(this,x,"f")||0===e(this,M,"f"))return{path:"",viewBox:"0 0 0 0"};const s=e(this,$,"m",G).call(this,a);r>0&&(t+=e(this,$,"m",T).call(this,r,a),i-=e(this,$,"m",T).call(this,r,a)),i-t>=360&&(i=t+359.999);const o=e(this,$,"m",z).call(this,s,i),n=e(this,$,"m",z).call(this,s,t);return{path:`M ${o.x} ${o.y} A ${s.r} ${s.r} 0 ${i-t<=180?"0":"1"} 0 ${n.x} ${n.y}`,viewBox:`0 0 ${e(this,x,"f")+2*s.padding} ${e(this,x,"f")+2*s.padding}`}},L=function({startAngle:t=0,endAngle:i=360,gap:r=0,padding:a=e(this,q,"f"),amplitude:s=e(this,q,"f"),steps:o=200}){if(0===e(this,x,"f")||0===e(this,M,"f"))return{path:"",viewBox:"0 0 0 0"};const n=e(this,$,"m",G).call(this,a);r>0&&(t+=e(this,$,"m",T).call(this,r,a),i-=e(this,$,"m",T).call(this,r,a));const h=e(this,$,"m",H).call(this,t);let l=e(this,$,"m",H).call(this,i);t===i?l=h:l<h&&(l+=2*Math.PI);const d=l-h,c=2*Math.PI*n.r/e(this,C,"f"),m=Math.PI/2*(c-1),f=[];for(let t=0;t<=o;t++){const e=h+(0===o?0:t/o)*d,i=Math.sin(e*c+m),r=n.r-s*i,a=r*Math.cos(e)+n.cx,l=r*Math.sin(e)+n.cy;f.push([a,l])}return{path:1===f.length?`M ${f[0][0]},${f[0][1]}`:`M ${f[0][0]},${f[0][1]} `+f.slice(1).map(([t,e])=>`L ${t},${e}`).join(" "),viewBox:`0 0 ${e(this,x,"f")+2*n.padding} ${e(this,x,"f")+2*n.padding}`}},D.styles=[y.styles,a`: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, ${p.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${p.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, ${p.color.primary}) var(--m3e-progress-indicator-color, ${p.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],D.__nextMaskId=0,t([h({type:Boolean,reflect:!0})],D.prototype,"indeterminate",void 0),D=Q=t([v("m3e-circular-progress-indicator")],D);let nt=ot=class extends y{constructor(){super(...arguments),E.add(this),F.set(this,"m3e-linear-progress-mask-"+ot.__nextMaskId++),J.set(this,0),K.set(this,0),Y.set(this,0),Z.set(this,new u(this,{skipInitial:!0,target:null,callback:()=>{e(this,E,"m",rt).call(this),e(this,E,"m",at).call(this),queueMicrotask(()=>this.requestUpdate())}})),this.mode="determinate",this.bufferValue=0}reconnectedCallback(){super.reconnectedCallback(),e(this,E,"m",tt).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,E,"m",tt).call(this)}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,i="indeterminate"===this.mode||"query"===this.mode?this.clientWidth:t+3*e(this,Y,"f"),r="wavy"===this.variant&&e(this,J,"f")>0&&e(this,K,"f")>0&&e(this,Y,"f")>0?e(this,E,"m",st).call(this,i):void 0;return s`<div class="progress" aria-hidden="true" style="${k({"--_translate-x":`-${t}px`})}">${r?o:s`<div class="track"></div>`} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value<=0?o:s`<div class="primary">${!r||"determinate"!==this.mode&&"buffer"!==this.mode?o:e(this,E,"m",et).call(this,i,r.height,r.viewBox,r.path)}</div>${"determinate"===this.mode||"buffer"===this.mode?s`<div class="gap"></div>`:o}`} ${"buffer"!==this.mode||this.bufferValue>0?s`<div class="secondary"></div>`:o} ${"buffer"===this.mode&&this.bufferValue>0?s`<div class="gap"></div>`:o} ${"buffer"===this.mode?s`<div class="buffer"></div>`:o} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value>0?s`<div class="gap"></div><div class="stop"></div>`:o} ${r&&"determinate"!==this.mode&&"buffer"!==this.mode?e(this,E,"m",et).call(this,i,r.height,r.viewBox,r.path):o}</div>${e(this,E,"m",it).call(this)}`}};F=new WeakMap,J=new WeakMap,K=new WeakMap,Y=new WeakMap,Z=new WeakMap,E=new WeakSet,tt=function(){e(this,E,"m",rt).call(this),e(this,E,"m",at).call(this);const t=this.shadowRoot?.querySelector(".stroke");t&&e(this,Z,"f").observe(t);const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&e(this,Z,"f").observe(i)},et=function(t,i,r,a){const o="indeterminate"===this.mode||"query"===this.mode;return o||this.value/this.max!==1?s`<svg class="wave" width="${t}" height="${i}" viewBox="${r}" preserveAspectRatio="none">${o?n`
+        <mask id="${e(this,F,"f")}" maskUnits="userSpaceOnUse">
+          <rect width="${t}" height="${i}" fill="black" />
+          <rect class="primary" height="${i}" fill="white" />
+          <rect class="secondary" height="${i}" fill="white" />
         </mask>
-        <mask id="${`${g(this,L,"f")}-inverse`}" maskUnits="userSpaceOnUse">
-          <rect width="${t}" height="${e}" fill="white" />
-          <rect class="primary" height="${e}" fill="black" />
-          <rect class="secondary" height="${e}" fill="black" />
+        <mask id="${`${e(this,F,"f")}-inverse`}" maskUnits="userSpaceOnUse">
+          <rect width="${t}" height="${i}" fill="white" />
+          <rect class="primary" height="${i}" fill="black" />
+          <rect class="secondary" height="${i}" fill="black" />
         </mask>
-        <g mask="${p(g(this,L,"f"))}">
-          <path d="${s}" stroke="currentColor" stroke-width=${g(this,Q,"f")} fill="none" stroke-linecap="round" />
+        <g mask="${w(e(this,F,"f"))}">
+          <path d="${a}" stroke="currentColor" stroke-width=${e(this,J,"f")} fill="none" stroke-linecap="round" />
         </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, ${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};
+        <g mask="${w(`${e(this,F,"f")}-inverse`)}">
+          <rect class="track" width="100%" height="${e(this,J,"f")}" fill="currentColor" />
+        </g>`:n`<path d="${a}" stroke="currentColor" stroke-width=${e(this,J,"f")} fill="none" stroke-linecap="round" />`}</svg>`:s`<div class="complete"></div>`},it=function(){return s`<div class="stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},rt=function(){const t=this.shadowRoot?.querySelector(".stroke");t&&i(this,J,t.clientHeight,"f")},at=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(i(this,K,t.clientHeight,"f"),i(this,Y,t.clientWidth,"f"))},st=function(t,i=0){const r=e(this,K,"f")+e(this,J,"f")/2,a=r,s=[],o=e(this,Y,"f")/2;let n=0;for(s.push(`M ${n},${a}`);n<=t;){const t=n+o,h=a+r*Math.sin(2*Math.PI*t/e(this,Y,"f")+i),l=n+o/2,d=a+r*Math.sin(2*Math.PI*(n+o/2)/e(this,Y,"f")+i);s.push(`Q ${l},${d} ${t},${h}`),n+=o}const h=`0 -1 ${t} ${2*r+2}`;return{path:s.join(" "),viewBox:h,height:e(this,J,"f")+2*e(this,K,"f"),padding:1}},nt.styles=[y.styles,a`:host { display: block; position: relative; } .progress { width: 100%; height: 100%; position: relative; align-items: center; border-radius: var(--m3e-linear-progress-indicator-shape, ${p.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, ${p.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, ${p.color.primary}); } :host([variant="wavy"]) .progress { color: var(--m3e-progress-indicator-color, ${p.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, ${p.color.secondaryContainer}); } :host([variant="wavy"][mode="indeterminate"]) .track, :host([variant="wavy"][mode="query"]) .track { color: var(--m3e-progress-indicator-track-color, ${p.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; } }`],nt.__nextMaskId=0,t([h({reflect:!0})],nt.prototype,"mode",void 0),t([h({attribute:"buffer-value",type:Number,reflect:!0})],nt.prototype,"bufferValue",void 0),nt=ot=t([v("m3e-linear-progress-indicator")],nt);export{D as M3eCircularProgressIndicatorElement,nt as M3eLinearProgressIndicatorElement,y as ProgressElementIndicatorBase};
 //# sourceMappingURL=progress-indicator.min.js.map