ldrs/dist/elements/jellyTriangle.js

Tiny HTML and SVG loaders as web components

import e from"../lib/LdrsBaseElement.js";var i=":host{--uib-dot-size:calc(var(--uib-size)/3);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{align-items:center;display:flex;height:var(--uib-size);justify-content:space-between;position:relative;width:var(--uib-size)}.svg{filter:url(#uib-jelly-triangle-ooze);overflow:visible}.dot,.traveler{fill:var(--uib-color);r:calc(var(--uib-dot-size)/2);display:block;transform-box:fill-box;transform-origin:center;transition:fill .3s ease;will-change:transform}.dot:first-child{cy:calc(var(--uib-dot-size)/2);cx:50%;animation:grow var(--uib-speed) ease infinite}.dot:nth-child(2){cx:calc(var(--uib-size) - var(--uib-dot-size)/2);animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.666) infinite}.dot:nth-child(2),.dot:nth-child(3){cy:calc(var(--uib-size) - var(--uib-dot-size)/2)}.dot:nth-child(3){cx:calc(var(--uib-dot-size)/2);animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.333) infinite}.traveler{cy:calc(var(--uib-dot-size)/2);cx:50%;animation:triangulate var(--uib-speed) ease infinite}@keyframes triangulate{0%,to{transform:none}33.333%{transform:translate(100%,200%)}66.666%{transform:translate(-100%,200%)}}@keyframes grow{0%,85%,to{transform:scale(1.5)}50%,60%{transform:scale(0)}}";class t extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:30,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div\n        class="container"\n      >\n        <svg \n          class="svg"         \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          <circle class="dot"/>\n          <circle class="dot"/>\n          <circle class="dot"/>\n          <circle class="traveler"/>\n          <defs>\n            <filter id="uib-jelly-triangle-ooze">\n              <feGaussianBlur\n                in="SourceGraphic"\n                stdDeviation=${parseInt(this.size)/9}\n                result="blur"\n              />\n              <feColorMatrix\n                in="blur"\n                mode="matrix"\n                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n                result="ooze"\n              />\n              <feBlend in="SourceGraphic" in2="ooze" />\n            </filter>\n          </defs>\n        </svg>  \n      </div>\n\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\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      }\n      ${i}\n    `)}}var s={register:(e="l-jelly-triangle")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
//# sourceMappingURL=jellyTriangle.js.map