`;
}
/**
* Lifecycle method called when the element is connected to the DOM.
* It sets up the theme and displays the consent banner if no cookie levels are set.
*/
public async connectedCallback() {
super.connectedCallback();
this.updateTheme(); // Initialize theme based on system preference
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
if (!cookieLevel) {
// Show consent banner if cookie levels haven't been set yet
this.setAttribute('show', 'true');
requestAnimationFrame(async () => {
await this.updated();
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
// Apply dark overlay styling when modal appears
pageOverlay.style.background = 'rgba(0,0,0, 0.5)';
pageOverlay.style.backdropFilter = 'blur(20px)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (modalBox) {
// Animate modal box appearance
modalBox.style.transform = `scale(1)`;
modalBox.style.opacity = '1';
}
});
} else {
// Hide banner if cookie levels are already set
this.setAttribute('show', 'false');
}
}
public async firstUpdated() {
// Placeholder for any logic needed after first render
}
/**
* Called after updates. Logs banner height and runs consent scripts if necessary.
*/
public async updated() {
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
if (!this.csWebclientRan && acceptedCookieLevels) {
this.csWebclientRan = true;
await this.csWebclientInstance.getAndRunConsentTuples();
}
}
/**
* Handles consent button clicks, sets cookie levels, and hides the banner.
* Uses theme variables for styling transitions.
*/
private async handleConsentButtonClick(
event: MouseEvent,
levelsArg: csInterfaces.TCookieLevel[]
) {
console.log(`Set level to ${levelsArg}`);
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
// Fade out overlay effect using inline styles for transition
pageOverlay.style.background = 'rgba(255,255,255, 0)';
pageOverlay.style.backdropFilter = 'blur(0px)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (modalBox) {
// Scale down and fade out modal box before hiding
modalBox.style.transform = `scale(0.95)`;
modalBox.style.opacity = '0';
}
// Save user consent preferences
await this.csWebclientInstance.setCookieLevels(levelsArg);
await delayFor(300);
this.setAttribute('show', 'false'); // Hide the consent banner
this.updated(); // Trigger any post-consent actions
}
/**
* Handles clicks on the page overlay. If clicked outside the modal,
* triggers a shake animation as feedback.
*/
private async pageOverlayClick(e: MouseEvent) {
if (e.target === e.currentTarget) {
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (pageOverlay && modalBox) {
pageOverlay.classList.add('shake');
modalBox.classList.add('shake');
await delayFor(2000);
pageOverlay.classList.remove('shake');
modalBox.classList.remove('shake');
}
}
}
/**
* Dynamically switches the theme between light and dark.
* Listens for system theme changes to update the component's theme.
*/
private updateTheme() {
// Check the initial system preference for dark mode
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.theme = prefersDark ? 'dark' : 'light';
// Listen for changes in the system color scheme preference
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
this.theme = e.matches ? 'dark' : 'light';
});
}
}