@sandlada/mdc/build/components/wave/linear-wave.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{a as e,x as i}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";import{n as a}from"../../property-Ck1wIidx.js";import{e as r}from"../../query-DifSdHBD.js";import{BaseWave as h}from"./base-wave.js";let o=class extends h{constructor(){super(...arguments),this.height=8,this.speed=.1,this.phase=0,this._animationFrameId=0}connectedCallback(){super.connectedCallback(),this._animate(),this._resizeObserver=new ResizeObserver(()=>this.requestUpdate()),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect()}updated(t){super.updated(t),this._drawWave()}_drawWave(){if(!this._canvas)return;if(!this._ctx){const t=this._canvas.getContext("2d");if(!t)return;this._ctx=t}const t=window.devicePixelRatio||1,e=this.getBoundingClientRect();this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._ctx.scale(t,t);const{width:i,height:s}=e;if(this._ctx.clearRect(0,0,i,s),this._ctx.lineWidth=this.height,this._ctx.strokeStyle=getComputedStyle(this).getPropertyValue("color")||"purple",this._ctx.lineCap="round",this._ctx.lineJoin="round",0===this.waveAmplitude||0===this.wavelength){this._ctx.beginPath();const t=s/2;return this._ctx.moveTo(0,t),this._ctx.lineTo(i,t),void this._ctx.stroke()}this._ctx.beginPath();const a=this.waveAmplitude,r=this.wavelength,h=r/2,o=.38*h,n=s/2;let c=-h-this.phase/(2*Math.PI)*r%r;const d=c/r*2*Math.PI;let p=n-a*Math.cos(d);this._ctx.moveTo(c,p);let m=!0;for(;c<i;){const t=c+h,e=n+(m?a:-a),i=c+o,s=p,r=t-o,d=e;this._ctx.bezierCurveTo(i,s,r,d,t,e),c=t,p=e,m=!m}this._ctx.stroke()}_animate(){0!==this.speed&&this.isConnected?(this.phase+=this.speed/10,this.requestUpdate(),this._animationFrameId=requestAnimationFrame(()=>this._animate())):this._animationFrameId=0}static{this.styles=e`:host{display:block;width:100%;height:fit-content;min-height:50px;color:var(--mdc-linear-wave-color,var(--mdc-wave-color,var(--md-sys-color-primary,var(--md-sys-palette-primary-40,#6750a4))))}canvas{display:block;height:auto}`}render(){return i`<canvas></canvas>`}};t([a({type:Number})],o.prototype,"height",void 0),t([a({type:Number})],o.prototype,"speed",void 0),t([a({type:Number})],o.prototype,"phase",void 0),t([r("canvas")],o.prototype,"_canvas",void 0),o=t([s("mdc-linear-wave")],o);export{o as LinearWave};