class FlashSaleEmailCollector extends HTMLElement{constructor(){super(),this.render(),this.init(),this.checkTimerStatus()}render(){const heading=this.getAttribute("heading")||"Previous flash sale has ended",subtitle=this.getAttribute("subtitle")||"Don't miss the next one. Leave your email address and we will send you a reminder when the next sale is on.",buttonText=this.getAttribute("button-text")||"Notify Me",successMessage=this.getAttribute("success-message")||"Thank you! We'll notify you when the next flash sale begins.",backgroundColor=this.getAttribute("background-color")||"#f5f5f5",textColor=this.getAttribute("text-color")||"#333",buttonBgColor=this.getAttribute("button-bg-color")||"#000",buttonTextColor=this.getAttribute("button-text-color")||"#fff";this.innerHTML=this.getInlineTemplate(heading,subtitle,buttonText,successMessage,backgroundColor,textColor,buttonBgColor,buttonTextColor)}getInlineTemplate(heading,subtitle,buttonText,successMessage,backgroundColor,textColor,buttonBgColor,buttonTextColor){const uniqueId=this.generateId(),emailId=`flash-sale-email-${uniqueId}`,errorId=`flash-sale-error-${uniqueId}`,successId=`flash-sale-success-${uniqueId}`,submitDescId=`flash-sale-submit-desc-${uniqueId}`,formId=`flash-sale-form-${uniqueId}`;return`
      <div class="flash-sale-inline" style="background-color: ${backgroundColor}; color: ${textColor};" role="region" aria-labelledby="flash-sale-heading-${uniqueId}">
        <div class="flash-sale-content">
          <div class="flash-sale-header">
            <h2 id="flash-sale-heading-${uniqueId}" class="flash-sale-title">${heading}</h2>
            <p class="flash-sale-subtitle">${subtitle}</p>
          </div>
          
          <div class="flash-sale-form-wrapper">
            <form id="${formId}" class="flash-sale-form" novalidate role="form" aria-labelledby="flash-sale-heading-${uniqueId}">
              <div class="flash-sale-form-group">
                <input 
                  type="email" 
                  id="${emailId}" 
                  name="email" 
                  class="flash-sale-input" 
                  placeholder="Enter your email address" 
                  required 
                  autocomplete="email" 
                  aria-required="true" 
                  aria-describedby="${errorId} ${submitDescId}"
                  aria-invalid="false"
                  spellcheck="false"
                  aria-label="Email address for flash sale notifications"
                />
                <button 
                  type="submit" 
                  class="flash-sale-submit" 
                  data-submit 
                  style="background-color: ${buttonBgColor}; color: ${buttonTextColor};"
                  aria-describedby="${submitDescId}"
                  aria-label="${buttonText} - Submit your email to be notified about future flash sales"
                >
                  <span class="button-text">${buttonText}</span>
                  <span class="loading-text" aria-hidden="true">Submitting...</span>
                </button>
                <span id="${submitDescId}" class="visually-hidden">Submit your email to be notified about future flash sales</span>
              </div>
              <div id="${errorId}" class="flash-sale-error hidden" data-error role="alert" aria-live="assertive" aria-atomic="true"></div>
            </form>
            
            <div id="${successId}" class="flash-sale-success hidden" data-success role="status" aria-live="polite" aria-atomic="true">
              <p>${successMessage}</p>
            </div>
          </div>
        </div>
      </div>
      ${this.getStyles()}
    `}generateId(){return Math.random().toString(36).substr(2,9)}getStyles(){return`
      <style>
        .flash-sale-inline {
          padding: 40px 20px;
          text-align: center;
          border-radius: 16px;
          margin: 30px 0;
          display: none;
          transition: opacity 0.3s ease;
        }

        .flash-sale-inline.show {
          display: block;
          opacity: 1;
        }

        .visually-hidden {
          position: absolute !important;
          width: 1px !important;
          height: 1px !important;
          padding: 0 !important;
          margin: -1px !important;
          overflow: hidden !important;
          clip: rect(0, 0, 0, 0) !important;
          white-space: nowrap !important;
          border: 0 !important;
        }

        .flash-sale-content {
          max-width: 600px;
          margin: 0 auto;
        }

        .flash-sale-header {
          margin-bottom: 32px;
        }

        flash-sale-email-collector .flash-sale-title {
          text-align: center;
          letter-spacing: 0px;
          color: #000000;
          font: normal 600 22px / 24px Manrope;
          text-transform: inherit;
          margin: 0 0 16px 0;
        }

        flash-sale-email-collector .flash-sale-subtitle {
          text-align: center;
          font: normal normal 600 16px / 24px Manrope;
          letter-spacing: 0px;
          color: #000000;
          margin: 0;
        }

        .flash-sale-label {
          display: block;
          text-align: left;
          margin-bottom: 8px;
          font-weight: 500;
          color: inherit;
        }

        .required-indicator {
          color: #d32f2f;
          font-weight: bold;
        }

        .flash-sale-form-group {
          display: flex;
          gap: 15px;
          max-width: 600px;
          flex-direction: column;
        }

        .flash-sale-input-wrapper {
          flex: 1;
        }

        flash-sale-email-collector .flash-sale-input {
          width: 100%;
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
          background: #FFFFFF 0% 0% no-repeat padding-box;
          border: 1px solid #C6C6C6 !important;
          border-radius: 5px !important;
          min-height: 46px;
          padding: 12px 16px;
          font-size: 16px;
          box-sizing: border-box;
        }

        flash-sale-email-collector .flash-sale-input:focus {
          outline: none;
          border-color: #000000 !important;
          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
        }

        flash-sale-email-collector .flash-sale-input[aria-invalid="true"] {
          border-color: #d32f2f !important;
          box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
        }

        .flash-sale-input:focus {
          outline: none;
          border-color: rgba(255, 255, 255, 0.8);
          background: rgba(255, 255, 255, 1);
        }

        .flash-sale-input::placeholder {
          color: rgba(0, 0, 0, 0.6);
        }

        .flash-sale-submit {
          border: none;
          transition: opacity 0.2s ease, transform 0.1s ease;
          white-space: nowrap;
          background: #000000 0% 0% no-repeat padding-box;
          border-radius: 4px;
          min-width: 180px;
          min-height: 46px;
          font: normal normal 600 14px / 24px Manrope;
          letter-spacing: 0px;
          cursor: pointer;
          padding: 12px 24px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .flash-sale-submit:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
          transform: translateY(-1px);
        }

        .flash-sale-submit:hover:not(:disabled) {
          opacity: 0.9;
        }

        .flash-sale-submit:active {
          transform: translateY(0);
        }

        .flash-sale-submit:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

        .flash-sale-submit .loading-text {
          display: none;
        }

        .flash-sale-submit.loading .button-text {
          display: none;
        }

        .flash-sale-submit.loading .loading-text {
          display: block;
        }

        .flash-sale-error {
          color: #d32f2f;
          font-size: 14px;
          margin-top: 10px;
          padding: 10px 15px;
          background: rgba(211, 47, 47, 0.1);
          border-radius: 4px;
          border-left: 4px solid #d32f2f;
          text-align: left;
        }

        .flash-sale-success {
          text-align: center;
          color: #2e7d32;
          font-size: 16px;
          padding: 20px;
          background: rgba(46, 125, 50, 0.1);
          border-radius: 8px;
          border: 2px solid #4caf50;
        }

        .flash-sale-success p {
          margin: 0;
          font-weight: 600;
        }

        .hidden {
          display: none !important;
        }

        @media (max-width: 768px) {
          .flash-sale-title {
            font-size: 24px;
          }

          .flash-sale-subtitle {
            font-size: 16px;
          }

          .flash-sale-form-group {
            gap: 12px;
          }

          .flash-sale-submit {
            width: 100%;
          }
        }

        @media (min-width: 769px) {
          .flash-sale-form-group {
            flex-direction: row;
            align-items: flex-end;
          }
          
          .flash-sale-label {
            position: absolute;
            left: -9999px;
          }
        }

       @media(max-width: 480px) {
          flash-sale-email-collector .flash-sale-title {
            font: normal 600 20px / 24px Manrope;
          }
           flash-sale-email-collector .flash-sale-subtitle {
              font: normal normal 600 14px / 19px Manrope;
          }
          flash-sale-email-collector [type="email"]{
            font: normal normal normal 14px / 24px Manrope;
            letter-spacing: 0px;
            padding: 0px 0px 0px 18px;
          }
       }

        /* High contrast mode support */ 
        @media (prefers-contrast: high) {
          .flash-sale-input {
            border-width: 2px !important;
          }
          
          .flash-sale-submit {
            border: 2px solid currentColor;
          }
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
          .flash-sale-inline,
          .flash-sale-input,
          .flash-sale-submit {
            transition: none;
          }
          
          .flash-sale-submit:hover,
          .flash-sale-submit:active {
            transform: none;
          }
        }

      </style>
    `}init(){this.form=this.querySelector("form"),this.emailInput=this.querySelector('input[type="email"]'),this.submitBtn=this.querySelector("[data-submit]"),this.errorMsg=this.querySelector("[data-error]"),this.successMsg=this.querySelector("[data-success]"),this.buttonText=this.submitBtn?.querySelector(".button-text"),this.loadingText=this.submitBtn?.querySelector(".loading-text"),!(!this.form||!this.emailInput)&&(document.body.addEventListener("focusin",function(event){event.target.matches("input.flash-sale-input")&&_ltk.Signup.New("FlashSaleSignup","input.flash-sale-input",_ltk.Signup.TYPE.CLICK,".flash-sale-form-group button","email")}),this.form.addEventListener("submit",this.handleSubmit.bind(this)),this.emailInput.addEventListener("input",this.handleInput.bind(this)),this.emailInput.addEventListener("blur",this.handleBlur.bind(this)),this.emailInput.addEventListener("keydown",this.handleKeydown.bind(this)))}handleInput(){this.emailInput.getAttribute("aria-invalid")==="true"&&(this.hideError(),this.emailInput.setAttribute("aria-invalid","false"))}handleBlur(){const email=this.emailInput.value.trim();email&&!this.validateEmail(email)&&(this.showError("Please enter a valid email address"),this.emailInput.setAttribute("aria-invalid","true"))}handleKeydown(event){event.key==="Enter"&&!this.submitBtn.disabled&&(event.preventDefault(),this.submitBtn.click())}async handleSubmit(event){event.preventDefault();const email=this.emailInput.value.trim(),isValid=this.validateEmail(email);if(this.hideError(),!isValid){this.showError("Please enter a valid email address"),this.emailInput.setAttribute("aria-invalid","true"),this.emailInput.focus();return}this.emailInput.setAttribute("aria-invalid","false"),this.showLoading();try{await this.submitToListrak(email)?(this.showSuccess(),this.trackEvent("flash_sale_email_collected")):(this.showError("Something went wrong. Please try again."),this.emailInput.focus())}catch(error){console.error("Flash sale email collection error:",error),this.showError("Something went wrong. Please try again."),this.emailInput.focus()}this.hideLoading()}validateEmail(email){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)}async submitToListrak(email){if(!window._ltk)return console.warn("Listrak not loaded"),!1;try{return window._ltk&&window._ltk.Alerts?(window._ltk.Alerts.AddAlert(email,"FLASH_SALE","FLASH_SALE_NOTIFICATION"),window._ltk.Alerts.Submit(),!0):window._ltk&&window._ltk.Subscriber&&(window._ltk.Subscriber.Email=email,window._ltk.Subscriber.List="FLASH_SALE",window._ltk.Subscriber.Settings={SourceUID:"flash_sale_email_collector"},window._ltk.Subscriber.Submit)?(window._ltk.Subscriber.Submit(),!0):window._ltk&&window._ltk.Signup&&(window._ltk.Signup.Email=email,window._ltk.Signup.List="FLASH_SALE",window._ltk.Signup.SourceUID="flash_sale_email_collector",window._ltk.Signup.Submit)?(window._ltk.Signup.Submit(),!0):(console.warn("Listrak API not available"),!1)}catch(error){return console.error("Listrak submission error:",error),!1}}showError(message){this.errorMsg&&(this.errorMsg.textContent=message,this.errorMsg.classList.remove("hidden"),this.errorMsg.setAttribute("role","alert"),this.errorMsg.setAttribute("aria-live","assertive"))}hideError(){this.errorMsg&&(this.errorMsg.classList.add("hidden"),this.errorMsg.removeAttribute("role"),this.errorMsg.removeAttribute("aria-live"))}showSuccess(){this.successMsg&&(this.successMsg.classList.remove("hidden"),this.successMsg.setAttribute("role","status"),this.successMsg.setAttribute("aria-live","polite")),this.form&&(this.form.classList.add("hidden"),this.form.setAttribute("aria-hidden","true"))}showLoading(){this.submitBtn&&(this.submitBtn.disabled=!0,this.submitBtn.classList.add("loading"),this.submitBtn.setAttribute("aria-label","Submitting your email..."))}hideLoading(){if(this.submitBtn){this.submitBtn.disabled=!1,this.submitBtn.classList.remove("loading");const buttonText=this.getAttribute("button-text")||"Notify Me";this.submitBtn.setAttribute("aria-label",`${buttonText} - Submit your email to be notified about future flash sales`)}}reset(){this.hideError(),this.hideLoading(),this.emailInput&&(this.emailInput.value="",this.emailInput.setAttribute("aria-invalid","false")),this.form&&(this.form.classList.remove("hidden"),this.form.removeAttribute("aria-hidden")),this.successMsg&&(this.successMsg.classList.add("hidden"),this.successMsg.removeAttribute("role"),this.successMsg.removeAttribute("aria-live"))}trackEvent(eventName){window._theme&&_theme.track&&_theme.track.trackData({event:eventName})}checkTimerStatus(){const timers=document.querySelectorAll("countdown-timer");let hasActiveTimer=!1;timers.forEach(timer=>{const location=timer.getAttribute("data-location"),startDate=timer.getAttribute("data-start-date"),startTime=timer.getAttribute("data-start-time"),endDate=timer.getAttribute("data-end-date"),endTime=timer.getAttribute("data-end-time");if(location==="collection"&&startDate&&startTime&&endDate&&endTime){const startDateTime=_theme.Helpers.parseESTDate(startDate,startTime).getTime(),endDateTime=_theme.Helpers.parseESTDate(endDate,endTime).getTime(),currentTime=_theme.Helpers.getCurrentESTTime();hasActiveTimer=currentTime>=startDateTime&&currentTime<=endDateTime}});const inline=this.querySelector(".flash-sale-inline");hasActiveTimer?(inline?.classList.remove("show"),inline?.setAttribute("aria-hidden","true")):(inline?.classList.add("show"),inline?.removeAttribute("aria-hidden")),setTimeout(()=>{this.checkTimerStatus()},3e4)}static showAllCollectors(){document.querySelectorAll("flash-sale-email-collector").forEach(collector=>{const inline=collector.querySelector(".flash-sale-inline");inline?.classList.add("show"),inline?.removeAttribute("aria-hidden")})}static hideAllCollectors(){document.querySelectorAll("flash-sale-email-collector").forEach(collector=>{const inline=collector.querySelector(".flash-sale-inline");inline?.classList.remove("show"),inline?.setAttribute("aria-hidden","true")})}}customElements.define("flash-sale-email-collector",FlashSaleEmailCollector),window.FlashSaleEmailCollector=FlashSaleEmailCollector;
//# sourceMappingURL=/cdn/shop/t/731/assets/flash-sale-email-collector.js.map?v=75101246463134179351763025192