Make headless buttons self-hide per regulation

ProboRejectButton and ProboCustomizeButton now auto-hide when
their corresponding text key is empty in the server-provided
config, removing the need for headless SDK consumers to
implement regulation-aware layout logic themselves.

The redundant applyLayout() in ProboThemedBanner is removed
since the headless components handle visibility directly.

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

packages/cookie-banner/src/components/buttons.ts

@@ -15,6 +15,7 @@
 import { ProboElement } from "./base";
 import type { ProboRootElement } from "./base";
 import type { ProboCookieBannerRoot } from "./cookie-banner-root";
+import type { BannerConfig } from "../types";
 
 class ProboActionButton extends ProboElement {
   protected root: ProboRootElement | null = null;
@@ -31,6 +32,40 @@ class ProboActionButton extends ProboElement {
   protected handleClick = (_e: Event): void => {};
 }
 
+class ProboHideableButton extends ProboActionButton {
+  protected textKey: string = "";
+
+  private onReady = (e: Event): void => {
+    const config = (e as CustomEvent).detail.config as BannerConfig;
+    this.applyVisibility(config);
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.root) {
+      try {
+        this.applyVisibility(this.root.bannerConfig);
+      } catch {
+        this.root.addEventListener("probo-ready", this.onReady, { once: true });
+      }
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.root) {
+      this.root.removeEventListener("probo-ready", this.onReady);
+    }
+  }
+
+  private applyVisibility(config: BannerConfig): void {
+    const texts = config.texts ?? {};
+    if (!texts[this.textKey]) {
+      this.hidden = true;
+    }
+  }
+}
+
 export class ProboAcceptButton extends ProboActionButton {
   protected handleClick = (): void => {
     if (!this.root) return;
@@ -46,7 +81,9 @@ export class ProboAcceptButton extends ProboActionButton {
   };
 }
 
-export class ProboRejectButton extends ProboActionButton {
+export class ProboRejectButton extends ProboHideableButton {
+  protected textKey = "button_reject_all";
+
   protected handleClick = (): void => {
     if (!this.root) return;
     this.root.client.rejectAll();
@@ -61,7 +98,9 @@ export class ProboRejectButton extends ProboActionButton {
   };
 }
 
-export class ProboCustomizeButton extends ProboActionButton {
+export class ProboCustomizeButton extends ProboHideableButton {
+  protected textKey = "button_customize";
+
   protected handleClick = (): void => {
     if (!this.root) return;
     this.root.setState("panel");

packages/cookie-banner/src/themed-banner/themed-banner.ts

@@ -130,7 +130,6 @@ export class ProboThemedBanner extends HTMLElement {
       const detail = (e as CustomEvent).detail;
       const config = detail.config as BannerConfig;
       this.applyTexts(config);
-      this.applyLayout(config);
       if (!config.show_branding) {
         this.shadow.querySelectorAll("[data-branding]").forEach(el => {
           (el as HTMLElement).setAttribute("hidden", "");
@@ -225,20 +224,6 @@ export class ProboThemedBanner extends HTMLElement {
     }
   }
 
-  private applyLayout(config: BannerConfig): void {
-    const texts = config.texts ?? {};
-
-    const hideIfEmpty = (selector: string, textKey: string): void => {
-      if (texts[textKey]) return;
-      this.shadow.querySelectorAll(selector).forEach(el => {
-        (el as HTMLElement).hidden = true;
-      });
-    };
-
-    hideIfEmpty("probo-banner probo-reject-button", "button_reject_all");
-    hideIfEmpty("probo-banner probo-customize-button", "button_customize");
-  }
-
   private esc(str: string): string {
     return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }