From 94661acf4e5afcbc11c4acb7c049292e37dc4167 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 5 Dec 2024 10:45:16 -0700
Subject: [PATCH] Et2Details: Add accordionGroup attribute to group multiple
 details together, allowing only one in the group to be open at a time

---
 .../etemplate/Layout/Et2Details/Et2Details.ts | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/api/js/etemplate/Layout/Et2Details/Et2Details.ts b/api/js/etemplate/Layout/Et2Details/Et2Details.ts
index fa2ffca36d..09dcdb7b20 100644
--- a/api/js/etemplate/Layout/Et2Details/Et2Details.ts
+++ b/api/js/etemplate/Layout/Et2Details/Et2Details.ts
@@ -148,6 +148,13 @@ export class Et2Details extends Et2Widget(SlDetails)
 	@property({type: Boolean})
 	overlaySummaryOnOpen = false;
 
+	/**
+	 * Group multiple details together so only one can be open at once
+	 * @type {string}
+	 */
+	@property({type: String})
+	accordionGroup : string;
+
 	/**
 	 * List of properties that get translated
 	 * Done separately to not interfere with properties - if we re-define label property,
@@ -161,10 +168,21 @@ export class Et2Details extends Et2Widget(SlDetails)
 		}
 	}
 
+	constructor()
+	{
+		super();
+		this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+	}
+
 	connectedCallback()
 	{
 		super.connectedCallback();
 
+		if(this.accordionGroup)
+		{
+			window.document.addEventListener("sl-show", this.handleAccordionOpen);
+		}
+
 		this.updateComplete.then(() => {
 			if (this.toggleOnHover) {
 				this.addEventListener("mouseover", this.show);
@@ -176,6 +194,8 @@ export class Et2Details extends Et2Widget(SlDetails)
 	disconnectedCallback()
 	{
 		super.disconnectedCallback();
+
+		window.document.removeEventListener("sl-show", this.handleAccordionOpen);
 		window.document.removeEventListener('mouseout', this._mouseOutEvent);
 	}
 
@@ -188,6 +208,14 @@ export class Et2Details extends Et2Widget(SlDetails)
 		if (!this.getDOMNode().contains(event.relatedTarget)) this.hide();
 	}
 
+	handleAccordionOpen(event)
+	{
+		if(event.target !== this && this.accordionGroup && event.target.accordionGroup == this.accordionGroup)
+		{
+			this.hide();
+		}
+	}
+
 	render()
 	{
 		const isRtl = this.matches(':dir(rtl)');