ldrs/dist/elements/waveform.js

Tiny HTML and SVG loaders as web components

import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.9);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:calc(var(--uib-size)*.9);justify-content:space-between;width:var(--uib-size)}.bar{background-color:var(--uib-color);height:100%;transition:background-color .3s ease;width:var(--uib-stroke)}.bar:first-child{animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.45) infinite}.bar:nth-child(2){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.3) infinite}.bar:nth-child(3){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.15) infinite}.bar:nth-child(4){animation:grow var(--uib-speed) ease-in-out infinite}@keyframes grow{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}";class s extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="bar"></div>\n        <div class="bar"></div>\n        <div class="bar"></div>\n        <div class="bar"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var t={register:(e="l-waveform")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{t as default};
//# sourceMappingURL=waveform.js.map