Fixed issues with the chip list and editable label. Added initial collapsable-region and icon tabs code.

chip-list.js

@@ -61,6 +61,7 @@ class ChipList extends IgniteElement {
             items: [],
             itemsMax: Number.MAX_SAFE_INTEGER,
             placeholder: null,
+            stopEditingOnBlur: true,
             editing: false,
             input: null,
             searchBox: null,
@@ -82,6 +83,8 @@ class ChipList extends IgniteElement {
         return this.template
             .style("position", "relative")
             .class(this.editing, value => { return value ? "editing" : null })
+            .attribute("tabindex", "0")
+            .onFocus((e) => this.onFocus())
             .class([this.editing, this.items], (editing, items) => {
                 return !editing && (items == null || items.length == 0) ? "placeholder" : null;
             })
@@ -137,6 +140,14 @@ class ChipList extends IgniteElement {
                                     return;
                                 }
 
+                                //Reset the searching and input if we get a tab, since the browser
+                                //will focus the next avaiable element.
+                                if (e.key == "Tab") {
+                                    this.searching = false;
+                                    this.input.innerHTML = "";
+                                    return;
+                                }
+
                                 //If we are not searching and a key was pressed, open the search box.
                                 if (!this.searching && this.search && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
                                     this.searching = true;
@@ -151,8 +162,10 @@ class ChipList extends IgniteElement {
                     .property("show", this.searching)
                     .child(
                         new div()
-                            .class("shadow d-flex flex-column justify-content-center p-2")
+                            .class("d-flex flex-column justify-content-center p-2")
                             .style("background-color", "#fff")
+                            .style("border-radius", "0.4em")
+                            .style("box-shadow", "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px")
                             .child(
                                 new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults], (searchResults, showSearchResults) => {
                                     //Dont show the placeholder if we have search results, or if we are not showing search results.
@@ -165,41 +178,47 @@ class ChipList extends IgniteElement {
                             )
                     ),
             )
-            .onClick((e) => {
-                this.focus(); //Focus our element if we are not already.
-            })
+
     }
 
     ready() {
         //Add a listener to the document click to blur our element.
-        this.documentListener = (e) => this.blur(e);
+        this.documentListener = (e) => this.onBlur(e);
         window.document.addEventListener("click", this.documentListener);
-
     }
 
     cleanup() {
         window.document.removeEventListener("click", this.documentListener);
     }
 
-    focus() {
+    onFocus() {
+        console.log("ChpiList, focus called");
+
         if (!this.editing) {
             this.editing = true;
             this.input.focus();
             this.input.textContent = " ";
+        } else {
+            this.input.focus();
         }
     }
 
-    blur(e) {
+    onBlur(e) {
         //Only blur if we are editing and the target is not ourself or any of our children.
-        if (this.editing && e.target != this && !this.contains(e.target)) {
-            this.editing = false;
-            this.searching = false;
-            this.input.blur();
-            this.input.innerHTML = "";
+        if (this.editing) {
+            if (e.target != this && !this.contains(e.target)) {
+                if (this.stopEditingOnBlur) {
+                    this.editing = false;
+                }
+                this.searching = false;
+                this.input.blur();
+                this.input.innerHTML = "";
+            }
         }
     }
 
     searchResultClick(item) {
+        console.log("Search result click");
         if (this.items == null) {
             this.items = [];
         }

collapsable-region.js

@@ -0,0 +1,47 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, div, slot } from "../ignite-html/ignite-template.js";
+
+class CollapsableRegion extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return `
+            mt-collapsable-region .title:hover {
+                cursor: pointer;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            collapse: true,
+            title: "Placeholder"
+        };
+    }
+
+    render() {
+        return this.template.child(
+            new div()
+                .class("title")
+                .onClick(() => this.collapse = !this.collapse)
+                .child(this.title),
+            new div().hide(this.collapse).child(
+                new slot(this)
+            )
+        );
+    }
+}
+
+class CollapsableRegionTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-collapsable-region", children);
+    }
+}
+
+customElements.define("mt-collapsable-region", CollapsableRegion);
+
+export {
+    CollapsableRegionTemplate as CollapsableRegion
+};

editable-label.js

@@ -54,12 +54,12 @@ class EditableLabel extends IgniteElement {
 
     get properties() {
         return {
+            stopEditingOnBlur: true,
             editing: false,
             value: new IgniteProperty(null, () => {
                 //Emulate a change event to support value reflection.
                 this.dispatchEvent(new Event("change"));
             }),
-            editOnClick: true,
             multiLine: false,
             saveButton: true,
             input: null,
@@ -69,6 +69,8 @@ class EditableLabel extends IgniteElement {
 
     render() {
         return this.template
+            .attribute("tabindex", "0")
+            .onFocus(e => this.onFocus())
             .child(
                 new div()
                     .innerHTML(this.value)
@@ -76,7 +78,6 @@ class EditableLabel extends IgniteElement {
                     .attribute("contenteditable", this.editing)
                     .data("placeholder", this.placeholder)
                     .ref(this.input)
-                    .onClick(() => this.onClick())
                     .onBlur(() => this.onBlur())
                     .on("keydown", (e) => this.onKeyDown(e)),
                 new button(`<i class="fas fa-check"></i>`)
@@ -93,22 +94,41 @@ class EditableLabel extends IgniteElement {
         }
     }
 
-    onClick() {
-        if (this.editOnClick) {
-            this.editing = true;
-            this.input.focus();
-        }
-    }
-
     onBlur() {
         if (this.editing) {
-            this.editing = false;
+            if (this.stopEditingOnBlur) {
+                this.editing = false;
+            }
 
             if (this.input.innerHTML !== this.value) {
                 this.value = this.input.innerHTML;
             }
         }
     }
+
+    onFocus() {
+        this.editing = true;
+        this.input.focus();
+        this.placeCaretAtEnd(this.input);
+    }
+
+    placeCaretAtEnd(el) {
+        el.focus();
+        if (typeof window.getSelection != "undefined"
+            && typeof document.createRange != "undefined") {
+            var range = document.createRange();
+            range.selectNodeContents(el);
+            range.collapse(false);
+            var sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
+        } else if (typeof document.body.createTextRange != "undefined") {
+            var textRange = document.body.createTextRange();
+            textRange.moveToElementText(el);
+            textRange.collapse(false);
+            textRange.select();
+        }
+    }
 }
 
 class EditableLabelTemplate extends IgniteTemplate {

icon-tabs.js

@@ -0,0 +1,50 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, slot, list, div } from "../ignite-html/ignite-template.js";
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
+
+class IconTabs extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return `
+            mt-icon-tabs > .icons {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                gap: 1em;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            icons: []
+        };
+    }
+
+    render() {
+        return this.template.child(
+            new div().class("icons").child(
+                new list(this.icons, icon => {
+                    return new div(icon);
+                })
+            ),
+            new slot(this)
+        )
+    }
+}
+
+class IconTabsTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-icon-tabs", children);
+    }
+}
+
+customElements.define("mt-icon-tabs", IconTabs);
+
+export {
+    IconTabsTemplate as IconTabs
+};