diff --git a/components/dist/text-field.js b/components/dist/text-field.js
index 873d6c9..30c9e8d 100644
--- a/components/dist/text-field.js
+++ b/components/dist/text-field.js
@@ -79,15 +79,10 @@ customElements.define('text-field', class extends HTMLElement {
this.editButton = this.textField.querySelector('.edit-button')
this.isTextEditable = false
this.isDisabled = false
-
- this.setEditable = this.setEditable.bind(this)
- this.setNonEditable = this.setNonEditable.bind(this)
- this.toggleEditable = this.toggleEditable.bind(this)
- this.revert = this.revert.bind(this)
}
static get observedAttributes() {
- return ['disable']
+ return ['disabled']
}
get value() {
@@ -101,11 +96,11 @@ customElements.define('text-field', class extends HTMLElement {
set disabled(val) {
this.isDisabled = val
if (this.isDisabled)
- this.setAttribute('disable', '')
+ this.setAttribute('disabled', '')
else
- this.removeAttribute('disable')
+ this.removeAttribute('disabled')
}
- setEditable() {
+ setEditable = () => {
if (this.isTextEditable) return
this.textContainer.contentEditable = true
this.setAttribute('editable', '')
@@ -114,7 +109,7 @@ customElements.define('text-field', class extends HTMLElement {
this.editButton.textContent = 'Done'
this.isTextEditable = true
}
- setNonEditable() {
+ setNonEditable = () => {
if (!this.isTextEditable) return
this.textContainer.contentEditable = false
this.removeAttribute('editable')
@@ -131,13 +126,13 @@ customElements.define('text-field', class extends HTMLElement {
this.editButton.textContent = 'Edit'
this.isTextEditable = false
}
- toggleEditable() {
+ toggleEditable = () => {
if (this.isTextEditable)
this.setNonEditable()
else
this.setEditable()
}
- revert() {
+ revert = () => {
if (this.textContainer.isContentEditable) {
this.value = this.text
this.setNonEditable()
@@ -150,7 +145,7 @@ customElements.define('text-field', class extends HTMLElement {
this.text = this.getAttribute('value')
this.textContainer.textContent = this.text
}
- if (this.hasAttribute('disable'))
+ if (this.hasAttribute('disabled'))
this.isDisabled = true
else
this.isDisabled = false
@@ -160,8 +155,8 @@ customElements.define('text-field', class extends HTMLElement {
}
}
attributeChangedCallback(name) {
- if (name === 'disable') {
- if (this.hasAttribute('disable')) {
+ if (name === 'disabled') {
+ if (this.hasAttribute('disabled')) {
this.editButton.classList.add('hide')
this.textContainer.removeEventListener('dblclick', this.setEditable)
this.editButton.removeEventListener('click', this.toggleEditable)
diff --git a/components/dist/text-field.min.js b/components/dist/text-field.min.js
index 16e89d1..ddae188 100644
--- a/components/dist/text-field.min.js
+++ b/components/dist/text-field.min.js
@@ -1 +1 @@
-const textField=document.createElement("template");textField.innerHTML='\n\n
\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.editButton=this.textField.querySelector(".edit-button"),this.isTextEditable=!1,this.isDisabled=!1,this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.toggleEditable=this.toggleEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disable"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disable",""):this.removeAttribute("disable")}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.setAttribute("editable",""),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.textContent="Done",this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.removeAttribute("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0}))),this.editButton.textContent="Edit",this.isTextEditable=!1)}toggleEditable(){this.isTextEditable?this.setNonEditable():this.setEditable()}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,this.isDisabled||(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable))}attributeChangedCallback(t){"disable"===t&&(this.hasAttribute("disable")?(this.editButton.classList.add("hide"),this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable),this.revert()):(this.editButton.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable)}});
\ No newline at end of file
+const textField=document.createElement("template");textField.innerHTML='\n\n\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.editButton=this.textField.querySelector(".edit-button"),this.isTextEditable=!1,this.isDisabled=!1}static get observedAttributes(){return["disabled"]}get value(){return this.text}set value(val){this.text=val,this.textContainer.textContent=val,this.setAttribute("value",val)}set disabled(val){this.isDisabled=val,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}setEditable=()=>{this.isTextEditable||(this.textContainer.contentEditable=!0,this.setAttribute("editable",""),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.textContent="Done",this.isTextEditable=!0)};setNonEditable=()=>{this.isTextEditable&&(this.textContainer.contentEditable=!1,this.removeAttribute("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0}))),this.editButton.textContent="Edit",this.isTextEditable=!1)};toggleEditable=()=>{this.isTextEditable?this.setNonEditable():this.setEditable()};revert=()=>{this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())};connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disabled")?this.isDisabled=!0:this.isDisabled=!1,this.isDisabled||(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable))}attributeChangedCallback(name){"disabled"===name&&(this.hasAttribute("disabled")?(this.editButton.classList.add("hide"),this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable),this.revert()):(this.editButton.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable)}});
\ No newline at end of file