ldrs/dist/elements/ring2.js

Tiny HTML and SVG loaders as web components

import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate var(--uib-speed) linear infinite;height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:var(--uib-dash),var(--uib-gap);stroke-dashoffset:0;stroke-linecap:round}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes rotate{to{transform:rotate(1turn)}}";class s extends t{_attributes=["size","color","speed","stroke","stroke-length","bg-opacity"];size;color;speed;stroke;"stroke-length";"bg-opacity";static get observedAttributes(){return["size","color","stroke","stroke-length","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:5,"stroke-length":.25,speed:.8,"bg-opacity":.1});const t=parseInt(this.size),s=parseInt(this.stroke),i=t/2,r=Math.max(0,t/2-s/2);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="${i} ${i} ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <circle \n          class="track"\n          cx="${this.size}" \n          cy="${this.size}" \n          r="${r}" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n        <circle \n          class="car"\n          cx="${this.size}" \n          cy="${this.size}" \n          r="${r}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-dash: ${100*parseFloat(this["stroke-length"])};\n          --uib-gap: ${100-100*parseFloat(this["stroke-length"])};\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("circle");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke),o=r/2,a=String(Math.max(0,r/2-n/2));s.setAttribute("height",this.size),s.setAttribute("width",this.size),s.setAttribute("viewBox",`${o} ${o} ${this.size} ${this.size}`),i.forEach((t=>{t.setAttribute("cx",this.size),t.setAttribute("cy",this.size),t.setAttribute("r",a),t.setAttribute("stroke-width",this.stroke)})),t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-dash: ${100*parseFloat(this["stroke-length"])};\n        --uib-gap: ${100-100*parseFloat(this["stroke-length"])};\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-ring-2")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
//# sourceMappingURL=ring2.js.map