/**
* 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 = `
${this.title}
${this.description}
`;
}
}
customElements.define("newsletter-signup", NewsletterSignup);