@sandlada/mdc/build/components/progress-indicator/linear-progress-indicator.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{x as i}from"../../lit-element-Ho-VPzO1.js";import{t as e}from"../../custom-element-Dz3n6kSt.js";import{e as s}from"../../query-DifSdHBD.js";import{BaseProgressIndicator as a}from"./base-progress-indicator.js";import{linearProgressIndicatorStyle as r}from"./progress-indicator.style.js";import"../../property-Ck1wIidx.js";import"../../class-map-DlMb2KKL.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../component-definitions/progress-indicator.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";let n=class extends a{constructor(){super(...arguments),this.animations=[]}static{this.styles=r}renderIndicator(){return i`<span aria-hidden="true" class="stop-indicators"></span> ${this.wavy?this.renderWavy():this.renderLine()}`}renderWavy(){return i`<div class="tracks"><span aria-hidden="true" class="inactive-track left"></span> ${this.renderWaveLine("active-track")} <span aria-hidden="true" class="inactive-track right"></span></div>`}renderWaveLine(t=""){const{pathData:e,svgHeight:s,svgViewBox:a,svgWidth:r,strokeWidth:n}=this.updateWave();return i`<svg class="wave ${t}" height="${s}px" width="${r}px" view-box="${a}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g class="bar-inner"><path d="${e}" stroke-width="${n}px"></path></g></svg>`}renderLine(){return i`<div class="tracks"><span aria-hidden="true" class="active-track"></span> <span aria-hidden="true" class="inactive-track"></span></div><div class="indeteminate-bar"><div class="bar primary-bar"><div class="bar-inner"></div></div><div class="bar secondary-bar"><div class="bar-inner"></div></div></div>`}generateSmoothWavePath(t,i,e,s){const a=i/2;let r=`M 0 ${a}`;for(let i=0;i<s;i++){const s=i*t;r+=` Q ${s+t/4},${a-e} ${s+t/2},${a}`,r+=` Q ${s+3*t/4},${a+e} ${s+t},${a}`}return r}updateWave(){const t=this.clientWidth,i=Math.ceil(t/32)+2,e=this.generateSmoothWavePath(32,20,8,i);return document.createElementNS("http://www.w3.org/2000/svg","path"),{pathData:e,svgWidth:t,svgHeight:20,svgViewBox:`0 0 ${t} 20`,strokeWidth:4}}animateProgress(){this.value,this.animations.forEach(t=>t.cancel());const t="999px",i=[{clipPath:`inset(0 100% 0 0 round ${t})`,offset:0},{clipPath:`inset(0 100% 0 0 round ${t})`,offset:.15},{clipPath:`inset(0 42% 0 0 round ${t})`,offset:.3},{clipPath:`inset(0 0% 0 0 round ${t})`,offset:.4},{clipPath:`inset(0 0% 0 0 round ${t})`,offset:.5799},{clipPath:`inset(0 100% 0 0 round ${t})`,offset:.58},{clipPath:`inset(0 100% 0 0 round ${t})`,offset:.73},{clipPath:`inset(0 32% 0 0 round ${t})`,offset:.9},{clipPath:`inset(0 0% 0 0 round ${t})`,offset:.999},{clipPath:`inset(0 100% 0 0 round ${t})`,offset:1}],e=[{clipPath:`inset(0 0 0 2% round ${t})`,offset:0},{clipPath:`inset(0 0 0 42% round ${t})`,offset:.15},{clipPath:`inset(0 0 0 100% round ${t})`,offset:.3},{clipPath:`inset(0 0 0 100% round ${t})`,offset:.4},{clipPath:`inset(0 0 0 100% round ${t})`,offset:.5799},{clipPath:`inset(0 0 0 2% round ${t})`,offset:.58},{clipPath:`inset(0 0 0 32% round ${t})`,offset:.73},{clipPath:`inset(0 0 0 100% round ${t})`,offset:.9},{clipPath:`inset(0 0 0 100% round ${t})`,offset:.999},{clipPath:`inset(0 0 0 0% round ${t})`,offset:1}],s={duration:1500,easing:"linear",iterations:1/0};this.animations=[this.activeTrack.animate([{clipPath:"inset(0 100% 0 0)",offset:0},{clipPath:"inset(0 60% 0 0)",offset:.15},{clipPath:"inset(0 0 0 60%)",offset:.3},{clipPath:"inset(0 0 0 100%)",offset:.4},{clipPath:"inset(0 0 0 100%)",offset:.5799},{clipPath:"inset(0 100% 0 0)",offset:.58},{clipPath:"inset(0 70% 0 0)",offset:.73},{clipPath:"inset(0 0 0 70%)",offset:.9},{clipPath:"inset(0 0 0 100%)",offset:.999},{clipPath:"inset(0 100% 0 0)",offset:1}],s),this.inactiveLeftTrack.animate(i,s),this.inactiveRightTrack.animate(e,s)]}getActiveWidthFrom(){}firstUpdated(t){super.firstUpdated(t),this.animateProgress()}};t([s(".inactive-track.left")],n.prototype,"inactiveLeftTrack",void 0),t([s(".inactive-track.right")],n.prototype,"inactiveRightTrack",void 0),t([s(".active-track")],n.prototype,"activeTrack",void 0),n=t([e("mdc-linear-progress-indicator")],n);export{n as LinearProgressIndicator};