const textField=document.createElement("template");textField.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\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    .editable{\n        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n    }\n    .icon-container{\n        position: relative;\n        margin-left: 0.5rem;\n        height: 1.8rem;\n        width: 1.8rem;\n    }\n    :host([disabled]) .icon-container{\n        display: none;\n    }\n    .icon{\n        position: absolute;\n        cursor: pointer;\n        height: 2rem;\n        width: 2rem;\n        padding: 0.3rem;\n        fill: rgba(var(--text-color), 1);\n    }\n    .hide{\n        display: none;\n    }\n</style>\n<div class="text-field">\n    <div class="text" part="text"></div>\n    <div tabindex="0" class="icon-container">\n        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n            <title>Edit</title>\n            <path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/>\n        </svg>\n        <svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n            <title>Save</title>\n            <path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>\n        </svg>\n    </div>\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.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.saveButton=this.textField.querySelector(".save-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled"]}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("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.classList.add("hide")}),setTimeout(()=>{this.saveButton.classList.remove("hide"),this.saveButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)),this.saveButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.saveButton.classList.add("hide")}),setTimeout(()=>{this.editButton.classList.remove("hide"),this.editButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1)}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.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable))}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable)}});