class CCPInputWidgetEditorController extends HTMLElement{ #input = null #index = null #type = null #delete_icon = ` ` constructor(){ super(); } connectedCallback(){ } get index(){ return this.#index } computeDefaultInputType(){ if(this.#input.schema.format === "secret"){ return "password" }else if(this.#input.schema.format === "date"){ return "date" }else if(this.#input.schema.format === "time"){ return "time" }else if(this.#input.schema.format === "dateTime"){ return "datetime-local" } return "text" } isSelectedFormat(fmt){ return this.#input.schema.format === fmt } renderDefaultByType(){ if(this.#input.schema.format === "code"){ return ` ` } else { return ` ` } } renderDeleteButton(){ return `` } render(input, i, reopen){ this.#index = i this.#input = input this.#type = input.schema.enum ? "enum" : "string" this.innerHTML = `
${ input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}
Comma separated list of options
${this.renderDefaultByType()} 👁
` 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") if(ename === "id"){ this.#input.id = val } else if(ename === "title"){ this.#input.title = val } else if(ename === "description"){ this.#input.description = val } else if(ename === "minOccurs"){ this.#input.minOccurs = val } else if(ename === "maxOccurs"){ this.#input.maxOccurs = val } else if(ename === "format"){ this.#input.schema.format = val this.render(this.#input, this.#index, true) /*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(this.#input.schema.format === "file"){ this.querySelector("div[name=input-default] input[name=default]").type = "file" }*/ } else if(ename === "contentMediaType"){ this.#input.schema.contentMediaType = val } else if(ename === "options"){ this.#input.schema.enum = val.split(",") } else if(ename === "default"){ this.#input.schema.default = val } else if(ename === "readonly"){ this.#input.schema.readOnly = ev.target.checked } else if(ename === "type"){ this.#type = ev.target.value if(this.#type === "enum"){ this.querySelector("div[name=string-input]").classList.add("d-none") this.querySelector("div[name=enum-input]").classList.remove("d-none") this.#input.schema.enum = this.querySelector("input[name=options]").value.split(",") }else if(this.#type === "string"){ this.querySelector("div[name=enum-input]").classList.add("d-none") this.querySelector("div[name=string-input]").classList.remove("d-none") delete this.#input.schema['enum'] } } }) } } window.customElements.define('d4s-ccp-input-editor', CCPInputWidgetEditorController);