nitropage/dist/admin/admin.js

A free and open source, extensible visual page builder based on SolidStart.

var o=class extends HTMLElement{_propsToUpgrade={};shadow;template;defaultProps;isAttached=!1;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.template=document.createElement("template")}storePropsToUpgrade(e){e.forEach(t=>{this.hasOwnProperty(t)&&this[t]!==void 0&&(this._propsToUpgrade[t]=this[t],delete this[t])})}upgradeStoredProps(){Object.entries(this._propsToUpgrade).forEach(([e,t])=>{this.setAttribute(e,t)})}reflect(e){e.forEach(t=>{Object.defineProperty(this,t,{set(i){"string,number".includes(typeof i)?this.setAttribute(t,i.toString()):this.removeAttribute(t)},get(){return this.getAttribute(t)}})})}applyDefaultProps(e){this.defaultProps=e,Object.entries(e).forEach(([t,i])=>{this[t]=this[t]||i.toString()})}};function p(s,e){return e.replace(/([-A-y])/g,",$1").split(",").filter(t=>t!=="").map(t=>{let i=t.match(/(\d+\.?\d*)/g)?.[0],r=parseFloat(i)*s;return t.replace(i,r.toString())}).join(" ")}var v=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.42);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.42);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;transition:stroke .5s ease;will-change:stroke-dasharray,stroke-dashoffset}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:100}}",l=class extends o{_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="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:55,color:"black",speed:1.3,stroke:4,"stroke-length":.15,"bg-opacity":.1});let e=parseInt(this.size),t=p(e/50,this.d);this.template.innerHTML=`
      <svg
        class="container" 
        x="0px" 
        y="0px"
        viewBox="0 0 ${this.size} ${e*(2.1/5)}"
        height="${e*(2.1/5)}"
        width="${this.size}"
        preserveAspectRatio='xMidYMid meet'
      >
        <path
          class="track" 
          fill="none" 
          stroke-width="${this.stroke}" 
          pathlength="100"
          d="${t}"
        />

        <path
          class="car" 
          fill="none" 
          stroke-width="${this.stroke}" 
          pathlength="100"
          d="${t}"
        />
      </svg>
      <style>
        :host{
          --uib-size: ${this.size}px;
          --uib-color: ${this.color};
          --uib-speed: ${this.speed}s;
          --uib-dash: ${100*parseFloat(this["stroke-length"])};
          --uib-gap: ${100-100*parseFloat(this["stroke-length"])};
          --uib-bg-opacity: ${this["bg-opacity"]};
        }
        ${v}
      </style>
    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){let e=this.shadow.querySelector("style"),t=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("path"),r=parseInt(this.size);e&&(t.setAttribute("height",String(r*(2.1/5))),t.setAttribute("width",this.size),t.setAttribute("viewBox",`0 0 ${this.size} ${r*(2.1/5)}`),i.forEach(a=>{a.setAttribute("stroke-width",this.stroke),a.setAttribute("d",p(r/50,this.d))}),e.innerHTML=`
      :host{
        --uib-size: ${this.size}px;
        --uib-color: ${this.color};
        --uib-speed: ${this.speed}s;
        --uib-dash: ${100*parseFloat(this["stroke-length"])};
        --uib-gap: ${100-100*parseFloat(this["stroke-length"])};
        --uib-bg-opacity: ${this["bg-opacity"]};
      }
      ${v}
    `)}},u={register:(s="l-infinity")=>{customElements.get(s)||customElements.define(s,class extends l{})},element:l};var x=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.3);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.51);justify-content:center;top:28%;width:51%}.container,.dot{align-items:center;display:flex;position:relative}.dot{flex-shrink:0;height:100%;transform-origin:center top;width:25%}.dot:after{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:25%;transition:background-color .3s ease;width:100%}.dot:first-child{animation:swing var(--uib-speed) linear infinite}.dot:last-child{animation:swing2 var(--uib-speed) linear infinite}@keyframes swing{0%{animation-timing-function:ease-out;transform:rotate(0deg)}25%{animation-timing-function:ease-in;transform:rotate(70deg)}50%{animation-timing-function:linear;transform:rotate(0deg)}}@keyframes swing2{0%{animation-timing-function:linear;transform:rotate(0deg)}50%{animation-timing-function:ease-out;transform:rotate(0deg)}75%{animation-timing-function:ease-in;transform:rotate(-70deg)}}',d=class extends o{_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:78,color:"black",speed:1.4}),this.template.innerHTML=`
      <div class="container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <style>
        :host{
          --uib-size: ${this.size}px;
          --uib-color: ${this.color};
          --uib-speed: ${this.speed}s;
        }
        ${x}
      </style>
    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){let e=this.shadow.querySelector("style");e&&(e.innerHTML=`
      :host{
        --uib-size: ${this.size}px;
        --uib-color: ${this.color};
        --uib-speed: ${this.speed}s;
      }
      ${x}
    `)}},f={register:(s="l-newtons-cradle")=>{customElements.get(s)||customElements.define(s,class extends d{})},element:d};var y=":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}}",c=class extends o{_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});let e=parseInt(this.size),t=parseInt(this.stroke),i=e/2,r=Math.max(0,e/2-t/2);this.template.innerHTML=`
      <svg
        class="container"
        viewBox="0 0 ${this.size} ${this.size}"
        height="${this.size}"
        width="${this.size}"
      >
        <circle 
          class="track"
          cx="${i}" 
          cy="${i}" 
          r="${r}" 
          pathlength="100" 
          stroke-width="${this.stroke}px" 
          fill="none" 
        />
        <circle 
          class="car"
          cx="${i}" 
          cy="${i}" 
          r="${r}" 
          pathlength="100" 
          stroke-width="${this.stroke}px" 
          fill="none" 
        />
      </svg>
      <style>
        :host{
          --uib-size: ${this.size}px;
          --uib-color: ${this.color};
          --uib-speed: ${this.speed}s;
          --uib-bg-opacity: ${this["bg-opacity"]};
        }
        ${y}
      </style>
    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){let e=this.shadow.querySelector("style"),t=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("circle");if(!e)return;let r=parseInt(this.size),a=parseInt(this.stroke),g=String(r/2),$=String(Math.max(0,r/2-a/2));t.setAttribute("height",this.stroke),t.setAttribute("width",this.stroke),t.setAttribute("viewBox",`0 0 ${r} ${r}`),i.forEach(n=>{n.setAttribute("cx",g),n.setAttribute("cy",g),n.setAttribute("r",$),n.setAttribute("stroke-width",this.stroke)}),e.innerHTML=`
      :host{
        --uib-size: ${r}px;
        --uib-color: ${this.color};
        --uib-speed: ${this.speed}s;
        --uib-bg-opacity: ${this["bg-opacity"]};
      }
      ${y}
    `}},b={register:(s="l-ring")=>{customElements.get(s)||customElements.define(s,class extends c{})},element:c};var k=':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{--dot-size:calc(var(--uib-size)*0.17);align-items:center;animation:smoothRotate calc(var(--uib-speed)*1.8) linear infinite;display:flex;height:var(--uib-size);justify-content:flex-start;position:relative;width:var(--uib-size)}.dot{align-items:flex-start;animation:rotate var(--uib-speed) ease-in-out infinite;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:var(--dot-size);transition:background-color .3s ease;width:var(--dot-size)}.dot:nth-child(2),.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.835*.5)}.dot:nth-child(3),.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.668*.5)}.dot:nth-child(4),.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.501*.5)}.dot:nth-child(5),.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.334*.5)}.dot:nth-child(6),.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.167*.5)}@keyframes rotate{0%{transform:rotate(0deg)}65%,to{transform:rotate(1turn)}}@keyframes smoothRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}',h=class extends o{_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:40,color:"black",speed:1.5}),this.template.innerHTML=`
      <div class="container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <style>
        :host{
          --uib-size: ${this.size}px;
          --uib-color: ${this.color};
          --uib-speed: ${this.speed}s;
        }
        ${k}
      </style>
    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){let e=this.shadow.querySelector("style");e&&(e.innerHTML=`
      :host{
        --uib-size: ${this.size}px;
        --uib-color: ${this.color};
        --uib-speed: ${this.speed}s;
      }
      ${k}
    `)}},m={register:(s="l-tail-chase")=>{customElements.get(s)||customElements.define(s,class extends h{})},element:h};b.register();f.register();m.register();u.register();