From 901f715b7bb88a1f8b46102c56b393f350001473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Fri, 8 May 2026 10:23:41 +0400
Subject: [PATCH] Make headless buttons self-hide per regulation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../cookie-banner/src/components/buttons.ts   | 43 ++++++++++++++++++-
 .../src/themed-banner/themed-banner.ts        | 15 -------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/packages/cookie-banner/src/components/buttons.ts b/packages/cookie-banner/src/components/buttons.ts
index ca87dba24..a3977643b 100644
--- a/packages/cookie-banner/src/components/buttons.ts
+++ b/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");
diff --git a/packages/cookie-banner/src/themed-banner/themed-banner.ts b/packages/cookie-banner/src/themed-banner/themed-banner.ts
index d005aaa69..cdbcdf523 100644
--- a/packages/cookie-banner/src/themed-banner/themed-banner.ts
+++ b/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;");
   }