{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-bp2019/src/components/widgets/lively-key-value-input.js"],"names":["KeyValueInput","HTMLDivElement","attachedCallback","body","innerHTML","keyElement","querySelector","valueElement","statusElement","addEventListener","e","keyUpHandler","inputEventHandler","changeEventHandler","gotFocus","keyCode","commit","value","oldValue","updateStatus","clickHandler","setSelectionRange","select","ev","CustomEvent","bubbles","detail","key","_key","targetElement","dispatchEvent","classList","remove","add","updateType","type","setAttribute","readonly","_type","_readonly"],"mappings":"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","file":"lively-key-value-input.js","sourcesContent":["\nexport default class KeyValueInput extends HTMLDivElement {\n    attachedCallback() {\n      let body = '<span class=\"lively-key-value-input-key\"></span><input class=\"lively-key-value-input-value\" value=\"\"><span class=\"lively-key-value-input-status ok\"></span>';\n      this.innerHTML = body;\n      this.keyElement = this.querySelector('.lively-key-value-input-key');\n      this.valueElement = this.querySelector('.lively-key-value-input-value');\n      this.statusElement = this.querySelector('.lively-key-value-input-status');\n\n      this.valueElement.addEventListener('keyup', (e) => { this.keyUpHandler(e); });\n      this.valueElement.addEventListener('input', (e) => { this.inputEventHandler(e); });\n      this.valueElement.addEventListener('change', (e) => { this.changeEventHandler(e); });\n      this.valueElement.addEventListener('focus', (e) => { this.gotFocus(e); });\n    }\n\n    keyUpHandler(e) {\n      switch(e.keyCode) {\n        case(13): //enter\n          this.commit();\n          break;\n        case(27): //esc\n          this.valueElement.value = this.oldValue;\n          this.updateStatus();\n          break;\n\n        default:\n          break;\n      }\n    }\n\n    inputEventHandler(e) {\n      // change status LED\n      this.updateStatus();\n    }\n\n    changeEventHandler(e) {\n      // save event\n      this.commit();\n    }\n\n    clickHandler(e) {\n      this.valueElement.setSelectionRange();\n    }\n\n    gotFocus(e) {\n      // select the whole content\n      this.valueElement.select();\n    }\n\n    commit() {\n      let ev = new CustomEvent('commit', {\n        bubbles: true,\n        detail: {\n          key: this._key,\n          value: this.valueElement.value,\n          oldValue: this.oldValue\n        },\n        targetElement: this\n      });\n\n      this.oldValue = this.valueElement.value;\n      this.updateStatus();\n\n      this.dispatchEvent(ev);\n    }\n\n    updateStatus() {\n      var classList = this.statusElement.classList;\n      classList.remove(\"ok\");\n      classList.remove(\"changed\");\n\n      if(this.valueElement.value == this.oldValue) {\n        classList.add(\"ok\");\n      } else {\n        classList.add(\"changed\");\n      }\n    }\n\n    updateType() {\n      switch (this.type) {\n        case 'number':\n          this.valueElement.setAttribute('type', 'number');\n          break;\n        case 'boolean':\n          this.valueElement.setAttribute('type', 'checkbox');\n          break;\n        case 'string':\n        default:\n          break;\n      }\n\n      if (this.readonly) {\n        this.valueElement.setAttribute('readonly', 'readonly');\n        this.valueElement.setAttribute('disabled', 'disabled');\n      }\n    }\n\n    get key() {\n      return this._key;\n    }\n\n    set key(key) {\n      this._key = key;\n      this.keyElement.innerHTML = key;\n    }\n\n    get value() {\n      return this.valueElement.value;\n    }\n\n    set value(value) {\n      this.oldValue = value;\n      this.valueElement.value = value;\n    }\n\n    get type() {\n      return this._type;\n    }\n\n    set type(value) {\n      this._type = value;\n      this.updateType();\n    }\n\n    get readonly() {\n      return this._readonly;\n    }\n    set readonly(value) {\n      this._readonly = value;\n      this.updateType();\n    }\n  }"]}