diff --git a/packages/cookie-banner/src/components/banner.ts b/packages/cookie-banner/src/components/banner.ts index 335200d86..be6f21b2b 100644 --- a/packages/cookie-banner/src/components/banner.ts +++ b/packages/cookie-banner/src/components/banner.ts @@ -15,12 +15,7 @@ import { ProboElement } from "./base"; import type { ProboRootElement } from "./base"; import type { ProboCookieBannerRoot } from "./cookie-banner-root"; - -const REQUIRED_BUTTONS = [ - "probo-accept-button", - "probo-reject-button", - "probo-customize-button", -] as const; +import type { BannerConfig } from "../types"; export class ProboBanner extends ProboElement { private root: ProboRootElement | null = null; @@ -32,29 +27,39 @@ export class ProboBanner extends ProboElement { } }; + private onReady = (e: Event): void => { + const config = (e as CustomEvent).detail.config as BannerConfig; + this.validate(config); + }; + connectedCallback(): void { this.hidden = true; this.root = this.findAncestor("probo-cookie-banner-root"); if (this.root) { this.root.addEventListener("probo-state", this.onStateChange); + this.root.addEventListener("probo-ready", this.onReady, { once: true }); if (this.root.state === "banner") { this.hidden = false; } } - - this.scheduleValidation(() => this.validate()); } disconnectedCallback(): void { if (this.root) { this.root.removeEventListener("probo-state", this.onStateChange); + this.root.removeEventListener("probo-ready", this.onReady); } } - private validate(): void { + private validate(config: BannerConfig): void { + const texts = config.texts ?? {}; + const required: string[] = ["probo-accept-button"]; + if (texts.button_reject_all) required.push("probo-reject-button"); + if (texts.button_customize) required.push("probo-customize-button"); + const missing: string[] = []; - for (const tag of REQUIRED_BUTTONS) { + for (const tag of required) { if (!this.querySelector(tag)) { missing.push(tag); }