--- a/svghmi/widget_input.ysl2	Fri Dec 18 11:50:28 2020 +0100
+++ b/svghmi/widget_input.ysl2	Fri Dec 18 15:52:58 2020 +0100
@@ -1,48 +1,63 @@
 // widget_input.ysl2
 
+template "widget[@type='Input']", mode="widget_class"{
+||
+    class InputWidget extends Widget{
+         on_op_click(opstr) {
+             let new_val = this.change_hmi_value(0, opstr);
+         }
+         edit_callback(new_val) {
+             this.apply_hmi_value(0, new_val);
+         }
+    }
+||
+}
+
 template "widget[@type='Input']", mode="widget_defs" {
     param "hmi_element";
-    optional_labels("key_pos");
-    const "value_elt" {
-        optional_labels("value");
-    }
+
+    const "key_pos_elt" optional_labels("key_pos");
+    value "$key_pos_elt";
+
+    const "value_elt" optional_labels("value");
     const "have_value","string-length($value_elt)>0";
     value "$value_elt";
+
+    const "edit_elt" optional_labels("edit");
+    const "have_edit","string-length($edit_elt)>0";
+    value "$edit_elt";
+
     if "$have_value"
     |     frequency: 5,
-    |     last_val: undefined,
+
     |     dispatch: function(value) {
+
+    if "$have_edit"
     |         this.last_val = value;
+
     if "$have_value"
     |         this.value_elt.textContent = String(value);
 
     |     },
-    const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";
+
     |     init: function() {
-    if "$edit_elt_id" {
-    |         id("«$edit_elt_id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_edit_click()");
+
+    if "$have_edit" {
+    |         this.edit_elt.onclick = () => edit_value(
+    |             "«path/@value»", "«path/@type»",
+    |             this, this.last_val, 
+        choose {
+            when "string-length($key_pos_elt)>0"
+    |             this.key_pos_elt.getBBox()
+            otherwise
+    |             undefined
+        }
+    |         );
     }
+
     foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
-    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_op_click('«func:escape_quotes(@inkscape:label)»')");
+    |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
     }
-    |     },
-    |     on_op_click: function(opstr) {
-    |         let new_val = this.change_hmi_value(0, opstr);
-    //     if "$have_value"{
-    // |         this.value_elt.textContent = String(new_val);
-    //           /* TODO gray out value until refreshed */
-    //     }
-    |     },
-    |     on_edit_click: function(opstr) {
-    |         var size = (typeof this.key_pos_elt !== 'undefined') ?  this.key_pos_elt.getBBox() : undefined
-    |         edit_value("«path/@value»", "«path/@type»", this, this.last_val, size);
-    |     },
 
-    |     edit_callback: function(new_val) {
-    |         this.apply_hmi_value(0, new_val);
-    //     if "$have_value"{
-    // |         this.value_elt.textContent = String(new_val);
-    //           /* TODO gray out value until refreshed */
-    //     }
     |     },
 }