milinda-pitch/js/components/newsletter-signup.js

/**
 * Newsletter Signup Component
 * A newsletter subscription form with title, description, and email input
 */
import { sendIcon } from "../icons/send-icon.js";

class NewsletterSignup extends HTMLElement {
  static get observedAttributes() {
    return ["title", "description", "button-text", "placeholder"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  attributeChangedCallback() {
    this.render();
    this.setupEventListeners();
  }

  get title() {
    return this.getAttribute("title") || "Blijf op de hoogte";
  }

  get description() {
    return (
      this.getAttribute("description") ||
      "Schrijf je in voor onze nieuwsbrief en ontvang het laatste nieuws over nieuwe boeken en aanbiedingen."
    );
  }

  get buttonText() {
    return this.getAttribute("button-text") || "Inschrijven";
  }

  get placeholder() {
    return this.getAttribute("placeholder") || "Je e-mailadres";
  }

  setupEventListeners() {
    const form = this.shadowRoot?.querySelector("form");
    if (form) {
      form.addEventListener("submit", (e) => {
        e.preventDefault();
        const emailInput = this.shadowRoot.querySelector('input[type="email"]');
        const email = emailInput?.value;

        if (email) {
          // Dispatch custom event for parent components to handle
          this.dispatchEvent(
            new CustomEvent("newsletter-submit", {
              detail: { email },
              bubbles: true,
              composed: true,
            })
          );

          // Reset form
          form.reset();

          // Show feedback (you could enhance this)
          console.log("Newsletter signup:", email);
        }
      });
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }

        .newsletter-box {
          border: 1px solid var(--color-newsletter-border, #951D51);
          border-radius: 4px;
          padding: 24px 16px;
          background: transparent;
        }

        .newsletter-content {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .newsletter-title {
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 24px;
          font-weight: 700;
          line-height: 34px;
          color: var(--color-newsletter-title, #951D51);
          margin: 0;
        }

        .newsletter-description {
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 16px;
          font-weight: 400;
          line-height: 32px;
          color: #000000;
          margin: 0;
        }

        .newsletter-form {
          display: flex;
          gap: 16px;
        }

        .newsletter-input {
          flex: 1 1 auto;
          min-width: 0;
          padding: 12px 16px;
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 16px;
          line-height: 24px;
          border: 1px solid var(--color-newsletter-border, #951D51);
          border-radius: 4px;
          background-color: #ffffff;
          outline: none;
          transition: border-color 150ms ease;
        }

        .newsletter-input::placeholder {
          color: #9CA3AF;
        }

        .newsletter-input:focus {
          border-color: var(--color-newsletter-border, #951D51);
          box-shadow: 0 0 0 1px var(--color-newsletter-border, #951D51);
        }

        .newsletter-button {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 80px;
          height: 48px;
          padding: 0;
          color: #ffffff;
          background-color: var(--color-newsletter-button, #951D51);
          border: 1px solid var(--color-newsletter-button, #951D51);
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 150ms ease, border-color 150ms ease;
        }

        .newsletter-button svg {
          width: 24px;
          height: 24px;
        }

        .newsletter-button:hover {
          background-color: var(--color-newsletter-button-hover, #7a1842);
          border-color: var(--color-newsletter-button-hover, #7a1842);
        }

        .newsletter-button:focus {
          outline: 2px solid var(--color-newsletter-button, #951D51);
          outline-offset: 2px;
        }
      </style>
      <div class="newsletter-box">
        <div class="newsletter-content">
          <h2 class="newsletter-title">${this.title}</h2>
          <p class="newsletter-description">${this.description}</p>
          <form class="newsletter-form">
            <input 
              type="email" 
              class="newsletter-input" 
              placeholder="${this.placeholder}"
              required
              aria-label="E-mailadres"
            />
            <button type="submit" class="newsletter-button" aria-label="${
              this.buttonText || "Inschrijven"
            }">
              ${sendIcon({ size: 24, color: "#ffffff" })}
            </button>
          </form>
        </div>
      </div>
    `;
  }
}

customElements.define("newsletter-signup", NewsletterSignup);