Added multi line support, styling, and a save button to the editable label.

editable-label.js

@@ -1,17 +1,101 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
-import { IgniteTemplate, button, ul, slot } from "../ignite-html/ignite-template.js";
+import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js";
 
 class EditableLabel extends IgniteElement {
     constructor() {
         super();
     }
 
+    get styles() {
+        return `
+            mt-editable-label {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
 
+            mt-editable-label>div:focus {
+                border: solid 0.09em #90A4AE;
+                padding: 0.2em;
+                border-radius: 0.3em;
+            }
+
+            mt-editable-label:hover {
+                cursor: pointer;
+            }
+
+            mt-editable-label>div {
+                outline: unset;
+                border: solid 0.09em transparent;
+                padding: 0.2em;
+            }
+
+            mt-editable-label>button {
+                margin-left: 0.5em;
+                background-color: #2196F3;
+                color: #fff;
+                border: none;
+                border-radius: 0.3em;
+                padding: 0;
+                width: 1.5em;
+                height: 1.5em;
+                min-width: 1.5em;
+                min-height: 1.5em;
+                font-size: 0.8rem;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            editing: false,
+            value: "test",
+            editOnClick: true,
+            multiLine: false,
+            saveButton: true,
+            input: null
+        };
+    }
 
     render() {
-        return this.template.child(
+        return this.template
+            .child(
+                new div(this.value)
+                    .attribute("contenteditable", this.editing)
+                    .ref(this.input)
+                    .onClick(() => this.onClick())
+                    .onBlur(() => this.onBlur())
+                    .on("keydown", (e) => this.onKeyDown(e)),
+                new button(`<i class="fas fa-check"></i>`)
+                    .style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" })
+            );
+    }
 
-        );
+    onKeyDown(e) {
+        if ((e.keyCode === 13 || e.keyCode === 27) && !this.multiLine) {
+            this.input.blur();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+    }
+
+    onClick() {
+        if (this.editOnClick) {
+            this.editing = true;
+            this.input.focus();
+        }
+    }
+
+    onBlur() {
+        if (this.editing) {
+            this.editing = false;
+
+            if (this.input.innerHTML !== this.value) {
+                this.value = this.input.innerHTML;
+            }
+
+        }
     }
 }