Defer banner button validation until config is loaded

The validation now runs on probo-ready instead of connectedCallback
so it can check config.texts to decide which buttons are required
for the active consent mode.

Signed-off-by: Émile Ré <emile@getprobo.com>

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<ProboCookieBannerRoot>("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);
       }