ldrs/dist/elements/square.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{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;animation:travel var(--uib-speed) linear 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 travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";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:35,color:"black",stroke:5,"stroke-length":.25,speed:1.2,"bg-opacity":.1});const t=parseInt(this.size),s=parseInt(this.stroke),i=s/2,r=Math.max(t-s/2,0);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        <rect \n          class="track"\n          x="${i}" \n          y="${i}" \n          fill="none" \n          stroke-width="${this.stroke}px" \n          width="${r}" \n          height="${r}"\n        />\n        <rect \n          class="car"\n          x="${i}" \n          y="${i}" \n          fill="none" \n          stroke-width="${this.stroke}px" \n          width="${r}" \n          height="${r}"\n          pathlength="100"\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("rect");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke),o=String(n/2),a=String(Math.max(r-n/2,0));s.setAttribute("height",this.size),s.setAttribute("width",this.size),s.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),i.forEach((t=>{t.setAttribute("stroke-width",this.stroke),t.setAttribute("width",a),t.setAttribute("height",a),t.setAttribute("x",o),t.setAttribute("y",o)})),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-square")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
//# sourceMappingURL=square.js.map