diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js index 836ef19..8e8d52c 100644 --- a/ccp/js/inputwidgetcontroller.js +++ b/ccp/js/inputwidgetcontroller.js @@ -125,8 +125,9 @@ class SimpleInputRenderer extends Renderer{ ? + 👁 - ` + ` return this.#html } } @@ -139,16 +140,28 @@ class SecretInputRenderer extends Renderer{ super(input) } + connectedCallback(controller){ + controller.addEventListener("click", ev=>{ + const ename = ev.target.getAttribute("name") + if(ename === "password_toggle"){ + const w = controller.querySelector("div.ccp-input-widget input") + w.type = (w.type === "password" ? "" : "password") + ev.preventDefault() + } + }) + } + render(){ let required = this.required ? 'required="required"' : "" let readonly = this.readOnly ? 'readonly="readOnly"' : "" this.#html = ` -
+
+ 👁
` return this.#html diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js index 3bd508b..738324e 100644 --- a/ccp/js/inputwidgeteditorcontroller.js +++ b/ccp/js/inputwidgeteditorcontroller.js @@ -9,7 +9,7 @@ class CCPInputWidgetEditorController extends HTMLElement{ ` - + constructor(){ super(); @@ -101,12 +101,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
+ 👁
` + this.addEventListener("click", ev=>{ + const ename = ev.target.getAttribute("name") + if(ename === "password_toggle"){ + const w = this.querySelector("div[name=input-default] input[name=default]") + w.type = (w.type === "password" ? "" : "password") + ev.preventDefault() + } + }) + this.addEventListener("input", ev=>{ const val = ev.target.value const ename = ev.target.getAttribute("name") @@ -127,8 +137,17 @@ class CCPInputWidgetEditorController extends HTMLElement{ } else if(ename === "format"){ this.#input.schema.format = val + this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none") + this.querySelector("div[name=input-default] input[name=default]").type = "" if(this.#input.schema.format === "secret"){ this.querySelector("div[name=input-default] input[name=default]").type = "password" + this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none") + }else if(this.#input.schema.format === "date"){ + this.querySelector("div[name=input-default] input[name=default]").type = "date" + }else if(this.#input.schema.format === "time"){ + this.querySelector("div[name=input-default] input[name=default]").type = "time" + }else if(this.#input.schema.format === "dateTime"){ + this.querySelector("div[name=input-default] input[name=default]").type = "dateTime" } } else if(ename === "contentMediaType"){