ldrs/dist/elements/hatch.js

Tiny HTML and SVG loaders as web components

import t from"../lib/LdrsBaseElement.js";var e=':host{--uib-mult:calc(var(--uib-size)/var(--uib-stroke));--uib-stroke-px:calc(var(--uib-stroke)*1px);--uib-size-px:calc(var(--uib-size)*1px);align-items:flex-start;display:inline-flex;flex-shrink:0;height:var(--uib-size-px);justify-content:flex-start;position:relative;width:var(--uib-size-px)}:host([hidden]){display:none}.container{height:100%;position:relative;width:100%}.line{animation:center-line var(--uib-speed) ease infinite;left:calc(50% - var(--uib-stroke-px)/2);top:calc(50% - var(--uib-stroke-px)/2)}.container:after,.container:before,.line{background-color:var(--uib-color);height:var(--uib-stroke-px);position:absolute;transition:background-color .3s ease;width:var(--uib-stroke-px)}.container:after,.container:before{animation:explore var(--uib-speed) ease infinite;content:""}.container:after{animation-delay:calc(var(--uib-speed)*-.5)}@keyframes center-line{0%,25%,50%,75%,to{transform:scaleX(1) scaleY(1)}12.5%,62.5%{transform:scaleX(var(--uib-mult)) scaleY(1)}37.5%,87.5%{transform:scaleX(1) scaleY(var(--uib-mult))}}@keyframes explore{0%,to{left:0;top:0;transform:scaleX(1) scaleY(1) translate(0);transform-origin:top left}12.5%{left:0;top:0;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:top left}12.50001%{left:auto;right:0;top:0;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:top right}25%{left:auto;right:0;top:0;transform:scaleX(1) scaleY(1) translate(0);transform-origin:top right}37.5%{left:auto;right:0;top:0;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:top right}37.5001%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:bottom right}50%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(1) scaleY(1) translate(0);transform-origin:bottom right}62.5%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:bottom right}62.5001%{bottom:0;left:0;top:auto;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:bottom left}75%{bottom:0;left:0;top:auto;transform:scaleX(1) scaleY(1) translate(0);transform-origin:bottom left}87.5%{bottom:0;left:0;top:auto;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:bottom left}87.5001%{left:0;top:0;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:top left}}';class r extends t{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:28,color:"black",speed:3.5,stroke:4}),this.template.innerHTML=`\n      <div class="container"><div class="line"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size};\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size};\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke};\n      }\n      ${e}\n    `)}}var s={register:(t="l-hatch")=>{customElements.get(t)||customElements.define(t,class extends r{})},element:r};export{s as default};
//# sourceMappingURL=hatch.js.map