|
export class ToastNotification extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: var(--primary-color);
|
|
color: var(--accent-color);
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
font-family: var(--font-family);
|
|
font-size: 1rem;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
z-index: 10000;
|
|
min-width: 250px;
|
|
text-align: center;
|
|
}
|
|
:host(.show) {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
:host(.hide) {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(20px);
|
|
}
|
|
:host(.error) {
|
|
background-color: var(--secondary-color);
|
|
}
|
|
:host(.success) {
|
|
background-color: #4CAF50; /* Green for success */
|
|
}
|
|
</style>
|
|
<div id="message"></div>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
// Ensure variables are defined, fallback if not
|
|
if (!this.style.getPropertyValue('--primary-color')) {
|
|
this.style.setProperty('--primary-color', '#003399');
|
|
this.style.setProperty('--secondary-color', '#CC0000');
|
|
this.style.setProperty('--accent-color', '#FFFFFF');
|
|
this.style.setProperty('--font-family', 'sans-serif');
|
|
}
|
|
}
|
|
|
|
show(message, type = 'info', duration = 3000) {
|
|
const messageDiv = this.shadowRoot.getElementById('message');
|
|
messageDiv.textContent = message;
|
|
|
|
this.className = ''; // Clear previous classes
|
|
this.classList.add('show');
|
|
if (type === 'error') {
|
|
this.classList.add('error');
|
|
} else if (type === 'success') {
|
|
this.classList.add('success');
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.classList.remove('show');
|
|
this.classList.add('hide');
|
|
// Remove element after transition
|
|
this.addEventListener('transitionend', () => this.remove(), { once: true });
|
|
}, duration);
|
|
}
|
|
}
|
|
|
|
customElements.define('toast-notification', ToastNotification);
|