@creaditor/newsletter-starterkit/dist/7035.creaditor.bundle.js

Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters

"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7035],{37035:(t,e,i)=>{i.r(e),i.d(e,{NextButton:()=>a});var o=i(56666),n=i(21293),s=i(70235),r=i(52278);class a extends n.oi{constructor(){super(),this.isLoading=!1,this.isLocked=!1,this.lockTimer=null}connectedCallback(){super.connectedCallback(),this.onNextStep||(this.onNextStep=s.h.get("config","onNextStep"))}disconnectedCallback(){super.disconnectedCallback(),this.clearTimers()}clearTimers(){this.lockTimer&&(clearTimeout(this.lockTimer),this.lockTimer=null)}async handleClick(){if(!this.isLocked&&!this.isLoading){this.isLoading=!0,this.isLocked=!0,this.lockTimer=setTimeout((()=>{this.clearTimers(),this.isLoading=!1,this.isLocked=!1}),1e4);try{"function"==typeof this.onNextStep&&await this.onNextStep({toHTML:r.io,toJSON:r.au})}catch(t){console.error("Error in onNextStep:",t)}}}render(){return this.onNextStep?n.dy`
      <paper-button
        @click=${this.handleClick}
        class="next-button"
        ?disabled=${this.isLocked}
      >
        ${this.isLoading?n.dy`
              <div class="loading-spinner"></div>
            `:n.dy`
              <div class="button-content ${this.isLoading?"loading":""}">
                <lang-text text="next"></lang-text>
              </div>
            `}
      </paper-button>
    `:null}}(0,o.Z)(a,"styles",n.iv`
    :host {
      display: block;
    }
    
    .next-button {
      background: var(--primary);
      color: var(--primary-text);
      fill: var(--primary-text);
      text-transform: none;
      color: #fff;
      height: 52px;
      border-radius: 0;
      width: 90px;
      transform: translateX(-4px);
      position: relative;
      overflow: hidden;
    }
    
    .next-button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    .loading-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 2px solid transparent;
      border-top: 2px solid #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    .button-content {
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    
    .button-content.loading {
      opacity: 0;
    }
    

  `),(0,o.Z)(a,"properties",{onNextStep:{type:Function},isLoading:{type:Boolean},isLocked:{type:Boolean},lockTimer:{type:Number}}),customElements.define("cdtr-next-button",a)}}]);