sl tab wrappers

ts/elemwrapper.ts

@@ -1,14 +1,54 @@
 export class ElemWrapper {
-    constructor(private elem: HTMLElement) {}
+    public elem: HTMLElement;
+    public appendChild: (node: Node) => void;
+    public setAttribute: (name: string, value: string) => void;
+    public style: CSSStyleDeclaration;
+    public classList: DOMTokenList;
+    public addEventListener: (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined) => void;
+    public remove: (node: Node) => void;
+    public cloneNode: (deep?: boolean | undefined) => Node;
+    public contains: (node: Node) => boolean;
+    public querySelectorAll: (selectors: string) => NodeListOf<Element>;
+    constructor(elem: HTMLElement) {
+        this.elem = elem;
+        this.appendChild = this.elem.appendChild.bind(this.elem);
+        this.setAttribute = this.elem.setAttribute.bind(this.elem);
+        this.style = this.elem.style;
+        this.classList = this.elem.classList;
+        this.addEventListener = this.elem.addEventListener.bind(this.elem);
+        this.remove = this.elem.remove.bind(this.elem);
+        this.cloneNode = this.elem.cloneNode.bind(this.elem);
+        this.contains = this.elem.contains.bind(this.elem);
+        this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+    }
+
+    static create(tagName: string) {
+        return new ElemWrapper(document.createElement(tagName));
+    }
+    
+    append(elem: ElemWrapper) {
+        this.appendChild(elem.elem);
+    }
+
+    appendAfterLastChild(tagName: string, elem: ElemWrapper) {
+        const children = this.querySelectorAll(tagName);
+          
+        if (children.length > 0) {
+            const lastChild = children[children.length - 1];
+            lastChild.after(elem.elem);
+        } else {
+            this.appendChild(elem.elem);
+        }
+    }
 
     add(name: string, ...attrs: string[]): ElemWrapper {
-        const elem = document.createElement(name);
-        this.elem.appendChild(elem);
+        const elem = ElemWrapper.create(name);
+        this.append(elem);
 
         for (let i = 0; i < attrs.length; i += 2) {
             elem.setAttribute(attrs[i], attrs[i + 1]);
         }
 
-        return new ElemWrapper(elem);
+        return elem;
     }
 }

ts/main.ts

@@ -1,17 +1,29 @@
 import { ElemWrapper } from "./elemwrapper";
+import { SLTabGroup } from "./sltabgroup";
 
 async function main() {
     const root = new ElemWrapper(document.body);
-    const tabGroup = root.add("sl-tab-group");
 
-    tabGroup
-        .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
-        .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
+    const tabGroup = new SLTabGroup();
+    root.append(tabGroup);
 
-    tabGroup
-        .add("sl-tab", "slot", "nav", "panel", "tags")
-        .add("sl-icon", "name", "tags", "style", "font-size: 20px");
+    const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
+    
+    tasksTab
+        .add(
+            "sl-icon",
+            "name", "slash-circle",
+            "style", "font-size: 20px",
+        );
+
+    const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
+    
+    tagsTab
+        .add(
+            "sl-icon",
+            "name", "tags",
+            "style", "font-size: 20px",
+        );
 }
 
-
 document.addEventListener("DOMContentLoaded", main);

ts/sltab.ts

@@ -0,0 +1,9 @@
+import { ElemWrapper } from "./elemwrapper";
+
+export class SLTab extends ElemWrapper {
+    constructor(panel: string) {
+        super(document.createElement("sl-tab"));
+        this.setAttribute("panel", panel);
+        this.setAttribute("slot", "nav");
+    }
+}

ts/sltabgroup.ts

@@ -0,0 +1,27 @@
+import { ElemWrapper } from "./elemwrapper";
+import { SLTab } from "./sltab";
+import { SLTabPanel } from "./sltabpanel";
+export class SLTabGroup extends ElemWrapper {
+    constructor() {
+        super(document.createElement("sl-tab-group"));
+    }
+
+    addTab(panel: string): SLTab {
+        const tab = new SLTab(panel);
+        this.appendAfterLastChild("sl-tab", tab);
+        return tab;
+    }
+
+    addTabPanel(name: string): SLTabPanel {
+        const tabPanel = new SLTabPanel(name);
+        this.appendAfterLastChild("sl-tab-panel", tabPanel);
+        return tabPanel;
+    }
+
+    addTabSet(name: string): [SLTab, SLTabPanel] {
+        return [
+            this.addTab(name),
+            this.addTabPanel(name),
+        ];
+    }
+}

ts/sltabpanel.ts

@@ -0,0 +1,8 @@
+import { ElemWrapper } from "./elemwrapper";
+
+export class SLTabPanel extends ElemWrapper {
+    constructor(name: string) {
+        super(document.createElement("sl-tab-panel"));
+        this.setAttribute("name", name);
+    }
+}