From 716f52734ee8a43ddb4be4579e56fdcab98367c6 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Wed, 21 Dec 2022 20:44:38 +0530
Subject: [PATCH] UI changes

---
 components/dist/text-field.js     | 15 +++++++--------
 components/dist/text-field.min.js |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/dist/text-field.js b/components/dist/text-field.js
index 013fe60..ebf19de 100644
--- a/components/dist/text-field.js
+++ b/components/dist/text-field.js
@@ -26,9 +26,11 @@ textField.innerHTML = `
         outline: none;
         border-bottom: 0.15rem solid var(--accent-color);
     }
-    .text:focus-visible{
-        outline: none;
-        background: solid rgba(var(--text-color), 0.06);
+    :host([editable]) .text{
+        border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6);
+    }
+    :host(:focus-within)  .text{
+        border-bottom: 0.15rem solid var(--accent-color);
     }
     .edit-button{
         display: inline-flex;
@@ -48,17 +50,14 @@ textField.innerHTML = `
         margin-left: 0.3rem;
     }
     .edit-button:active{
-        background-color: var(--button-background-color);
-    }
-    :host([editable]){
-        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);
+        background-color: rgba(var(--text-color, (17,17,17)), 0.1);
     }
     .hide{
         display: none;
     }
     @media (any-hover: hover){
         .edit-button:hover{
-            background-color: var(--button-background-color);
+            background-color: rgba(var(--text-color, (17,17,17)), 0.1);
         }
     }
 </style>
diff --git a/components/dist/text-field.min.js b/components/dist/text-field.min.js
index 955bb75..800df54 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    .text:focus-visible{\n        outline: none;\n        background: solid rgba(var(--text-color), 0.06);\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: var(--button-background-color);\n    }\n    :host([editable]){\n        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n    }\n    .hide{\n        display: none;\n    }\n    @media (any-hover: hover){\n        .edit-button:hover{\n            background-color: var(--button-background-color);\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(: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