From cc254e21dff88b034db965a3253ce1885358fc33 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 30 Nov 2023 02:23:18 +0530
Subject: [PATCH] Bug fixes

---
 components/dist/chips.js     | 19 +++++++++++++------
 components/dist/chips.min.js |  2 +-
 components/dist/copy.min.js  |  2 +-
 components/test.html         | 15 ++-------------
 main_UI.js                   | 22 +++++++++++++++++-----
 main_UI.min.js               |  2 +-
 6 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/components/dist/chips.js b/components/dist/chips.js
index 9e2b76b..30f7a6b 100644
--- a/components/dist/chips.js
+++ b/components/dist/chips.js
@@ -202,7 +202,6 @@ customElements.define('sm-chips', class extends HTMLElement {
     }
     connectedCallback() {
         this.setAttribute('role', 'listbox');
-
         const slot = this.shadowRoot.querySelector('slot');
         slot.addEventListener('slotchange', e => {
             firstOptionObserver.disconnect();
@@ -212,11 +211,6 @@ customElements.define('sm-chips', class extends HTMLElement {
             clearTimeout(this.slotChangeTimeout);
             this.slotChangeTimeout = setTimeout(() => {
                 this.assignedElements = slot.assignedElements();
-                this.assignedElements.forEach(elem => {
-                    if (elem.hasAttribute('selected')) {
-                        this._value = elem.value;
-                    }
-                });
                 this.observeSelf.observe(this);
             }, 0);
         });
@@ -339,6 +333,9 @@ customElements.define('sm-chip', class extends HTMLElement {
         this.fireEvent = this.fireEvent.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
     }
+    static get observedAttributes() {
+        return ['selected'];
+    }
     get value() {
         return this._value;
     }
@@ -365,6 +362,16 @@ customElements.define('sm-chip', class extends HTMLElement {
         this.addEventListener('click', this.fireEvent);
         this.addEventListener('keydown', this.handleKeyDown);
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'selected') {
+            if (newValue !== null) {
+                this.fireEvent();
+                this.setAttribute('aria-selected', 'true');
+            } else {
+                this.removeAttribute('aria-selected');
+            }
+        }
+    }
     disconnectedCallback() {
         this.removeEventListener('click', this.fireEvent);
         this.removeEventListener('keydown', this.handleKeyDown);
diff --git a/components/dist/chips.min.js b/components/dist/chips.min.js
index a3d5ba3..d48a103 100644
--- a/components/dist/chips.min.js
+++ b/components/dist/chips.min.js
@@ -1 +1 @@
-const smChips=document.createElement("template");smChips.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        padding: 1rem 0;\n        max-width: 100%;\n    }\n    .hide{\n        opacity: 0;\n        pointer-events: none;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: grid;\n        grid-template-columns: min-content minmax(0,1fr) min-content;\n        grid-template-rows: 1fr;\n    }\n    .sm-chips{\n        display: flex;\n        position: relative;\n        grid-area: 1/1/2/-1;\n        gap: var(--gap, 0.5rem);\n        overflow: auto hidden;\n    }\n    :host([multiline]) .sm-chips{\n        flex-wrap: wrap;\n    }\n    :host(:not([multiline])) .sm-chips{\n        max-width: 100%;   \n        align-items: center;\n    }\n    .nav-button{\n        display: flex;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        align-items: center;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n        grid-row: 1;\n        transition: opacity 0.2s;\n    }\n    .nav-button--left{\n        grid-column: 1;\n        justify-self: start;\n    }\n    .nav-button--right{\n        grid-column: 3;\n        justify-self: end;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n        grid-row: 1;\n        transition: opacity 0.2s;\n    }\n    .cover--left{\n        grid-column: 1;\n    }\n    .cover--right{\n        grid-column: 3;\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color,(17,17,17)), .8);\n    }\n    @media (hover: none){\n        ::-webkit-scrollbar {\n            height: 0;\n        }\n        .nav-button{\n            display: none;\n        }\n        .sm-chips{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .sm-chips{\n            overflow: hidden;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <section class="sm-chips" part="chips-wrapper">\n        <slot></slot>\n    </section>\n    <button class="nav-button nav-button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="cover cover--right hide"></div>\n</section>\n\n',customElements.define("sm-chips",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChips.content.cloneNode(!0)),this.chipsWrapper=this.shadowRoot.querySelector(".sm-chips"),this.coverLeft=this.shadowRoot.querySelector(".cover--left"),this.coverRight=this.shadowRoot.querySelector(".cover--right"),this.navButtonLeft=this.shadowRoot.querySelector(".nav-button--left"),this.navButtonRight=this.shadowRoot.querySelector(".nav-button--right"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(t){this.setSelectedOption(t)}scrollLeft(){this.chipsWrapper.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.chipsWrapper.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(t){this._value!==t&&(this._value=t,this.assignedElements.forEach(e=>{e.value==t?(e.setAttribute("selected",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):e.removeAttribute("selected")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{n.disconnect(),i.disconnect(),this.observeSelf.disconnect(),clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout(()=>{this.assignedElements=t.assignedElements(),this.assignedElements.forEach(t=>{t.hasAttribute("selected")&&(this._value=t.value)}),this.observeSelf.observe(this)},0)});const e=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});e.observe(this),this.observeSelf=new IntersectionObserver((t,e)=>{t.forEach(t=>{t.isIntersecting&&!this.hasAttribute("multiline")&&this.assignedElements.length>0&&(n.observe(this.assignedElements[0]),i.observe(this.assignedElements[this.assignedElements.length-1]),e.unobserve(this))})},{threshold:1}),this.chipsWrapper.addEventListener("option-clicked",t=>{this._value!==t.target.value&&(this.setSelectedOption(t.target.value),this.fireEvent())});const n=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(this.navButtonLeft.classList.add("hide"),this.coverLeft.classList.add("hide")):(this.navButtonLeft.classList.remove("hide"),this.coverLeft.classList.remove("hide"))})},{threshold:1,root:this}),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(this.navButtonRight.classList.add("hide"),this.coverRight.classList.add("hide")):(this.navButtonRight.classList.remove("hide"),this.coverRight.classList.remove("hide"))})},{threshold:1,root:this});this.navButtonLeft.addEventListener("click",this.scrollLeft),this.navButtonRight.addEventListener("click",this.scrollRight)}disconnectedCallback(){this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.navButtonRight.removeEventListener("click",this.scrollRight)}});const smChip=document.createElement("template");smChip.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .sm-chip{\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    :host(:hover:not([selected])) .sm-chip{\n        background-color: rgba(var(--text-color,(17,17,17)), 0.06);\n    }\n    .sm-chip{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: var(--padding, 0.5rem 0.8rem);\n        transition: background 0.3s;\n        border-radius: var(--border-radius, 0.5rem);\n        -webkit-tap-highlight-color: transparent;\n        background: var(--background,inherit);\n    }\n    :host([selected]) .sm-chip{\n        background-color: var(--accent-color, teal);\n        color: rgba(var(--background-color, (255,255,255)), 1);\n    }\n</style>\n<span class="sm-chip" part="chip">\n    <slot></slot>\n</span>\n',customElements.define("sm-chip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChip.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
\ No newline at end of file
+const smChips=document.createElement("template");smChips.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        padding: 1rem 0;\n        max-width: 100%;\n    }\n    .hide{\n        opacity: 0;\n        pointer-events: none;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: grid;\n        grid-template-columns: min-content minmax(0,1fr) min-content;\n        grid-template-rows: 1fr;\n    }\n    .sm-chips{\n        display: flex;\n        position: relative;\n        grid-area: 1/1/2/-1;\n        gap: var(--gap, 0.5rem);\n        overflow: auto hidden;\n    }\n    :host([multiline]) .sm-chips{\n        flex-wrap: wrap;\n    }\n    :host(:not([multiline])) .sm-chips{\n        max-width: 100%;   \n        align-items: center;\n    }\n    .nav-button{\n        display: flex;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        align-items: center;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n        grid-row: 1;\n        transition: opacity 0.2s;\n    }\n    .nav-button--left{\n        grid-column: 1;\n        justify-self: start;\n    }\n    .nav-button--right{\n        grid-column: 3;\n        justify-self: end;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n        grid-row: 1;\n        transition: opacity 0.2s;\n    }\n    .cover--left{\n        grid-column: 1;\n    }\n    .cover--right{\n        grid-column: 3;\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color,(17,17,17)), .8);\n    }\n    @media (hover: none){\n        ::-webkit-scrollbar {\n            height: 0;\n        }\n        .nav-button{\n            display: none;\n        }\n        .sm-chips{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .sm-chips{\n            overflow: hidden;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <section class="sm-chips" part="chips-wrapper">\n        <slot></slot>\n    </section>\n    <button class="nav-button nav-button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="cover cover--right hide"></div>\n</section>\n\n',customElements.define("sm-chips",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChips.content.cloneNode(!0)),this.chipsWrapper=this.shadowRoot.querySelector(".sm-chips"),this.coverLeft=this.shadowRoot.querySelector(".cover--left"),this.coverRight=this.shadowRoot.querySelector(".cover--right"),this.navButtonLeft=this.shadowRoot.querySelector(".nav-button--left"),this.navButtonRight=this.shadowRoot.querySelector(".nav-button--right"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(val){this.setSelectedOption(val)}scrollLeft(){this.chipsWrapper.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.chipsWrapper.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(value){this._value!==value&&(this._value=value,this.assignedElements.forEach((elem=>{elem.value==value?(elem.setAttribute("selected",""),elem.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):elem.removeAttribute("selected")})))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const slot=this.shadowRoot.querySelector("slot");slot.addEventListener("slotchange",(e=>{firstOptionObserver.disconnect(),lastOptionObserver.disconnect(),this.observeSelf.disconnect(),clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout((()=>{this.assignedElements=slot.assignedElements(),this.observeSelf.observe(this)}),0)}));new ResizeObserver((entries=>{entries.forEach((entry=>{if(entry.contentBoxSize){const contentBoxSize=Array.isArray(entry.contentBoxSize)?entry.contentBoxSize[0]:entry.contentBoxSize;this.scrollDistance=.6*contentBoxSize.inlineSize}else this.scrollDistance=.6*entry.contentRect.width}))})).observe(this),this.observeSelf=new IntersectionObserver(((entries,observer)=>{entries.forEach((entry=>{entry.isIntersecting&&!this.hasAttribute("multiline")&&this.assignedElements.length>0&&(firstOptionObserver.observe(this.assignedElements[0]),lastOptionObserver.observe(this.assignedElements[this.assignedElements.length-1]),observer.unobserve(this))}))}),{threshold:1}),this.chipsWrapper.addEventListener("option-clicked",(e=>{this._value!==e.target.value&&(this.setSelectedOption(e.target.value),this.fireEvent())}));const firstOptionObserver=new IntersectionObserver((entries=>{entries.forEach((entry=>{entry.isIntersecting?(this.navButtonLeft.classList.add("hide"),this.coverLeft.classList.add("hide")):(this.navButtonLeft.classList.remove("hide"),this.coverLeft.classList.remove("hide"))}))}),{threshold:1,root:this}),lastOptionObserver=new IntersectionObserver((entries=>{entries.forEach((entry=>{entry.isIntersecting?(this.navButtonRight.classList.add("hide"),this.coverRight.classList.add("hide")):(this.navButtonRight.classList.remove("hide"),this.coverRight.classList.remove("hide"))}))}),{threshold:1,root:this});this.navButtonLeft.addEventListener("click",this.scrollLeft),this.navButtonRight.addEventListener("click",this.scrollRight)}disconnectedCallback(){this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.navButtonRight.removeEventListener("click",this.scrollRight)}});const smChip=document.createElement("template");smChip.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .sm-chip{\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    :host(:hover:not([selected])) .sm-chip{\n        background-color: rgba(var(--text-color,(17,17,17)), 0.06);\n    }\n    .sm-chip{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: var(--padding, 0.5rem 0.8rem);\n        transition: background 0.3s;\n        border-radius: var(--border-radius, 0.5rem);\n        -webkit-tap-highlight-color: transparent;\n        background: var(--background,inherit);\n    }\n    :host([selected]) .sm-chip{\n        background-color: var(--accent-color, teal);\n        color: rgba(var(--background-color, (255,255,255)), 1);\n    }\n</style>\n<span class="sm-chip" part="chip">\n    <slot></slot>\n</span>\n',customElements.define("sm-chip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChip.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["selected"]}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(e){"Enter"!==e.key&&"Space"!==e.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(name,oldValue,newValue){"selected"===name&&(null!==newValue?(this.fireEvent(),this.setAttribute("aria-selected","true")):this.removeAttribute("aria-selected"))}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
\ No newline at end of file
diff --git a/components/dist/copy.min.js b/components/dist/copy.min.js
index 5400b6b..5da61d7 100644
--- a/components/dist/copy.min.js
+++ b/components/dist/copy.min.js
@@ -1 +1 @@
-const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-box;\n    display: flex;\n    --padding: 0;\n    --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);\n}\n.copy{\n    display: grid;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-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}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content">\n        <slot></slot>\n    </p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n        COPY\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then(t=>this.fireEvent()).catch(t=>console.error(t))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(t,n,o){if("value"===t){const t=this.copyContent.querySelector("slot");if(!t)return;const n=t.assignedNodes();n&&n.length||(t.textContent=o)}}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
\ No newline at end of file
+const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-box;\n    display: flex;\n    --padding: 0;\n    --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);\n}\n.copy{\n    display: grid;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-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}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content">\n        <slot></slot>\n    </p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n        COPY\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(val){this.setAttribute("value",val)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then((res=>this.fireEvent())).catch((err=>console.error(err)))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(name,oldValue,newValue){if("value"===name){const slot=this.copyContent.querySelector("slot");if(!slot)return;const assignedNodes=slot.assignedNodes();assignedNodes&&assignedNodes.length||(slot.textContent=newValue)}}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
\ No newline at end of file
diff --git a/components/test.html b/components/test.html
index 9ceca23..ebb5ac6 100644
--- a/components/test.html
+++ b/components/test.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <script src="dist/copy.js"></script>
     <script src="dist/select.js"></script>
     <script src="dist/form.js"></script>
     <script src="dist/popup.js"></script>
@@ -36,21 +37,9 @@
 </head>
 
 <body>
-    <sm-form>
-        <sm-input placeholder="fafh" value="" animate required>
-            <sm-button slot="right" type="submit">Submit</sm-button>
-        </sm-input>
-        <sm-input placeholder="fafh" value="" animate required>
-            <sm-button slot="right" type="submit">Submit</sm-button>
-        </sm-input>
-        <sm-input placeholder="fafh" value="" animate required>
-            <sm-button slot="right" type="submit">Submit</sm-button>
-        </sm-input>
-        <button type="submit">Submit</button>
-    </sm-form>
+    <sm-copy value="hi dhf jsbdjf sjdb"></sm-copy>
 </body>
 <script>
-    document.querySelector('sm-input').isValid
     let currentSubscriber = null;
     /**
      * @param {any} initialValue - initial value for the signal
diff --git a/main_UI.js b/main_UI.js
index d8e1d4c..3de4660 100644
--- a/main_UI.js
+++ b/main_UI.js
@@ -140,8 +140,7 @@ function openPopup(popupId, pinned) {
     }
     zIndex++
     getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
-    getRef(popupId).show({ pinned })
-    return getRef(popupId);
+    return getRef(popupId).show({ pinned })
 }
 
 // hides the popup or modal
@@ -783,14 +782,17 @@ function showChildElement(id, index, options = {}) {
 }
 function buttonLoader(id, show) {
     const button = typeof id === 'string' ? document.getElementById(id) : id;
-    button.disabled = show;
+    if (!button) return
+    if (!button.dataset.hasOwnProperty('wasDisabled'))
+        button.dataset.wasDisabled = button.disabled
     const animOptions = {
         duration: 200,
         fill: 'forwards',
         easing: 'ease'
     }
     if (show) {
-        button.parentNode.append(createElement('sm-spinner'))
+        button.disabled = true
+        button.parentNode.append(document.createElement('sm-spinner'))
         button.animate([
             {
                 clipPath: 'circle(100%)',
@@ -800,7 +802,17 @@ function buttonLoader(id, show) {
             },
         ], animOptions)
     } else {
-        button.getAnimations().forEach(anim => anim.cancel())
+        button.disabled = button.dataset.wasDisabled === 'true';
+        button.animate([
+            {
+                clipPath: 'circle(0)',
+            },
+            {
+                clipPath: 'circle(100%)',
+            },
+        ], animOptions).onfinish = (e) => {
+            button.removeAttribute('data-original-state')
+        }
         const potentialTarget = button.parentNode.querySelector('sm-spinner')
         if (potentialTarget) potentialTarget.remove();
     }
diff --git a/main_UI.min.js b/main_UI.min.js
index 2145b50..d7ce03a 100644
--- a/main_UI.min.js
+++ b/main_UI.min.js
@@ -1 +1 @@
-!function(e,t){var o=o||{};"function"==typeof o&&o.amd?o([],t):"object"==typeof exports&&"object"==typeof module?module.exports=t():"object"==typeof exports?exports.RelativeTime=t():e.RelativeTime=t()}(this,(function(){const e={year:31536e6,month:2628e6,day:864e5,hour:36e5,minute:6e4,second:1e3},o={numeric:"auto"};function n(e){e={locale:(e=e||{}).locale||"en",options:{...o,...e.options}},this.rtf=new Intl.RelativeTimeFormat(e.locale,e.options)}return n.prototype={from(t,o){const n=t-(o||new Date);for(let t in e)if(Math.abs(n)>e[t]||"second"==t)return this.rtf.format(Math.round(n/e[t]),t)}},n}));const relativeTime=new RelativeTime({style:"narrow"}),uiGlobals={};let timerId;function getRef(id){return document.getElementById(id)}const uiUtils={createElement(tagName,options){const{className:className,textContent:textContent,innerHTML:innerHTML,attributes:attributes={}}=options,elem=document.createElement(tagName);for(let attribute in attributes)elem.setAttribute(attribute,attributes[attribute]);return className&&(elem.className=className),textContent&&(elem.textContent=textContent),innerHTML&&(elem.innerHTML=innerHTML),elem},debounce:(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}},throttle(func,delay){timerId||(timerId=setTimeout((function(){func(),timerId=void 0}),delay))},delegate(el,event,selector,fn){el.addEventListener(event,(function(e){const potentialTarget=e.target.closest(selector);potentialTarget&&(e.delegateTarget=potentialTarget,fn.call(this,e))}))},formatTime(timestamp,format){try{String(timestamp).length<13&&(timestamp*=1e3);let[day,month,date,year]=new Date(timestamp).toString().split(" "),minutes=new Date(timestamp).getMinutes(),hours=new Date(timestamp).getHours();(new Date).toString().split(" ");minutes=minutes<10?`0${minutes}`:minutes;let finalHours="";switch(finalHours=hours>12?`${hours-12}:${minutes}`:0===hours?`12:${minutes}`:`${hours}:${minutes}`,finalHours=hours>=12?`${finalHours} PM`:`${finalHours} AM`,format){case"date-only":return`${month} ${date}, ${year}`;case"time-only":return finalHours;case"relative":return Date.now()-new Date(timestamp)<864e5?`${finalHours}`:relativeTime.from(timestamp);default:return`${month} ${date}, ${year} at ${finalHours}`}}catch(e){return console.error(e),timestamp}},formatAmount:(amount=0,currency="inr")=>amount?amount.toLocaleString(void 0,{currency:currency,maximumFractionDigits:8,minimumFractionDigits:0}):"0"};uiGlobals.connectionErrorNotification=[],navigator.onLine||uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error")),window.addEventListener("offline",(()=>{uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error"))})),window.addEventListener("online",(()=>{uiGlobals.connectionErrorNotification.forEach((notification=>notification.remove())),notify("We are back online.","success"),location.reload(),uiGlobals.connectionErrorNotification=[]}));let zIndex=50;function openPopup(popupId,pinned){return void 0===popupStack.peek()&&document.addEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()})),zIndex++,getRef(popupId).setAttribute("style",`z-index: ${zIndex}`),getRef(popupId).show({pinned:pinned}),getRef(popupId)}function closePopup(options={}){void 0!==popupStack.peek()&&popupStack.peek().popup.hide(options)}document.addEventListener("popupopened",(async e=>{history.pushState({type:"popup"},null,null),e.target.id})),document.addEventListener("popupclosed",(e=>{zIndex--,e.target.id,void 0===popupStack.peek()&&document.removeEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()}))})),window.addEventListener("popstate",(e=>{if(e.state&&"popup"===e.state.type)closePopup()}));const getConfirmation=(title,options={})=>new Promise((resolve=>{const{message:message="",cancelText:cancelText="Cancel",confirmText:confirmText="OK",danger:danger=!1}=options;getRef("confirm_title").innerText=title,getRef("confirm_message").innerText=message;const cancelButton=getRef("confirmation_popup").querySelector(".cancel-button"),confirmButton=getRef("confirmation_popup").querySelector(".confirm-button");confirmButton.textContent=confirmText,cancelButton.textContent=cancelText,danger?confirmButton.classList.add("button--danger"):confirmButton.classList.remove("button--danger");const{opened:opened,closed:closed}=openPopup("confirmation_popup");confirmButton.onclick=()=>{closePopup({payload:!0})},cancelButton.onclick=()=>{closePopup()},closed.then((payload=>{confirmButton.onclick=null,cancelButton.onclick=null,resolve(!!payload)}))}));function getPromptInput(title,message="",options={}){let{placeholder:placeholder="",isPassword:isPassword=!1,cancelText:cancelText="Cancel",confirmText:confirmText="OK"}=options;getRef("prompt_title").innerText=title,getRef("prompt_message").innerText=message;const cancelButton=getRef("prompt_popup").querySelector(".cancel-button"),confirmButton=getRef("prompt_popup").querySelector(".confirm-button");return isPassword&&(placeholder="Password",getRef("prompt_input").setAttribute("type","password")),getRef("prompt_input").setAttribute("placeholder",placeholder),getRef("prompt_input").focusIn(),cancelButton.textContent=cancelText,confirmButton.textContent=confirmText,openPopup("prompt_popup",!0),new Promise(((resolve,reject)=>{cancelButton.addEventListener("click",(()=>(closePopup(),null)),{once:!0}),confirmButton.addEventListener("click",(()=>{closePopup(),resolve(getRef("prompt_input").value)}),{once:!0})}))}function notify(message,mode,options={}){let icon;switch(mode){case"success":icon='<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><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"/></svg>';break;case"error":icon='<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>',options.pinned=!0}return"error"===mode&&console.error(message),getRef("notification_drawer").push(message,{icon:icon,...options})}function detectBrowser(){let tem,ua=navigator.userAgent,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)||[];return/trident/i.test(M[1])?(tem=/\brv[ :]+(\d+)/g.exec(ua)||[],"IE "+(tem[1]||"")):"Chrome"===M[1]&&(tem=ua.match(/\b(OPR|Edge)\/(\d+)/),null!=tem)?tem.slice(1).join(" ").replace("OPR","Opera"):(M=M[2]?[M[1],M[2]]:[navigator.appName,navigator.appVersion,"-?"],null!=(tem=ua.match(/version\/(\d+)/i))&&M.splice(1,1,tem[1]),M.join(" "))}function createRipple(event,target){const circle=document.createElement("span"),diameter=Math.max(target.clientWidth,target.clientHeight),radius=diameter/2,targetDimensions=target.getBoundingClientRect();circle.style.width=circle.style.height=`${diameter}px`,circle.style.left=event.clientX-(targetDimensions.left+radius)+"px",circle.style.top=event.clientY-(targetDimensions.top+radius)+"px",circle.classList.add("ripple");const rippleAnimation=circle.animate([{transform:"scale(3)",opacity:0}],{duration:1e3,fill:"forwards",easing:"ease-out"});target.append(circle),rippleAnimation.onfinish=()=>{circle.remove()}}window.addEventListener("hashchange",(e=>routeTo(window.location.hash))),window.addEventListener("load",(()=>{const[browserName,browserVersion]=detectBrowser().split(" "),supportedVersions={Chrome:85,Firefox:75,Safari:13};browserName in supportedVersions?parseInt(browserVersion)<supportedVersions[browserName]&&notify(`${browserName} ${browserVersion} is not fully supported, some features may not work properly. Please update to ${supportedVersions[browserName]} or higher.`,"error"):notify("Browser is not fully compatible, some features may not work. for best experience please use Chrome, Edge, Firefox or Safari","error"),routeTo(window.location.hash),document.body.classList.remove("hidden"),document.addEventListener("keyup",(e=>{"Escape"===e.key&&closePopup()})),document.addEventListener("copy",(()=>{notify("copied","success")})),document.addEventListener("pointerdown",(e=>{e.target.closest("button:not([disabled]),  .interactive")&&createRipple(e,e.target.closest("button, .interactive"))})),document.querySelectorAll(".popup__header__close, .close-popup-on-click").forEach((elem=>{elem.addEventListener("click",(()=>{closePopup()}))}))}));class Router{constructor(options={}){const{routes:routes={},state:state={},routingStart:routingStart,routingEnd:routingEnd}=options;this.routes=routes,this.state=state,this.routingStart=routingStart,this.routingEnd=routingEnd,this.lastPage=null,window.addEventListener("hashchange",(e=>this.routeTo(window.location.hash)))}addRoute(route,callback){this.routes[route]=callback}handleRouting=async page=>{this.routingStart&&this.routingStart(this.state),this.routes[page]?(await this.routes[page](this.state),this.lastPage=page):this.routes[404]?this.routes[404](this.state):console.error(`No route found for '${page}' and no '404' route is defined.`),this.routingEnd&&this.routingEnd(this.state)};async routeTo(destination){try{let page,wildcards=[],params={},[path,queryString]=destination.split("?");path.includes("#")&&(path=path.split("#")[1]),path.includes("/")?[,page,...wildcards]=path.split("/"):page=path,this.state={page:page,wildcards:wildcards,lastPage:this.lastPage,params:params},queryString&&(params=new URLSearchParams(queryString),this.state.params=Object.fromEntries(params)),document.startViewTransition?document.startViewTransition((async()=>{await this.handleRouting(page)})):await this.handleRouting(page)}catch(e){console.error(e)}}}const appState={params:{},openedPages:new Set},generalPages=["sign_up","sign_in","loading","landing"];async function routeTo(targetPage,options={}){const{firstLoad:firstLoad}=options;let pageId,subPageId1,subPageId2,searchParams,params;if(""===targetPage)try{floDapps.user.id&&(pageId="chat_page")}catch(e){pageId="landing"}else if(targetPage.includes("/")){let path;[path,searchParams]=targetPage.split("?"),[,pageId,subPageId1,subPageId2]=path.split("/")}else pageId=targetPage;if(document.querySelector(`#${pageId}`)?.classList.contains("inner-page")){try{floDapps.user.id&&generalPages.includes(pageId)&&(history.replaceState(null,null,"#/chat_page"),pageId="chat_page")}catch(e){if(!generalPages.includes(pageId))return}if(appState.currentPage=pageId,searchParams){const urlSearchParams=new URLSearchParams("?"+searchParams);params=Object.fromEntries(urlSearchParams.entries())}switch(params&&(appState.params=params),pageId){case"sign_in":setTimeout((()=>{getRef("private_key_field").focusIn()}),0);break;case"sign_up":getRef("keys_generator").generateKeys()}if(appState.lastPage!==pageId){document.querySelectorAll(".page").forEach((page=>page.classList.add("hidden"))),getRef(pageId).closest(".page").classList.remove("hidden"),document.querySelectorAll(".inner-page").forEach((page=>page.classList.add("hidden"))),getRef(pageId).classList.remove("hidden"),getRef(pageId).animate([{opacity:0,transform:"translateY(1rem)"},{opacity:1,transform:"translateY(0)"}],{duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"}).onfinish=()=>{},appState.lastPage=pageId}params&&(appState.params=params),appState.openedPages.add(pageId)}}class LazyLoader{constructor(container,elementsToRender,renderFn,options={}){const{batchSize:batchSize=10,freshRender:freshRender,bottomFirst:bottomFirst=!1,onEnd:onEnd}=options;this.elementsToRender=elementsToRender,this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[],this.renderFn=renderFn,this.intersectionObserver,this.batchSize=batchSize,this.freshRender=freshRender,this.bottomFirst=bottomFirst,this.onEnd=onEnd,this.shouldLazyLoad=!1,this.lastScrollTop=0,this.lastScrollHeight=0,this.lazyContainer=document.querySelector(container),this.update=this.update.bind(this),this.render=this.render.bind(this),this.init=this.init.bind(this),this.clear=this.clear.bind(this)}get elements(){return this.arrayOfElements}init(){this.mutationObserver&&this.mutationObserver.disconnect(),this.intersectionObserver&&this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(((entries,observer)=>{entries.forEach((entry=>{entry.isIntersecting&&(observer.disconnect(),this.render({lazyLoad:!0}))}))}),{root:this.lazyContainer}),this.mutationObserver=new MutationObserver((mutationList=>{mutationList.forEach((mutation=>{"childList"===mutation.type&&mutation.addedNodes.length&&(this.bottomFirst?this.lazyContainer.firstElementChild&&this.intersectionObserver.observe(this.lazyContainer.firstElementChild):this.lazyContainer.lastElementChild&&this.intersectionObserver.observe(this.lazyContainer.lastElementChild))}))})),this.mutationObserver.observe(this.lazyContainer,{childList:!0}),this.render()}update(elementsToRender){this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[]}render(options={}){let{lazyLoad:lazyLoad=!1}=options;this.shouldLazyLoad=lazyLoad;const frag=document.createDocumentFragment();lazyLoad?this.bottomFirst?(this.updateEndIndex=this.updateStartIndex,this.updateStartIndex=this.updateEndIndex-this.batchSize):(this.updateStartIndex=this.updateEndIndex,this.updateEndIndex=this.updateEndIndex+this.batchSize):(this.intersectionObserver.disconnect(),this.bottomFirst?(this.updateEndIndex=this.arrayOfElements.length,this.updateStartIndex=this.updateEndIndex-this.batchSize-1):(this.updateStartIndex=0,this.updateEndIndex=this.batchSize),this.lazyContainer.innerHTML=""),this.updateStartIndex=Math.max(this.updateStartIndex,0),this.lastScrollHeight=this.lazyContainer.scrollHeight,this.lastScrollTop=this.lazyContainer.scrollTop,this.arrayOfElements.slice(this.updateStartIndex,this.updateEndIndex).forEach(((element,index)=>{frag.append(this.renderFn(element))})),this.bottomFirst?(this.lazyContainer.prepend(frag),this.lastScrollTop+=this.lazyContainer.scrollHeight-this.lastScrollHeight,this.lazyContainer.scrollTo({top:this.lastScrollTop}),this.lastScrollHeight=this.lazyContainer.scrollHeight,this.updateStartIndex<=0&&this.onEnd&&(this.mutationObserver.disconnect(),this.intersectionObserver.disconnect(),this.onEnd())):(this.lazyContainer.append(frag),this.updateEndIndex>=this.arrayOfElements.length&&this.onEnd&&(this.mutationObserver.disconnect(),this.intersectionObserver.disconnect(),this.onEnd())),!lazyLoad&&this.bottomFirst&&(this.lazyContainer.scrollTop=this.lazyContainer.scrollHeight),!lazyLoad&&this.freshRender&&this.freshRender()}clear(){this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.lazyContainer.innerHTML=""}reset(){this.arrayOfElements="function"==typeof this.elementsToRender?this.elementsToRender():this.elementsToRender||[],this.render()}}const slideInLeft=[{opacity:0,transform:"translateX(1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutLeft=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-1.5rem)"}],slideInRight=[{opacity:0,transform:"translateX(-1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutRight=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(1.5rem)"}],slideInDown=[{opacity:0,transform:"translateY(-1.5rem)"},{opacity:1,transform:"translateY(0)"}],slideOutUp=[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-1.5rem)"}];function showChildElement(id,index,options={}){return new Promise((resolve=>{const{mobileView:mobileView=!1,entry:entry,exit:exit}=options,animOptions={duration:150,easing:"ease",fill:"forwards"},parent="string"==typeof id?document.getElementById(id):id,visibleElement=[...parent.children].find((elem=>!elem.classList.contains(mobileView?"hide-on-mobile":"hidden")));visibleElement!==parent.children[index]&&(visibleElement.getAnimations().forEach((anim=>anim.cancel())),parent.children[index].getAnimations().forEach((anim=>anim.cancel())),visibleElement?exit?visibleElement.animate(exit,animOptions).onfinish=()=>{visibleElement.classList.add(mobileView?"hide-on-mobile":"hidden"),parent.children[index].classList.remove(mobileView?"hide-on-mobile":"hidden"),entry&&(parent.children[index].animate(entry,animOptions).onfinish=()=>resolve())}:(visibleElement.classList.add(mobileView?"hide-on-mobile":"hidden"),parent.children[index].classList.remove(mobileView?"hide-on-mobile":"hidden"),resolve()):(parent.children[index].classList.remove(mobileView?"hide-on-mobile":"hidden"),parent.children[index].animate(entry,animOptions).onfinish=()=>resolve()))}))}function buttonLoader(id,show){const button="string"==typeof id?document.getElementById(id):id;button.disabled=show;const animOptions={duration:200,fill:"forwards",easing:"ease"};if(show)button.parentNode.append(createElement("sm-spinner")),button.animate([{clipPath:"circle(100%)"},{clipPath:"circle(0)"}],animOptions);else{button.getAnimations().forEach((anim=>anim.cancel()));const potentialTarget=button.parentNode.querySelector("sm-spinner");potentialTarget&&potentialTarget.remove()}}let currentSubscriber=null;function $signal(initialValue,callback){let value=initialValue;const subscribers=new Set;let hasCustomSubscriber=!1;return[function(subscriber){return currentSubscriber&&subscribers.add(currentSubscriber),!hasCustomSubscriber&&subscriber&&(subscribers.add(subscriber),hasCustomSubscriber=!0),value},function(newValue){if(newValue!==value){value=newValue;for(const subscriber of subscribers)subscriber()}}]}async function $effect(fn){currentSubscriber=fn;const result=fn();try{result instanceof Promise&&await result}catch(e){console.error(e)}finally{currentSubscriber=null}}
\ No newline at end of file
+!function(e,t){var o=o||{};"function"==typeof o&&o.amd?o([],t):"object"==typeof exports&&"object"==typeof module?module.exports=t():"object"==typeof exports?exports.RelativeTime=t():e.RelativeTime=t()}(this,(function(){const e={year:31536e6,month:2628e6,day:864e5,hour:36e5,minute:6e4,second:1e3},o={numeric:"auto"};function n(e){e={locale:(e=e||{}).locale||"en",options:{...o,...e.options}},this.rtf=new Intl.RelativeTimeFormat(e.locale,e.options)}return n.prototype={from(t,o){const n=t-(o||new Date);for(let t in e)if(Math.abs(n)>e[t]||"second"==t)return this.rtf.format(Math.round(n/e[t]),t)}},n}));const relativeTime=new RelativeTime({style:"narrow"}),uiGlobals={};let timerId;function getRef(id){return document.getElementById(id)}const uiUtils={createElement(tagName,options){const{className:className,textContent:textContent,innerHTML:innerHTML,attributes:attributes={}}=options,elem=document.createElement(tagName);for(let attribute in attributes)elem.setAttribute(attribute,attributes[attribute]);return className&&(elem.className=className),textContent&&(elem.textContent=textContent),innerHTML&&(elem.innerHTML=innerHTML),elem},debounce:(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}},throttle(func,delay){timerId||(timerId=setTimeout((function(){func(),timerId=void 0}),delay))},delegate(el,event,selector,fn){el.addEventListener(event,(function(e){const potentialTarget=e.target.closest(selector);potentialTarget&&(e.delegateTarget=potentialTarget,fn.call(this,e))}))},formatTime(timestamp,format){try{String(timestamp).length<13&&(timestamp*=1e3);let[day,month,date,year]=new Date(timestamp).toString().split(" "),minutes=new Date(timestamp).getMinutes(),hours=new Date(timestamp).getHours();(new Date).toString().split(" ");minutes=minutes<10?`0${minutes}`:minutes;let finalHours="";switch(finalHours=hours>12?`${hours-12}:${minutes}`:0===hours?`12:${minutes}`:`${hours}:${minutes}`,finalHours=hours>=12?`${finalHours} PM`:`${finalHours} AM`,format){case"date-only":return`${month} ${date}, ${year}`;case"time-only":return finalHours;case"relative":return Date.now()-new Date(timestamp)<864e5?`${finalHours}`:relativeTime.from(timestamp);default:return`${month} ${date}, ${year} at ${finalHours}`}}catch(e){return console.error(e),timestamp}},formatAmount:(amount=0,currency="inr")=>amount?amount.toLocaleString(void 0,{currency:currency,maximumFractionDigits:8,minimumFractionDigits:0}):"0"};uiGlobals.connectionErrorNotification=[],navigator.onLine||uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error")),window.addEventListener("offline",(()=>{uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error"))})),window.addEventListener("online",(()=>{uiGlobals.connectionErrorNotification.forEach((notification=>notification.remove())),notify("We are back online.","success"),location.reload(),uiGlobals.connectionErrorNotification=[]}));let zIndex=50;function openPopup(popupId,pinned){return void 0===popupStack.peek()&&document.addEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()})),zIndex++,getRef(popupId).setAttribute("style",`z-index: ${zIndex}`),getRef(popupId).show({pinned:pinned})}function closePopup(options={}){void 0!==popupStack.peek()&&popupStack.peek().popup.hide(options)}document.addEventListener("popupopened",(async e=>{history.pushState({type:"popup"},null,null),e.target.id})),document.addEventListener("popupclosed",(e=>{zIndex--,e.target.id,void 0===popupStack.peek()&&document.removeEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()}))})),window.addEventListener("popstate",(e=>{if(e.state&&"popup"===e.state.type)closePopup()}));const getConfirmation=(title,options={})=>new Promise((resolve=>{const{message:message="",cancelText:cancelText="Cancel",confirmText:confirmText="OK",danger:danger=!1}=options;getRef("confirm_title").innerText=title,getRef("confirm_message").innerText=message;const cancelButton=getRef("confirmation_popup").querySelector(".cancel-button"),confirmButton=getRef("confirmation_popup").querySelector(".confirm-button");confirmButton.textContent=confirmText,cancelButton.textContent=cancelText,danger?confirmButton.classList.add("button--danger"):confirmButton.classList.remove("button--danger");const{opened:opened,closed:closed}=openPopup("confirmation_popup");confirmButton.onclick=()=>{closePopup({payload:!0})},cancelButton.onclick=()=>{closePopup()},closed.then((payload=>{confirmButton.onclick=null,cancelButton.onclick=null,resolve(!!payload)}))}));function getPromptInput(title,message="",options={}){let{placeholder:placeholder="",isPassword:isPassword=!1,cancelText:cancelText="Cancel",confirmText:confirmText="OK"}=options;getRef("prompt_title").innerText=title,getRef("prompt_message").innerText=message;const cancelButton=getRef("prompt_popup").querySelector(".cancel-button"),confirmButton=getRef("prompt_popup").querySelector(".confirm-button");return isPassword&&(placeholder="Password",getRef("prompt_input").setAttribute("type","password")),getRef("prompt_input").setAttribute("placeholder",placeholder),getRef("prompt_input").focusIn(),cancelButton.textContent=cancelText,confirmButton.textContent=confirmText,openPopup("prompt_popup",!0),new Promise(((resolve,reject)=>{cancelButton.addEventListener("click",(()=>(closePopup(),null)),{once:!0}),confirmButton.addEventListener("click",(()=>{closePopup(),resolve(getRef("prompt_input").value)}),{once:!0})}))}function notify(message,mode,options={}){let icon;switch(mode){case"success":icon='<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><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"/></svg>';break;case"error":icon='<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>',options.pinned=!0}return"error"===mode&&console.error(message),getRef("notification_drawer").push(message,{icon:icon,...options})}function detectBrowser(){let tem,ua=navigator.userAgent,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)||[];return/trident/i.test(M[1])?(tem=/\brv[ :]+(\d+)/g.exec(ua)||[],"IE "+(tem[1]||"")):"Chrome"===M[1]&&(tem=ua.match(/\b(OPR|Edge)\/(\d+)/),null!=tem)?tem.slice(1).join(" ").replace("OPR","Opera"):(M=M[2]?[M[1],M[2]]:[navigator.appName,navigator.appVersion,"-?"],null!=(tem=ua.match(/version\/(\d+)/i))&&M.splice(1,1,tem[1]),M.join(" "))}function createRipple(event,target){const circle=document.createElement("span"),diameter=Math.max(target.clientWidth,target.clientHeight),radius=diameter/2,targetDimensions=target.getBoundingClientRect();circle.style.width=circle.style.height=`${diameter}px`,circle.style.left=event.clientX-(targetDimensions.left+radius)+"px",circle.style.top=event.clientY-(targetDimensions.top+radius)+"px",circle.classList.add("ripple");const rippleAnimation=circle.animate([{transform:"scale(3)",opacity:0}],{duration:1e3,fill:"forwards",easing:"ease-out"});target.append(circle),rippleAnimation.onfinish=()=>{circle.remove()}}window.addEventListener("hashchange",(e=>routeTo(window.location.hash))),window.addEventListener("load",(()=>{const[browserName,browserVersion]=detectBrowser().split(" "),supportedVersions={Chrome:85,Firefox:75,Safari:13};browserName in supportedVersions?parseInt(browserVersion)<supportedVersions[browserName]&&notify(`${browserName} ${browserVersion} is not fully supported, some features may not work properly. Please update to ${supportedVersions[browserName]} or higher.`,"error"):notify("Browser is not fully compatible, some features may not work. for best experience please use Chrome, Edge, Firefox or Safari","error"),routeTo(window.location.hash),document.body.classList.remove("hidden"),document.addEventListener("keyup",(e=>{"Escape"===e.key&&closePopup()})),document.addEventListener("copy",(()=>{notify("copied","success")})),document.addEventListener("pointerdown",(e=>{e.target.closest("button:not([disabled]),  .interactive")&&createRipple(e,e.target.closest("button, .interactive"))})),document.querySelectorAll(".popup__header__close, .close-popup-on-click").forEach((elem=>{elem.addEventListener("click",(()=>{closePopup()}))}))}));class Router{constructor(options={}){const{routes:routes={},state:state={},routingStart:routingStart,routingEnd:routingEnd}=options;this.routes=routes,this.state=state,this.routingStart=routingStart,this.routingEnd=routingEnd,this.lastPage=null,window.addEventListener("hashchange",(e=>this.routeTo(window.location.hash)))}addRoute(route,callback){this.routes[route]=callback}handleRouting=async page=>{this.routingStart&&this.routingStart(this.state),this.routes[page]?(await this.routes[page](this.state),this.lastPage=page):this.routes[404]?this.routes[404](this.state):console.error(`No route found for '${page}' and no '404' route is defined.`),this.routingEnd&&this.routingEnd(this.state)};async routeTo(destination){try{let page,wildcards=[],params={},[path,queryString]=destination.split("?");path.includes("#")&&(path=path.split("#")[1]),path.includes("/")?[,page,...wildcards]=path.split("/"):page=path,this.state={page:page,wildcards:wildcards,lastPage:this.lastPage,params:params},queryString&&(params=new URLSearchParams(queryString),this.state.params=Object.fromEntries(params)),document.startViewTransition?document.startViewTransition((async()=>{await this.handleRouting(page)})):await this.handleRouting(page)}catch(e){console.error(e)}}}const appState={params:{},openedPages:new Set},generalPages=["sign_up","sign_in","loading","landing"];async function routeTo(targetPage,options={}){const{firstLoad:firstLoad}=options;let pageId,subPageId1,subPageId2,searchParams,params;if(""===targetPage)try{floDapps.user.id&&(pageId="chat_page")}catch(e){pageId="landing"}else if(targetPage.includes("/")){let path;[path,searchParams]=targetPage.split("?"),[,pageId,subPageId1,subPageId2]=path.split("/")}else pageId=targetPage;if(document.querySelector(`#${pageId}`)?.classList.contains("inner-page")){try{floDapps.user.id&&generalPages.includes(pageId)&&(history.replaceState(null,null,"#/chat_page"),pageId="chat_page")}catch(e){if(!generalPages.includes(pageId))return}if(appState.currentPage=pageId,searchParams){const urlSearchParams=new URLSearchParams("?"+searchParams);params=Object.fromEntries(urlSearchParams.entries())}switch(params&&(appState.params=params),pageId){case"sign_in":setTimeout((()=>{getRef("private_key_field").focusIn()}),0);break;case"sign_up":getRef("keys_generator").generateKeys()}if(appState.lastPage!==pageId){document.querySelectorAll(".page").forEach((page=>page.classList.add("hidden"))),getRef(pageId).closest(".page").classList.remove("hidden"),document.querySelectorAll(".inner-page").forEach((page=>page.classList.add("hidden"))),getRef(pageId).classList.remove("hidden"),getRef(pageId).animate([{opacity:0,transform:"translateY(1rem)"},{opacity:1,transform:"translateY(0)"}],{duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"}).onfinish=()=>{},appState.lastPage=pageId}params&&(appState.params=params),appState.openedPages.add(pageId)}}class LazyLoader{constructor(container,elementsToRender,renderFn,options={}){const{batchSize:batchSize=10,freshRender:freshRender,bottomFirst:bottomFirst=!1,onEnd:onEnd}=options;this.elementsToRender=elementsToRender,this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[],this.renderFn=renderFn,this.intersectionObserver,this.batchSize=batchSize,this.freshRender=freshRender,this.bottomFirst=bottomFirst,this.onEnd=onEnd,this.shouldLazyLoad=!1,this.lastScrollTop=0,this.lastScrollHeight=0,this.lazyContainer=document.querySelector(container),this.update=this.update.bind(this),this.render=this.render.bind(this),this.init=this.init.bind(this),this.clear=this.clear.bind(this)}get elements(){return this.arrayOfElements}init(){this.mutationObserver&&this.mutationObserver.disconnect(),this.intersectionObserver&&this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(((entries,observer)=>{entries.forEach((entry=>{entry.isIntersecting&&(observer.disconnect(),this.render({lazyLoad:!0}))}))}),{root:this.lazyContainer}),this.mutationObserver=new MutationObserver((mutationList=>{mutationList.forEach((mutation=>{"childList"===mutation.type&&mutation.addedNodes.length&&(this.bottomFirst?this.lazyContainer.firstElementChild&&this.intersectionObserver.observe(this.lazyContainer.firstElementChild):this.lazyContainer.lastElementChild&&this.intersectionObserver.observe(this.lazyContainer.lastElementChild))}))})),this.mutationObserver.observe(this.lazyContainer,{childList:!0}),this.render()}update(elementsToRender){this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[]}render(options={}){let{lazyLoad:lazyLoad=!1}=options;this.shouldLazyLoad=lazyLoad;const frag=document.createDocumentFragment();lazyLoad?this.bottomFirst?(this.updateEndIndex=this.updateStartIndex,this.updateStartIndex=this.updateEndIndex-this.batchSize):(this.updateStartIndex=this.updateEndIndex,this.updateEndIndex=this.updateEndIndex+this.batchSize):(this.intersectionObserver.disconnect(),this.bottomFirst?(this.updateEndIndex=this.arrayOfElements.length,this.updateStartIndex=this.updateEndIndex-this.batchSize-1):(this.updateStartIndex=0,this.updateEndIndex=this.batchSize),this.lazyContainer.innerHTML=""),this.updateStartIndex=Math.max(this.updateStartIndex,0),this.lastScrollHeight=this.lazyContainer.scrollHeight,this.lastScrollTop=this.lazyContainer.scrollTop,this.arrayOfElements.slice(this.updateStartIndex,this.updateEndIndex).forEach(((element,index)=>{frag.append(this.renderFn(element))})),this.bottomFirst?(this.lazyContainer.prepend(frag),this.lastScrollTop+=this.lazyContainer.scrollHeight-this.lastScrollHeight,this.lazyContainer.scrollTo({top:this.lastScrollTop}),this.lastScrollHeight=this.lazyContainer.scrollHeight,this.updateStartIndex<=0&&this.onEnd&&(this.mutationObserver.disconnect(),this.intersectionObserver.disconnect(),this.onEnd())):(this.lazyContainer.append(frag),this.updateEndIndex>=this.arrayOfElements.length&&this.onEnd&&(this.mutationObserver.disconnect(),this.intersectionObserver.disconnect(),this.onEnd())),!lazyLoad&&this.bottomFirst&&(this.lazyContainer.scrollTop=this.lazyContainer.scrollHeight),!lazyLoad&&this.freshRender&&this.freshRender()}clear(){this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.lazyContainer.innerHTML=""}reset(){this.arrayOfElements="function"==typeof this.elementsToRender?this.elementsToRender():this.elementsToRender||[],this.render()}}const slideInLeft=[{opacity:0,transform:"translateX(1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutLeft=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-1.5rem)"}],slideInRight=[{opacity:0,transform:"translateX(-1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutRight=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(1.5rem)"}],slideInDown=[{opacity:0,transform:"translateY(-1.5rem)"},{opacity:1,transform:"translateY(0)"}],slideOutUp=[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-1.5rem)"}];function showChildElement(id,index,options={}){return new Promise((resolve=>{const{mobileView:mobileView=!1,entry:entry,exit:exit}=options,animOptions={duration:150,easing:"ease",fill:"forwards"},parent="string"==typeof id?document.getElementById(id):id,visibleElement=[...parent.children].find((elem=>!elem.classList.contains(mobileView?"hide-on-mobile":"hidden")));visibleElement!==parent.children[index]&&(visibleElement.getAnimations().forEach((anim=>anim.cancel())),parent.children[index].getAnimations().forEach((anim=>anim.cancel())),visibleElement?exit?visibleElement.animate(exit,animOptions).onfinish=()=>{visibleElement.classList.add(mobileView?"hide-on-mobile":"hidden"),parent.children[index].classList.remove(mobileView?"hide-on-mobile":"hidden"),entry&&(parent.children[index].animate(entry,animOptions).onfinish=()=>resolve())}:(visibleElement.classList.add(mobileView?"hide-on-mobile":"hidden"),parent.children[index].classList.remove(mobileView?"hide-on-mobile":"hidden"),resolve()):(parent.children[index].classList.remove(mobileView?"hide-on-mobile":"hidden"),parent.children[index].animate(entry,animOptions).onfinish=()=>resolve()))}))}function buttonLoader(id,show){const button="string"==typeof id?document.getElementById(id):id;if(!button)return;button.dataset.hasOwnProperty("wasDisabled")||(button.dataset.wasDisabled=button.disabled);const animOptions={duration:200,fill:"forwards",easing:"ease"};if(show)button.disabled=!0,button.parentNode.append(document.createElement("sm-spinner")),button.animate([{clipPath:"circle(100%)"},{clipPath:"circle(0)"}],animOptions);else{button.disabled="true"===button.dataset.wasDisabled,button.animate([{clipPath:"circle(0)"},{clipPath:"circle(100%)"}],animOptions).onfinish=e=>{button.removeAttribute("data-original-state")};const potentialTarget=button.parentNode.querySelector("sm-spinner");potentialTarget&&potentialTarget.remove()}}let currentSubscriber=null;function $signal(initialValue,callback){let value=initialValue;const subscribers=new Set;let hasCustomSubscriber=!1;return[function(subscriber){return currentSubscriber&&subscribers.add(currentSubscriber),!hasCustomSubscriber&&subscriber&&(subscribers.add(subscriber),hasCustomSubscriber=!0),value},function(newValue){if(newValue!==value){value=newValue;for(const subscriber of subscribers)subscriber()}}]}async function $effect(fn){currentSubscriber=fn;const result=fn();try{result instanceof Promise&&await result}catch(e){console.error(e)}finally{currentSubscriber=null}}
\ No newline at end of file