From 991764096a63c218eb73704885883111e8858266 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Mon, 16 Oct 2023 19:40:52 +0530
Subject: [PATCH] changed 'disable' attribute to 'disabled'

---
 components/dist/text-field.js     | 25 ++++++++++---------------
 components/dist/text-field.min.js |  2 +-
 2 files changed, 11 insertions(+), 16 deletions(-)

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<style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    } \n    .text-field{\n        display: flex;\n        align-items: center;\n    }\n    .text{\n        padding: 0.6rem 0;\n        transition: background-color 0.3s;\n        border-bottom: 0.15rem solid transparent;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n    }\n    .text:focus{\n        outline: none;\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    :host([editable]) .text{\n        border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6);\n    }\n    :host([editable]:focus-within)  .text{\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    .edit-button{\n        display: inline-flex;\n        justify-content: center;\n        cursor: pointer;\n        border: none;\n        padding: 0.4rem;\n        background-color: rgba(var(--text-color, (17,17,17)), 0.06);\n        border-radius: var(--button-border-radius, 0.3rem);\n        transition: background-color 0.2s;\n        font-family: inherit;\n        color: inherit;\n        font-size: 0.7rem;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.05rem;\n        margin-left: 0.3rem;\n    }\n    .edit-button:active{\n        background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n    }\n    .hide{\n        display: none;\n    }\n    @media (any-hover: hover){\n        .edit-button:hover{\n            background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n        }\n    }\n</style>\n<div class="text-field">\n    <div class="text" part="text"></div>\n    <button class="edit-button" part="edit-button">Edit</button>\n</div>\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<style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    } \n    .text-field{\n        display: flex;\n        align-items: center;\n    }\n    .text{\n        padding: 0.6rem 0;\n        transition: background-color 0.3s;\n        border-bottom: 0.15rem solid transparent;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n    }\n    .text:focus{\n        outline: none;\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    :host([editable]) .text{\n        border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6);\n    }\n    :host([editable]:focus-within)  .text{\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    .edit-button{\n        display: inline-flex;\n        justify-content: center;\n        cursor: pointer;\n        border: none;\n        padding: 0.4rem;\n        background-color: rgba(var(--text-color, (17,17,17)), 0.06);\n        border-radius: var(--button-border-radius, 0.3rem);\n        transition: background-color 0.2s;\n        font-family: inherit;\n        color: inherit;\n        font-size: 0.7rem;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.05rem;\n        margin-left: 0.3rem;\n    }\n    .edit-button:active{\n        background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n    }\n    .hide{\n        display: none;\n    }\n    @media (any-hover: hover){\n        .edit-button:hover{\n            background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n        }\n    }\n</style>\n<div class="text-field">\n    <div class="text" part="text"></div>\n    <button class="edit-button" part="edit-button">Edit</button>\n</div>\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