`;
}
setupEventListeners() {
const form = this.shadowRoot.getElementById('onboardBrandForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
this.submit();
});
}
submit() {
const brandKey = this.shadowRoot.getElementById('brandKey').value;
const brandName = this.shadowRoot.getElementById('brandName').value;
const brandKeyRegex = /^[A-Za-z][A-Za-z0-9_-]*$/;
if (!brandKeyRegex.test(brandKey)) {
alert('Brand key must start with a letter and contain no spaces. Only letters, numbers, underscores, and hyphens are allowed.');
return;
}
this.dispatchEvent(new CustomEvent('onboard', {
detail: {brandKey, brandName},
bubbles: true,
composed: true
}));
// Call the onSubmit if it's defined
if (this.onSubmit) {
this.onSubmit(brandKey, brandName);
}
this.hide();
}
show(title, submitTitle, onSubmit) {
this.onSubmit = onSubmit; // Store the onSubmit function
// Set the title and submit title in the respective elements
if (title)
this.shadowRoot.getElementById('sheetTitle').textContent = title;
if (submitTitle)
this.shadowRoot.getElementById('submitBtn').textContent = submitTitle;
// Reference the sheet element and display it
const sheet = this.shadowRoot.getElementById('onboardBrandSheet');
sheet.style.display = 'block'; // Make the sheet visible
// Use a timeout to allow for smooth transitions
setTimeout(() => {
sheet.classList.add('show'); // Add 'show' class for CSS transitions
this.overlay = this.shadowRoot.getElementById('overlay');
this.overlay.style.display = 'block'; // Show the overlay
// Set up the overlay click event to hide the sheet
this.overlay.onclick = () => this.hide();
}, 10);
}
hide() {
const sheet = this.shadowRoot.getElementById('onboardBrandSheet');
sheet.classList.remove('show');
setTimeout(() => {
sheet.style.display = 'none';
this.overlay.style.display = 'none';
}, 300);
}
}
customElements.define('onboard-bottom-sheet', OnboardBrandBottomSheet);