Replace tab macro with new tab web component

core/static/bundled/core/components/tabs-index.ts

@@ -7,7 +7,6 @@ export class Tab extends HTMLElement {
   static observedAttributes = ["title", "active"];
   private description = "";
   private inner = "";
-  private initialized = false;
   private active = false;
 
   attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) {
@@ -22,33 +21,30 @@ export class Tab extends HTMLElement {
     if (name === "title") {
       this.description = newValue;
     }
-
-    this.render();
+    this.dispatchEvent(new CustomEvent("ui-tab-updated", { bubbles: true }));
   }
 
-  render() {
-    if (!this.initialized) {
-      return;
-    }
-    const active = this.active ? "active" : "";
-    const tabContent = this.getContentHtml();
-    const content = html`
+  getButtonTemplate() {
+    return html`
     	<button
 	    	role="tab"
-	    	?aria-selected=${active}
-    		class="tab-header clickable ${active}"
+	    	?aria-selected=${this.active}
+    		class="tab-header clickable ${this.active ? "active" : ""}"
     		@click="${() => this.setActive(true)}"
     	>
     		${this.description}
     	</button>
+    `;
+  }
+  getContentTemplate() {
+    return html`
     	<section
-    		class="tab-content"
-    		?hidden=${!active}
+    		class="tab-section"
+    		?hidden=${!this.active}
     	>
-	    	${unsafeHTML(tabContent)}
+	    	${unsafeHTML(this.getContentHtml())}
 	    </section>
     `;
-    render(content, this);
   }
 
   setActive(value: boolean) {
@@ -62,12 +58,10 @@ export class Tab extends HTMLElement {
   connectedCallback() {
     this.inner = this.innerHTML;
     this.innerHTML = "";
-    this.initialized = true;
-    this.render();
   }
 
   getContentHtml() {
-    const content = this.getElementsByClassName("tab-content")[0];
+    const content = this.getElementsByClassName("tab-section")[0];
     if (content !== undefined) {
       return content.innerHTML;
     }
@@ -75,19 +69,23 @@ export class Tab extends HTMLElement {
   }
 
   setContentHtml(value: string) {
-    const content = this.getElementsByClassName("tab-content")[0];
+    const content = this.getElementsByClassName("tab-section")[0];
     if (content !== undefined) {
       content.innerHTML = value;
     }
     this.inner = value;
-    this.render();
   }
 }
 
 @registerComponent("ui-tab-group")
 export class TabGroup extends HTMLElement {
+  private node: HTMLDivElement;
+
   connectedCallback() {
-    this.classList.add("tabs", "shadow");
+    this.node = document.createElement("div");
+    this.node.classList.add("tabs", "shadow");
+    this.appendChild(this.node);
+
     this.addEventListener("ui-tab-activated", (event: CustomEvent) => {
       const target = event.detail as Tab;
       for (const tab of this.getElementsByTagName("ui-tab") as HTMLCollectionOf<Tab>) {
@@ -96,5 +94,27 @@ export class TabGroup extends HTMLElement {
         }
       }
     });
+    this.addEventListener("ui-tab-updated", () => {
+      this.render();
+    });
+
+    this.render();
+  }
+
+  render() {
+    const tabs = Array.prototype.slice.call(
+      this.getElementsByTagName("ui-tab"),
+    ) as Tab[];
+    render(
+      html`
+      	<div class="tab-headers">
+      		${tabs.map((tab) => tab.getButtonTemplate())}
+      	</div>
+      	<div class="tab-content">
+      		${tabs.map((tab) => tab.getContentTemplate())}
+      	</div>
+    `,
+      this.node,
+    );
   }
 }