diff --git a/editable-label.js b/editable-label.js index 06b27b0..d28fdad 100644 --- a/editable-label.js +++ b/editable-label.js @@ -1,5 +1,6 @@ import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js"; +import { IgniteProperty } from "../ignite-html/ignite-html.js"; class EditableLabel extends IgniteElement { constructor() { @@ -14,7 +15,7 @@ class EditableLabel extends IgniteElement { align-items: center; } - mt-editable-label>div:focus { + mt-editable-label>div.focus { border: solid 0.09em #90A4AE; padding: 0.2em; border-radius: 0.3em; @@ -49,7 +50,10 @@ class EditableLabel extends IgniteElement { get properties() { return { editing: false, - value: "test", + value: new IgniteProperty(null, () => { + //Emulate a change event to support value reflection. + this.dispatchEvent(new Event("change")); + }), editOnClick: true, multiLine: false, saveButton: true, @@ -60,13 +64,16 @@ class EditableLabel extends IgniteElement { render() { return this.template .child( - new div(this.value) + new div() + .innerHTML(this.value) + .class(this.editing, (value) => { return value ? "focus" : null; }) .attribute("contenteditable", this.editing) .ref(this.input) .onClick(() => this.onClick()) .onBlur(() => this.onBlur()) .on("keydown", (e) => this.onKeyDown(e)), new button(``) + .onClick(() => this.onBlur()) .style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" }) ); }