ldrs/dist/elements/ring.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:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:stretch calc(var(--uib-speed)*.75) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes stretch{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:75,150;stroke-dashoffset:-25}to{stroke-dashoffset:-99}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:5,speed:2,"bg-opacity":0});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="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <circle \n          class="track"\n          cx="${i}" \n          cy="${i}" \n          r="${r}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n        <circle \n          class="car"\n          cx="${i}" \n          cy="${i}" \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-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),o=parseInt(this.stroke),n=String(r/2),a=String(Math.max(0,r/2-o/2));s.setAttribute("height",this.stroke),s.setAttribute("width",this.stroke),s.setAttribute("viewBox",`0 0 ${r} ${r}`),i.forEach((t=>{t.setAttribute("cx",n),t.setAttribute("cy",n),t.setAttribute("r",a),t.setAttribute("stroke-width",this.stroke)})),t.innerHTML=`\n      :host{\n        --uib-size: ${r}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-ring")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
//# sourceMappingURL=ring.js.map