slicon

ts/elemwrapper.ts

@@ -9,6 +9,8 @@ export class ElemWrapper {
     public cloneNode: (deep?: boolean | undefined) => Node;
     public contains: (node: Node) => boolean;
     public querySelectorAll: (selectors: string) => NodeListOf<Element>;
+    public querySelector: (selectors: string) => Element | null;
+
     constructor(elem: HTMLElement) {
         this.elem = elem;
         this.appendChild = this.elem.appendChild.bind(this.elem);
@@ -20,6 +22,7 @@ export class ElemWrapper {
         this.cloneNode = this.elem.cloneNode.bind(this.elem);
         this.contains = this.elem.contains.bind(this.elem);
         this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+        this.querySelector = this.elem.querySelector.bind(this.elem);
     }
 
     static create(tagName: string) {
@@ -30,17 +33,6 @@ export class 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 = ElemWrapper.create(name);
         this.append(elem);

ts/main.ts

@@ -1,4 +1,5 @@
 import { ElemWrapper } from "./elemwrapper";
+import { SLIcon } from "./slicon";
 import { SLTabGroup } from "./sltabgroup";
 
 async function main() {
@@ -8,22 +9,10 @@ async function main() {
     root.append(tabGroup);
 
     const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
-    
-    tasksTab
-        .add(
-            "sl-icon",
-            "name", "slash-circle",
-            "style", "font-size: 20px",
-        );
+    tasksTab.append(new SLIcon("slash-circle"));
 
     const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
-    
-    tagsTab
-        .add(
-            "sl-icon",
-            "name", "tags",
-            "style", "font-size: 20px",
-        );
+    tagsTab.append(new SLIcon("tags"));
 }
 
 document.addEventListener("DOMContentLoaded", main);

ts/slicon.ts

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

ts/sltabgroup.ts

@@ -8,13 +8,13 @@ export class SLTabGroup extends ElemWrapper {
 
     addTab(panel: string): SLTab {
         const tab = new SLTab(panel);
-        this.appendAfterLastChild("sl-tab", tab);
+        this.append(tab);
         return tab;
     }
 
     addTabPanel(name: string): SLTabPanel {
         const tabPanel = new SLTabPanel(name);
-        this.appendAfterLastChild("sl-tab-panel", tabPanel);
+        this.append(tabPanel);
         return tabPanel;
     }