ldrs/dist/elements/trefoil.js

Tiny HTML and SVG loaders as web components

import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":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)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:var(--uib-dash),var(--uib-gap);stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{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 i extends e{_attributes=["size","color","speed","stroke","stroke-length","bg-opacity"];size;color;speed;stroke;"stroke-length";"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","stroke-length","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M37.2,23.4c0,9.1-4.9,17-12.3,21.2c-3.6,2.1-7.8,3.3-12.3,3.3c-4.5,0-8.6-1.2-12.2-3.3c0-9.1,4.9-16.9,12.3-21.2c3.6-2.1,7.8-3.3,12.2-3.3S33.6,21.3,37.2,23.4c7.3,4.2,12.2,12.1,12.3,21.2c-3.6,2.1-7.8,3.3-12.2,3.3c-4.5,0-8.6-1.2-12.3-3.3c-7.3-4.2-12.2-12.1-12.2-21.2c0-9.1,4.9-17,12.2-21.2C32.3,6.4,37.2,14.3,37.2,23.4z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:4,"stroke-length":.15,speed:1.4,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\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        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.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      ${s}\n    `)}}var r={register:(t="l-trefoil")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
//# sourceMappingURL=trefoil.js.map