diff --git a/index.html b/index.html
index 4af099e..4dcacc6 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
             //invoke the startup functions
             floDapps.launchStartUp().then(result => {
                 console.log(result)
-                floGlobals.myFloID = floCrypto.toFloID(floDapps.user.id);
+                floGlobals.myFloID = floCrypto.getFloID(floDapps.user.public);
                 floGlobals.myBtcID = btcOperator.convert.legacy2bech(floGlobals.myFloID)
                 floGlobals.myEthID = floEthereum.ethAddressFromCompressedPublicKey(floDapps.user.public)
                 document.querySelectorAll('.user-profile-id').forEach(el => el.textContent = floGlobals.myFloID)
@@ -752,49 +752,7 @@ <h4>Reply</h4>
                 </svg>
             </button>
         </header>
-        <section id="contact_details_section">
-            <div>
-                <div class="flex flex-direction-column align-center">
-                    <div id="contact_initial" class="initial flex align-center"></div>
-                    <text-field id="contact_name"></text-field>
-                    <p id="last_interaction_time"></p>
-                </div>
-                <div class="popup-section">
-                    <h5 id="flo_id_type"></h5>
-                    <sm-copy id="contact_flo_id"></sm-copy>
-                </div>
-                <div class="popup-section hidden">
-                    <h5>BTC address</h5>
-                    <sm-copy id="contact_btc_id"></sm-copy>
-                </div>
-                <div class="popup-section hidden">
-                    <h5>Eth address</h5>
-                    <sm-copy id="contact_eth_id"></sm-copy>
-                </div>
-                <div id="group_description_card" class="hidden">
-                    <h5>Group description</h5>
-                    <text-field id="group_description"></text-field>
-                </div>
-                <fieldset id="contact_options"></fieldset>
-            </div>
-            <div id="group_members_card" class="hidden">
-                <div class="flex align-center">
-                    <h4 class="h4">Members</h4>
-                    <button id="edit_group_button" class="button hidden justify-right"
-                        onclick="editGroupMembers()">Edit</button>
-                </div>
-                <p id="group_members_tip" class="tip">Select members to remove or add new
-                    members</p>
-                <div id="member_options" class="flex hidden">
-                    <button id="remove_members_button" class="button button--danger hidden"
-                        onclick="removeGroupMembers()">
-                        Remove selected</button>
-                    <button id="init_add_members_button" class="button" onclick="openPopup('contacts_popup')">Add
-                        member</button>
-                </div>
-                <div id="group_members_list"></div>
-            </div>
-        </section>
+        <section id="contact_details_section"></section>
     </sm-popup>
 
     <sm-popup id="new_message_popup">
@@ -1137,7 +1095,6 @@ <h3>Profile</h3>
     </script>
     <script id="standard_UI_functions">
         const { html, render: renderElem } = uhtml;
-        const domRefs = {};
         const uiGlobals = {
             // Use to store global variables
         }
@@ -1156,22 +1113,7 @@ <h3>Profile</h3>
         })
         // Use instead of document.getElementById
         function getRef(elementId) {
-            if (!domRefs.hasOwnProperty(elementId)) {
-                domRefs[elementId] = {
-                    count: 1,
-                    ref: null,
-                };
-                return document.getElementById(elementId);
-            } else {
-                if (domRefs[elementId].count < 3) {
-                    domRefs[elementId].count = domRefs[elementId].count + 1;
-                    return document.getElementById(elementId);
-                } else {
-                    if (!domRefs[elementId].ref)
-                        domRefs[elementId].ref = document.getElementById(elementId);
-                    return domRefs[elementId].ref;
-                }
-            }
+            return document.getElementById(elementId)
         }
         // implement querySelector as $ function
         function $(selector) {
@@ -1260,26 +1202,34 @@ <h3>Profile</h3>
             else return 'plain';
         }
 
-        document.addEventListener('popupopened', async e => {
+        document.addEventListener('popupopened', async (e) => {
             getRef('main_page').setAttribute('inert', '')
             //pushes popup as septate entry in history
             history.pushState({ type: 'popup' }, null, null)
             switch (e.target.id) {
                 case 'contact_details_popup':
-                    const floID = floGlobals.activeFloID;
-                    const floIdType = getFloIdType(floID);
-                    let isAdmin = false
-                    if (floIdType === 'group')
-                        isAdmin = messenger.groups[floID].admin === floDapps.user.id
+                    const chatAddress = floGlobals.viewingDetailsOfAddress;
+                    const addressType = getFloIdType(chatAddress);
+                    let isAdmin = false;
+                    let contactInitial = '';
+                    let disableContactName = false;
+                    let groupDescription = ''
+                    let lastInteraction = '';
+                    let floAddressType = '';
+                    let contactFloAddress;
+                    let contactBtcAddress;
+                    let contactEthAddress;
+                    if (addressType === 'group')
+                        isAdmin = messenger.groups[chatAddress].admin === floDapps.user.id;
                     let addAsContact
-                    if (!floGlobals.contacts.hasOwnProperty(floID) && floIdType === 'plain')
+                    if (!floGlobals.contacts.hasOwnProperty(chatAddress) && addressType === 'plain')
                         addAsContact = html`
-                                <button id="add_as_contact_option" class="option" onclick="addAsContact()">
-                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" /> </g> </svg>
-                                    Add as contact
-                                </button>`;
+                            <button id="add_as_contact_option" class="option" onclick="addAsContact()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" /> </g> </svg>
+                                Add as contact
+                            </button>`;
                     let markReadUnread
-                    if (messenger.marked[floID] && messenger.marked[floID].includes('unread')) {
+                    if (messenger.marked[chatAddress] && messenger.marked[chatAddress].includes('unread')) {
                         markReadUnread = html`
                             <button id="mark_read_option" class="option" onclick="markAsRead()">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> <path d="M12,18l-6,0l-4,4V4c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v7l-2,0V4H4v12l8,0V18z M23,14.34l-1.41-1.41l-4.24,4.24l-2.12-2.12 l-1.41,1.41L17.34,20L23,14.34z" /> </g> </svg>
@@ -1295,7 +1245,7 @@ <h3>Profile</h3>
                             `;
                     }
                     let blockUnblock
-                    if (messenger.blocked.has(floID)) {
+                    if (messenger.blocked.has(chatAddress)) {
                         blockUnblock = html`
                                 <button class="option" onclick="unblockUser()">
                                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
@@ -1312,7 +1262,7 @@ <h3>Profile</h3>
                     }
 
                     let deleteChat
-                    if (floIdType === 'plain') {
+                    if (addressType === 'plain') {
                         deleteChat = html`
                             <button id="delete_chat_option" class="option option--danger" onclick="deleteChat()">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" /> </svg>
@@ -1320,54 +1270,31 @@ <h3>Profile</h3>
                             </button>
                             `
                     }
-                    renderElem(getRef('contact_options'), html`
-                            ${addAsContact}
-                            ${markReadUnread}
-                            ${blockUnblock}
-                            <button class="option option--danger" onclick="clearChat()">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <g> <path d="M16,11h-1V3c0-1.1-0.9-2-2-2h-2C9.9,1,9,1.9,9,3v8H8c-2.76,0-5,2.24-5,5v7h18v-7C21,13.24,18.76,11,16,11z M11,3h2v8h-2V3 z M19,21h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H9v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H5 v-5c0-1.65,1.35-3,3-3h8c1.65,0,3,1.35,3,3V21z" /> </g> </g> </svg>
-                                Clear this chat
-                            </button>
-                            ${deleteChat}
-                        `)
-                    if (floIdType === 'group') {
-                        const { description, created } = messenger.groups[floID]
-                        getRef("contact_initial").innerHTML = ` <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> `
-                        getRef("last_interaction_time").textContent = `Created ${getFormattedTime(created)}`;
-                        getRef("group_description").value = description === '' ? 'Add group description' : description;
-                        render.groupMembers(floID)
+                    if (addressType === 'group') {
+                        const { description, created } = messenger.groups[chatAddress]
+                        contactInitial = html.node`<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>`
+                        lastInteraction = `Created ${getFormattedTime(created)}`;
+                        disableContactName = !isAdmin
+                        groupDescription = description === '' ? isAdmin ? 'Add group description' : null : description
                         getRef('contact_details_popup').classList.add('is-group');
-                        removeClass(['#group_members_card', '#group_description_card'], 'hidden')
-                        getRef('edit_group_button').dataset.groupId = floID;
-                        getRef('flo_id_type').textContent = 'Group FLO address'
-                        toggleAttr(getRef('contact_name'), !isAdmin, 'disabled')
-                        toggleAttr(getRef('group_description'), !isAdmin, 'disabled')
-                        conditionalClass(getRef('edit_group_button'), !isAdmin, 'hidden')
-                    } else if (floIdType === 'pipeline') {
-                        const { model, members } = messenger.pipeline[floID]
-                        getRef("contact_initial").innerHTML = ` <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"></rect></g><g><g><path d="M6,15c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S4.9,15,6,15 M6,13c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S8.2,13,6,13z M12,5 c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,5,12,5 M12,3C9.8,3,8,4.8,8,7s1.8,4,4,4s4-1.8,4-4S14.2,3,12,3z M18,15 c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S16.9,15,18,15 M18,13c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S20.2,13,18,13z"></path></g></g></svg>`
-                        render.pipelineMembers(floID)
+                        floAddressType = 'Group FLO address'
+                    } else if (addressType === 'pipeline') {
+                        const { model, members } = messenger.pipeline[chatAddress]
+                        contactInitial = html.node`<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"></rect></g><g><g><path d="M6,15c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S4.9,15,6,15 M6,13c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S8.2,13,6,13z M12,5 c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,5,12,5 M12,3C9.8,3,8,4.8,8,7s1.8,4,4,4s4-1.8,4-4S14.2,3,12,3z M18,15 c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S16.9,15,18,15 M18,13c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S20.2,13,18,13z"></path></g></g></svg>`
                         getRef('contact_details_popup').classList.add('is-group');
-                        removeClass(['#group_members_card'], 'hidden')
-                        addClass(['#group_members_tip', '#group_description_card'], 'hidden')
-                        getRef('flo_id_type').textContent = `${messenger.pipeline[floID].model === 'flo_multisig' ? 'FLO' : 'BTC'} Multisig address`
-                        getRef("last_interaction_time").textContent = ``;
+                        floAddressType = `${messenger.pipeline[chatAddress].model === 'flo_multisig' ? 'FLO' : 'BTC'} Multisig address`;
                     } else {
-                        getRef('flo_id_type').textContent = 'FLO address'
-                        getRef('contact_name').disabled = false
-                        getRef('contact_initial').textContent = getContactName(floID).charAt(0)
-                        getRef("last_interaction_time").textContent = ``;
+                        disableContactName = false;
+                        contactInitial = getContactName(chatAddress).charAt(0);
+                        floAddressType = 'FLO address';
                         getRef('contact_details_popup').classList.remove('is-group');
-                        addClass(['#group_members_card', '#group_description_card'], 'hidden')
                     }
-                    getRef('contact_initial').setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
-                    getRef('contact_name').value = getContactName(floID) === floID ? 'Unnamed' : getContactName(floID)
-                    if (floIdType === 'pipeline') {
+                    if (addressType === 'pipeline') {
                         try {
                             // Get pipeline origin multisig address
-                            getTxHex(floID).then(async tx_hex => {
+                            getTxHex(chatAddress).then(async tx_hex => {
                                 let details
-                                switch (messenger.pipeline[floID].model) {
+                                switch (messenger.pipeline[chatAddress].model) {
                                     case 'flo_multisig':
                                         details = await floBlockchainAPI.parseTransaction(tx_hex)
                                         break;
@@ -1375,7 +1302,7 @@ <h3>Profile</h3>
                                         details = await btcOperator.parseTransaction(tx_hex)
                                         break;
                                 }
-                                getRef('contact_flo_id').value = details.inputs[0].address
+                                contactFloAddress = details.inputs[0].address
                             }).catch(e => {
                                 console.error(e)
                             })
@@ -1383,18 +1310,90 @@ <h3>Profile</h3>
                             console.error(e)
                         }
                     } else {
-                        getRef('contact_flo_id').value = floCrypto.toFloID(floID)
+                        contactFloAddress = validateEthAddress(chatAddress) ? floCrypto.getFloID(floGlobals.pubKeys[chatAddress]) : floCrypto.toFloID(chatAddress);
                     }
-                    if (floIdType === 'plain') {
-                        getRef('contact_btc_id').value = btcOperator.convert.legacy2bech(floCrypto.toFloID(floID))
-                        getRef('contact_btc_id').parentNode.classList.remove('hidden')
-                        if (floGlobals.pubKeys[floID]) {
-                            getRef('contact_eth_id').value = floEthereum.ethAddressFromCompressedPublicKey(floGlobals.pubKeys[floID])
-                            getRef('contact_eth_id').parentNode.classList.remove('hidden')
-                        }
+                    if (addressType === 'plain') {
+                        if (contactFloAddress)
+                            contactBtcAddress = btcOperator.convert.legacy2bech(contactFloAddress);
+                        if (validateEthAddress(chatAddress))
+                            contactEthAddress = chatAddress;
+                        else if (floGlobals.pubKeys[chatAddress])
+                            contactEthAddress = floEthereum.ethAddressFromCompressedPublicKey(floGlobals.pubKeys[chatAddress])
+                    }
+                    const contactName = getContactName(chatAddress) === chatAddress ? 'Unnamed' : getContactName(chatAddress);
+                    renderElem(getRef('contact_details_section'), html`
+                        <div>
+                            <div class="flex flex-direction-column align-center">
+                                <div id="contact_initial" class="initial flex align-center" style=${`--contact-color: var(${contactColor(chatAddress)})`}>
+                                    ${contactInitial}    
+                                </div>
+                                <text-field id="contact_name" value=${contactName} onchange=${(e) => changeContactName(e.target.value.trim())} ?disabled=${disableContactName}></text-field>
+                                <p id="last_interaction_time">${lastInteraction}</p>
+                            </div>
+                            ${contactFloAddress ? html`
+                                <div class="popup-section">
+                                    <h5>${floAddressType}</h5>
+                                    <sm-copy value=${contactFloAddress}></sm-copy>
+                                </div>
+                            `: ''}
+                            ${contactBtcAddress ? html`
+                                <div class="popup-section">
+                                    <h5>BTC address</h5>
+                                    <sm-copy value=${contactBtcAddress}></sm-copy>
+                                </div>
+                            `: ''}
+                            ${contactEthAddress ? html`
+                                <div class="popup-section">
+                                    <h5>Eth address</h5>
+                                    <sm-copy value=${contactEthAddress}></sm-copy>
+                                </div>
+                            `: ''}
+                            ${addressType === 'group' && groupDescription ? html`
+                                <div class="popup-section">
+                                    <h5>Group description</h5>
+                                    <text-field value=${groupDescription} onchange=${e => handleGroupDescriptionChange(e)} ?disabled=${!isAdmin}></text-field>
+                                </div>
+                            ` : ''}
+                            <fieldset id="contact_options">
+                                ${addAsContact}
+                                ${markReadUnread}
+                                ${blockUnblock}
+                                <button class="option option--danger" onclick="clearChat()">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <g> <path d="M16,11h-1V3c0-1.1-0.9-2-2-2h-2C9.9,1,9,1.9,9,3v8H8c-2.76,0-5,2.24-5,5v7h18v-7C21,13.24,18.76,11,16,11z M11,3h2v8h-2V3 z M19,21h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H9v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H5 v-5c0-1.65,1.35-3,3-3h8c1.65,0,3,1.35,3,3V21z" /> </g> </g> </svg>
+                                    Clear this chat
+                                </button>
+                                ${deleteChat}    
+                            </fieldset>
+                        </div>
+                        ${addressType !== 'plain' ? html`
+                            <div id="group_members_card">
+                                <div class="flex align-center">
+                                    <h4 class="h4">Members</h4>
+                                    ${isAdmin ? html`
+                                        <button id="edit_group_button" class="button justify-right" onclick=${() => editGroupMembers(chatAddress)}>
+                                            Edit
+                                        </button>
+                                    `: ''}
+                                </div>
+                                ${isAdmin ? html`
+                                    <p id="group_members_tip" class=${`tip`}>Select members to remove or add new members</p>
+                                `: ''}
+                                <div id="member_options" class="flex hidden">
+                                    <button id="remove_members_button" class="button button--danger hidden"
+                                        onclick="removeGroupMembers()">
+                                        Remove selected</button>
+                                    <button id="init_add_members_button" class="button" onclick="openPopup('contacts_popup')">Add
+                                        member</button>
+                                </div>
+                                <div id="group_members_list" onchange=${e => selectMemberToRemove(e.target.value)}></div>
+                            </div>
+                        `: ''}
+                    `);
+                    if (addressType === 'group') {
+                        render.groupMembers(chatAddress)
+                    } else if (addressType === 'pipeline') {
+                        render.pipelineMembers(chatAddress)
                     } else {
-                        getRef('contact_btc_id').parentNode.classList.add('hidden')
-                        getRef('contact_eth_id').parentNode.classList.add('hidden')
                     }
                     break;
                 case 'contacts_popup':
@@ -1420,12 +1419,10 @@ <h3>Profile</h3>
                     renderCreationList()
                     break;
                 }
-                case 'multisig_tx_popup':
-                    break;
                 case 'compose_mail_popup':
                     const mailingContacts = []
-                    for (const floID in floGlobals.contacts) {
-                        mailingContacts.push(render.contactOnly(floID))
+                    for (const chatAddress in floGlobals.contacts) {
+                        mailingContacts.push(render.contactOnly(chatAddress))
                     }
                     renderElem(getRef('mail_contact_list'), html`${mailingContacts}`)
                     break;
@@ -1438,10 +1435,8 @@ <h3>Profile</h3>
         document.addEventListener('popupclosed', e => {
             switch (e.target.id) {
                 case 'contact_details_popup':
-                    getRef('contact_name').revert()
-                    if (messenger.groups.hasOwnProperty(floGlobals.activeFloID)) {
-                        isGroupEditable = true
-                        editGroupMembers()
+                    if (messenger.groups.hasOwnProperty(floGlobals.viewingDetailsOfAddress)) {
+                        isGroupEditable = true;
                     }
                     break;
                 case 'contacts_popup':
@@ -1449,6 +1444,9 @@ <h3>Profile</h3>
                     isRemovingMember = true
                     membersToAdd.clear()
                     break;
+                case 'new_message_popup':
+                    getRef('search_contacts').value = ''
+                    break;
                 case 'creation_popup':
                     showChildElement('creation_process', 0)
                     renderElem(getRef('select_contacts_container'), html``)
@@ -1654,7 +1652,7 @@ <h3>Profile</h3>
         window.addEventListener('hashchange', e => routeTo(window.location.hash))
         window.addEventListener("load", () => {
             document.body.classList.remove('hidden')
-            document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = (value) => {
+            document.querySelectorAll('sm-input[data-address]').forEach(input => input.customValidation = (value) => {
                 if (!value) return { isValid: false, errorText: 'Please enter a FLO address' }
                 return {
                     isValid: floCrypto.validateAddr(value),
@@ -1778,15 +1776,15 @@ <h3>Profile</h3>
                     getRef('keys_generator').generateKeys()
                     break;
                 case 'chat_page':
-                    if (subPageId1 && params.floId) {
+                    if (subPageId1 && params.address) {
                         getRef('chats_list').querySelectorAll('.active').forEach(child => child.classList.remove('active'))
-                        const targetChatCard = getChatCard(params.floId)
+                        const targetChatCard = getChatCard(params.address)
                         if (targetChatCard) {
                             targetChatCard.classList.remove('unread')
                             document.title = `RanchiMall Messenger`
                             targetChatCard.classList.add('active')
                         }
-                        await viewConversation(params.floId)
+                        await viewConversation(params.address)
                         getRef('messages_container').animate([
                             { opacity: 0 },
                             { opacity: 1 },
@@ -1802,7 +1800,7 @@ <h3>Profile</h3>
                         getRef('main_navbar').classList.add('hide-on-mobile')
                     } else {
                         if (activeChat.address && !floGlobals.isMobileView) {
-                            history.replaceState(null, null, `#/chat_page/messages?floId=${activeChat.address}`);
+                            history.replaceState(null, null, `#/chat_page/messages?address=${activeChat.address}`);
                         } else {
                             history.replaceState(null, null, '#/chat_page');
                             getRef('chat_view').classList.add('hidden')
@@ -2490,7 +2488,7 @@ <h4 class="mail-subject">${subject}</h4>
                 }
                 const className = `contact ${type !== 'contact' ? type : ''} ${markUnread ? 'unread' : ''} interactive collapsed`
                 return html.for(ref, contactAddress)`
-                    <div class="${className}" .dataset=${{ floAddress: contactAddress }} style=${`--contact-color: var(${contactColor(contactAddress)})`}>
+                    <div class="${className}" .dataset=${{ address: contactAddress }} style=${`--contact-color: var(${contactColor(contactAddress)})`}>
                         <div class="initial flex align-center">
                             ${initial}
                         </div>
@@ -2504,7 +2502,7 @@ <h4 class="name">${name}</h4>
                 const name = getContactName(floID)
                 const initial = name.charAt(0)
                 return html`
-                    <label class="flex align-center selectable-contact interactive" data-flo-address=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
+                    <label class="flex align-center selectable-contact interactive" data-address=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
                         <div class="initial flex align-center"> ${initial} </div>
                         <div class="grid gap-0-3">
                             <h4 class="name">${name}</h4>
@@ -2518,7 +2516,7 @@ <h4 class="name">${name}</h4>
                 const name = getContactName(floID)
                 const initial = name.charAt(0)
                 return html`
-                    <div class="flex align-center selectable-contact" data-flo-address=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
+                    <div class="flex align-center selectable-contact" data-address=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
                         <div class="initial flex align-center"> ${initial} </div>
                         <div class="grid gap-0-3">
                             <h4 class="name">${name}</h4>
@@ -2542,7 +2540,7 @@ <h4 class="name">${name}</h4>
                     let senderName = null
                     if (sender) {
                         if (sender !== floDapps.user.id && lastSender !== sender)
-                            senderName = html.node`<a href="${`#/chat_page/messages?floId=${sender}`}" class="sender-name" style=${`color: var(${contactColor(sender)})`}>${getContactName(sender)}</a>`
+                            senderName = html.node`<a href="${`#/chat_page/messages?address=${sender}`}" class="sender-name" style=${`color: var(${contactColor(sender)})`}>${getContactName(sender)}</a>`
                         lastSender = sender
                     }
                     let messageContent = document.createDocumentFragment()
@@ -2616,8 +2614,8 @@ <h4 class="name">${name}</h4>
                             break;
                         case 'BROADCAST':
                             // render appropriate UI when transaction is broadcasted
-                            if ($('#transaction_details'))
-                                $('#transaction_details').remove()
+                            if (getRef('transaction_details'))
+                                getRef('transaction_details').remove()
                             // disable chatting
                             getRef('chat_footer').classList.add('hidden')
                             let redirectTo = `https://ranchimall.github.io/btcwallet/#/check_details?query=`
@@ -2649,7 +2647,7 @@ <h4>Transaction approved</h4>
                             groupMembersCards.push(render.selectableContact(floID))
                     } else {
                         groupMembersCards.push(html`
-                            <div class="group-member" .dataset=${{ floAddress: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
+                            <div class="group-member" .dataset=${{ address: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
                                 <div class="initial flex align-center">
                                     ${initial}
                                 </div>
@@ -2668,7 +2666,7 @@ <h4 class="name wrap-around">${name}</h4>
                     let name = getContactName(floID)
                     let initial = name.charAt(0)
                     groupMembersCards.push(html`
-                            <div class="group-member" .dataset=${{ floAddress: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
+                            <div class="group-member" .dataset=${{ address: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
                                 <div class="initial flex align-center"> ${initial} </div>
                                 <h4 class="name wrap-around">${name}</h4>
                             </div>
@@ -2681,7 +2679,7 @@ <h4 class="name wrap-around">${name}</h4>
                     const name = getContactName(floID)
                     const initial = name.charAt(0)
                     return html`
-                    <li class="flex align-center interactive blocked-id" data-flo-address=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
+                    <li class="flex align-center interactive blocked-id" data-address=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
                         <div class="initial flex align-center"> ${initial} </div>
                         <h4 class="name">${name}</h4>
                         <button class="button margin-left-auto unblock">Unblock</button>
@@ -2694,7 +2692,7 @@ <h4 class="name">${name}</h4>
                 const name = getContactName(floID)
                 const initial = name.charAt(0)
                 return html`
-                    <button class="contact-list__item interactive" .dataset=${{ floAddress: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
+                    <button class="contact-list__item interactive" .dataset=${{ address: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
                         <div class="initial flex align-center"> ${initial} </div>
                         <h4 class="name">${name}</h4>
                     </button>
@@ -2877,6 +2875,16 @@ <h4>Clear data</h4>
             })
             return messageBody
         }
+        const isEthereumAddress = new Set()
+        function validateEthAddress(address) {
+            if (isEthereumAddress.has(address)) return true
+            if (address.startsWith('0x') || address.length === 40) {
+                isEthereumAddress.add(address)
+                return true
+            } else {
+                return false
+            }
+        }
         function addNotificationBadge(elem, text, { replace = false } = {}) {
             const animOptions = {
                 duration: 200,
@@ -3020,6 +3028,7 @@ <h4>Clear data</h4>
             }
             for (let messageId in messagesData) {
                 const { category, floID, time, message, sender, groupID, admin, name, pipeID, unconfirmed, type } = messagesData[messageId]
+                console.log(messagesData[messageId])
                 const chatAddress = floID || groupID || pipeID
                 // code to run if a chat is opened
                 if (activeChat && floCrypto.isSameAddr(activeChat.address, chatAddress)) {
@@ -3032,8 +3041,8 @@ <h4>Clear data</h4>
                     }
                     // remove encryption badge if it exists
                     if (!groupID && floDapps.user.get_pubKey(activeChat.address) && floID !== floDapps.user.id) {
-                        if (document.getElementById('warn_no_encryption')) {
-                            document.getElementById('warn_no_encryption').after(
+                        if (getRef('warn_no_encryption')) {
+                            getRef('warn_no_encryption').after(
                                 html.node`
                                     <strong class="event-card flex align-center">
                                         <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g fill="none"><path d="M0 0h24v24H0V0z"/><path d="M0 0h24v24H0V0z" opacity=".87"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
@@ -3041,7 +3050,7 @@ <h4>Clear data</h4>
                                     </strong>
                                 `
                             )
-                            document.getElementById('warn_no_encryption').remove()
+                            getRef('warn_no_encryption').remove()
                         }
                     }
                 }
@@ -3053,7 +3062,7 @@ <h4>Clear data</h4>
                     }
                     // move chat card to top if it is not already there
                     const topChatCard = getRef('chats_list').children[0]
-                    if (!floCrypto.isSameAddr(chatAddress, topChatCard.dataset.floAddress)) {
+                    if (!floCrypto.isSameAddr(chatAddress, topChatCard.dataset.address)) {
                         const cloneContact = chatCard.cloneNode(true)
                         chatCard.remove()
                         getRef('chats_list').prepend(cloneContact)
@@ -3177,7 +3186,7 @@ <h4>Clear data</h4>
                         getRef('mail_contact_list').lastElementChild.focus()
                 }
                 if (e.code === 'Enter' || e.code === 'Space') {
-                    getRef('send_mail_to').value = document.activeElement.dataset.floAddress
+                    getRef('send_mail_to').value = document.activeElement.dataset.address
                     getRef('mail_contact_list').classList.add('hidden')
                 }
             }
@@ -3186,7 +3195,7 @@ <h4>Clear data</h4>
             getRef('mail_contact_list').classList.remove('hidden')
             if (this.value.trim !== '') {
                 [...getRef('mail_contact_list').children].forEach(child => {
-                    if (getContactName(child.dataset.floAddress).includes(this.value.trim())) {
+                    if (getContactName(child.dataset.address).includes(this.value.trim())) {
                         child.classList.remove('hidden')
                     } else {
                         child.classList.add('hidden')
@@ -3216,7 +3225,7 @@ <h4>Clear data</h4>
         getRef('search_chats').addEventListener('input', function (e) {
             const contacts = getRef('chats_list').querySelectorAll('.contact')
             contacts.forEach(child => {
-                if (`${getContactName(child.dataset.floAddress)}${child.dataset.floAddress}`.toLowerCase().includes(this.value.toLowerCase())) {
+                if (`${getContactName(child.dataset.address)}${child.dataset.address}`.toLowerCase().includes(this.value.toLowerCase())) {
                     child.classList.remove('hidden')
                 } else {
                     child.classList.add('hidden')
@@ -3248,9 +3257,9 @@ <h4>Clear data</h4>
                 holdTimeout = setTimeout(() => {
                     let contact = e.target.closest(".contact")
                     clickedContact['chatCard'] = contact
-                    clickedContact['floID'] = contact.dataset.floAddress
-                    clickedContact['isGroup'] = messenger.groups.hasOwnProperty(clickedContact['floID'])
-                    floGlobals.activeFloID = clickedContact.floID
+                    clickedContact.address = contact.dataset.address
+                    clickedContact['isGroup'] = messenger.groups.hasOwnProperty(clickedContact.address)
+                    floGlobals.viewingDetailsOfAddress = clickedContact.address
                     openPopup('contact_details_popup')
                 }, 500)
                 getRef('chats_list').addEventListener('touchmove', handleTouchMove)
@@ -3271,13 +3280,13 @@ <h4>Clear data</h4>
         })
         floGlobals.uiState = {}
         getRef('chat_details_button').addEventListener('click', e => {
-            floGlobals.activeFloID = activeChat.address
+            floGlobals.viewingDetailsOfAddress = activeChat.address
             openPopup('contact_details_popup')
         })
 
         getRef('mail_contact_list').addEventListener('click', e => {
             if (e.target.closest('.contact-list__item')) {
-                getRef('send_mail_to').value = e.target.closest('.contact-list__item').dataset.floAddress
+                getRef('send_mail_to').value = e.target.closest('.contact-list__item').dataset.address
                 getRef('mail_contact_list').classList.add('hidden')
             }
         })
@@ -3288,19 +3297,19 @@ <h4>Clear data</h4>
         delegate(getRef('chats_list'), 'click', '.contact', e => {
             clickedContact = {
                 chatCard: e.delegateTarget,
-                floID: e.delegateTarget.dataset.floAddress,
-                isGroup: messenger.groups.hasOwnProperty(e.delegateTarget.dataset.floAddress)
+                address: e.delegateTarget.dataset.address,
+                isGroup: messenger.groups.hasOwnProperty(e.delegateTarget.dataset.address)
             }
-            if (clickedContact['floID'] === floGlobals.myFloID) return
+            if (clickedContact.address === floGlobals.myFloID) return
             if (e.target.closest(".initial") || e.target.closest(".menu")) {
-                floGlobals.activeFloID = clickedContact.floID
+                floGlobals.viewingDetailsOfAddress = clickedContact.address
                 openPopup('contact_details_popup')
             } else {
-                location.hash = `#/chat_page/messages?floId=${clickedContact.floID}`
+                location.hash = `#/chat_page/messages?address=${clickedContact.address}`
             }
         })
         delegate(getRef('contacts_container'), 'click', '.contact', e => {
-            const floID = e.delegateTarget.dataset.floAddress
+            const floID = e.delegateTarget.dataset.address
             let chatCard = getChatCard(floID)
             if (!chatCard) {
                 getRef('chats_list').prepend(html.node`${render.contactCard(floID, { type: 'chat', ref: getRef('chats_list') })}`);
@@ -3361,13 +3370,13 @@ <h4>Clear data</h4>
                 removeSelectedContact(e.target.value)
         })
         delegate(getRef('select_contacts_container'), 'click', '.request-pubkey', e => {
-            const floID = e.delegateTarget.closest('.selectable-contact').dataset.floAddress
+            const floID = e.delegateTarget.closest('.selectable-contact').dataset.address
             messenger.request_pubKey(floID)
             e.delegateTarget.disabled = true;
             e.delegateTarget.textContent = 'Request sent'
         })
         delegate(getRef('selected_contacts_container'), 'click', '.remove-selected', e => {
-            removeSelectedContact(e.target.closest('.contact-preview').dataset.floAddress)
+            removeSelectedContact(e.target.closest('.contact-preview').dataset.address)
         })
         const selectedMembers = new Set();
         function checkSelectedMembers() {
@@ -3387,7 +3396,7 @@ <h4>Clear data</h4>
             if (!selectedMembers.has(floID)) {
                 selectedMembers.add(floID)
                 const name = getContactName(floID)
-                const preview = html.node`<div class="contact-preview" .dataset="${{ floAddress: floID }}">
+                const preview = html.node`<div class="contact-preview" .dataset="${{ address: floID }}">
                     <div class="initial flex align-center" style=${`--contact-color: var(${contactColor(floID)})`}>
                         ${name.charAt(0)}
                     </div>
@@ -3412,8 +3421,8 @@ <h4 class="name">${name}</h4>
 
         function removeSelectedContact(floID) {
             selectedMembers.delete(floID)
-            const relatedContact = getRef('select_contacts_container').querySelector(`[data-flo-address="${floID}"]`)
-            const relatedPreview = getRef('selected_contacts_container').querySelector(`[data-flo-address="${floID}"]`)
+            const relatedContact = getRef('select_contacts_container').querySelector(`[data-address="${floID}"]`)
+            const relatedPreview = getRef('selected_contacts_container').querySelector(`[data-address="${floID}"]`)
             relatedPreview.animate(
                 slideOutLeft,
                 {
@@ -3452,7 +3461,7 @@ <h4 class="name">${name}</h4>
             if (rangeOverflow)
                 e.target.setAttribute('error-text', `Maximum ${selectedMembers.size + 1} allowed`)
         })
-        document.getElementById('create_multisig_button').addEventListener('click', () => {
+        getRef('create_multisig_button').addEventListener('click', () => {
             if (getRef('add_self_check').checked)
                 selectedMembers.add(floDapps.user.id)
             const selctedPubKeys = [...selectedMembers].map(id => {
@@ -3499,7 +3508,7 @@ <h4 class="name">${name}</h4>
         })
 
 
-        document.getElementById('create_group_button').addEventListener('click', () => {
+        getRef('create_group_button').addEventListener('click', () => {
             const groupName = getRef('group_name_field').value.trim()
             const groupDescription = getRef('group_description_field').value.trim()
             buttonLoader('create_group_button', true)
@@ -3751,20 +3760,13 @@ <h4 class="name">${name}</h4>
                 notify(`Contact already saved`, 'error')
                 return
             }
-            // check whether an equivalent BTC/FLO address is already ssaved
-            if (floCrypto.validateFloID(addressToSave)) {
-                const addrInBtc = btcOperator.convert.legacy2bech(addressToSave)
-                if (floGlobals.contacts.hasOwnProperty(addrInBtc)) {
-                    notify(`Equivalent Bitcoin address is already saved as ${getContactName(addrInBtc)}`, 'error')
-                    return
-
-                }
-            } else {
-                const addrInFlo = floCrypto.toFloID(addressToSave)
-                if (floGlobals.contacts.hasOwnProperty(addrInFlo)) {
-                    notify(`Equivalent FLO address is already saved as ${getContactName(addrInFlo)}`, 'error')
-                    return
-                }
+            // check whether an equivalent BTC/FLO address is already saved
+            const addrInFlo = floCrypto.toFloID(addressToSave);
+            const addrInBtc = btcOperator.convert.legacy2bech(addrInFlo);
+            const addrInEth = floGlobals.pubKeys[addressToSave] ? floEthereum.ethAddressFromCompressedPublicKey(floGlobals.pubKeys[addressToSave]) : null;
+            if (floGlobals.contacts.hasOwnProperty(addrInFlo) || floGlobals.contacts.hasOwnProperty(addrInBtc) || floGlobals.contacts.hasOwnProperty(addrInEth)) {
+                notify(`Equivalent Address is already saved as ${getContactName(addrInFlo)}`, 'error');
+                return;
             }
             messenger.storeContact(addressToSave, name).then(result => {
                 closePopup()
@@ -3820,37 +3822,37 @@ <h4 class="name">${name}</h4>
             const mergedChatOrder = []
             // merge equivalent addresses
             chatOrder.forEach(address => {
-                let priorityAddress
-                if (floCrypto.validateFloID(address)) {
-                    const addrInBtc = btcOperator.convert.legacy2bech(address)
-                    if (floGlobals.contacts.hasOwnProperty(address))
-                        priorityAddress = address
-                    else if (floGlobals.contacts.hasOwnProperty(addrInBtc))
-                        priorityAddress = addrInBtc
-                    if (chatOrderLookup.has(addrInBtc)) return
-                } else {
-                    const addrInFlo = floCrypto.toFloID(address)
-                    if (floGlobals.contacts.hasOwnProperty(address))
-                        priorityAddress = address
-                    else if (floGlobals.contacts.hasOwnProperty(addrInFlo))
-                        priorityAddress = addrInFlo
-                    if (chatOrderLookup.has(addrInFlo)) return
+                if (messenger.groups.hasOwnProperty(address))
+                    return mergedChatOrder.push(address)
+                if (messenger.pipeline.hasOwnProperty(address))
+                    return mergedChatOrder.push(address)
+                let priorityAddress = address;
+                const addressPubKey = floGlobals.pubKeys[address];
+                const addrInFlo = validateEthAddress(address) ? (floCrypto.getFloID(addressPubKey) || floCrypto.toFloID(address)) : floCrypto.toFloID(address);
+                const addrInBtc = btcOperator.convert.legacy2bech(addrInFlo);
+                const addrInEth = addressPubKey ? floEthereum.ethAddressFromCompressedPublicKey(addressPubKey) : null;
+                if (floGlobals.contacts.hasOwnProperty(addrInFlo)) {
+                    priorityAddress = addrInFlo;
+                } else if (floGlobals.contacts.hasOwnProperty(addrInBtc)) {
+                    priorityAddress = addrInBtc;
+                } else if (addrInEth && floGlobals.contacts.hasOwnProperty(addrInEth)) {
+                    priorityAddress = addrInEth;
                 }
-                if (!chatOrderLookup.has(priorityAddress || address)) {
-                    mergedChatOrder.push(priorityAddress || address)
-                    chatOrderLookup.add(priorityAddress || address)
+                if (!chatOrderLookup.has(addrInFlo) && !chatOrderLookup.has(addrInBtc) && !chatOrderLookup.has(addrInEth)) {
+                    mergedChatOrder.push(priorityAddress)
+                    chatOrderLookup.add(priorityAddress)
                 }
-            })
-            const chats = mergedChatOrder.map(floID => {
-                const markUnread = messenger.marked[floID] ? messenger.marked[floID].includes('unread') : false;
+            });
+            const chats = mergedChatOrder.map(address => {
+                const markUnread = messenger.marked[address] ? messenger.marked[address].includes('unread') : false;
                 let type
-                if (messenger.chats[floID])
+                if (messenger.chats[address])
                     type = 'chat'
-                else if (messenger.groups[floID])
+                else if (messenger.groups[address])
                     type = 'group'
-                else if (messenger.pipeline[floID])
+                else if (messenger.pipeline[address])
                     type = 'pipeline'
-                return render.contactCard(floID, { type, markUnread, ref: getRef('chats_list') })
+                return render.contactCard(address, { type, markUnread, ref: getRef('chats_list') })
             })
             renderElem(getRef('chats_list'), html`${chats}`)
         }
@@ -3926,13 +3928,19 @@ <h4 class="name">${name}</h4>
         }
 
         let chatLazyLoader
-        function renderMessages(floID) {
+        function renderMessages(address) {
             return new Promise(async (resolve, reject) => {
-                let floChatID = floCrypto.toFloID(floID);
+                let floChatID = validateEthAddress(address) ? floCrypto.getFloID(floGlobals.pubKeys[address]) || floCrypto.toFloID(address) : floCrypto.toFloID(address);
                 let btcChatID = btcOperator.convert.legacy2bech(floChatID);
-                Promise.all([messenger.getChat(floChatID), messenger.getChat(btcChatID)])
-                    .then(([floChat, btcChat]) => {
-                        let chat = mergeSortedArrays(Object.values(floChat), Object.values(btcChat), 'time')
+                const promises = [messenger.getChat(floChatID), messenger.getChat(btcChatID)]
+                if (validateEthAddress(address))
+                    promises.push(messenger.getChat(address))
+                Promise.all(promises)
+                    .then(([floChat, btcChat, ethChat = []]) => {
+                        const floBtcMerged = mergeSortedArrays(Object.values(floChat), Object.values(btcChat), 'time')
+                        const floBtcEthMerged = mergeSortedArrays(floBtcMerged, Object.values(ethChat), 'time')
+                        let chat = floBtcEthMerged
+                        console.log(chat)
                         if (chatLazyLoader) {
                             chatLazyLoader.update(chat)
                         } else {
@@ -3954,14 +3962,14 @@ <h4 class="name">${name}</h4>
                             });
                         }
                         chatLazyLoader.init()
-                        if (getFloIdType(floID) === 'pipeline') {
-                            if (!floGlobals.pipeSigns[floID])
-                                floGlobals.pipeSigns[floID] = new Set()
+                        if (getFloIdType(address) === 'pipeline') {
+                            if (!floGlobals.pipeSigns[address])
+                                floGlobals.pipeSigns[address] = new Set()
                             for (const key in chat) {
                                 const { type, sender, tx_hex, txid } = chat[key]
                                 switch (type) {
                                     case 'TRANSACTION':
-                                        floGlobals.pipeSigns[floID].add(sender)
+                                        floGlobals.pipeSigns[address].add(sender)
                                         if (tx_hex)
                                             floGlobals.pipelineTxHex = tx_hex
                                         break;
@@ -4027,6 +4035,7 @@ <h4 class="name">${name}</h4>
                 }
                 lastSender = ''
                 renderMessages(floID).then(async () => {
+                    scrollToBottom()
                     if (activeChat.type === 'pipeline') {
                         if (!messenger.pipeline[floID].disabled && floGlobals.pipeSigns[floID] && !floGlobals.pipeSigns[floID].has(floDapps.user.id)) {
                             getRef('messages_container').append(html.node`
@@ -4057,7 +4066,7 @@ <h4>You haven't signed the transaction</h4>
                                 const { inputs, outputs, fee, floData } = parsedTx
                                 const { s: signsDone, r: minSignsRequired, t: totalMembers } = inputs[0]?.signed || {}
                                 const pendingSigns = minSignsRequired - signsDone || 0;
-                                if ($('#transaction_details')) $('#transaction_details').remove()
+                                if (getRef('transaction_details')) getRef('transaction_details').remove()
                                 let retrySection = ''
                                 if (pendingSigns === 0 && !messenger.pipeline[floID].disabled) {
                                     switch (messenger.pipeline[floID].model) {
@@ -4337,20 +4346,16 @@ <h5>FLO data</h5>
                 }
             }
         }
-
-        getRef('contact_name').addEventListener('change', e => {
-            changeContactName(e.target.value.trim())
-        })
-        getRef('group_description').addEventListener('change', e => {
-            messenger.changeGroupDescription(floGlobals.activeFloID, e.detail.value.trim())
+        function handleGroupDescriptionChange(e) {
+            messenger.changeGroupDescription(floGlobals.viewingDetailsOfAddress, e.detail.value.trim())
                 .then(res => {
                     notify('Changed group description', 'success')
                 })
                 .catch(error => notify(error, "error"));
-        })
+        }
 
         async function changeContactName(name) {
-            const floID = floGlobals.activeFloID
+            const floID = floGlobals.viewingDetailsOfAddress
             const type = getFloIdType(floID)
             if (type === 'group') {
                 messenger.changeGroupName(floID, name).then(res => {
@@ -4369,49 +4374,51 @@ <h5>FLO data</h5>
 
         function updateChatCards({ name, floID }) {
             const type = getFloIdType(floID)
-            if (activeChat.address && activeChat.address === clickedContact.floID) {
+            if (activeChat.address && activeChat.address === clickedContact.address) {
                 updateChatHeaderName(name)
             }
             if (type === 'plain') {
                 getRef('contact_initial').textContent = name.charAt(0)
-                if (activeChat.address && activeChat.address === clickedContact.floID) {
+                if (activeChat.address && activeChat.address === clickedContact.address) {
                     getRef('receiver_initial').textContent = name.charAt(0)
                 }
-                document.querySelectorAll(`.contact[data-flo-address="${floID}"]`).forEach(contact => {
+                document.querySelectorAll(`.contact[data-address="${floID}"]`).forEach(contact => {
                     contact.querySelector('.initial').textContent = name.charAt(0)
                     contact.querySelector('.name').textContent = name
                 })
             }
         }
 
-        function getChatCard(floID) {
-            floID = floCrypto.toFloID(floID)
+        function getChatCard(address) {
+            const addressPubKey = floGlobals.pubKeys[address];
+            const floID = validateEthAddress(address) ? (floCrypto.getFloID(addressPubKey) || floCrypto.toFloID(address)) : floCrypto.toFloID(address);
             const btcID = btcOperator.convert.legacy2bech(floID)
-            return getRef('chats_list').querySelector(`[data-flo-address="${floID}"], [data-flo-address="${btcID}"]`)
+            const ethID = addressPubKey ? floEthereum.ethAddressFromCompressedPublicKey(addressPubKey) : address
+            return getRef('chats_list').querySelector(`[data-address="${floID}"], [data-address="${btcID}"], [data-address="${ethID}"]`)
         }
 
         function addAsContact() {
             openPopup('add_contact_popup')
-            getRef('add_contact_floID').value = clickedContact.floID
+            getRef('add_contact_floID').value = clickedContact.address
         }
 
         function markAsUnread() {
-            getChatCard(floGlobals.activeFloID).classList.add('unread')
-            messenger.addMark(floGlobals.activeFloID, 'unread')
+            getChatCard(floGlobals.viewingDetailsOfAddress).classList.add('unread')
+            messenger.addMark(floGlobals.viewingDetailsOfAddress, 'unread')
             closePopup()
         }
 
         function markAsRead() {
-            getChatCard(floGlobals.activeFloID).classList.remove('unread')
-            messenger.removeMark(floGlobals.activeFloID, 'unread')
+            getChatCard(floGlobals.viewingDetailsOfAddress).classList.remove('unread')
+            messenger.removeMark(floGlobals.viewingDetailsOfAddress, 'unread')
             closePopup()
         }
 
         function blockUser() {
             getConfirmation('Block this address?', { message: `Are you sure to block this address?`, confirmText: 'Block', cancelText: 'Cancel' }).then(confirmed => {
                 if (confirmed) {
-                    messenger.blockUser(floGlobals.activeFloID).then(result => {
-                        getChatCard(floGlobals.activeFloID).querySelector('.last-message').textContent = 'This user is blocked'
+                    messenger.blockUser(floGlobals.viewingDetailsOfAddress).then(result => {
+                        getChatCard(floGlobals.viewingDetailsOfAddress).querySelector('.last-message').textContent = 'This user is blocked'
                         closePopup()
                         notify('Address blocked', 'success')
                     })
@@ -4421,9 +4428,9 @@ <h5>FLO data</h5>
         function unblockUser(floID) {
             getConfirmation('Unblock this address?', { message: `Are you sure to unblock this address?`, confirmText: 'Unblock', cancelText: 'Cancel' }).then(confirmed => {
                 if (confirmed) {
-                    messenger.unblockUser(floID || floGlobals.activeFloID).then(result => {
-                        const chatCard = getChatCard(floID || floGlobals.activeFloID);
-                        getLastMessage(floGlobals.activeFloID).then(({ lastText }) => {
+                    messenger.unblockUser(floID || floGlobals.viewingDetailsOfAddress).then(result => {
+                        const chatCard = getChatCard(floID || floGlobals.viewingDetailsOfAddress);
+                        getLastMessage(floGlobals.viewingDetailsOfAddress).then(({ lastText }) => {
                             chatCard.querySelector('.last-message').textContent = lastText
                         }).catch(error => {
                             console.error(error)
@@ -4439,14 +4446,14 @@ <h5>FLO data</h5>
         }
         getRef('blocked_list').addEventListener('click', e => {
             if (e.target.closest('.unblock')) {
-                unblockUser(e.target.closest('.blocked-id').dataset.floAddress)
+                unblockUser(e.target.closest('.blocked-id').dataset.address)
             }
         })
         function clearChat() {
             getConfirmation('Clear chat?', { message: `Are you sure to clear this chat?`, confirmText: 'Clear', cancelText: 'Cancel' }).then(confirmed => {
                 if (confirmed) {
-                    messenger.clearChat(floGlobals.activeFloID).then(result => {
-                        let chatCard = getChatCard(floGlobals.activeFloID);
+                    messenger.clearChat(floGlobals.viewingDetailsOfAddress).then(result => {
+                        let chatCard = getChatCard(floGlobals.viewingDetailsOfAddress);
                         if (chatCard) {
                             chatCard.querySelector('.last-message').textContent = ''
                             chatCard.querySelector('.time').textContent = ''
@@ -4462,11 +4469,11 @@ <h5>FLO data</h5>
         function deleteChat() {
             getConfirmation('Delete chat', { message: `Are you sure to delete this chat?`, confirmText: 'Delete', cancelText: 'No' }).then(confirmed => {
                 if (confirmed) {
-                    messenger.rmChat(floGlobals.activeFloID).then(result => {
-                        getChatCard(floGlobals.activeFloID).remove()
+                    messenger.rmChat(floGlobals.viewingDetailsOfAddress).then(result => {
+                        getChatCard(floGlobals.viewingDetailsOfAddress).remove()
                         closePopup()
-                        getRef('chat_view').classList.add('hidden')
-                        getRef('chat_view').nextElementSibling.classList.remove('hidden')
+                        activeChat = {}
+                        location.hash = '#/chat_page'
                         notify('Chat deleted', 'success')
                     }).catch(error => {
                         console.error(error)
@@ -4477,31 +4484,22 @@ <h5>FLO data</h5>
 
         let isGroupEditable = false
         let isRemovingMember = false
-        function editGroupMembers() {
-            const groupID = getRef('edit_group_button').dataset.groupId
+        function editGroupMembers(groupID) {
             if (isGroupEditable) {
                 // to-do: make group members non editable
                 render.groupMembers(groupID)
                 membersToRemove.clear()
-                getRef('edit_group_button').textContent = 'Edit';
+                renderElem(getRef('edit_group_button'), 'Edit');
                 addClass(['#group_members_tip', '#member_options'], 'hidden')
-                isGroupEditable = false
-                isRemovingMember = false
             } else {
                 // to-do: make group members selectable except for admin
                 render.groupMembers(groupID, true)
-                getRef('edit_group_button').textContent = 'Done'
+                renderElem(getRef('edit_group_button'), 'Done');
                 removeClass(['#group_members_tip', '#member_options', '#init_add_members_button'], 'hidden')
                 getRef('remove_members_button').classList.add('hidden')
-                isGroupEditable = true
-                isRemovingMember = true
             }
+            isGroupEditable = isRemovingMember = !isGroupEditable
         }
-
-        getRef('group_members_list').addEventListener('change', e => {
-            selectMemberToRemove(e.target.value)
-        })
-
         const membersToRemove = new Set()
         function selectMemberToRemove(floID) {
             if (membersToRemove.has(floID)) {
@@ -4517,7 +4515,7 @@ <h5>FLO data</h5>
                 getRef('remove_members_button').classList.add('hidden')
             }
         }
-        document.getElementById('popup_contacts_container').addEventListener('change', e => {
+        getRef('popup_contacts_container').addEventListener('change', e => {
             selectMemberToAdd(e.target.value)
         })
 
@@ -4531,7 +4529,7 @@ <h5>FLO data</h5>
             getRef('add_members_button').disabled = !Boolean(membersToAdd.size)
         }
 
-        document.getElementById('add_members_button').addEventListener('click', addGroupMembers)
+        getRef('add_members_button').addEventListener('click', addGroupMembers)
 
         function addGroupMembers() {
             const groupID = getRef('edit_group_button').dataset.groupId
@@ -4549,7 +4547,7 @@ <h5>FLO data</h5>
                     const groupID = getRef('edit_group_button').dataset.groupId
                     messenger.rmGroupMembers(groupID, [...membersToRemove])
                         .then(res => {
-                            editGroupMembers()
+                            editGroupMembers(groupID)
                         })
                         .catch(err => console.error(err))
                 }
@@ -4562,7 +4560,7 @@ <h5>FLO data</h5>
             document.body.style.setProperty('--accent-color', color);
         })
 
-        document.getElementById('select_bg_image').addEventListener('change', async function (e) {
+        getRef('select_bg_image').addEventListener('change', async function (e) {
             await compactIDB.writeData('userSettings', true, 'hasSelectedBg')
             compactIDB.writeData('userSettings', this.files[0], 'bgImage')
                 .then(async res => {
@@ -4920,14 +4918,14 @@ <h4>Fees</h4>
         function handleFeeSelector(e) {
             switch (e.target.value) {
                 case 'custom':
-                    $('#send_fee').readOnly = false;
-                    $('#send_fee').placeholder = 'Fee';
-                    renderElem($('#selected_fee_tip'), html`Set custom fee`)
+                    getRef('send_fee').readOnly = false;
+                    getRef('send_fee').placeholder = 'Fee';
+                    renderElem(getRef('selected_fee_tip'), html`Set custom fee`)
                     feeMemo.memoized = false;
                     break;
                 case 'suggested':
                     calculateFees();
-                    $('#send_fee').readOnly = true;
+                    getRef('send_fee').readOnly = true;
                     break;
             }
         }
@@ -4975,28 +4973,28 @@ <h4>Fees</h4>
             memoizedFee: 0
         };
         function calculateFees() {
-            if ($('#fees_selector').value === 'custom') return;
+            if (getRef('fees_selector').value === 'custom') return;
             if (getRef('receiver_container').children.length === 0) return;
             const allValid = [...getRef('receiver_container').querySelectorAll('sm-input')].every(input => input.isValid)
             if (!allValid && feeMemo.memoized) return;
-            $('#fees_selector').children[0].click();
-            $('#fees_selector').classList.remove('hidden')
+            getRef('fees_selector').children[0].click();
+            getRef('fees_selector').classList.remove('hidden')
             getRef('initiate_transaction').disabled = true;
-            $('#send_fee').value = '';
-            $('#send_fee_loader').classList.remove('hidden')
+            getRef('send_fee').value = '';
+            getRef('send_fee_loader').classList.remove('hidden')
             const animOptions = {
                 duration: 200,
                 easing: 'ease',
                 fill: 'forwards'
             }
-            $('#send_fee_loader').animate(fadeIn, animOptions)
+            getRef('send_fee_loader').animate(fadeIn, animOptions)
             getRef('fees_section').classList.remove('hidden')
             getRef('error_section').classList.add('hidden')
             if (allValid) {
-                $('#send_fee').placeholder = 'Fee'
+                getRef('send_fee').placeholder = 'Fee'
                 calculateBtcFees().then(({ fee }) => {
-                    $('#send_fee').value = fee.toFixed(8);
-                    renderElem($('#selected_fee_tip'), html``)
+                    getRef('send_fee').value = fee.toFixed(8);
+                    renderElem(getRef('selected_fee_tip'), html``)
                     getRef('initiate_transaction').disabled = false;
                 }).catch(e => {
                     getRef('fees_section').classList.add('hidden')
@@ -5009,27 +5007,27 @@ <h4>Fees</h4>
                     `)
                     console.error(e)
                 }).finally(_ => {
-                    $('#send_fee_loader').animate(fadeOut, animOptions).onfinish = _ =>
-                        $('#send_fee_loader').classList.add('hidden')
+                    getRef('send_fee_loader').animate(fadeOut, animOptions).onfinish = _ =>
+                        getRef('send_fee_loader').classList.add('hidden')
 
                 })
                 feeMemo.memoized = false;
             } else {
-                $('#send_fee').placeholder = 'Approximate fee'
-                renderElem($('#selected_fee_tip'), html` <p style="opacity: 0.8;">*Fill out all fields for exact fee!</p> `)
+                getRef('send_fee').placeholder = 'Approximate fee'
+                renderElem(getRef('selected_fee_tip'), html` <p style="opacity: 0.8;">*Fill out all fields for exact fee!</p> `)
                 if (feeMemo.memoized) {
-                    $('#send_fee').value = feeMemo.memoizedFee.toFixed(8);
+                    getRef('send_fee').value = feeMemo.memoizedFee.toFixed(8);
                     return;
                 }
                 calculateApproxFee().then(fee => {
-                    $('#send_fee').value = fee.toFixed(8);
+                    getRef('send_fee').value = fee.toFixed(8);
                     feeMemo.memoizedFee = fee;
                 }).catch(e => {
-                    $('#fees_selector').children[1].click();
-                    $('#fees_selector').classList.add('hidden')
+                    getRef('fees_selector').children[1].click();
+                    getRef('fees_selector').classList.add('hidden')
                 }).finally(_ => {
-                    $('#send_fee_loader').animate(fadeOut, animOptions).onfinish = _ =>
-                        $('#send_fee_loader').classList.add('hidden')
+                    getRef('send_fee_loader').animate(fadeOut, animOptions).onfinish = _ =>
+                        getRef('send_fee_loader').classList.add('hidden')
                 })
                 feeMemo.memoized = true;
             }
@@ -5048,11 +5046,11 @@ <h4>Fees</h4>
                 const { redeemScript } = allMultiSigs[selectedMultisigAddress]
                 let result
                 if (multisigMode === 'btc') {
-                    const fee = parseFloat($('#send_fee').value.trim());
+                    const fee = parseFloat(getRef('send_fee').value.trim());
                     console.debug(selectedMultisigAddress, receivers, amounts, fee);
                     result = await messenger.multisig.createTx_BTC(selectedMultisigAddress, redeemScript, receivers, amounts, fee)
                 } else if (multisigMode === 'flo') {
-                    const floData = $('#send_tx__flo_data').value.trim();
+                    const floData = getRef('send_tx__flo_data').value.trim();
                     result = await messenger.multisig.createTx_FLO(floCrypto.toMultisigFloID(selectedMultisigAddress), redeemScript, receivers, amounts, floData)
                 }
                 console.log(result);
@@ -5068,7 +5066,7 @@ <h4>Fees</h4>
         }
         function highlightNewGroup(address) {
             getRef('feature_mode').firstElementChild.click();
-            const createdPipelineCard = getRef('chats_list').querySelector(`[data-flo-address="${address}"]`)
+            const createdPipelineCard = getRef('chats_list').querySelector(`[data-address="${address}"]`)
             if (createdPipelineCard) {
                 createdPipelineCard.scrollIntoView({ behavior: 'smooth' })
                 createdPipelineCard.classList.add('highlight')
@@ -5095,7 +5093,7 @@ <h4>Fees</h4>
                     getRef('messages_container').querySelector('.signing-banner').remove()
                     notify('Transaction signed', 'success')
                     if (messenger.pipeline[pipeID].disabled)
-                        document.getElementById('transaction_details').querySelector('h4').textContent = 'Transaction signatures complete'
+                        getRef('transaction_details').querySelector('h4').textContent = 'Transaction signatures complete'
                 } catch (err) {
                     notify(err, 'error')
                     buttonLoader(button, false)
diff --git a/scripts/components.js b/scripts/components.js
index 40048d1..f5d2770 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -11,7 +11,7 @@ const smSwitch = document.createElement("template"); smSwitch.innerHTML = '\t<st
 const smSelect = document.createElement("template"); smSelect.innerHTML = '<style> *{ padding: 0; margin: 0; box-sizing: border-box;} :host{ display: flex;}:host([disabled]) .select{ opacity: 0.6; cursor: not-allowed;}:host([readonly]) .select{ cursor: default; pointer-events: none;}.select{ position: relative; display: flex; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.icon { height: 1.2rem; width: 1.2rem; margin-left: 0.5rem; fill: rgba(var(--text-color, (17,17,17)), 0.7);} .selected-option-text{ font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;}.selection{ border-radius: var(--select-border-radius,0.5rem); display: grid; grid-template-columns: 1fr auto; grid-template-areas: \'heading heading\' \'. .\'; padding: var(--padding,0.6rem 0.8rem); background: var(--background, rgba(var(--text-color,(17,17,17)), 0.06)); align-items: center; outline: none; z-index: 2; height: 100%; align-content: center;}.selection:focus{ box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; }:host([align-select="left"]) .options{ left: 0;}:host([align-select="right"]) .options{ right: 0;}.options{ top: 100%; padding: var(--options-padding, 0.3rem); margin-top: 0.2rem;  overflow: hidden auto; position: absolute; grid-area: options; display: flex; flex-direction: column; width: var(--options-width, 100%); min-width: var(--min-width, auto); max-height: var(--max-height, auto); background: rgba(var(--foreground-color,(255,255,255)), 1); border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2); border-radius: var(--options-border-radius, 0.5rem); z-index: 1; box-shadow: 0 1rem 1.5rem rgba(0 0 0 /0.2);}:host([isUnder]) .options{ top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.2rem; box-shadow: 0 -1rem 1.5rem rgba(0 0 0 /0.2);}:host([open]) .icon--expand{ display: none;}:host([open]) .icon--collapse{ display: block;}.icon--expand{ display: block;}.icon--collapse{ display: none;}.hidden{ display: none;}@media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; height: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color,(17,17,17)), 0.5); } }}</style><div class="select"> <div class="selection" part="button"> <div class="selected-option-text"></div> <svg class="icon icon--expand" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg> <svg class="icon icon--collapse" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg> </div> <div part="options" class="options hidden"> <slot></slot>  </div></div>', customElements.define("sm-select", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSelect.content.cloneNode(!0)), this.focusIn = this.focusIn.bind(this), this.reset = this.reset.bind(this), this.open = this.open.bind(this), this.collapse = this.collapse.bind(this), this.toggle = this.toggle.bind(this), this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this), this.handleOptionSelection = this.handleOptionSelection.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.handleClickOutside = this.handleClickOutside.bind(this), this.selectOption = this.selectOption.bind(this), this.debounce = this.debounce.bind(this), this.elementsChanged = this.elementsChanged.bind(this), this.availableOptions = [], this.previousOption, this.isOpen = !1, this.label = "", this.defaultSelected = "", this.isUnderViewport = !1, this.animationOptions = { duration: 300, fill: "forwards", easing: "ease" }, this.optionList = this.shadowRoot.querySelector(".options"), this.selection = this.shadowRoot.querySelector(".selection"), this.selectedOptionText = this.shadowRoot.querySelector(".selected-option-text") } static get observedAttributes() { return ["disabled", "label", "readonly"] } get value() { return this.getAttribute("value") } set value(t) { const e = this.availableOptions.find(e => e.getAttribute("value") === t); e ? (this.setAttribute("value", t), this.selectOption(e)) : console.warn(`There is no option with ${t} as value`) } debounce(t, e) { let n = null; return (...i) => { window.clearTimeout(n), n = window.setTimeout(() => { t.apply(null, i) }, e) } } reset(t = !0) { if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { const e = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.value = e.getAttribute("value"), t && this.fireEvent() } } selectOption(t) { this.previousOption !== t && (this.querySelectorAll("[selected").forEach(t => t.removeAttribute("selected")), this.selectedOptionText.textContent = `${this.label}${t.textContent}`, t.setAttribute("selected", ""), this.previousOption = t) } focusIn() { this.selection.focus() } open() { this.availableOptions.forEach(t => t.setAttribute("tabindex", 0)), this.optionList.classList.remove("hidden"), this.isUnderViewport = this.getBoundingClientRect().bottom + this.optionList.getBoundingClientRect().height > window.innerHeight, this.isUnderViewport ? this.setAttribute("isUnder", "") : this.removeAttribute("isUnder"), this.optionList.animate([{ transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }, { transform: "translateY(0)", opacity: 1 }], this.animationOptions), this.setAttribute("open", ""), this.style.zIndex = 1e3, (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), document.addEventListener("mousedown", this.handleClickOutside), this.isOpen = !0 } collapse() { this.removeAttribute("open"), this.optionList.animate([{ transform: "translateY(0)", opacity: 1 }, { transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }], this.animationOptions).onfinish = (() => { this.availableOptions.forEach(t => t.removeAttribute("tabindex")), document.removeEventListener("mousedown", this.handleClickOutside), this.optionList.classList.add("hidden"), this.isOpen = !1, this.style.zIndex = "auto" }) } toggle() { this.isOpen || this.hasAttribute("disabled") ? this.collapse() : this.open() } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.value } })) } handleOptionsNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), document.activeElement.previousElementSibling ? document.activeElement.previousElementSibling.focus() : this.availableOptions[this.availableOptions.length - 1].focus()) : "ArrowDown" === t.key && (t.preventDefault(), document.activeElement.nextElementSibling ? document.activeElement.nextElementSibling.focus() : this.availableOptions[0].focus()) } handleOptionSelection(t) { this.previousOption !== document.activeElement && (this.value = document.activeElement.getAttribute("value"), this.fireEvent()) } handleClick(t) { t.target === this ? this.toggle() : (this.handleOptionSelection(), this.collapse()) } handleKeydown(t) { t.target === this ? this.isOpen && "ArrowDown" === t.key ? (t.preventDefault(), (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), this.handleOptionSelection(t)) : " " === t.key && (t.preventDefault(), this.toggle()) : (this.handleOptionsNavigation(t), this.handleOptionSelection(t), ["Enter", " ", "Escape", "Tab"].includes(t.key) && (t.preventDefault(), this.collapse(), this.focusIn())) } handleClickOutside(t) { this.isOpen && !this.contains(t.target) && this.collapse() } elementsChanged() { this.availableOptions = [...this.querySelectorAll("sm-option")], this.reset(!1), this.defaultSelected = this.value } connectedCallback() { this.setAttribute("role", "listbox"), this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.selection.setAttribute("tabindex", "0"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown)); const t = this.debounce(this.elementsChanged, 100); this.shadowRoot.querySelector("slot").addEventListener("slotchange", t), this.mutationObserver = new MutationObserver(e => { let n = !1; if (e.forEach(e => { switch (e.type) { case "childList": t(); break; case "attributes": n = !0 } }), n) { const t = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.selectedOptionText.textContent = `${this.label}${t.textContent}`, this.setAttribute("value", t.getAttribute("value")) } }), this.mutationObserver.observe(this, { subtree: !0, childList: !0, attributeFilter: ["selected"] }), new IntersectionObserver((t, e) => { t.forEach(t => { if (t.isIntersecting) { const t = this.selection.getBoundingClientRect().left; t < window.innerWidth / 2 ? this.setAttribute("align-select", "left") : this.setAttribute("align-select", "right") } }) }).observe(this) } disconnectedCallback() { this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown) } attributeChangedCallback(t) { "disabled" === t || "readonly" === t ? this.hasAttribute("disabled") || this.hasAttribute("readonly") ? (this.selection.removeAttribute("tabindex"), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown)) : (this.selection.setAttribute("tabindex", "0"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown)) : "label" === t && (this.label = this.hasAttribute("label") ? `${this.getAttribute("label")} ` : "") } }); const smOption = document.createElement("template"); smOption.innerHTML = '<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; border-radius: var(--border-radius, 0.3rem);}.option{ position: relative; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: 0.5rem; padding: var(--padding, 0.6rem 1rem); cursor: pointer; outline: none; user-select: none;}.option::before{ position: absolute; content: \'\'; display: block; width: 0.2rem; height: 1em; left: 0; border-radius: 0 1em 1em 0; background: rgba(var(--text-color,(17,17,17)), 0.5); transition: all 0.2s ease-in-out; opacity: 0;}:host(:focus){ outline: none; background: rgba(var(--text-color,(17,17,17)), 0.1);}:host(:focus) .option::before{ opacity: 1}:host([selected]) .option::before{ opacity: 1; background: var(--accent-color, teal);}@media (hover: hover){ .option:hover{ background: rgba(var(--text-color,(17,17,17)), 0.1); } :host(:not([selected]):hover) .option::before{ opacity: 1 }}</style><div class="option" part="option"> <slot></slot> </div>', customElements.define("sm-option", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smOption.content.cloneNode(!0)) } connectedCallback() { this.setAttribute("role", "option") } });
 const spinner = document.createElement("template"); spinner.innerHTML = '<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}.loader { display: flex; height: var(--size, 1.5rem); width: var(--size, 1.5rem); stroke-width: 8; overflow: visible; stroke: var(--accent-color, teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; animation: load 2s infinite, spin 1s linear infinite;}@keyframes load { 50% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -180; }}@keyframes spin { 100% { transform: rotate(360deg); }}</style><svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>'; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
 const smTextarea = document.createElement("template"); smTextarea.innerHTML = ' <style> *, *::before, *::after {  padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  ::-moz-focus-inner{ border: none; } .hide{ opacity: 0 !important; } :host{ display: grid; --danger-color: red; --border-radius: 0.3rem; --background: rgba(var(--text-color,(17,17,17)), 0.06); --padding: initial; --max-height: 8rem; } :host([variant="outlined"]) .textarea { box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset; background: rgba(var(--background-color,(255,255,255)), 1); } .textarea{ display: grid; position: relative; cursor: text; min-width: 0; text-align: left; grid-template-columns: 1fr; align-items: stretch; max-height: var(--max-height); background: var(--background); border-radius: var(--border-radius); padding: var(--padding); transition: opacity 0.3s, box-shadow 0.2s; } .textarea::after, textarea{ padding: var(--padding,0.6rem 0.8rem); width: 100%; min-width: 1em; font: inherit; color: inherit; resize: none; grid-area: 2/1; justify-self: stretch; background: none; appearance: none; border: none; outline: none; line-height: 1.5; overflow: hidden auto; } .textarea::after{ content: attr(data-value) \' \'; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .readonly{ pointer-events: none; } .textarea:focus-within:not(.readonly){ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } .placeholder{ margin: var(--padding,0.6rem 0.8rem); opacity: .7; font-weight: inherit; font-size: inherit; line-height: 1.5; pointer-events: none; user-select: none; grid-area: 2/1; } :host([disabled]) .textarea{ cursor: not-allowed; opacity: 0.6; } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; height: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color,(17,17,17)), 0.5); } } } </style> <label class="textarea" part="textarea"> <span class="placeholder"></span> <textarea rows="1"></textarea> </label> ', customElements.define("sm-textarea", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smTextarea.content.cloneNode(!0)), this.textarea = this.shadowRoot.querySelector("textarea"), this.textareaBox = this.shadowRoot.querySelector(".textarea"), this.placeholder = this.shadowRoot.querySelector(".placeholder"), this.reflectedAttributes = ["disabled", "required", "readonly", "rows", "minlength", "maxlength"], this.reset = this.reset.bind(this), this.focusIn = this.focusIn.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this) } static get observedAttributes() { return ["disabled", "value", "placeholder", "required", "readonly", "rows", "minlength", "maxlength"] } get value() { return this.textarea.value } set value(e) { this.setAttribute("value", e), this.fireEvent() } get disabled() { return this.hasAttribute("disabled") } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get isValid() { return this.textarea.checkValidity() } reset() { this.setAttribute("value", "") } focusIn() { this.textarea.focus() } fireEvent() { let e = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(e) } checkInput() { this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder") && ("" !== this.textarea.value ? this.placeholder.classList.add("hide") : this.placeholder.classList.remove("hide")) } connectedCallback() { this.textarea.addEventListener("input", e => { this.textareaBox.dataset.value = this.textarea.value, this.checkInput() }) } attributeChangedCallback(e, t, n) { this.reflectedAttributes.includes(e) ? this.hasAttribute(e) ? this.textarea.setAttribute(e, this.getAttribute(e) ? this.getAttribute(e) : "") : this.textContent.removeAttribute(e) : "placeholder" === e ? this.placeholder.textContent = this.getAttribute("placeholder") : "value" === e && (this.textarea.value = n, this.textareaBox.dataset.value = n, this.checkInput()) } });
-const textField = document.createElement("template"); textField.innerHTML = '<style> *{ padding: 0; margin: 0; box-sizing: border-box; }  .text-field{ display: flex; align-items: center; } .text{ padding: 0.6rem 0; transition: background-color 0.3s; border-bottom: 0.15rem solid transparent; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .text:focus{ outline: none; border-bottom: 0.15rem solid var(--accent-color); } :host([editable]) .text{ border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6); } :host([editable]:focus-within) .text{ border-bottom: 0.15rem solid var(--accent-color); } .edit-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem; margin-left: 0.3rem; } .edit-button:active{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } .hide{ display: none; } @media (any-hover: hover){ .edit-button:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } }</style><div class="text-field"> <div class="text" part="text"></div> <button class="edit-button" part="edit-button">Edit</button></div>', 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) } });
+const textField = document.createElement("template"); textField.innerHTML = '<style> *{ padding: 0; margin: 0; box-sizing: border-box; }  .text-field{ display: flex; align-items: center; } .text{ padding: 0.6rem 0; transition: background-color 0.3s; border-bottom: 0.15rem solid transparent; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .text:focus{ outline: none; border-bottom: 0.15rem solid var(--accent-color); } :host([editable]) .text{ border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6); } :host([editable]:focus-within) .text{ border-bottom: 0.15rem solid var(--accent-color); } .edit-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem; margin-left: 0.3rem; } .edit-button:active{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } .hide{ display: none; } @media (any-hover: hover){ .edit-button:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } }</style><div class="text-field"> <div class="text" part="text"></div> <button class="edit-button" part="edit-button">Edit</button></div>', 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) } });
 const themeToggle = document.createElement("template"); themeToggle.innerHTML = ' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ cursor: pointer; --height: 2.5rem; --width: 2.5rem; } .theme-toggle { display: flex; position: relative; width: 1.2rem; height: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle::after{ content: \'\'; position: absolute; height: var(--height); width: var(--width); top: 50%; left: 50%; opacity: 0; border-radius: 50%; pointer-events: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -50%) scale(1.2); background-color: rgba(var(--text-color,inherit), 0.12); } :host(:focus-within) .theme-toggle{ outline: none; } :host(:focus-within) .theme-toggle::after{ opacity: 1; transform: translate(-50%, -50%) scale(1); } .icon { position: absolute; height: 100%; width: 100%; fill: rgba(var(--text-color,inherit), 1); transition: transform 0.3s, opacity 0.1s; }  .theme-switcher__checkbox { display: none; } :host([checked]) .moon-icon { transform: translateY(50%); opacity: 0; } :host(:not([checked])) .sun-icon { transform: translateY(50%); opacity: 0; } </style> <label class="theme-toggle" title="Change theme" tabindex="0"> <slot name="light-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg> </slot> <slot name="dark-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg> </slot> </label>'; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { if (!document.startViewTransition) return this.toggleAttribute("checked"), void this.fireEvent(); document.startViewTransition(() => { this.toggleAttribute("checked"), this.fireEvent() }) } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
 //Color Grid
 const colorGrid = document.createElement('template');
diff --git a/scripts/components.min.js b/scripts/components.min.js
index 62d128e..ca116d1 100644
--- a/scripts/components.min.js
+++ b/scripts/components.min.js
@@ -1 +1 @@
-const smChips=document.createElement("template");smChips.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host{ padding: 1rem 0; max-width: 100%; } .hide{ opacity: 0; pointer-events: none; } input[type="radio"]{ display: none; } .scrolling-container{ position: relative; display: grid; grid-template-columns: min-content minmax(0,1fr) min-content; grid-template-rows: 1fr; } .sm-chips{ display: flex; position: relative; grid-area: 1/1/2/-1; gap: var(--gap, 0.5rem); overflow: auto hidden; } :host([multiline]) .sm-chips{ flex-wrap: wrap; } :host(:not([multiline])) .sm-chips{ max-width: 100%;  align-items: center; } .nav-button{ display: flex; z-index: 2; border: none; padding: 0.3rem; cursor: pointer; align-items: center; background: rgba(var(--background-color,(255,255,255)), 1); grid-row: 1; transition: opacity 0.2s; } .nav-button--left{ grid-column: 1; justify-self: start; } .nav-button--right{ grid-column: 3; justify-self: end; } .cover{ position: absolute; z-index: 1; width: 5rem; height: 100%; pointer-events: none; grid-row: 1; transition: opacity 0.2s; } .cover--left{ grid-column: 1; } .cover--right{ grid-column: 3; } .nav-button--right::before{ background-color: red; } .icon{ height: 1.2rem; width: 1.2rem; fill: rgba(var(--text-color,(17,17,17)), .8); } @media (hover: none){ ::-webkit-scrollbar { height: 0; } .nav-button{ display: none; } .sm-chips{ overflow: auto hidden; } .cover{ width: 2rem; } .cover--left{ background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent); } .cover--right{ right: 0; background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1)); } } @media (hover: hover){ ::-webkit-scrollbar-track { background-color: transparent !important; } ::-webkit-scrollbar { height: 0; background-color: transparent; } .sm-chips{ overflow: hidden; } .cover--left{ background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent); } .cover--right{ right: 0; background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%); } }</style><section class="scrolling-container"> <div class="cover cover--left hide"></div> <button class="nav-button nav-button--left hide"> <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> </button> <section class="sm-chips" part="chips-wrapper"> <slot></slot> </section> <button class="nav-button nav-button--right hide"> <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> </button> <div class="cover cover--right hide"></div></section>',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='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host(:focus-within){ outline: none; } :host(:focus-within) .sm-chip{ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } :host(:hover:not([selected])) .sm-chip{ background-color: rgba(var(--text-color,(17,17,17)), 0.06); } .sm-chip{ display: flex; flex-shrink: 0; cursor: pointer; white-space: nowrap; padding: var(--padding, 0.5rem 0.8rem); transition: background 0.3s; border-radius: var(--border-radius, 0.5rem); -webkit-tap-highlight-color: transparent; background: var(--background,inherit); } :host([selected]) .sm-chip{ background-color: var(--accent-color, teal); color: rgba(var(--background-color, (255,255,255)), 1); }</style><span class="sm-chip" part="chip"> <slot></slot></span>',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)}});const smCopy=document.createElement("template");smCopy.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: -webkit-box; display: flex; --padding: 0; --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);}.copy{ display: grid; gap: 0.5rem; padding: var(--padding); align-items: center; grid-template-columns: minmax(0, 1fr) auto;}:host(:not([clip-text])) .copy-content{ overflow-wrap: break-word; word-wrap: break-word;}:host([clip-text]) .copy-content{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.copy-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem;}.copy-button:active{ background-color: var(--button-background-color);}@media (any-hover: hover){ .copy:hover .copy-button{ opacity: 1; } .copy-button:hover{ background-color: var(--button-background-color); }}</style><section class="copy"> <p class="copy-content"> <slot></slot> </p> <button part="button" class="copy-button" title="copy"> <slot name="copy-icon"> COPY </slot> </button></section>',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)}});const smForm=document.createElement("template");smForm.innerHTML=' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ display: grid; width: 100%; } form{ display: inherit; gap: var(--gap, 1.5rem); width: 100%; } </style> <form part="form" onsubmit="return false"> <slot></slot> </form> ',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.invalidFieldsCount,this.skipSubmit=!1,this.isFormValid=void 0,this.supportedElements="input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio",this.formElements=[],this._requiredElements=[]}static get observedAttributes(){return["skip-submit"]}get validity(){return this.isFormValid}debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};_checkValidity=()=>{this.submitButton&&0!==this._requiredElements.length&&(this.invalidFieldsCount=0,this._requiredElements.forEach((([elem,isWC])=>{(!elem.disabled&&isWC&&!elem.isValid||!isWC&&!elem.checkValidity())&&this.invalidFieldsCount++})),this.isFormValid!==(0===this.invalidFieldsCount)&&(this.isFormValid=0===this.invalidFieldsCount,this.dispatchEvent(new CustomEvent(this.isFormValid?"valid":"invalid",{bubbles:!0,composed:!0})),this.skipSubmit||(this.submitButton.disabled=!this.isFormValid)))};handleKeydown=e=>{if("Enter"===e.key&&e.target.tagName.includes("INPUT"))if(0===this.invalidFieldsCount)this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}));else for(const[elem,isWC]of this._requiredElements)if(isWC?!elem.isValid:!elem.checkValidity()){(elem?.shadowRoot?.lastElementChild||elem).animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}),isWC?(elem.focusIn(),"SM-INPUT"===elem.tagName&&""===elem.value.trim()&&elem.showError()):elem.focus();break}};reset=()=>{this.formElements.forEach((([elem,isWC])=>{if(isWC)elem.reset();else switch(elem.type){case"checkbox":case"radio":elem.checked=!1;break;default:elem.value=""}})),this._checkValidity()};elementsChanged=()=>{this.formElements=[...this.querySelectorAll(this.supportedElements)].map((elem=>[elem,elem.tagName.includes("-")])),this._requiredElements=this.formElements.filter((([elem])=>elem.hasAttribute("required"))),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()};connectedCallback(){const updateFormDecedents=this.debounce(this.elementsChanged,100);this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100)),this.shadowRoot.querySelector("slot").addEventListener("slotchange",updateFormDecedents),this.mutationObserver=new MutationObserver((mutations=>{mutations.forEach((mutation=>{("childList"===mutation.type&&[...mutation.addedNodes].some((node=>1===node.nodeType&&node.querySelector(this.supportedElements)))||[...mutation.removedNodes].some((node=>1===node.nodeType&&node.querySelector(this.supportedElements))))&&updateFormDecedents()}))})),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(name,oldValue,newValue){"skip-submit"===name&&(this.skipSubmit=null!==newValue)}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),this.mutationObserver.disconnect()}});const smInput=document.createElement("template");smInput.innerHTML=' <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button,  input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;  } input::-ms-reveal, input::-ms-clear { display: none; } input:invalid{ outline: none; box-shadow: none; } ::-moz-focus-inner{ border: none; } :host{ display: flex; --success-color: #00C853; --danger-color: red; --width: 100%; --icon-gap: 0.5rem; --min-height: 3.2rem; --background: rgba(var(--text-color, (17,17,17)), 0.06); } .hidden{ display: none !important; } button{ display: flex; border: none; background: none; padding: 0; border-radius: 1rem; min-width: 0; cursor: pointer; } button:focus{ outline: var(--accent-color, teal) solid medium; } .icon { height: 1.2rem; width: 1.2rem; fill: rgba(var(--text-color, (17,17,17)), 0.6); }  :host(.round) .input{ border-radius: 10rem; } .outer-container{ position: relative; width: var(--width); } .input { display: flex; cursor: text; min-width: 0; text-align: left; align-items: center; position: relative; gap: var(--icon-gap); padding: var(--padding, 0.6rem 0.8rem); border-radius: var(--border-radius,0.3rem); transition: opacity 0.3s, box-shadow 0.2s; background: var(--background); width: 100%; outline: none; min-height: var(--min-height); overflow: hidden; } .input.readonly .clear{ opacity: 0 !important; margin-right: -2rem; pointer-events: none !important; } .readonly{ pointer-events: none; } .input:focus-within:not(.readonly){ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important; } .disabled{ pointer-events: none; opacity: 0.6; } .label { grid-area: 1/1/2/2; font-size: inherit; opacity: .7; font-weight: 400; transition: transform 0.3s; transform-origin: left; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; user-select: none; will-change: transform; } .container{ width: 100%; display: grid; grid-template-columns: 1fr auto; position: relative; align-items: center; }  input{ grid-area: 1/1/2/2; font-size: inherit; border: none; background: transparent; outline: none; color: inherit; font-family: inherit; height: 300%; width: 100%; caret-color: var(--accent-color, teal); font-weight: inherit; } .animate-placeholder .container input { transform: translateY(0.6rem); }  .animate-placeholder .label { transform: translateY(-0.7em) scale(0.8); opacity: 1; color: var(--accent-color,teal) } :host([variant="outlined"]) .input { box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; background: rgba(var(--background-color, (255,255,255)), 1); } .animate-placeholder:focus-within:not(.readonly) .label{ color: var(--accent-color,teal) } .feedback-text:not(:empty){ position: absolute; display: flex; width: fit-content; text-align: left; font-size: 0.9rem; align-items: center; padding: 0.8rem; border-radius: var(--border-radius,0.5rem); color: rgba(var(--text-color, (17,17,17)), 0.8); background: rgba(var(--foreground-color, (255,255,255)), 1); margin-top: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(var(--text-color, (17,17,17)), 0.1); z-index: 10; isolation: isolate; } .feedback-text:not(:empty)::before{ content: \'\'; height: 0; width: 0; position: absolute; border: 0.5rem solid transparent; border-bottom-color: rgba(var(--foreground-color, (255,255,255)), 1); top: -1rem; left: 1rem; } .success{ color: var(--success-color); } .error{ color: var(--danger-color); } .status-icon{ margin-right: 0.5rem; flex-shrink: 0; } .status-icon--error{ fill: var(--danger-color); } .status-icon--success{ fill: var(--success-color); } .datalist{ position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; background: rgba(var(--foreground-color, (255,255,255)), 1); border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); max-height: 20rem; overflow-y: auto; overflow-x: hidden; padding: 0.3rem; } .datalist-item{ padding: 0.8rem 1rem; cursor: pointer; transition: background 0.2s; border-radius: 0.5rem; content-visibility: auto; } .datalist-item:focus{ outline: none; } .datalist-item:focus-visible{ outline: var(--accent-color, teal) solid medium; } @media (any-hover: hover){ .icon:hover{ background: rgba(var(--text-color, (17,17,17)), 0.1); } .datalist-item:hover{ background: rgba(var(--text-color, (17,17,17)), 0.06); } } </style> <div class="outer-container"> <div part="input-wrapper" class="input"> <slot name="icon"></slot> <div class="container"> <label part="placeholder" class="label"></label> <input part="input" type="text"/> </div> <button class="clear hidden" title="Clear" tabindex="-1"> <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="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg> </button> <slot name="right"></slot> </div> <ul class="datalist hidden" part="datalist"></ul> <p class="feedback-text" part="feedback"></p> </div> ',customElements.define("sm-input",class extends HTMLElement{#validationState={validatedFor:void 0,isValid:!1,errorMessage:"Please fill out this field."};constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"]}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(val){val!==this.input.value&&(this.input.value=val,this._value=val,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(val){this.setAttribute("placeholder",val)}get type(){return this.getAttribute("type")}set type(val){this.setAttribute("type",val)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(value){value?(this.inputParent.classList.add("disabled"),this.setAttribute("disabled","")):(this.inputParent.classList.remove("disabled"),this.removeAttribute("disabled"))}get readOnly(){return this.hasAttribute("readonly")}set readOnly(value){value?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(val){val&&(this.validationFunction=val)}set errorText(val){this.#validationState.errorText=val}showError=(errorText=this.#validationState.errorText)=>{this.feedbackText.className="feedback-text error",this.feedbackText.innerHTML=` <svg class="status-icon status-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> ${errorText}`};set helperText(val){this._helperText=val}get isValid(){if(this.#validationState.validatedFor===this.input.value)return this.#validationState.isValid;const _isValid=this.input.checkValidity();let _validity={isValid:!0,errorText:""};return this.validationFunction&&(_validity=this.validationFunction(this.input.value)),_isValid&&_validity.isValid?(this.feedbackText.className="feedback-text success",this.feedbackText.textContent=""):""!==this.value.trim()&&(_validity.errorText||this.#validationState.errorText)&&this.showError(_validity.errorText||this.#validationState.errorText),this.#validationState.validatedFor=this.input.value,this.#validationState.isValid=_isValid&&_validity.isValid,this.#validationState.errorText=_validity.errorText||this.#validationState.errorText,this.#validationState.isValid}reset=()=>{this.value=""};clear=()=>{this.value="",this.input.focus(),this.fireEvent()};focusIn=()=>{this.input.focus()};focusOut=()=>{this.input.blur()};fireEvent=()=>{let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)};searchDatalist=searchKey=>{const filteredData=this.datalist.filter((item=>item.toLowerCase().includes(searchKey.toLowerCase())));if(filteredData.sort(((a,b)=>a.toLowerCase().indexOf(searchKey.toLowerCase())-b.toLowerCase().indexOf(searchKey.toLowerCase()))),filteredData.length){if(this.optionList.children.length>filteredData.length){const optionsToRemove=this.optionList.children.length-filteredData.length;for(let i=0;i<optionsToRemove;i++)this.optionList.removeChild(this.optionList.lastChild)}filteredData.forEach(((item,index)=>{if(this.optionList.children[index])this.optionList.children[index].textContent=item;else{const option=document.createElement("li");option.textContent=item,option.classList.add("datalist-item"),option.setAttribute("tabindex","0"),this.optionList.appendChild(option)}})),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")};checkInput=e=>{this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hidden"):this.clearBtn.classList.add("hidden")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.shouldAnimateLabel&&this.inputParent.classList.add("animate-placeholder"),this.label.classList.toggle("hidden",!this.shouldAnimateLabel),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchDatalist(this.input.value.trim())}),100))):(this.shouldAnimateLabel&&this.inputParent.classList.remove("animate-placeholder"),this.label.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))};allowOnlyNum=e=>{e.ctrlKey||1===e.key.length&&(("."!==e.key||!e.target.value.includes(".")&&0!==e.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(e.key)||e.preventDefault())};handleOptionClick=e=>{this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()};handleInputNavigation=e=>{"ArrowDown"===e.key?(e.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===e.key&&(e.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())};handleDatalistNavigation=e=>{"ArrowUp"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())};handleFocus=e=>{this.datalist.length&&this.searchDatalist(this.input.value.trim())};handleBlur=e=>{this.datalist.length&&this.optionList.classList.add("hidden")};connectedCallback(){const uuid=crypto.randomUUID();if(this.input.id=uuid,this.label.htmlFor=uuid,this.shouldAnimateLabel=this.hasAttribute("animate"),this.shouldAnimateLabel&&""!==this.placeholder&&this.value&&(this.inputParent.classList.add("animate-placeholder"),this.label.classList.remove("hidden")),this.setAttribute("role","textbox"),"undefined"!=typeof smCompConfig&&smCompConfig["sm-input"]){const config=smCompConfig["sm-input"].find((config=>this.matches(config.selector)));this.customValidation=config?.customValidation}this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue)switch(this.reflectedAttributes.includes(name)&&(this.hasAttribute(name)?this.input.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.input.removeAttribute(name)),name){case"placeholder":this.label.textContent=newValue,this.setAttribute("aria-label",newValue);break;case"value":this.checkInput();break;case"type":this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum);break;case"helper-text":this._helperText=newValue;break;case"error-text":this.#validationState.errorText=newValue;break;case"required":this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false");break;case"readonly":this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly");break;case"disabled":this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled");break;case"list":this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(","))}}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur)}});const smMenu=document.createElement("template");smMenu.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}:host{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;}.menu{ display: -ms-grid; display: grid; place-items: center; height: 2rem; width: 2rem; outline: none;}.icon { position: absolute; fill: rgba(var(--text-color), 0.7); height: 2.4rem; width: 2.4rem; padding: 0.5rem; border-radius: 2rem; -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s;} .select{ position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.menu:focus .icon,.focused{ background: rgba(var(--text-color), 0.1); }:host([align-options="left"]) .options{ left: 0;}:host([align-options="right"]) .options{ right: 0;}.options{ top: 100%; padding: 0.3rem; overflow: hidden auto; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--background, rgba(var(--background-color), 1)); border-radius: var(--border-radius, 0.5rem); z-index: 1; -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3); box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3); bottom: auto;}.hide{ display: none;}@media (hover: hover){ .menu:hover .icon{ background: rgba(var(--text-color), 0.1);  }}</style><div class="select"> <div class="menu" tabindex="0"> <slot name="icon"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> </slot> </div> <div class="options hide"> <slot></slot>  </div></div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=()=>{this.isOpen=!0,this.icon.classList.add("focused"),document.addEventListener("mousedown",this.handleClickOutside);const n=this.optionList.firstElementChild.assignedElements().find((n=>"MENU-OPTION"===n.tagName));n&&n.focus()})}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide"),document.removeEventListener("mousedown",this.handleClickOutside)})}toggle(){this.isOpen?this.collapse():this.expand()}handleClick(n){n.target===this?this.toggle():this.collapse()}handleKeyDown(n){n.target===this?"ArrowDown"===n.key?(n.preventDefault(),this.availableOptions[0].focus()):" "===n.key&&(n.preventDefault(),this.toggle()):"ArrowUp"===n.key?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.key?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.target.click(),this.collapse(),this.menu.focus())}handleClickOutside(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");this.shadowRoot.querySelector(".options slot").addEventListener("slotchange",(n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()})),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickOutside)}});const menuOption=document.createElement("template");menuOption.innerHTML='<style> *{ padding: 0; margin: 0; box-sizing: border-box;} :host{ display: flex; border-radius: var(--border-radius,0.3rem); overflow: hidden;}.option{ display: flex; min-width: 100%; padding: var(--padding, 0.6rem 1rem); cursor: pointer; overflow-wrap: break-word; white-space: nowrap; outline: none; user-select: none; align-items: center;}:host(:focus){ outline: none; background: rgba(var(--text-color), 0.1);}@media (any-hover: hover){ .option{ transition: background-color 0.2s; } .option:hover{ background: rgba(var(--text-color), 0.1); }}</style><div class="option"> <slot></slot> </div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this.addEventListener("keyup",(n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),this.click())}))}});const smNotifications=document.createElement("template");smNotifications.innerHTML=" <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host{ display: flex; --icon-height: 1.5rem; --icon-width: 1.5rem; } .hide{ opacity: 0 !important; pointer-events: none !important; } .notification-panel{ display: grid; width: min(26rem, 100%); gap: 0.5rem; position: fixed; left: 0; top: 0; z-index: 100; max-height: 100%; padding: 1rem; overflow: hidden auto; overscroll-behavior: contain; touch-action: none; } .notification-panel:empty{ display:none; } .notification{ display: flex; position: relative; border-radius: 0.5rem; background: rgba(var(--foreground-color, (255,255,255)), 1); overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; padding: max(1rem,1.5vw); align-items: center; box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14); touch-action: none; } .notification:not(.pinned)::before{ content: ''; position: absolute; bottom: 0; left: 0; height: 0.2rem; width: 100%; background-color: var(--accent-color, teal); animation: loading var(--timeout, 5000ms) linear forwards; transform-origin: left; } @keyframes loading{ to{ transform: scaleX(0); } } .icon-container:not(:empty){ margin-right: 0.5rem; height: var(--icon-height); width: var(--icon-width); flex-shrink: 0; } .notification:last-of-type{ margin-bottom: 0; } .icon { height: 100%; width: 100%; fill: rgba(var(--text-color, (17,17,17)), 0.7); } .icon--success { fill: var(--green); } .icon--failure, .icon--error { fill: var(--danger-color); } output{ width: 100%; } .close{ height: 2rem; width: 2rem; border: none; cursor: pointer; margin-left: 1rem; border-radius: 50%; padding: 0.3rem; transition: background-color 0.3s, transform 0.3s; background-color: transparent; flex-shrink: 0; } .close:active{ transform: scale(0.9); } .action{ display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.8rem; border-radius: 0.2rem; border: none; background-color: rgba(var(--text-color, (17,17,17)), 0.03); font-family: inherit; font-size: inherit; color: var(--accent-color, teal); font-weight: 500; cursor: pointer; } @media screen and (max-width: 640px){ .close{ display: none; } .notification-panel:not(:empty){ padding-bottom: 3rem; } } @media screen and (min-width: 640px){ .notification-panel{ top: auto; bottom: 0; max-width: max-content; } .notification{ width: auto; max-width: max-content;  border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17)), 0.5); } } .close:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } } </style> <div class=\"notification-panel\"></div> ",customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this),this.remove=this.remove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.notificationTimeout=5e3,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isBigViewport=!1}set timeout(value){isNaN(value)||(this.notificationTimeout=value)}randString(length){let result="";for(let i=0;i<length;i++)result+="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".charAt(Math.floor(52*Math.random()));return result}createNotification(message,options={}){const{pinned:pinned=!1,icon:icon,action:action,timeout:timeout=this.notificationTimeout}=options,notification=document.createElement("div");return notification.id=this.randString(8),notification.className="notification "+(pinned?"pinned":""),notification.style.setProperty("--timeout",`${timeout}ms`),notification.innerHTML=` ${icon?`<div class="icon-container">${icon}</div>`:""} <output>${message}</output> ${action?`<button class="action">${action.label}</button>`:""} <button class="close"> <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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg> </button> `,action&&notification.querySelector(".action").addEventListener("click",action.callback),notification.querySelector(".close").addEventListener("click",(()=>{this.removeNotification(notification)})),pinned||setTimeout((()=>{this.removeNotification(notification,this.isBigViewport?"left":"top")}),timeout),notification}push(message,options={}){const notification=this.createNotification(message,options);return this.isBigViewport?this.notificationPanel.append(notification):this.notificationPanel.prepend(notification),notification.scrollIntoView({behavior:"smooth"}),this.notificationPanel.animate([{transform:`translateY(${this.isBigViewport?"":"-"}${notification.clientHeight}px)`},{transform:"none"}],this.animationOptions),notification.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},notification.id}removeNotification(notification,direction="left"){if(!notification)return;const sign="left"===direction||"top"===direction?"-":"+";this.isBigViewport||"top"!==direction?notification.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}:notification.animate([{transform:this.currentX?`translateY(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateY(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}}remove(id){const notification=this.notificationPanel.querySelector(`#${id}`);notification&&this.removeNotification(notification)}clearAll(){Array.from(this.notificationPanel.children).forEach((child=>{this.removeNotification(child)}))}handleTouchMove(e){this.currentX=e.touches[0].clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(e){this.isBigViewport=e.matches,e.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("touchstart",(e=>{e.target.closest(".close")?this.removeNotification(e.target.closest(".notification")):e.target.closest(".notification")&&(this.swipeThreshold=e.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=e.target.closest(".notification"),this.startTime=Date.now(),this.startX=e.touches[0].clientX,this.startY=e.touches[0].clientY,this.notificationPanel.addEventListener("touchmove",this.handleTouchMove,{passive:!0}))}),{passive:!0}),this.notificationPanel.addEventListener("touchend",(e=>{this.endX=e.changedTouches[0].clientX,this.endY=e.changedTouches[0].clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime<this.swipeTimeThreshold?this.swipeDistance>50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},this.notificationPanel.removeEventListener("touchmove",this.handleTouchMove),this.currentX=0}))}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}});class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.innerHTML=' <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } :host{ position: fixed; display: -ms-grid; display: grid; z-index: 10; --width: 100%; --height: auto; --min-width: auto; --min-height: auto; --backdrop-background: rgba(0, 0, 0, 0.6); --border-radius: 0.8rem 0.8rem 0 0; } .popup-container{ display: -ms-grid; display: grid; position: fixed; top: 0; bottom: 0; left: 0; right: 0; place-items: center; z-index: 10; touch-action: none; } :host(.stacked) .popup{ -webkit-transform: scale(0.9) translateY(-2rem) !important; transform: scale(0.9) translateY(-2rem) !important; } .backdrop{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--backdrop-background); -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .popup{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: var(--width); min-width: var(--min-width); height: var(--height); min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); background: rgba(var(--background-color, (255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } .container-header{ display: -webkit-box; display: flex; width: 100%; touch-action: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popup-top{ display: -webkit-box; display: flex; width: 100%; } .popup-body{ display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; padding: var(--body-padding, 1.5rem); overflow-y: auto; } .hide{ display:none; } @media screen and (min-width: 640px){ :host{ --border-radius: 0.5rem; } .popup{ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: var(--border-radius); height: var(--height); -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040; box-shadow: 0 3rem 2rem -0.5rem #00000040; } } @media screen and (max-width: 640px){ .popup-top{ -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .handle{ height: 0.3rem; width: 2rem; background: rgba(var(--text-color, (17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; } ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17))), 0.5); } } } </style> <div class="popup-container hide" role="dialog"> <div part="backdrop" class="backdrop"></div> <div part="popup" class="popup"> <div part="popup-header" class="popup-top"> <div class="handle"></div> <slot name="header"></slot> </div> <div part="popup-body" class="popup-body"> <slot></slot> </div> </div> </div> ',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.dialogBox=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.detectFocus=this.detectFocus.bind(this),this.handleSoftDismiss=this.handleSoftDismiss.bind(this),this.debounce=this.debounce.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,i){let s=t.animate(e,{...i,fill:"both"});return s.finished.then((()=>{s.commitStyles(),s.cancel()})),s}resumeScrolling(){let t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){let t=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.dialogBox,[{opacity:this.offset?1:0,transform:t},{opacity:1,transform:"none"}],{duration:300,easing:"ease"})}}show(t={}){let{pinned:e=!1,payload:i}=t;if(this.isOpen)return;let s={duration:300,easing:"ease"};return this.payload=i,popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],s),this.popupContainer.classList.remove("hide"),this.offset||(this.backdrop.animate([{opacity:0},{opacity:1}],s).onfinish=()=>{this.resolveOpen(this.payload)},this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,composed:!0,detail:{payload:this.payload}})),document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`),this.setStateOpen(),this.pinned=e,this.isOpen=!0,setTimeout((()=>{let t=this.autoFocus||this.focusable?.[0]||this.dialogBox;t&&(t.tagName.includes("-")?t.focusIn():t.focus())}),0),this.hasAttribute("open")||(this.setAttribute("open",""),this.addEventListener("keydown",this.detectFocus),this.resizeObserver.observe(this),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.addEventListener("mousedown",this.handleSoftDismiss)),{opened:new Promise((t=>{this.resolveOpen=t})),closed:new Promise((t=>{this.resolveClose=t}))}}hide(t={}){let{payload:e}=t,i={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],i),this.animateTo(this.dialogBox,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],i).finished.finally((()=>{this.popupContainer.classList.add("hide"),this.dialogBox.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach((t=>t.reset())),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,composed:!0,detail:{payload:e||this.payload}})),this.resolveClose(e||this.payload),this.isOpen=!1})),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],i):this.resumeScrolling(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimation=window.requestAnimationFrame((()=>{this.dialogBox.style.transform=`translateY(${this.offset}px)`})))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.dialogBox.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.key&&this.focusable.length){if(!this.firstFocusable)for(let e=0;e<this.focusable.length;e++)if(!this.focusable[e].disabled){this.firstFocusable=this.focusable[e];break}if(!this.lastFocusable)for(let i=this.focusable.length-1;i>=0;i--)if(!this.focusable[i].disabled){this.lastFocusable=this.focusable[i];break}t.shiftKey&&document.activeElement===this.firstFocusable?(t.preventDefault(),this.lastFocusable.tagName.includes("SM-")?this.lastFocusable.focusIn():this.lastFocusable.focus()):t.shiftKey||document.activeElement!==this.lastFocusable||(t.preventDefault(),this.firstFocusable.tagName.includes("SM-")?this.firstFocusable.focusIn():this.firstFocusable.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]"),this.firstFocusable=null,this.lastFocusable=null}handleSoftDismiss(){this.pinned?this.dialogBox.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}):this.hide()}debounce(t,e){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout((()=>{t.apply(null,s)}),e)}}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",this.debounce((()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),0)),this.resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{if(t.contentBoxSize){let e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*t.contentRect.height}))})),this.mutationObserver=new MutationObserver((t=>{this.updateFocusableList()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}});const smSwitch=document.createElement("template");smSwitch.innerHTML='\t<style> *{ box-sizing: border-box; padding: 0; margin: 0; }  :host{ display: inline-flex; } :host(:active) .thumb{ box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset; } label{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } :host([disabled]) { cursor: not-allowed; opacity: 0.6; pointer-events: none; } .switch { position: relative; display: flex; align-items: center; width: 2.4rem; flex-shrink: 0; margin-left: auto; padding: 0.2rem; cursor: pointer; border-radius: 2rem; }  input { display: none; }  .track { position: absolute; left: 0; right: 0; height: 1.4rem; transition: background 0.3s; background: rgba(var(--text-color,inherit), 0.4); box-shadow: 0 0.1rem 0.3rem #00000040 inset; border-radius: 1rem; }  label:active .thumb::after, label:focus-within .thumb::after{ opacity: 1; }  .thumb::after{ content: \'\'; display: flex; position: absolute; height: 2.6rem; width: 2.6rem; background: rgba(var(--text-color,inherit), 0.2); border-radius: 2rem; opacity: 0; transition: opacity 0.3s; }  .thumb { position: relative; display: inline-flex; height: 1rem; width: 1rem; justify-content: center; align-items: center; border-radius: 1rem; box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset; transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); background-color: inherit; }  input:checked ~ .thumb { transform: translateX(100%); }  input:checked ~ .track { background: var(--accent-color, teal); }</style><label tabindex="0"> <slot name="left"></slot> <div part="switch" class="switch"> <input type="checkbox"> <div class="track"></div> <div class="thumb"></div> </div> <slot name="right"></slot></label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",(e=>{" "!==e.key||this.isDisabled||(e.preventDefault(),this.input.click())})),this.input.addEventListener("click",(e=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()}))}attributeChangedCallback(e,t,n){t!==n&&("disabled"===e?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===e&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});const smSelect=document.createElement("template");smSelect.innerHTML='<style> *{ padding: 0; margin: 0; box-sizing: border-box;} :host{ display: flex;}:host([disabled]) .select{ opacity: 0.6; cursor: not-allowed;}:host([readonly]) .select{ cursor: default; pointer-events: none;}.select{ position: relative; display: flex; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.icon { height: 1.2rem; width: 1.2rem; margin-left: 0.5rem; fill: rgba(var(--text-color, (17,17,17)), 0.7);} .selected-option-text{ font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;}.selection{ border-radius: var(--select-border-radius,0.5rem); display: grid; grid-template-columns: 1fr auto; grid-template-areas: \'heading heading\' \'. .\'; padding: var(--padding,0.6rem 0.8rem); background: var(--background, rgba(var(--text-color,(17,17,17)), 0.06)); align-items: center; outline: none; z-index: 2; height: 100%; align-content: center;}.selection:focus{ box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; }:host([align-select="left"]) .options{ left: 0;}:host([align-select="right"]) .options{ right: 0;}.options{ top: 100%; padding: var(--options-padding, 0.3rem); margin-top: 0.2rem;  overflow: hidden auto; position: absolute; grid-area: options; display: flex; flex-direction: column; width: var(--options-width, 100%); min-width: var(--min-width, auto); max-height: var(--max-height, auto); background: rgba(var(--foreground-color,(255,255,255)), 1); border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2); border-radius: var(--options-border-radius, 0.5rem); z-index: 1; box-shadow: 0 1rem 1.5rem rgba(0 0 0 /0.2);}:host([isUnder]) .options{ top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.2rem; box-shadow: 0 -1rem 1.5rem rgba(0 0 0 /0.2);}:host([open]) .icon--expand{ display: none;}:host([open]) .icon--collapse{ display: block;}.icon--expand{ display: block;}.icon--collapse{ display: none;}.hidden{ display: none;}@media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; height: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color,(17,17,17)), 0.5); } }}</style><div class="select"> <div class="selection" part="button"> <div class="selected-option-text"></div> <svg class="icon icon--expand" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg> <svg class="icon icon--collapse" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg> </div> <div part="options" class="options hidden"> <slot></slot>  </div></div>',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.selectOption=this.selectOption.bind(this),this.debounce=this.debounce.bind(this),this.elementsChanged=this.elementsChanged.bind(this),this.availableOptions=[],this.previousOption,this.isOpen=!1,this.label="",this.defaultSelected="",this.isUnderViewport=!1,this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label","readonly"]}get value(){return this.getAttribute("value")}set value(t){const e=this.availableOptions.find((e=>e.getAttribute("value")===t));e?(this.setAttribute("value",t),this.selectOption(e)):console.warn(`There is no option with ${t} as value`)}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout((()=>{t.apply(null,i)}),e)}}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0];this.value=e.getAttribute("value"),t&&this.fireEvent()}}selectOption(t){this.previousOption!==t&&(this.querySelectorAll("[selected").forEach((t=>t.removeAttribute("selected"))),this.selectedOptionText.textContent=`${this.label}${t.textContent}`,t.setAttribute("selected",""),this.previousOption=t)}focusIn(){this.selection.focus()}open(){this.availableOptions.forEach((t=>t.setAttribute("tabindex",0))),this.optionList.classList.remove("hidden"),this.isUnderViewport=this.getBoundingClientRect().bottom+this.optionList.getBoundingClientRect().height>window.innerHeight,this.isUnderViewport?this.setAttribute("isUnder",""):this.removeAttribute("isUnder"),this.optionList.animate([{transform:`translateY(${this.isUnderViewport?"":"-"}0.5rem)`,opacity:0},{transform:"translateY(0)",opacity:1}],this.animationOptions),this.setAttribute("open",""),this.style.zIndex=1e3,(this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0]).focus(),document.addEventListener("mousedown",this.handleClickOutside),this.isOpen=!0}collapse(){this.removeAttribute("open"),this.optionList.animate([{transform:"translateY(0)",opacity:1},{transform:`translateY(${this.isUnderViewport?"":"-"}0.5rem)`,opacity:0}],this.animationOptions).onfinish=()=>{this.availableOptions.forEach((t=>t.removeAttribute("tabindex"))),document.removeEventListener("mousedown",this.handleClickOutside),this.optionList.classList.add("hidden"),this.isOpen=!1,this.style.zIndex="auto"}}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.key&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.fireEvent())}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.key?(t.preventDefault(),(this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0]).focus(),this.handleOptionSelection(t)):" "===t.key&&(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),["Enter"," ","Escape","Tab"].includes(t.key)&&(t.preventDefault(),this.collapse(),this.focusIn()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}elementsChanged(){this.availableOptions=[...this.querySelectorAll("sm-option")],this.reset(!1),this.defaultSelected=this.value}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.selection.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown));const t=this.debounce(this.elementsChanged,100);this.shadowRoot.querySelector("slot").addEventListener("slotchange",t),this.mutationObserver=new MutationObserver((e=>{let n=!1;if(e.forEach((e=>{switch(e.type){case"childList":t();break;case"attributes":n=!0}})),n){const t=this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0];this.selectedOptionText.textContent=`${this.label}${t.textContent}`,this.setAttribute("value",t.getAttribute("value"))}})),this.mutationObserver.observe(this,{subtree:!0,childList:!0,attributeFilter:["selected"]}),new IntersectionObserver(((t,e)=>{t.forEach((t=>{if(t.isIntersecting){this.selection.getBoundingClientRect().left<window.innerWidth/2?this.setAttribute("align-select","left"):this.setAttribute("align-select","right")}}))})).observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}attributeChangedCallback(t){"disabled"===t||"readonly"===t?this.hasAttribute("disabled")||this.hasAttribute("readonly")?(this.selection.removeAttribute("tabindex"),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)):(this.selection.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; border-radius: var(--border-radius, 0.3rem);}.option{ position: relative; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: 0.5rem; padding: var(--padding, 0.6rem 1rem); cursor: pointer; outline: none; user-select: none;}.option::before{ position: absolute; content: \'\'; display: block; width: 0.2rem; height: 1em; left: 0; border-radius: 0 1em 1em 0; background: rgba(var(--text-color,(17,17,17)), 0.5); transition: all 0.2s ease-in-out; opacity: 0;}:host(:focus){ outline: none; background: rgba(var(--text-color,(17,17,17)), 0.1);}:host(:focus) .option::before{ opacity: 1}:host([selected]) .option::before{ opacity: 1; background: var(--accent-color, teal);}@media (hover: hover){ .option:hover{ background: rgba(var(--text-color,(17,17,17)), 0.1); } :host(:not([selected]):hover) .option::before{ opacity: 1 }}</style><div class="option" part="option"> <slot></slot> </div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option")}});const spinner=document.createElement("template");spinner.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}.loader { display: flex; height: var(--size, 1.5rem); width: var(--size, 1.5rem); stroke-width: 8; overflow: visible; stroke: var(--accent-color, teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; animation: load 2s infinite, spin 1s linear infinite;}@keyframes load { 50% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -180; }}@keyframes spin { 100% { transform: rotate(360deg); }}</style><svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);const smTextarea=document.createElement("template");smTextarea.innerHTML=' <style> *, *::before, *::after {  padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  ::-moz-focus-inner{ border: none; } .hide{ opacity: 0 !important; } :host{ display: grid; --danger-color: red; --border-radius: 0.3rem; --background: rgba(var(--text-color,(17,17,17)), 0.06); --padding: initial; --max-height: 8rem; } :host([variant="outlined"]) .textarea { box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset; background: rgba(var(--background-color,(255,255,255)), 1); } .textarea{ display: grid; position: relative; cursor: text; min-width: 0; text-align: left; grid-template-columns: 1fr; align-items: stretch; max-height: var(--max-height); background: var(--background); border-radius: var(--border-radius); padding: var(--padding); transition: opacity 0.3s, box-shadow 0.2s; } .textarea::after, textarea{ padding: var(--padding,0.6rem 0.8rem); width: 100%; min-width: 1em; font: inherit; color: inherit; resize: none; grid-area: 2/1; justify-self: stretch; background: none; appearance: none; border: none; outline: none; line-height: 1.5; overflow: hidden auto; } .textarea::after{ content: attr(data-value) \' \'; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .readonly{ pointer-events: none; } .textarea:focus-within:not(.readonly){ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } .placeholder{ margin: var(--padding,0.6rem 0.8rem); opacity: .7; font-weight: inherit; font-size: inherit; line-height: 1.5; pointer-events: none; user-select: none; grid-area: 2/1; } :host([disabled]) .textarea{ cursor: not-allowed; opacity: 0.6; } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; height: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color,(17,17,17)), 0.5); } } } </style> <label class="textarea" part="textarea"> <span class="placeholder"></span> <textarea rows="1"></textarea> </label> ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",(e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()}))}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});const textField=document.createElement("template");textField.innerHTML='<style> *{ padding: 0; margin: 0; box-sizing: border-box; }  .text-field{ display: flex; align-items: center; } .text{ padding: 0.6rem 0; transition: background-color 0.3s; border-bottom: 0.15rem solid transparent; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .text:focus{ outline: none; border-bottom: 0.15rem solid var(--accent-color); } :host([editable]) .text{ border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6); } :host([editable]:focus-within) .text{ border-bottom: 0.15rem solid var(--accent-color); } .edit-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem; margin-left: 0.3rem; } .edit-button:active{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } .hide{ display: none; } @media (any-hover: hover){ .edit-button:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } }</style><div class="text-field"> <div class="text" part="text"></div> <button class="edit-button" part="edit-button">Edit</button></div>',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)}});const themeToggle=document.createElement("template");themeToggle.innerHTML=' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ cursor: pointer; --height: 2.5rem; --width: 2.5rem; } .theme-toggle { display: flex; position: relative; width: 1.2rem; height: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle::after{ content: \'\'; position: absolute; height: var(--height); width: var(--width); top: 50%; left: 50%; opacity: 0; border-radius: 50%; pointer-events: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -50%) scale(1.2); background-color: rgba(var(--text-color,inherit), 0.12); } :host(:focus-within) .theme-toggle{ outline: none; } :host(:focus-within) .theme-toggle::after{ opacity: 1; transform: translate(-50%, -50%) scale(1); } .icon { position: absolute; height: 100%; width: 100%; fill: rgba(var(--text-color,inherit), 1); transition: transform 0.3s, opacity 0.1s; }  .theme-switcher__checkbox { display: none; } :host([checked]) .moon-icon { transform: translateY(50%); opacity: 0; } :host(:not([checked])) .sun-icon { transform: translateY(50%); opacity: 0; } </style> <label class="theme-toggle" title="Change theme" tabindex="0"> <slot name="light-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg> </slot> <slot name="dark-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg> </slot> </label>';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){if(!document.startViewTransition)return this.toggleAttribute("checked"),void this.fireEvent();document.startViewTransition((()=>{this.toggleAttribute("checked"),this.fireEvent()}))}handleKeyDown(e){" "===e.key&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem(`${window.location.hostname}-theme`,"dark")):(this.daylight(),localStorage.setItem(`${window.location.hostname}-theme`,"light")))}}window.customElements.define("theme-toggle",ThemeToggle);const colorGrid=document.createElement("template");colorGrid.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: flex;\n    }\n    .color-tile-container{\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n    }\n    .color-tile{\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        height: 2.5rem;\n        width: 2.5rem;\n        border-radius: 0.3rem;\n        align-items: center;\n        justify-content: center;\n    }\n    .color-tile input[type="radio"]{\n        display: none;\n    }\n    .checkmark{\n        display: flex;\n        position: absolute;\n        top: 0;\n        right: 0;\n        align-items: center;\n        justify-content: center;\n        padding: 0.3rem;\n        border-radius: 0.3rem;\n        background-color: rgba(var(--background-color, (255,255,255)), 0.8);\n        animation: checkmark 0.1s ease;\n    }\n    .icon{\n        height: 1rem;\n        width: 1rem;\n        fill: rgba(var(--text-color, (17,17,17)), 1);\n    }\n    @keyframes checkmark{\n        from{\n            transform: scale(0);\n        }\n        to{\n            transform: scale(1);\n        }\n    }\n\n</style>\n<div class="color-tile-container">\n</div>',customElements.define("color-grid",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(colorGrid.content.cloneNode(!0)),this.colorArray=[],this.container=this.shadowRoot.querySelector(".color-tile-container"),this.handleChange=this.handleChange.bind(this),this.setCheckMark=this.setCheckMark.bind(this)}set colors(arr){this.colorArray=arr,this.renderTiles()}set selectedColor(color){if(this.colorArray.includes(color)&&this.container.querySelector(`[data-color="${color}"]`)){const selectedTile=this.container.querySelector(`[data-color="${color}"]`);selectedTile&&(selectedTile.querySelector("input").checked=!0,this.setCheckMark(selectedTile))}}randString(length){let result="",characters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i<length;i++)result+=characters.charAt(Math.floor(62*Math.random()));return result}renderTiles(){this.container.innerHTML="";const frag=document.createDocumentFragment(),groupName=this.randString(6);this.colorArray.forEach((color=>{const label=document.createElement("label");label.classList.add("color-tile"),label.setAttribute("data-color",color),color.includes("--")?label.setAttribute("style",`background-color: var(${color})`):label.setAttribute("style",`background-color: ${color}`),label.innerHTML=`\n                <input type="radio" name="${groupName}">\n                `,frag.append(label)})),this.container.append(frag)}setCheckMark(target){target.parentNode.querySelectorAll(".checkmark").forEach((checkmark=>checkmark.remove()));const checkMark=document.createElement("div");checkMark.classList.add("checkmark"),checkMark.innerHTML='\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>\n            ',target.append(checkMark)}handleChange(e){const clickedTile=e.target.closest(".color-tile");this.setCheckMark(clickedTile);const clickedTileColor=clickedTile.dataset.color,tileSelected=new CustomEvent("colorselected",{bubbles:!0,composed:!0,detail:{value:clickedTileColor}});this.dispatchEvent(tileSelected)}connectedCallback(){this.container.addEventListener("change",this.handleChange)}disconnectedCallback(){this.container.removeEventListener("change",this.handleChange)}}),window.customElements.define("keys-generator",class extends HTMLElement{constructor(){super(),this.innerHTML='\n                    <style>\n                        :host{\n                            display: flex;\n                            justify-content: center;\n                        }\n                        .generated-keys-wrapper {\n                            padding: 1rem;\n                            background-color: rgba(var(--foreground-color), 1);\n                            border-radius: 0.5rem;\n                        }\n                        #flo_id_warning{\n                            padding-bottom: 1.5rem;\n                        }\n                        #flo_id_warning .icon {\n                            height: 3rem;\n                            width: 3rem;\n                            padding: 0.8rem;\n                            overflow: visible;\n                            background-color: #ffc107;\n                            border-radius: 3rem;\n                            fill: rgba(0, 0, 0, 0.8);\n                        }\n                    </style>     \n                    <section class="grid gap-1-5">\n                        <div id="flo_id_warning" class="flex gap-1">\n                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>\n                            <div class="grid gap-0-5">\n                                <strong>\n                                    <h3> Keep your keys safe! </h3>\n                                </strong>\n                                <p>Don\'t share with anyone. Once lost private key can\'t be recovered.</p>\n                            </div>\n                        </div>\n                        <div class="grid gap-1-5 generated-keys-wrapper">\n                            <div class="grid gap-0-5">\n                                <h5>FLO address</h5>\n                                <sm-copy id="generated_flo_address"></sm-copy>\n                            </div>\n                            <div class="grid gap-0-5">\n                                <h5>Private key</h5>\n                                <sm-copy id="generated_private_key"></sm-copy>\n                            </div>\n                        </div>\n                        <button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>\n                        <p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>\n                    </section>\n                '}get keys(){return{floID:this.querySelector("#generated_flo_address").value,privKey:this.querySelector("#generated_private_key").value}}generateKeys(){const{floID:floID,privKey:privKey}=floCrypto.generateNewID();this.querySelector("#generated_flo_address").value=floID,this.querySelector("#generated_private_key").value=privKey}clearKeys(){this.querySelector("#generated_flo_address").value="",this.querySelector("#generated_private_key").value=""}});const adBlockerWarning=document.createElement("template");adBlockerWarning.innerHTML='\n            <style>\n                * {\n                    padding: 0;\n                    margin: 0;\n                    box-sizing: border-box;\n                }\n                :host{\n                    display: flex;\n                    flex-direction: column;\n                    align-content: center;\n                    justify-content: center;\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    z-index: 50;\n                    background-color: rgba(var(--foreground-color), 1);\n                }\n                #adblocker_warning {\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                    text-align: center;\n                    gap: 1rem;\n                    padding: 1.5rem;\n                }\n                h1{\n                    font-size: 2rem;\n                    margin-top: 1rem;\n                }\n                p{\n                    font-size: 0.9rem;\n                    max-width: 65ch;\n                    line-height: 1.7;\n                    color: rgba(var(--text-color), 0.9);\n                }\n                .icon {\n                    height: 4rem;\n                    width: 4rem;\n                    fill: #ffc107;\n                }\n            </style>\n            <article id="adblocker_warning"></article>\n        ',window.customElements.define("adblocker-warning",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(adBlockerWarning.content.cloneNode(!0))}connectedCallback(){const isBrave=void 0!==navigator.brave;this.shadowRoot.querySelector("#adblocker_warning").innerHTML=`\n                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>\n                    <h1>Ad-Blocker Detected!</h1>\n                    <p>\n                        Please disable your ad-blocker for optimal experience. Our app doesn't show ads or track activity.   \n                    </p>\n                    ${isBrave?"<strong>If you have enabled Brave shield then disable it also.</strong>":""}\n                `}});const IDBsupport=document.createElement("template");IDBsupport.innerHTML='\n            <style>\n                * {\n                    padding: 0;\n                    margin: 0;\n                    box-sizing: border-box;\n                }\n                :host{\n                    display: flex;\n                    flex-direction: column;\n                    align-content: center;\n                    justify-content: center;\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    z-index: 50;\n                    background-color: rgba(var(--foreground-color), 1);\n                }\n                #idb_support {\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                    text-align: center;\n                    gap: 1rem;\n                    padding: 1.5rem;\n                }\n                h1{\n                    font-size: 2rem;\n                    margin-top: 1rem;\n                    margin-bottom: 2rem;\n                }\n                p{\n                    font-size: 0.9rem;\n                    max-width: 65ch;\n                    line-height: 1.7;\n                    color: rgba(var(--text-color), 0.9);\n                }\n                .icon {\n                    height: 4rem;\n                    width: 4rem;\n                    fill: #ffc107;\n                }\n            </style>\n            <article id="idb_support" style="display: none">\n                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>\n                <h1>Your browser doesn\'t support IndexedDB</h1>\n                <p>\n                    This app uses IndexedDB to store your data locally. Without IndexedDB support this app won\'t work.\n                </p>\n                <p> \n                    Please use browsers like Chrome, Firefox, Opera, Edge, Safari, Brave, etc.\n                </p>\n                <strong> If you are using Firefox TOR then consider using brave TOR instead. </strong>\n            </article>\n        ',window.customElements.define("idb-support",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(IDBsupport.content.cloneNode(!0))}connectedCallback(){const thisComponent=this;if("indexedDB"in window){const request=window.indexedDB.open("testDB",1);request.onerror=function(event){console.log("IndexedDB is not allowed or encountered an error."),thisComponent.shadowRoot.querySelector("#idb_support").style.display="flex"},request.onsuccess=function(event){thisComponent.remove()}}else console.log("IndexedDB is not supported.")}});
\ No newline at end of file
+const smChips=document.createElement("template");smChips.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host{ padding: 1rem 0; max-width: 100%; } .hide{ opacity: 0; pointer-events: none; } input[type="radio"]{ display: none; } .scrolling-container{ position: relative; display: grid; grid-template-columns: min-content minmax(0,1fr) min-content; grid-template-rows: 1fr; } .sm-chips{ display: flex; position: relative; grid-area: 1/1/2/-1; gap: var(--gap, 0.5rem); overflow: auto hidden; } :host([multiline]) .sm-chips{ flex-wrap: wrap; } :host(:not([multiline])) .sm-chips{ max-width: 100%;  align-items: center; } .nav-button{ display: flex; z-index: 2; border: none; padding: 0.3rem; cursor: pointer; align-items: center; background: rgba(var(--background-color,(255,255,255)), 1); grid-row: 1; transition: opacity 0.2s; } .nav-button--left{ grid-column: 1; justify-self: start; } .nav-button--right{ grid-column: 3; justify-self: end; } .cover{ position: absolute; z-index: 1; width: 5rem; height: 100%; pointer-events: none; grid-row: 1; transition: opacity 0.2s; } .cover--left{ grid-column: 1; } .cover--right{ grid-column: 3; } .nav-button--right::before{ background-color: red; } .icon{ height: 1.2rem; width: 1.2rem; fill: rgba(var(--text-color,(17,17,17)), .8); } @media (hover: none){ ::-webkit-scrollbar { height: 0; } .nav-button{ display: none; } .sm-chips{ overflow: auto hidden; } .cover{ width: 2rem; } .cover--left{ background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent); } .cover--right{ right: 0; background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1)); } } @media (hover: hover){ ::-webkit-scrollbar-track { background-color: transparent !important; } ::-webkit-scrollbar { height: 0; background-color: transparent; } .sm-chips{ overflow: hidden; } .cover--left{ background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent); } .cover--right{ right: 0; background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%); } }</style><section class="scrolling-container"> <div class="cover cover--left hide"></div> <button class="nav-button nav-button--left hide"> <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> </button> <section class="sm-chips" part="chips-wrapper"> <slot></slot> </section> <button class="nav-button nav-button--right hide"> <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> </button> <div class="cover cover--right hide"></div></section>',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='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host(:focus-within){ outline: none; } :host(:focus-within) .sm-chip{ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } :host(:hover:not([selected])) .sm-chip{ background-color: rgba(var(--text-color,(17,17,17)), 0.06); } .sm-chip{ display: flex; flex-shrink: 0; cursor: pointer; white-space: nowrap; padding: var(--padding, 0.5rem 0.8rem); transition: background 0.3s; border-radius: var(--border-radius, 0.5rem); -webkit-tap-highlight-color: transparent; background: var(--background,inherit); } :host([selected]) .sm-chip{ background-color: var(--accent-color, teal); color: rgba(var(--background-color, (255,255,255)), 1); }</style><span class="sm-chip" part="chip"> <slot></slot></span>',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)}});const smCopy=document.createElement("template");smCopy.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: -webkit-box; display: flex; --padding: 0; --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);}.copy{ display: grid; gap: 0.5rem; padding: var(--padding); align-items: center; grid-template-columns: minmax(0, 1fr) auto;}:host(:not([clip-text])) .copy-content{ overflow-wrap: break-word; word-wrap: break-word;}:host([clip-text]) .copy-content{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.copy-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem;}.copy-button:active{ background-color: var(--button-background-color);}@media (any-hover: hover){ .copy:hover .copy-button{ opacity: 1; } .copy-button:hover{ background-color: var(--button-background-color); }}</style><section class="copy"> <p class="copy-content"> <slot></slot> </p> <button part="button" class="copy-button" title="copy"> <slot name="copy-icon"> COPY </slot> </button></section>',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)}});const smForm=document.createElement("template");smForm.innerHTML=' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ display: grid; width: 100%; } form{ display: inherit; gap: var(--gap, 1.5rem); width: 100%; } </style> <form part="form" onsubmit="return false"> <slot></slot> </form> ',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.invalidFieldsCount,this.skipSubmit=!1,this.isFormValid=void 0,this.supportedElements="input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio",this.formElements=[],this._requiredElements=[]}static get observedAttributes(){return["skip-submit"]}get validity(){return this.isFormValid}debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};_checkValidity=()=>{this.submitButton&&0!==this._requiredElements.length&&(this.invalidFieldsCount=0,this._requiredElements.forEach((([elem,isWC])=>{(!elem.disabled&&isWC&&!elem.isValid||!isWC&&!elem.checkValidity())&&this.invalidFieldsCount++})),this.isFormValid!==(0===this.invalidFieldsCount)&&(this.isFormValid=0===this.invalidFieldsCount,this.dispatchEvent(new CustomEvent(this.isFormValid?"valid":"invalid",{bubbles:!0,composed:!0})),this.skipSubmit||(this.submitButton.disabled=!this.isFormValid)))};handleKeydown=e=>{if("Enter"===e.key&&e.target.tagName.includes("INPUT"))if(0===this.invalidFieldsCount)this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}));else for(const[elem,isWC]of this._requiredElements)if(isWC?!elem.isValid:!elem.checkValidity()){(elem?.shadowRoot?.lastElementChild||elem).animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}),isWC?(elem.focusIn(),"SM-INPUT"===elem.tagName&&""===elem.value.trim()&&elem.showError()):elem.focus();break}};reset=()=>{this.formElements.forEach((([elem,isWC])=>{if(isWC)elem.reset();else switch(elem.type){case"checkbox":case"radio":elem.checked=!1;break;default:elem.value=""}})),this._checkValidity()};elementsChanged=()=>{this.formElements=[...this.querySelectorAll(this.supportedElements)].map((elem=>[elem,elem.tagName.includes("-")])),this._requiredElements=this.formElements.filter((([elem])=>elem.hasAttribute("required"))),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()};connectedCallback(){const updateFormDecedents=this.debounce(this.elementsChanged,100);this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100)),this.shadowRoot.querySelector("slot").addEventListener("slotchange",updateFormDecedents),this.mutationObserver=new MutationObserver((mutations=>{mutations.forEach((mutation=>{("childList"===mutation.type&&[...mutation.addedNodes].some((node=>1===node.nodeType&&node.querySelector(this.supportedElements)))||[...mutation.removedNodes].some((node=>1===node.nodeType&&node.querySelector(this.supportedElements))))&&updateFormDecedents()}))})),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(name,oldValue,newValue){"skip-submit"===name&&(this.skipSubmit=null!==newValue)}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),this.mutationObserver.disconnect()}});const smInput=document.createElement("template");smInput.innerHTML=' <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button,  input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;  } input::-ms-reveal, input::-ms-clear { display: none; } input:invalid{ outline: none; box-shadow: none; } ::-moz-focus-inner{ border: none; } :host{ display: flex; --success-color: #00C853; --danger-color: red; --width: 100%; --icon-gap: 0.5rem; --min-height: 3.2rem; --background: rgba(var(--text-color, (17,17,17)), 0.06); } .hidden{ display: none !important; } button{ display: flex; border: none; background: none; padding: 0; border-radius: 1rem; min-width: 0; cursor: pointer; } button:focus{ outline: var(--accent-color, teal) solid medium; } .icon { height: 1.2rem; width: 1.2rem; fill: rgba(var(--text-color, (17,17,17)), 0.6); }  :host(.round) .input{ border-radius: 10rem; } .outer-container{ position: relative; width: var(--width); } .input { display: flex; cursor: text; min-width: 0; text-align: left; align-items: center; position: relative; gap: var(--icon-gap); padding: var(--padding, 0.6rem 0.8rem); border-radius: var(--border-radius,0.3rem); transition: opacity 0.3s, box-shadow 0.2s; background: var(--background); width: 100%; outline: none; min-height: var(--min-height); overflow: hidden; } .input.readonly .clear{ opacity: 0 !important; margin-right: -2rem; pointer-events: none !important; } .readonly{ pointer-events: none; } .input:focus-within:not(.readonly){ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important; } .disabled{ pointer-events: none; opacity: 0.6; } .label { grid-area: 1/1/2/2; font-size: inherit; opacity: .7; font-weight: 400; transition: transform 0.3s; transform-origin: left; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; user-select: none; will-change: transform; } .container{ width: 100%; display: grid; grid-template-columns: 1fr auto; position: relative; align-items: center; }  input{ grid-area: 1/1/2/2; font-size: inherit; border: none; background: transparent; outline: none; color: inherit; font-family: inherit; height: 300%; width: 100%; caret-color: var(--accent-color, teal); font-weight: inherit; } .animate-placeholder .container input { transform: translateY(0.6rem); }  .animate-placeholder .label { transform: translateY(-0.7em) scale(0.8); opacity: 1; color: var(--accent-color,teal) } :host([variant="outlined"]) .input { box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; background: rgba(var(--background-color, (255,255,255)), 1); } .animate-placeholder:focus-within:not(.readonly) .label{ color: var(--accent-color,teal) } .feedback-text:not(:empty){ position: absolute; display: flex; width: fit-content; text-align: left; font-size: 0.9rem; align-items: center; padding: 0.8rem; border-radius: var(--border-radius,0.5rem); color: rgba(var(--text-color, (17,17,17)), 0.8); background: rgba(var(--foreground-color, (255,255,255)), 1); margin-top: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(var(--text-color, (17,17,17)), 0.1); z-index: 10; isolation: isolate; } .feedback-text:not(:empty)::before{ content: \'\'; height: 0; width: 0; position: absolute; border: 0.5rem solid transparent; border-bottom-color: rgba(var(--foreground-color, (255,255,255)), 1); top: -1rem; left: 1rem; } .success{ color: var(--success-color); } .error{ color: var(--danger-color); } .status-icon{ margin-right: 0.5rem; flex-shrink: 0; } .status-icon--error{ fill: var(--danger-color); } .status-icon--success{ fill: var(--success-color); } .datalist{ position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; background: rgba(var(--foreground-color, (255,255,255)), 1); border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); max-height: 20rem; overflow-y: auto; overflow-x: hidden; padding: 0.3rem; } .datalist-item{ padding: 0.8rem 1rem; cursor: pointer; transition: background 0.2s; border-radius: 0.5rem; content-visibility: auto; } .datalist-item:focus{ outline: none; } .datalist-item:focus-visible{ outline: var(--accent-color, teal) solid medium; } @media (any-hover: hover){ .icon:hover{ background: rgba(var(--text-color, (17,17,17)), 0.1); } .datalist-item:hover{ background: rgba(var(--text-color, (17,17,17)), 0.06); } } </style> <div class="outer-container"> <div part="input-wrapper" class="input"> <slot name="icon"></slot> <div class="container"> <label part="placeholder" class="label"></label> <input part="input" type="text"/> </div> <button class="clear hidden" title="Clear" tabindex="-1"> <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="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg> </button> <slot name="right"></slot> </div> <ul class="datalist hidden" part="datalist"></ul> <p class="feedback-text" part="feedback"></p> </div> ',customElements.define("sm-input",class extends HTMLElement{#validationState={validatedFor:void 0,isValid:!1,errorMessage:"Please fill out this field."};constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"]}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(val){val!==this.input.value&&(this.input.value=val,this._value=val,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(val){this.setAttribute("placeholder",val)}get type(){return this.getAttribute("type")}set type(val){this.setAttribute("type",val)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(value){value?(this.inputParent.classList.add("disabled"),this.setAttribute("disabled","")):(this.inputParent.classList.remove("disabled"),this.removeAttribute("disabled"))}get readOnly(){return this.hasAttribute("readonly")}set readOnly(value){value?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(val){val&&(this.validationFunction=val)}set errorText(val){this.#validationState.errorText=val}showError=(errorText=this.#validationState.errorText)=>{this.feedbackText.className="feedback-text error",this.feedbackText.innerHTML=` <svg class="status-icon status-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> ${errorText}`};set helperText(val){this._helperText=val}get isValid(){if(this.#validationState.validatedFor===this.input.value)return this.#validationState.isValid;const _isValid=this.input.checkValidity();let _validity={isValid:!0,errorText:""};return this.validationFunction&&(_validity=this.validationFunction(this.input.value)),_isValid&&_validity.isValid?(this.feedbackText.className="feedback-text success",this.feedbackText.textContent=""):""!==this.value.trim()&&(_validity.errorText||this.#validationState.errorText)&&this.showError(_validity.errorText||this.#validationState.errorText),this.#validationState.validatedFor=this.input.value,this.#validationState.isValid=_isValid&&_validity.isValid,this.#validationState.errorText=_validity.errorText||this.#validationState.errorText,this.#validationState.isValid}reset=()=>{this.value=""};clear=()=>{this.value="",this.input.focus(),this.fireEvent()};focusIn=()=>{this.input.focus()};focusOut=()=>{this.input.blur()};fireEvent=()=>{let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)};searchDatalist=searchKey=>{const filteredData=this.datalist.filter((item=>item.toLowerCase().includes(searchKey.toLowerCase())));if(filteredData.sort(((a,b)=>a.toLowerCase().indexOf(searchKey.toLowerCase())-b.toLowerCase().indexOf(searchKey.toLowerCase()))),filteredData.length){if(this.optionList.children.length>filteredData.length){const optionsToRemove=this.optionList.children.length-filteredData.length;for(let i=0;i<optionsToRemove;i++)this.optionList.removeChild(this.optionList.lastChild)}filteredData.forEach(((item,index)=>{if(this.optionList.children[index])this.optionList.children[index].textContent=item;else{const option=document.createElement("li");option.textContent=item,option.classList.add("datalist-item"),option.setAttribute("tabindex","0"),this.optionList.appendChild(option)}})),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")};checkInput=e=>{this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hidden"):this.clearBtn.classList.add("hidden")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.shouldAnimateLabel&&this.inputParent.classList.add("animate-placeholder"),this.label.classList.toggle("hidden",!this.shouldAnimateLabel),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchDatalist(this.input.value.trim())}),100))):(this.shouldAnimateLabel&&this.inputParent.classList.remove("animate-placeholder"),this.label.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))};allowOnlyNum=e=>{e.ctrlKey||1===e.key.length&&(("."!==e.key||!e.target.value.includes(".")&&0!==e.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(e.key)||e.preventDefault())};handleOptionClick=e=>{this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()};handleInputNavigation=e=>{"ArrowDown"===e.key?(e.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===e.key&&(e.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())};handleDatalistNavigation=e=>{"ArrowUp"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())};handleFocus=e=>{this.datalist.length&&this.searchDatalist(this.input.value.trim())};handleBlur=e=>{this.datalist.length&&this.optionList.classList.add("hidden")};connectedCallback(){const uuid=crypto.randomUUID();if(this.input.id=uuid,this.label.htmlFor=uuid,this.shouldAnimateLabel=this.hasAttribute("animate"),this.shouldAnimateLabel&&""!==this.placeholder&&this.value&&(this.inputParent.classList.add("animate-placeholder"),this.label.classList.remove("hidden")),this.setAttribute("role","textbox"),"undefined"!=typeof smCompConfig&&smCompConfig["sm-input"]){const config=smCompConfig["sm-input"].find((config=>this.matches(config.selector)));this.customValidation=config?.customValidation}this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue)switch(this.reflectedAttributes.includes(name)&&(this.hasAttribute(name)?this.input.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.input.removeAttribute(name)),name){case"placeholder":this.label.textContent=newValue,this.setAttribute("aria-label",newValue);break;case"value":this.checkInput();break;case"type":this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum);break;case"helper-text":this._helperText=newValue;break;case"error-text":this.#validationState.errorText=newValue;break;case"required":this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false");break;case"readonly":this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly");break;case"disabled":this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled");break;case"list":this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(","))}}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur)}});const smMenu=document.createElement("template");smMenu.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}:host{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;}.menu{ display: -ms-grid; display: grid; place-items: center; height: 2rem; width: 2rem; outline: none;}.icon { position: absolute; fill: rgba(var(--text-color), 0.7); height: 2.4rem; width: 2.4rem; padding: 0.5rem; border-radius: 2rem; -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s;} .select{ position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.menu:focus .icon,.focused{ background: rgba(var(--text-color), 0.1); }:host([align-options="left"]) .options{ left: 0;}:host([align-options="right"]) .options{ right: 0;}.options{ top: 100%; padding: 0.3rem; overflow: hidden auto; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--background, rgba(var(--background-color), 1)); border-radius: var(--border-radius, 0.5rem); z-index: 1; -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3); box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3); bottom: auto;}.hide{ display: none;}@media (hover: hover){ .menu:hover .icon{ background: rgba(var(--text-color), 0.1);  }}</style><div class="select"> <div class="menu" tabindex="0"> <slot name="icon"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> </slot> </div> <div class="options hide"> <slot></slot>  </div></div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=()=>{this.isOpen=!0,this.icon.classList.add("focused"),document.addEventListener("mousedown",this.handleClickOutside);const n=this.optionList.firstElementChild.assignedElements().find((n=>"MENU-OPTION"===n.tagName));n&&n.focus()})}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide"),document.removeEventListener("mousedown",this.handleClickOutside)})}toggle(){this.isOpen?this.collapse():this.expand()}handleClick(n){n.target===this?this.toggle():this.collapse()}handleKeyDown(n){n.target===this?"ArrowDown"===n.key?(n.preventDefault(),this.availableOptions[0].focus()):" "===n.key&&(n.preventDefault(),this.toggle()):"ArrowUp"===n.key?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.key?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.target.click(),this.collapse(),this.menu.focus())}handleClickOutside(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");this.shadowRoot.querySelector(".options slot").addEventListener("slotchange",(n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()})),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickOutside)}});const menuOption=document.createElement("template");menuOption.innerHTML='<style> *{ padding: 0; margin: 0; box-sizing: border-box;} :host{ display: flex; border-radius: var(--border-radius,0.3rem); overflow: hidden;}.option{ display: flex; min-width: 100%; padding: var(--padding, 0.6rem 1rem); cursor: pointer; overflow-wrap: break-word; white-space: nowrap; outline: none; user-select: none; align-items: center;}:host(:focus){ outline: none; background: rgba(var(--text-color), 0.1);}@media (any-hover: hover){ .option{ transition: background-color 0.2s; } .option:hover{ background: rgba(var(--text-color), 0.1); }}</style><div class="option"> <slot></slot> </div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this.addEventListener("keyup",(n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),this.click())}))}});const smNotifications=document.createElement("template");smNotifications.innerHTML=" <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host{ display: flex; --icon-height: 1.5rem; --icon-width: 1.5rem; } .hide{ opacity: 0 !important; pointer-events: none !important; } .notification-panel{ display: grid; width: min(26rem, 100%); gap: 0.5rem; position: fixed; left: 0; top: 0; z-index: 100; max-height: 100%; padding: 1rem; overflow: hidden auto; overscroll-behavior: contain; touch-action: none; } .notification-panel:empty{ display:none; } .notification{ display: flex; position: relative; border-radius: 0.5rem; background: rgba(var(--foreground-color, (255,255,255)), 1); overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; padding: max(1rem,1.5vw); align-items: center; box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14); touch-action: none; } .notification:not(.pinned)::before{ content: ''; position: absolute; bottom: 0; left: 0; height: 0.2rem; width: 100%; background-color: var(--accent-color, teal); animation: loading var(--timeout, 5000ms) linear forwards; transform-origin: left; } @keyframes loading{ to{ transform: scaleX(0); } } .icon-container:not(:empty){ margin-right: 0.5rem; height: var(--icon-height); width: var(--icon-width); flex-shrink: 0; } .notification:last-of-type{ margin-bottom: 0; } .icon { height: 100%; width: 100%; fill: rgba(var(--text-color, (17,17,17)), 0.7); } .icon--success { fill: var(--green); } .icon--failure, .icon--error { fill: var(--danger-color); } output{ width: 100%; } .close{ height: 2rem; width: 2rem; border: none; cursor: pointer; margin-left: 1rem; border-radius: 50%; padding: 0.3rem; transition: background-color 0.3s, transform 0.3s; background-color: transparent; flex-shrink: 0; } .close:active{ transform: scale(0.9); } .action{ display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.8rem; border-radius: 0.2rem; border: none; background-color: rgba(var(--text-color, (17,17,17)), 0.03); font-family: inherit; font-size: inherit; color: var(--accent-color, teal); font-weight: 500; cursor: pointer; } @media screen and (max-width: 640px){ .close{ display: none; } .notification-panel:not(:empty){ padding-bottom: 3rem; } } @media screen and (min-width: 640px){ .notification-panel{ top: auto; bottom: 0; max-width: max-content; } .notification{ width: auto; max-width: max-content;  border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17)), 0.5); } } .close:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } } </style> <div class=\"notification-panel\"></div> ",customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this),this.remove=this.remove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.notificationTimeout=5e3,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isBigViewport=!1}set timeout(value){isNaN(value)||(this.notificationTimeout=value)}randString(length){let result="";for(let i=0;i<length;i++)result+="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".charAt(Math.floor(52*Math.random()));return result}createNotification(message,options={}){const{pinned:pinned=!1,icon:icon,action:action,timeout:timeout=this.notificationTimeout}=options,notification=document.createElement("div");return notification.id=this.randString(8),notification.className="notification "+(pinned?"pinned":""),notification.style.setProperty("--timeout",`${timeout}ms`),notification.innerHTML=` ${icon?`<div class="icon-container">${icon}</div>`:""} <output>${message}</output> ${action?`<button class="action">${action.label}</button>`:""} <button class="close"> <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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg> </button> `,action&&notification.querySelector(".action").addEventListener("click",action.callback),notification.querySelector(".close").addEventListener("click",(()=>{this.removeNotification(notification)})),pinned||setTimeout((()=>{this.removeNotification(notification,this.isBigViewport?"left":"top")}),timeout),notification}push(message,options={}){const notification=this.createNotification(message,options);return this.isBigViewport?this.notificationPanel.append(notification):this.notificationPanel.prepend(notification),notification.scrollIntoView({behavior:"smooth"}),this.notificationPanel.animate([{transform:`translateY(${this.isBigViewport?"":"-"}${notification.clientHeight}px)`},{transform:"none"}],this.animationOptions),notification.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},notification.id}removeNotification(notification,direction="left"){if(!notification)return;const sign="left"===direction||"top"===direction?"-":"+";this.isBigViewport||"top"!==direction?notification.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}:notification.animate([{transform:this.currentX?`translateY(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateY(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}}remove(id){const notification=this.notificationPanel.querySelector(`#${id}`);notification&&this.removeNotification(notification)}clearAll(){Array.from(this.notificationPanel.children).forEach((child=>{this.removeNotification(child)}))}handleTouchMove(e){this.currentX=e.touches[0].clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(e){this.isBigViewport=e.matches,e.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("touchstart",(e=>{e.target.closest(".close")?this.removeNotification(e.target.closest(".notification")):e.target.closest(".notification")&&(this.swipeThreshold=e.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=e.target.closest(".notification"),this.startTime=Date.now(),this.startX=e.touches[0].clientX,this.startY=e.touches[0].clientY,this.notificationPanel.addEventListener("touchmove",this.handleTouchMove,{passive:!0}))}),{passive:!0}),this.notificationPanel.addEventListener("touchend",(e=>{this.endX=e.changedTouches[0].clientX,this.endY=e.changedTouches[0].clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime<this.swipeTimeThreshold?this.swipeDistance>50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},this.notificationPanel.removeEventListener("touchmove",this.handleTouchMove),this.currentX=0}))}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}});class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.innerHTML=' <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } :host{ position: fixed; display: -ms-grid; display: grid; z-index: 10; --width: 100%; --height: auto; --min-width: auto; --min-height: auto; --backdrop-background: rgba(0, 0, 0, 0.6); --border-radius: 0.8rem 0.8rem 0 0; } .popup-container{ display: -ms-grid; display: grid; position: fixed; top: 0; bottom: 0; left: 0; right: 0; place-items: center; z-index: 10; touch-action: none; } :host(.stacked) .popup{ -webkit-transform: scale(0.9) translateY(-2rem) !important; transform: scale(0.9) translateY(-2rem) !important; } .backdrop{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--backdrop-background); -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .popup{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: var(--width); min-width: var(--min-width); height: var(--height); min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); background: rgba(var(--background-color, (255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } .container-header{ display: -webkit-box; display: flex; width: 100%; touch-action: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popup-top{ display: -webkit-box; display: flex; width: 100%; } .popup-body{ display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; padding: var(--body-padding, 1.5rem); overflow-y: auto; } .hide{ display:none; } @media screen and (min-width: 640px){ :host{ --border-radius: 0.5rem; } .popup{ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: var(--border-radius); height: var(--height); -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040; box-shadow: 0 3rem 2rem -0.5rem #00000040; } } @media screen and (max-width: 640px){ .popup-top{ -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .handle{ height: 0.3rem; width: 2rem; background: rgba(var(--text-color, (17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; } ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17))), 0.5); } } } </style> <div class="popup-container hide" role="dialog"> <div part="backdrop" class="backdrop"></div> <div part="popup" class="popup"> <div part="popup-header" class="popup-top"> <div class="handle"></div> <slot name="header"></slot> </div> <div part="popup-body" class="popup-body"> <slot></slot> </div> </div> </div> ',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.dialogBox=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.detectFocus=this.detectFocus.bind(this),this.handleSoftDismiss=this.handleSoftDismiss.bind(this),this.debounce=this.debounce.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,i){let s=t.animate(e,{...i,fill:"both"});return s.finished.then((()=>{s.commitStyles(),s.cancel()})),s}resumeScrolling(){let t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){let t=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.dialogBox,[{opacity:this.offset?1:0,transform:t},{opacity:1,transform:"none"}],{duration:300,easing:"ease"})}}show(t={}){let{pinned:e=!1,payload:i}=t;if(this.isOpen)return;let s={duration:300,easing:"ease"};return this.payload=i,popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],s),this.popupContainer.classList.remove("hide"),this.offset||(this.backdrop.animate([{opacity:0},{opacity:1}],s).onfinish=()=>{this.resolveOpen(this.payload)},this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,composed:!0,detail:{payload:this.payload}})),document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`),this.setStateOpen(),this.pinned=e,this.isOpen=!0,setTimeout((()=>{let t=this.autoFocus||this.focusable?.[0]||this.dialogBox;t&&(t.tagName.includes("-")?t.focusIn():t.focus())}),0),this.hasAttribute("open")||(this.setAttribute("open",""),this.addEventListener("keydown",this.detectFocus),this.resizeObserver.observe(this),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.addEventListener("mousedown",this.handleSoftDismiss)),{opened:new Promise((t=>{this.resolveOpen=t})),closed:new Promise((t=>{this.resolveClose=t}))}}hide(t={}){let{payload:e}=t,i={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],i),this.animateTo(this.dialogBox,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],i).finished.finally((()=>{this.popupContainer.classList.add("hide"),this.dialogBox.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach((t=>t.reset())),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,composed:!0,detail:{payload:e||this.payload}})),this.resolveClose(e||this.payload),this.isOpen=!1})),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],i):this.resumeScrolling(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimation=window.requestAnimationFrame((()=>{this.dialogBox.style.transform=`translateY(${this.offset}px)`})))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.dialogBox.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.key&&this.focusable.length){if(!this.firstFocusable)for(let e=0;e<this.focusable.length;e++)if(!this.focusable[e].disabled){this.firstFocusable=this.focusable[e];break}if(!this.lastFocusable)for(let i=this.focusable.length-1;i>=0;i--)if(!this.focusable[i].disabled){this.lastFocusable=this.focusable[i];break}t.shiftKey&&document.activeElement===this.firstFocusable?(t.preventDefault(),this.lastFocusable.tagName.includes("SM-")?this.lastFocusable.focusIn():this.lastFocusable.focus()):t.shiftKey||document.activeElement!==this.lastFocusable||(t.preventDefault(),this.firstFocusable.tagName.includes("SM-")?this.firstFocusable.focusIn():this.firstFocusable.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]"),this.firstFocusable=null,this.lastFocusable=null}handleSoftDismiss(){this.pinned?this.dialogBox.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}):this.hide()}debounce(t,e){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout((()=>{t.apply(null,s)}),e)}}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",this.debounce((()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),0)),this.resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{if(t.contentBoxSize){let e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*t.contentRect.height}))})),this.mutationObserver=new MutationObserver((t=>{this.updateFocusableList()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}});const smSwitch=document.createElement("template");smSwitch.innerHTML='\t<style> *{ box-sizing: border-box; padding: 0; margin: 0; }  :host{ display: inline-flex; } :host(:active) .thumb{ box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset; } label{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } :host([disabled]) { cursor: not-allowed; opacity: 0.6; pointer-events: none; } .switch { position: relative; display: flex; align-items: center; width: 2.4rem; flex-shrink: 0; margin-left: auto; padding: 0.2rem; cursor: pointer; border-radius: 2rem; }  input { display: none; }  .track { position: absolute; left: 0; right: 0; height: 1.4rem; transition: background 0.3s; background: rgba(var(--text-color,inherit), 0.4); box-shadow: 0 0.1rem 0.3rem #00000040 inset; border-radius: 1rem; }  label:active .thumb::after, label:focus-within .thumb::after{ opacity: 1; }  .thumb::after{ content: \'\'; display: flex; position: absolute; height: 2.6rem; width: 2.6rem; background: rgba(var(--text-color,inherit), 0.2); border-radius: 2rem; opacity: 0; transition: opacity 0.3s; }  .thumb { position: relative; display: inline-flex; height: 1rem; width: 1rem; justify-content: center; align-items: center; border-radius: 1rem; box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset; transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); background-color: inherit; }  input:checked ~ .thumb { transform: translateX(100%); }  input:checked ~ .track { background: var(--accent-color, teal); }</style><label tabindex="0"> <slot name="left"></slot> <div part="switch" class="switch"> <input type="checkbox"> <div class="track"></div> <div class="thumb"></div> </div> <slot name="right"></slot></label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",(e=>{" "!==e.key||this.isDisabled||(e.preventDefault(),this.input.click())})),this.input.addEventListener("click",(e=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()}))}attributeChangedCallback(e,t,n){t!==n&&("disabled"===e?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===e&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});const smSelect=document.createElement("template");smSelect.innerHTML='<style> *{ padding: 0; margin: 0; box-sizing: border-box;} :host{ display: flex;}:host([disabled]) .select{ opacity: 0.6; cursor: not-allowed;}:host([readonly]) .select{ cursor: default; pointer-events: none;}.select{ position: relative; display: flex; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.icon { height: 1.2rem; width: 1.2rem; margin-left: 0.5rem; fill: rgba(var(--text-color, (17,17,17)), 0.7);} .selected-option-text{ font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;}.selection{ border-radius: var(--select-border-radius,0.5rem); display: grid; grid-template-columns: 1fr auto; grid-template-areas: \'heading heading\' \'. .\'; padding: var(--padding,0.6rem 0.8rem); background: var(--background, rgba(var(--text-color,(17,17,17)), 0.06)); align-items: center; outline: none; z-index: 2; height: 100%; align-content: center;}.selection:focus{ box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; }:host([align-select="left"]) .options{ left: 0;}:host([align-select="right"]) .options{ right: 0;}.options{ top: 100%; padding: var(--options-padding, 0.3rem); margin-top: 0.2rem;  overflow: hidden auto; position: absolute; grid-area: options; display: flex; flex-direction: column; width: var(--options-width, 100%); min-width: var(--min-width, auto); max-height: var(--max-height, auto); background: rgba(var(--foreground-color,(255,255,255)), 1); border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2); border-radius: var(--options-border-radius, 0.5rem); z-index: 1; box-shadow: 0 1rem 1.5rem rgba(0 0 0 /0.2);}:host([isUnder]) .options{ top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.2rem; box-shadow: 0 -1rem 1.5rem rgba(0 0 0 /0.2);}:host([open]) .icon--expand{ display: none;}:host([open]) .icon--collapse{ display: block;}.icon--expand{ display: block;}.icon--collapse{ display: none;}.hidden{ display: none;}@media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; height: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color,(17,17,17)), 0.5); } }}</style><div class="select"> <div class="selection" part="button"> <div class="selected-option-text"></div> <svg class="icon icon--expand" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg> <svg class="icon icon--collapse" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg> </div> <div part="options" class="options hidden"> <slot></slot>  </div></div>',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.selectOption=this.selectOption.bind(this),this.debounce=this.debounce.bind(this),this.elementsChanged=this.elementsChanged.bind(this),this.availableOptions=[],this.previousOption,this.isOpen=!1,this.label="",this.defaultSelected="",this.isUnderViewport=!1,this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label","readonly"]}get value(){return this.getAttribute("value")}set value(t){const e=this.availableOptions.find((e=>e.getAttribute("value")===t));e?(this.setAttribute("value",t),this.selectOption(e)):console.warn(`There is no option with ${t} as value`)}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout((()=>{t.apply(null,i)}),e)}}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0];this.value=e.getAttribute("value"),t&&this.fireEvent()}}selectOption(t){this.previousOption!==t&&(this.querySelectorAll("[selected").forEach((t=>t.removeAttribute("selected"))),this.selectedOptionText.textContent=`${this.label}${t.textContent}`,t.setAttribute("selected",""),this.previousOption=t)}focusIn(){this.selection.focus()}open(){this.availableOptions.forEach((t=>t.setAttribute("tabindex",0))),this.optionList.classList.remove("hidden"),this.isUnderViewport=this.getBoundingClientRect().bottom+this.optionList.getBoundingClientRect().height>window.innerHeight,this.isUnderViewport?this.setAttribute("isUnder",""):this.removeAttribute("isUnder"),this.optionList.animate([{transform:`translateY(${this.isUnderViewport?"":"-"}0.5rem)`,opacity:0},{transform:"translateY(0)",opacity:1}],this.animationOptions),this.setAttribute("open",""),this.style.zIndex=1e3,(this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0]).focus(),document.addEventListener("mousedown",this.handleClickOutside),this.isOpen=!0}collapse(){this.removeAttribute("open"),this.optionList.animate([{transform:"translateY(0)",opacity:1},{transform:`translateY(${this.isUnderViewport?"":"-"}0.5rem)`,opacity:0}],this.animationOptions).onfinish=()=>{this.availableOptions.forEach((t=>t.removeAttribute("tabindex"))),document.removeEventListener("mousedown",this.handleClickOutside),this.optionList.classList.add("hidden"),this.isOpen=!1,this.style.zIndex="auto"}}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.key&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.fireEvent())}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.key?(t.preventDefault(),(this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0]).focus(),this.handleOptionSelection(t)):" "===t.key&&(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),["Enter"," ","Escape","Tab"].includes(t.key)&&(t.preventDefault(),this.collapse(),this.focusIn()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}elementsChanged(){this.availableOptions=[...this.querySelectorAll("sm-option")],this.reset(!1),this.defaultSelected=this.value}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.selection.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown));const t=this.debounce(this.elementsChanged,100);this.shadowRoot.querySelector("slot").addEventListener("slotchange",t),this.mutationObserver=new MutationObserver((e=>{let n=!1;if(e.forEach((e=>{switch(e.type){case"childList":t();break;case"attributes":n=!0}})),n){const t=this.availableOptions.find((t=>t.hasAttribute("selected")))||this.availableOptions[0];this.selectedOptionText.textContent=`${this.label}${t.textContent}`,this.setAttribute("value",t.getAttribute("value"))}})),this.mutationObserver.observe(this,{subtree:!0,childList:!0,attributeFilter:["selected"]}),new IntersectionObserver(((t,e)=>{t.forEach((t=>{if(t.isIntersecting){this.selection.getBoundingClientRect().left<window.innerWidth/2?this.setAttribute("align-select","left"):this.setAttribute("align-select","right")}}))})).observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)}attributeChangedCallback(t){"disabled"===t||"readonly"===t?this.hasAttribute("disabled")||this.hasAttribute("readonly")?(this.selection.removeAttribute("tabindex"),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown)):(this.selection.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown)):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; border-radius: var(--border-radius, 0.3rem);}.option{ position: relative; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: 0.5rem; padding: var(--padding, 0.6rem 1rem); cursor: pointer; outline: none; user-select: none;}.option::before{ position: absolute; content: \'\'; display: block; width: 0.2rem; height: 1em; left: 0; border-radius: 0 1em 1em 0; background: rgba(var(--text-color,(17,17,17)), 0.5); transition: all 0.2s ease-in-out; opacity: 0;}:host(:focus){ outline: none; background: rgba(var(--text-color,(17,17,17)), 0.1);}:host(:focus) .option::before{ opacity: 1}:host([selected]) .option::before{ opacity: 1; background: var(--accent-color, teal);}@media (hover: hover){ .option:hover{ background: rgba(var(--text-color,(17,17,17)), 0.1); } :host(:not([selected]):hover) .option::before{ opacity: 1 }}</style><div class="option" part="option"> <slot></slot> </div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option")}});const spinner=document.createElement("template");spinner.innerHTML='<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}.loader { display: flex; height: var(--size, 1.5rem); width: var(--size, 1.5rem); stroke-width: 8; overflow: visible; stroke: var(--accent-color, teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; animation: load 2s infinite, spin 1s linear infinite;}@keyframes load { 50% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -180; }}@keyframes spin { 100% { transform: rotate(360deg); }}</style><svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);const smTextarea=document.createElement("template");smTextarea.innerHTML=' <style> *, *::before, *::after {  padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  ::-moz-focus-inner{ border: none; } .hide{ opacity: 0 !important; } :host{ display: grid; --danger-color: red; --border-radius: 0.3rem; --background: rgba(var(--text-color,(17,17,17)), 0.06); --padding: initial; --max-height: 8rem; } :host([variant="outlined"]) .textarea { box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset; background: rgba(var(--background-color,(255,255,255)), 1); } .textarea{ display: grid; position: relative; cursor: text; min-width: 0; text-align: left; grid-template-columns: 1fr; align-items: stretch; max-height: var(--max-height); background: var(--background); border-radius: var(--border-radius); padding: var(--padding); transition: opacity 0.3s, box-shadow 0.2s; } .textarea::after, textarea{ padding: var(--padding,0.6rem 0.8rem); width: 100%; min-width: 1em; font: inherit; color: inherit; resize: none; grid-area: 2/1; justify-self: stretch; background: none; appearance: none; border: none; outline: none; line-height: 1.5; overflow: hidden auto; } .textarea::after{ content: attr(data-value) \' \'; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .readonly{ pointer-events: none; } .textarea:focus-within:not(.readonly){ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } .placeholder{ margin: var(--padding,0.6rem 0.8rem); opacity: .7; font-weight: inherit; font-size: inherit; line-height: 1.5; pointer-events: none; user-select: none; grid-area: 2/1; } :host([disabled]) .textarea{ cursor: not-allowed; opacity: 0.6; } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; height: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color,(17,17,17)), 0.5); } } } </style> <label class="textarea" part="textarea"> <span class="placeholder"></span> <textarea rows="1"></textarea> </label> ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",(e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()}))}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});const textField=document.createElement("template");textField.innerHTML='<style> *{ padding: 0; margin: 0; box-sizing: border-box; }  .text-field{ display: flex; align-items: center; } .text{ padding: 0.6rem 0; transition: background-color 0.3s; border-bottom: 0.15rem solid transparent; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .text:focus{ outline: none; border-bottom: 0.15rem solid var(--accent-color); } :host([editable]) .text{ border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6); } :host([editable]:focus-within) .text{ border-bottom: 0.15rem solid var(--accent-color); } .edit-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem; margin-left: 0.3rem; } .edit-button:active{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } .hide{ display: none; } @media (any-hover: hover){ .edit-button:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } }</style><div class="text-field"> <div class="text" part="text"></div> <button class="edit-button" part="edit-button">Edit</button></div>',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)}});const themeToggle=document.createElement("template");themeToggle.innerHTML=' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ cursor: pointer; --height: 2.5rem; --width: 2.5rem; } .theme-toggle { display: flex; position: relative; width: 1.2rem; height: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle::after{ content: \'\'; position: absolute; height: var(--height); width: var(--width); top: 50%; left: 50%; opacity: 0; border-radius: 50%; pointer-events: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -50%) scale(1.2); background-color: rgba(var(--text-color,inherit), 0.12); } :host(:focus-within) .theme-toggle{ outline: none; } :host(:focus-within) .theme-toggle::after{ opacity: 1; transform: translate(-50%, -50%) scale(1); } .icon { position: absolute; height: 100%; width: 100%; fill: rgba(var(--text-color,inherit), 1); transition: transform 0.3s, opacity 0.1s; }  .theme-switcher__checkbox { display: none; } :host([checked]) .moon-icon { transform: translateY(50%); opacity: 0; } :host(:not([checked])) .sun-icon { transform: translateY(50%); opacity: 0; } </style> <label class="theme-toggle" title="Change theme" tabindex="0"> <slot name="light-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg> </slot> <slot name="dark-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg> </slot> </label>';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){if(!document.startViewTransition)return this.toggleAttribute("checked"),void this.fireEvent();document.startViewTransition((()=>{this.toggleAttribute("checked"),this.fireEvent()}))}handleKeyDown(e){" "===e.key&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem(`${window.location.hostname}-theme`,"dark")):(this.daylight(),localStorage.setItem(`${window.location.hostname}-theme`,"light")))}}window.customElements.define("theme-toggle",ThemeToggle);const colorGrid=document.createElement("template");colorGrid.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: flex;\n    }\n    .color-tile-container{\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n    }\n    .color-tile{\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        height: 2.5rem;\n        width: 2.5rem;\n        border-radius: 0.3rem;\n        align-items: center;\n        justify-content: center;\n    }\n    .color-tile input[type="radio"]{\n        display: none;\n    }\n    .checkmark{\n        display: flex;\n        position: absolute;\n        top: 0;\n        right: 0;\n        align-items: center;\n        justify-content: center;\n        padding: 0.3rem;\n        border-radius: 0.3rem;\n        background-color: rgba(var(--background-color, (255,255,255)), 0.8);\n        animation: checkmark 0.1s ease;\n    }\n    .icon{\n        height: 1rem;\n        width: 1rem;\n        fill: rgba(var(--text-color, (17,17,17)), 1);\n    }\n    @keyframes checkmark{\n        from{\n            transform: scale(0);\n        }\n        to{\n            transform: scale(1);\n        }\n    }\n\n</style>\n<div class="color-tile-container">\n</div>',customElements.define("color-grid",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(colorGrid.content.cloneNode(!0)),this.colorArray=[],this.container=this.shadowRoot.querySelector(".color-tile-container"),this.handleChange=this.handleChange.bind(this),this.setCheckMark=this.setCheckMark.bind(this)}set colors(arr){this.colorArray=arr,this.renderTiles()}set selectedColor(color){if(this.colorArray.includes(color)&&this.container.querySelector(`[data-color="${color}"]`)){const selectedTile=this.container.querySelector(`[data-color="${color}"]`);selectedTile&&(selectedTile.querySelector("input").checked=!0,this.setCheckMark(selectedTile))}}randString(length){let result="",characters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i<length;i++)result+=characters.charAt(Math.floor(62*Math.random()));return result}renderTiles(){this.container.innerHTML="";const frag=document.createDocumentFragment(),groupName=this.randString(6);this.colorArray.forEach((color=>{const label=document.createElement("label");label.classList.add("color-tile"),label.setAttribute("data-color",color),color.includes("--")?label.setAttribute("style",`background-color: var(${color})`):label.setAttribute("style",`background-color: ${color}`),label.innerHTML=`\n                <input type="radio" name="${groupName}">\n                `,frag.append(label)})),this.container.append(frag)}setCheckMark(target){target.parentNode.querySelectorAll(".checkmark").forEach((checkmark=>checkmark.remove()));const checkMark=document.createElement("div");checkMark.classList.add("checkmark"),checkMark.innerHTML='\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>\n            ',target.append(checkMark)}handleChange(e){const clickedTile=e.target.closest(".color-tile");this.setCheckMark(clickedTile);const clickedTileColor=clickedTile.dataset.color,tileSelected=new CustomEvent("colorselected",{bubbles:!0,composed:!0,detail:{value:clickedTileColor}});this.dispatchEvent(tileSelected)}connectedCallback(){this.container.addEventListener("change",this.handleChange)}disconnectedCallback(){this.container.removeEventListener("change",this.handleChange)}}),window.customElements.define("keys-generator",class extends HTMLElement{constructor(){super(),this.innerHTML='\n                    <style>\n                        :host{\n                            display: flex;\n                            justify-content: center;\n                        }\n                        .generated-keys-wrapper {\n                            padding: 1rem;\n                            background-color: rgba(var(--foreground-color), 1);\n                            border-radius: 0.5rem;\n                        }\n                        #flo_id_warning{\n                            padding-bottom: 1.5rem;\n                        }\n                        #flo_id_warning .icon {\n                            height: 3rem;\n                            width: 3rem;\n                            padding: 0.8rem;\n                            overflow: visible;\n                            background-color: #ffc107;\n                            border-radius: 3rem;\n                            fill: rgba(0, 0, 0, 0.8);\n                        }\n                    </style>     \n                    <section class="grid gap-1-5">\n                        <div id="flo_id_warning" class="flex gap-1">\n                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>\n                            <div class="grid gap-0-5">\n                                <strong>\n                                    <h3> Keep your keys safe! </h3>\n                                </strong>\n                                <p>Don\'t share with anyone. Once lost private key can\'t be recovered.</p>\n                            </div>\n                        </div>\n                        <div class="grid gap-1-5 generated-keys-wrapper">\n                            <div class="grid gap-0-5">\n                                <h5>FLO address</h5>\n                                <sm-copy id="generated_flo_address"></sm-copy>\n                            </div>\n                            <div class="grid gap-0-5">\n                                <h5>Private key</h5>\n                                <sm-copy id="generated_private_key"></sm-copy>\n                            </div>\n                        </div>\n                        <button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>\n                        <p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>\n                    </section>\n                '}get keys(){return{floID:this.querySelector("#generated_flo_address").value,privKey:this.querySelector("#generated_private_key").value}}generateKeys(){const{floID:floID,privKey:privKey}=floCrypto.generateNewID();this.querySelector("#generated_flo_address").value=floID,this.querySelector("#generated_private_key").value=privKey}clearKeys(){this.querySelector("#generated_flo_address").value="",this.querySelector("#generated_private_key").value=""}});const adBlockerWarning=document.createElement("template");adBlockerWarning.innerHTML='\n            <style>\n                * {\n                    padding: 0;\n                    margin: 0;\n                    box-sizing: border-box;\n                }\n                :host{\n                    display: flex;\n                    flex-direction: column;\n                    align-content: center;\n                    justify-content: center;\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    z-index: 50;\n                    background-color: rgba(var(--foreground-color), 1);\n                }\n                #adblocker_warning {\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                    text-align: center;\n                    gap: 1rem;\n                    padding: 1.5rem;\n                }\n                h1{\n                    font-size: 2rem;\n                    margin-top: 1rem;\n                }\n                p{\n                    font-size: 0.9rem;\n                    max-width: 65ch;\n                    line-height: 1.7;\n                    color: rgba(var(--text-color), 0.9);\n                }\n                .icon {\n                    height: 4rem;\n                    width: 4rem;\n                    fill: #ffc107;\n                }\n            </style>\n            <article id="adblocker_warning"></article>\n        ',window.customElements.define("adblocker-warning",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(adBlockerWarning.content.cloneNode(!0))}connectedCallback(){const isBrave=void 0!==navigator.brave;this.shadowRoot.querySelector("#adblocker_warning").innerHTML=`\n                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>\n                    <h1>Ad-Blocker Detected!</h1>\n                    <p>\n                        Please disable your ad-blocker for optimal experience. Our app doesn't show ads or track activity.   \n                    </p>\n                    ${isBrave?"<strong>If you have enabled Brave shield then disable it also.</strong>":""}\n                `}});const IDBsupport=document.createElement("template");IDBsupport.innerHTML='\n            <style>\n                * {\n                    padding: 0;\n                    margin: 0;\n                    box-sizing: border-box;\n                }\n                :host{\n                    display: flex;\n                    flex-direction: column;\n                    align-content: center;\n                    justify-content: center;\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    z-index: 50;\n                    background-color: rgba(var(--foreground-color), 1);\n                }\n                #idb_support {\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                    text-align: center;\n                    gap: 1rem;\n                    padding: 1.5rem;\n                }\n                h1{\n                    font-size: 2rem;\n                    margin-top: 1rem;\n                    margin-bottom: 2rem;\n                }\n                p{\n                    font-size: 0.9rem;\n                    max-width: 65ch;\n                    line-height: 1.7;\n                    color: rgba(var(--text-color), 0.9);\n                }\n                .icon {\n                    height: 4rem;\n                    width: 4rem;\n                    fill: #ffc107;\n                }\n            </style>\n            <article id="idb_support" style="display: none">\n                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>\n                <h1>Your browser doesn\'t support IndexedDB</h1>\n                <p>\n                    This app uses IndexedDB to store your data locally. Without IndexedDB support this app won\'t work.\n                </p>\n                <p> \n                    Please use browsers like Chrome, Firefox, Opera, Edge, Safari, Brave, etc.\n                </p>\n                <strong> If you are using Firefox TOR then consider using brave TOR instead. </strong>\n            </article>\n        ',window.customElements.define("idb-support",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(IDBsupport.content.cloneNode(!0))}connectedCallback(){const thisComponent=this;if("indexedDB"in window){const request=window.indexedDB.open("testDB",1);request.onerror=function(event){console.log("IndexedDB is not allowed or encountered an error."),thisComponent.shadowRoot.querySelector("#idb_support").style.display="flex"},request.onsuccess=function(event){thisComponent.remove()}}else console.log("IndexedDB is not supported.")}});
\ No newline at end of file
diff --git a/scripts/messenger.js b/scripts/messenger.js
index 01cefa7..cee954f 100644
--- a/scripts/messenger.js
+++ b/scripts/messenger.js
@@ -61,7 +61,7 @@
         }
     });
 
-    var directConnID, groupConnID = {},
+    var directConnID = [], groupConnID = {},
         pipeConnID = {};
     messenger.conn = {};
     Object.defineProperties(messenger.conn, {
@@ -324,6 +324,7 @@
             if (unparsed.message instanceof Object && "secret" in unparsed.message)
                 unparsed.message = floDapps.user.decrypt(unparsed.message);
             let vc = unparsed.vectorClock;
+            console.debug(unparsed);
             switch (unparsed.type) {
                 case "MESSAGE": { //process as message
                     let dm = {
@@ -332,6 +333,7 @@
                         category: "received",
                         message: encrypt(unparsed.message)
                     }
+                    console.debug(dm, `${dm.floID}|${vc}`);
                     compactIDB.addData("messages", Object.assign({}, dm), `${dm.floID}|${vc}`)
                     _loaded.chats[dm.floID] = parseInt(vc)
                     compactIDB.writeData("chats", parseInt(vc), dm.floID)
@@ -431,9 +433,9 @@
     }
 
     function requestDirectInbox() {
-        if (directConnID) { //close existing request connection (if any)
-            floCloudAPI.closeRequest(directConnID);
-            directConnID = undefined;
+        if (directConnID.length) { //close existing request connection (if any)
+            directConnID.forEach(id => floCloudAPI.closeRequest(id));
+            directConnID = [];
         }
         const parseData = processData.direct();
         let callbackFn = function (dataSet, error) {
@@ -464,12 +466,20 @@
             UI.direct(newInbox)
         }
         return new Promise((resolve, reject) => {
-            floCloudAPI.requestApplicationData(null, {
-                receiverID: user.id,
-                lowerVectorClock: _loaded.appendix.lastReceived + 1,
-                callback: callbackFn
-            }).then(conn_id => {
-                directConnID = conn_id;
+            const promises = [
+                floCloudAPI.requestApplicationData(null, {
+                    receiverID: user.id,
+                    lowerVectorClock: _loaded.appendix.lastReceived + 1,
+                    callback: callbackFn
+                }),
+                floCloudAPI.requestApplicationData(null, {
+                    receiverID: floEthereum.ethAddressFromCompressedPublicKey(user.public),
+                    lowerVectorClock: _loaded.appendix.lastReceived + 1,
+                    callback: callbackFn
+                })
+            ]
+            Promise.all(promises).then(connectionIds => {
+                directConnID = [...directConnID, ...connectionIds];
                 resolve("Direct Inbox connected");
             }).catch(error => reject(error))
         })
diff --git a/scripts/messenger.min.js b/scripts/messenger.min.js
index 3c2b725..14d1317 100644
--- a/scripts/messenger.min.js
+++ b/scripts/messenger.min.js
@@ -1 +1 @@
-!function(){const messenger=window.messenger={},user={get id(){return floDapps.user.id},get public(){return floDapps.user.public}},expiredKeys={},UI={group:(d,e)=>console.log(d,e),pipeline:(d,e)=>console.log(d,e),direct:(d,e)=>console.log(d,e),chats:c=>console.log(c),mails:m=>console.log(m),marked:r=>console.log(r)};messenger.renderUI={},Object.defineProperties(messenger.renderUI,{chats:{set:ui_fn=>UI.chats=ui_fn},directChat:{set:ui_fn=>UI.direct=ui_fn},groupChat:{set:ui_fn=>UI.group=ui_fn},pipeline:{set:ui_fn=>UI.pipeline=ui_fn},mails:{set:ui_fn=>UI.mails=ui_fn},marked:{set:ui_fn=>UI.marked=ui_fn}});const _loaded={};Object.defineProperties(messenger,{chats:{get:()=>_loaded.chats},groups:{get:()=>_loaded.groups},pipeline:{get:()=>_loaded.pipeline},blocked:{get:()=>_loaded.blocked},marked:{get:()=>_loaded.marked}});var directConnID,groupConnID={},pipeConnID={};function sendRaw(message,recipient,type,encrypt=null,comment=void 0){return new Promise(((resolve,reject)=>{if(!floCrypto.validateAddr(recipient))return reject("Invalid Recipient");if([!0,null].includes(encrypt)){let r_pubKey=floDapps.user.get_pubKey(recipient);if(r_pubKey)message=floCrypto.encryptData(message,r_pubKey);else if(!0===encrypt)return reject("recipient's pubKey not found")}let options={receiverID:recipient};comment&&(options.comment=comment),floCloudAPI.sendApplicationData(message,type,options).then((result=>resolve(result))).catch((error=>reject(error)))}))}function encrypt(value,key=_loaded.appendix.AESKey){return Crypto.AES.encrypt(value,key)}function decrypt(value,key=_loaded.appendix.AESKey){return Crypto.AES.decrypt(value,key)}function addMark(key,mark){return new Promise(((resolve,reject)=>{compactIDB.readData("marked",key).then((result=>{if(result){if(result.includes(mark))return resolve("Mark already exist");result.push(mark)}else result=[mark];compactIDB.writeData("marked",result,key).then((result=>resolve(result))).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}messenger.conn={},Object.defineProperties(messenger.conn,{direct:{get:()=>directConnID},group:{get:()=>Object.assign({},groupConnID)}}),messenger.sendRaw=sendRaw,messenger.encrypt=encrypt;function listRequests(obs,options=null){return new Promise(((resolve,reject)=>{compactIDB.readAllData(obs).then((result=>{if(!options||"object"!=typeof options)return resolve(result);let filtered={};for(let k in result){let val=result[k];options.type&&options.type==val.type||(options.floID&&options.floID==val.floID||void 0!==options.completed&&options.completed==!val.completed||(filtered[k]=val))}resolve(filtered)})).catch((error=>reject(error)))}))}messenger.blockUser=function(floID){return new Promise(((resolve,reject)=>{if(_loaded.blocked.has(floID))return resolve("User is already blocked");compactIDB.addData("blocked",!0,floID).then((result=>{_loaded.blocked.add(floID),resolve("Blocked User: "+floID)})).catch((error=>reject(error)))}))},messenger.unblockUser=function(floID){return new Promise(((resolve,reject)=>{if(!_loaded.blocked.has(floID))return resolve("User is not blocked");compactIDB.removeData("blocked",floID).then((result=>{_loaded.blocked.delete(floID),resolve("Unblocked User: "+floID)})).catch((error=>reject(error)))}))},messenger.sendMessage=function(message,receiver){return new Promise(((resolve,reject)=>{sendRaw(message,receiver,"MESSAGE").then((result=>{let vc=result.vectorClock,data={floID:receiver,time:result.time,category:"sent",message:encrypt(message)};_loaded.chats[receiver]=parseInt(vc),compactIDB.writeData("chats",parseInt(vc),receiver),compactIDB.addData("messages",Object.assign({},data),`${receiver}|${vc}`),data.message=message,resolve({[vc]:data})})).catch((error=>reject(error)))}))},messenger.sendMail=function(subject,content,recipients,prev=null){return new Promise(((resolve,reject)=>{Array.isArray(recipients)||(recipients=[recipients]);let mail={subject:subject,content:content,ref:Date.now()+floCrypto.randString(8,!0),prev:prev},promises=recipients.map((r=>sendRaw(JSON.stringify(mail),r,"MAIL")));Promise.allSettled(promises).then((results=>{if(mail.time=Date.now(),mail.from=user.id,mail.to=[],results.forEach((r=>{"fulfilled"===r.status&&mail.to.push(r.value.receiverID)})),0===mail.to.length)return reject(results);mail.content=encrypt(content),compactIDB.addData("mails",Object.assign({},mail),mail.ref),mail.content=content,resolve({[mail.ref]:mail})}))}))},messenger.list_request_sent=(options=null)=>listRequests("request_sent",options),messenger.list_request_received=(options=null)=>listRequests("request_received",options),messenger.list_response_sent=(options=null)=>listRequests("response_sent",options),messenger.list_response_received=(options=null)=>listRequests("response_received",options),messenger.request_pubKey=(receiver,message="")=>function(receiver,type,message,encrypt=null){return new Promise(((resolve,reject)=>{sendRaw(message,receiver,"REQUEST",encrypt,type).then((result=>{let vc=result.vectorClock,data={floID:receiver,time:result.time,message:message,type:type};compactIDB.addData("request_sent",data,vc),resolve({[vc]:data})})).catch((error=>reject(error)))}))}(receiver,"PUBLIC_KEY",message,!1),messenger.respond_pubKey=(req_id,message="")=>function(req_id,message,encrypt=null){return new Promise(((resolve,reject)=>{compactIDB.readData("request_received",req_id).then((request=>{sendRaw(JSON.stringify({value:message,reqID:req_id}),request.floID,"RESPONSE",encrypt,request.type).then((result=>{let vc=result.vectorClock,data={floID:request.floID,time:result.time,message:message,type:request.type,reqID:req_id};compactIDB.addData("response_sent",data,vc),request.completed=vc,compactIDB.writeData("request_received",request,req_id),resolve({[vc]:data})})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}(req_id,message,!1);const processData={};processData.direct=function(){return(unparsed,newInbox)=>{if(floDapps.storePubKey(unparsed.senderID,unparsed.pubKey),_loaded.blocked.has(unparsed.senderID)&&"REVOKE_KEY"!==unparsed.type)throw"blocked-user";unparsed.message instanceof Object&&"secret"in unparsed.message&&(unparsed.message=floDapps.user.decrypt(unparsed.message));let vc=unparsed.vectorClock;switch(unparsed.type){case"MESSAGE":{let dm={time:unparsed.time,floID:unparsed.senderID,category:"received",message:encrypt(unparsed.message)};compactIDB.addData("messages",Object.assign({},dm),`${dm.floID}|${vc}`),_loaded.chats[dm.floID]=parseInt(vc),compactIDB.writeData("chats",parseInt(vc),dm.floID),dm.message=unparsed.message,newInbox.messages[vc]=dm,addMark(dm.floID,"unread");break}case"REQUEST":{let req={floID:unparsed.senderID,time:unparsed.time,message:unparsed.message,type:unparsed.comment};compactIDB.addData("request_received",req,vc),newInbox.requests[vc]=req;break}case"RESPONSE":{let data=JSON.parse(unparsed.message),res={floID:unparsed.senderID,time:unparsed.time,message:data.value,type:unparsed.comment,reqID:data.reqID};compactIDB.addData("response_received",res,vc),compactIDB.readData("request_sent",data.reqID).then((req=>{req.completed=vc,compactIDB.writeData("request_sent",req,data.reqID)})),newInbox.responses[vc]=res;break}case"MAIL":{let data=JSON.parse(unparsed.message),mail={time:unparsed.time,from:unparsed.senderID,to:[unparsed.receiverID],subject:data.subject,content:encrypt(data.content),ref:data.ref,prev:data.prev};compactIDB.addData("mails",Object.assign({},mail),mail.ref),mail.content=data.content,newInbox.mails[mail.ref]=mail,addMark(mail.ref,"unread");break}case"CREATE_GROUP":{let groupInfo=JSON.parse(unparsed.message),h=["groupID","created","admin"].map((x=>groupInfo[x])).join("|");if(groupInfo.admin===unparsed.senderID&&floCrypto.verifySign(h,groupInfo.hash,groupInfo.pubKey)&&floCrypto.getFloID(groupInfo.pubKey)===groupInfo.groupID){let eKey=groupInfo.eKey;groupInfo.eKey=encrypt(eKey),compactIDB.writeData("groups",Object.assign({},groupInfo),groupInfo.groupID),groupInfo.eKey=eKey,_loaded.groups[groupInfo.groupID]=groupInfo,requestGroupInbox(groupInfo.groupID),newInbox.newgroups.push(groupInfo.groupID)}break}case"REVOKE_KEY":{let r=JSON.parse(unparsed.message),groupInfo=_loaded.groups[r.groupID];if(unparsed.senderID===groupInfo.admin){"object"!=typeof expiredKeys[r.groupID]&&(expiredKeys[r.groupID]={}),expiredKeys[r.groupID][vc]=groupInfo.eKey;let eKey=r.newKey;groupInfo.eKey=encrypt(eKey),compactIDB.writeData("groups",Object.assign({},groupInfo),groupInfo.groupID),groupInfo.eKey=eKey,newInbox.keyrevoke.push(groupInfo.groupID)}break}case"CREATE_PIPELINE":{let pipelineInfo=JSON.parse(unparsed.message),eKey=pipelineInfo.eKey;pipelineInfo.eKey=encrypt(eKey),compactIDB.addData("pipeline",Object.assign({},pipelineInfo),pipelineInfo.id),pipelineInfo.eKey=eKey,_loaded.pipeline[pipelineInfo.id]=pipelineInfo,requestPipelineInbox(pipelineInfo.id,pipelineInfo.model),newInbox.pipeline[pipelineInfo.id]=pipelineInfo.model}}}},messenger.getMail=function(mailRef){return new Promise(((resolve,reject)=>{compactIDB.readData("mails",mailRef).then((mail=>{mail.content=decrypt(mail.content),resolve(mail)})).catch((error=>reject(error)))}))};const getChatOrder=messenger.getChatOrder=function(separate=!1){let result;return separate?(result={},result.direct=Object.keys(_loaded.chats).map((a=>[_loaded.chats[a],a])).sort(((a,b)=>b[0]-a[0])).map((a=>a[1])),result.group=Object.keys(_loaded.groups).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a])).sort(((a,b)=>b[0]-a[0])).map((a=>a[1])),result.pipeline=Object.keys(_loaded.pipeline).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a])).sort(((a,b)=>b[0]-a[0])).map((a=>a[1]))):result=Object.keys(_loaded.chats).map((a=>[_loaded.chats[a],a])).concat(Object.keys(_loaded.groups).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a]))).concat(Object.keys(_loaded.pipeline).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a]))).sort(((a,b)=>b[0]-a[0])).map((a=>a[1])),result};messenger.storeContact=function(floID,name){return floDapps.storeContact(floID,name)};const loadDataFromIDB=function(defaultList=!0){return new Promise(((resolve,reject)=>{dataList=defaultList?["mails","marked","groups","pipeline","chats","blocked","appendix"]:["messages","mails","marked","chats","groups","gkeys","pipeline","blocked","appendix"];let promises=[];for(var i=0;i<dataList.length;i++)promises[i]=compactIDB.readAllData(dataList[i]);Promise.all(promises).then((results=>{let data={};for(var i=0;i<dataList.length;i++)data[dataList[i]]=results[i];if(data.appendix.lastReceived=data.appendix.lastReceived||"0",data.appendix.AESKey)try{let AESKey=floDapps.user.decrypt(data.appendix.AESKey);if(data.appendix.AESKey=AESKey,dataList.includes("messages"))for(let m in data.messages)data.messages[m].message&&(data.messages[m].message=decrypt(data.messages[m].message,AESKey));if(dataList.includes("mails"))for(let m in data.mails)data.mails[m].content=decrypt(data.mails[m].content,AESKey);if(dataList.includes("groups"))for(let g in data.groups)data.groups[g].eKey=decrypt(data.groups[g].eKey,AESKey);if(dataList.includes("gkeys"))for(let k in data.gkeys)data.gkeys[k]=decrypt(data.gkeys[k],AESKey);if(dataList.includes("pipeline"))for(let p in data.pipeline)data.pipeline[p].eKey=decrypt(data.pipeline[p].eKey,AESKey);resolve(data)}catch(error){console.error(error),reject("Corrupted AES Key")}else{if(Object.keys(data.mails).length)return reject("AES Key not Found");let AESKey=floCrypto.randString(32,!1),encryptedKey=floCrypto.encryptData(AESKey,user.public);compactIDB.addData("appendix",encryptedKey,"AESKey").then((result=>{data.appendix.AESKey=AESKey,resolve(data)})).catch((error=>reject("Unable to Generate AES Key")))}})).catch((error=>reject(error)))}))};messenger.addMark=function(key,mark){return _loaded.marked.hasOwnProperty(key)&&!_loaded.marked[key].includes(mark)&&_loaded.marked[key].push(mark),addMark(key,mark)},messenger.removeMark=function(key,mark){return _loaded.marked.hasOwnProperty(key)&&(_loaded.marked[key]=_loaded.marked[key].filter((v=>v!==mark))),function(key,mark){return new Promise(((resolve,reject)=>{compactIDB.readData("marked",key).then((result=>{if(!result||!result.includes(mark))return resolve("Mark doesnot exist");result.splice(result.indexOf(mark),1),compactIDB.writeData("marked",result,key).then((result=>resolve("Mark removed"))).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}(key,mark)},messenger.addChat=function(chatID){return new Promise(((resolve,reject)=>{compactIDB.addData("chats",0,chatID).then((result=>resolve("Added chat"))).catch((error=>reject(error)))}))},messenger.rmChat=function(chatID){return new Promise(((resolve,reject)=>{compactIDB.removeData("chats",chatID).then((result=>resolve("Chat removed"))).catch((error=>reject(error)))}))},messenger.clearChat=function(chatID){return new Promise(((resolve,reject)=>{let options={lowerKey:`${chatID}|`,upperKey:`${chatID}||`};compactIDB.searchData("messages",options).then((result=>{let promises=[];for(let i in result)promises.push(compactIDB.removeData("messages",i));Promise.all(promises).then((result=>resolve("Chat cleared"))).catch((error=>reject(error)))})).catch((error=>reject(error)))}))};const getChat=messenger.getChat=function(chatID){return new Promise(((resolve,reject)=>{let options={lowerKey:`${chatID}|`,upperKey:`${chatID}||`};compactIDB.searchData("messages",options).then((result=>{for(let i in result)result[i].message&&(result[i].message=decrypt(result[i].message));resolve(result)})).catch((error=>reject(error)))}))};messenger.backupData=function(){return new Promise(((resolve,reject)=>{loadDataFromIDB(!1).then((data=>{delete data.appendix.AESKey,data.contacts=floGlobals.contacts,data.pubKeys=floGlobals.pubKeys,data=btoa(unescape(encodeURIComponent(JSON.stringify(data))));let blobData={floID:user.id,pubKey:user.public,data:floDapps.user.encipher(data)};blobData.sign=floDapps.user.sign(blobData.data),resolve(new Blob([JSON.stringify(blobData)],{type:"application/json"}))})).catch((error=>reject(error)))}))};const parseBackup=messenger.parseBackup=function(blob){return new Promise(((resolve,reject)=>{if(blob instanceof Blob||blob instanceof File){let reader=new FileReader;reader.onload=evt=>{var blobData=JSON.parse(evt.target.result);if(floCrypto.verifySign(blobData.data,blobData.sign,blobData.pubKey))if(user.id!==blobData.floID||user.public!==blobData.pubKey)reject("Invalid Backup file: Incorrect floID");else try{let data=floDapps.user.decipher(blobData.data);try{data=JSON.parse(decodeURIComponent(escape(atob(data)))),resolve(data)}catch(e){reject("Corrupted Backup file: Parse failed")}}catch(e){reject("Corrupted Backup file: Decryption failed")}else reject("Corrupted Backup file: Signature verification failed")},reader.readAsText(blob)}else reject("Backup is not a valid File (or) Blob")}))};messenger.restoreData=function(arg){return new Promise(((resolve,reject)=>{if(arg instanceof Blob||arg instanceof File)var parseData=parseBackup;else parseData=data=>new Promise(((res,rej)=>res(data)));parseData(arg).then((data=>{for(let m in data.messages)data.messages[m].message&&(data.messages[m].message=encrypt(data.messages[m].message));for(let m in data.mails)data.mails[m].content=encrypt(data.mails[m].content);for(let k in data.gkeys)data.gkeys[k]=encrypt(data.gkeys[k]);for(let g in data.groups)data.groups[g].eKey=encrypt(data.groups[g].eKey);for(let p in data.pipeline)data.pipeline[p].eKey=encrypt(data.pipeline[p].eKey);for(let c in data.chats)data.chats[c]<=_loaded.chats[c]&&delete data.chats[c];for(let l in data.appendix)l.startsWith("lastReceived")&&data.appendix[l]<=_loaded.appendix[l]&&delete data.appendix[l];for(let c in data.contacts)c in floGlobals.contacts&&delete data.contacts[c];for(let p in data.pubKeys)p in floGlobals.pubKeys&&delete data.pubKeys[p];let promises=[];for(let obs in data){let writeFn;switch(obs){case"contacts":writeFn=(k,v)=>floDapps.storeContact(k,v);break;case"pubKeys":writeFn=(k,v)=>floDapps.storePubKey(k,v);break;default:writeFn=(k,v)=>compactIDB.writeData(obs,v,k)}for(let k in data[obs])promises.push(writeFn(k,data[obs][k]))}Promise.all(promises).then((results=>resolve("Restore Successful"))).catch((error=>reject("Restore Failed: Unable to write to IDB")))})).catch((error=>reject(error)))}))},messenger.clearUserData=function(){return new Promise(((resolve,reject)=>{let user_floID=floCrypto.toFloID(user.id),promises=[compactIDB.deleteDB(`${floGlobals.application}_${user_floID}`),compactIDB.removeData("lastTx",`${floGlobals.application}|${user_floID}`,floDapps.root),floDapps.clearCredentials()];Promise.all(promises).then((result=>resolve("User Data cleared"))).catch((error=>reject(error)))}))},messenger.createGroup=function(groupname,description=""){return new Promise(((resolve,reject)=>{if(!groupname)return reject("Invalid Group Name");let id=floCrypto.generateNewID(),groupInfo={groupID:id.floID,pubKey:id.pubKey,admin:user.id,name:groupname,description:description,created:Date.now(),members:[user.id]},h=["groupID","created","admin"].map((x=>groupInfo[x])).join("|");groupInfo.hash=floCrypto.signData(h,id.privKey);let eKey=floCrypto.randString(16,!1);groupInfo.eKey=encrypt(eKey);let p1=compactIDB.addData("groups",groupInfo,id.floID),p2=compactIDB.addData("gkeys",encrypt(id.privKey),id.floID);Promise.all([p1,p2]).then((r=>{groupInfo.eKey=eKey,_loaded.groups[id.floID]=groupInfo,requestGroupInbox(id.floID),resolve(groupInfo)})).catch((e=>reject(e)))}))},messenger.changeGroupName=function(groupID,name){return new Promise(((resolve,reject)=>{let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");sendRaw(encrypt(name,groupInfo.eKey),groupID,"UP_NAME",!1).then((result=>resolve("Name updated"))).catch((error=>reject(error)))}))},messenger.changeGroupDescription=function(groupID,description){return new Promise(((resolve,reject)=>{let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");sendRaw(encrypt(description,groupInfo.eKey),groupID,"UP_DESCRIPTION",!1).then((result=>resolve("Description updated"))).catch((error=>reject(error)))}))},messenger.addGroupMembers=function(groupID,newMem,note=void 0){return new Promise(((resolve,reject)=>{Array.isArray(newMem)||"string"!=typeof newMem||(newMem=[newMem]);let imem1=[],imem2=[];if(newMem.forEach((m=>floCrypto.validateAddr(m)?m in floGlobals.pubKeys?null:imem2.push(m):imem1.push(m))),imem1.length)return reject(`Invalid Members(floIDs): ${imem1}`);if(imem2.length)return reject(`Invalid Members (pubKey not available): ${imem2}`);let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");let k=groupInfo.eKey;groupInfo=JSON.stringify(groupInfo);let promises=newMem.map((m=>sendRaw(groupInfo,m,"CREATE_GROUP",!0)));Promise.allSettled(promises).then((results=>{let success=[],failed=[];for(let i in results)"fulfilled"===results[i].status?success.push(newMem[i]):"rejected"===results[i].status&&failed.push(newMem[i]);sendRaw(encrypt(success.join("|"),k),groupID,"ADD_MEMBERS",!1,note).then((r=>resolve(`Members added: ${success}`))).catch((e=>reject(e)))}))}))},messenger.rmGroupMembers=function(groupID,rmMem,note=void 0){return new Promise(((resolve,reject)=>{Array.isArray(rmMem)||"string"!=typeof rmMem||(rmMem=[rmMem]);let groupInfo=_loaded.groups[groupID],imem=rmMem.filter((m=>!groupInfo.members.includes(m)));if(imem.length)return reject(`Invalid members: ${imem}`);if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");let p1=sendRaw(encrypt(rmMem.join("|"),groupInfo.eKey),groupID,"RM_MEMBERS",!1,note);groupInfo.members=groupInfo.members.filter((m=>!rmMem.includes(m)));let p2=revokeKey(groupID);Promise.all([p1,p2]).then((r=>resolve(`Members removed: ${rmMem}`))).catch((e=>reject(e)))}))};const revokeKey=messenger.revokeKey=function(groupID){return new Promise(((resolve,reject)=>{let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");let newKey=floCrypto.randString(16,!1);Promise.all(groupInfo.members.map((m=>sendRaw(JSON.stringify({newKey:newKey,groupID:groupID}),m,"REVOKE_KEY",!0)))).then((result=>{resolve("Group key revoked")})).catch((error=>reject(error)))}))};messenger.sendGroupMessage=function(message,groupID){return new Promise(((resolve,reject)=>{let k=_loaded.groups[groupID].eKey;sendRaw(message=encrypt(message,k),groupID,"GROUP_MSG",!1).then((result=>resolve(`${groupID}: ${message}`))).catch((error=>reject(error)))}))};const disableGroup=messenger.disableGroup=function(groupID){return new Promise(((resolve,reject)=>{if(!_loaded.groups[groupID])return reject("Group not found");let groupInfo=Object.assign({},_loaded.groups[groupID]);if(groupInfo.disabled)return resolve("Group already diabled");groupInfo.disabled=!0,groupInfo.eKey=encrypt(groupInfo.eKey),compactIDB.writeData("groups",groupInfo,groupID).then((result=>{floCloudAPI.closeRequest(groupConnID[groupID]),delete groupConnID[groupID],resolve("Group diabled")})).catch((error=>reject(error)))}))};function requestGroupInbox(groupID,_async=!0){groupConnID[groupID]&&(floCloudAPI.closeRequest(groupConnID[groupID]),delete groupConnID[groupID]);const parseData=processData.group(groupID);let fn=floCloudAPI.requestApplicationData(null,{receiverID:groupID,lowerVectorClock:_loaded.appendix[`lastReceived_${groupID}`]+1,callback:function(dataSet,error){if(error)return console.error(error);console.info(dataSet);let newInbox={messages:{}},infoChange=!1;for(let vc in dataSet)if(groupID===dataSet[vc].receiverID)try{infoChange=parseData(dataSet[vc],newInbox)||infoChange,(!_loaded.appendix[`lastReceived_${groupID}`]||_loaded.appendix[`lastReceived_${groupID}`]<vc)&&(_loaded.appendix[`lastReceived_${groupID}`]=vc)}catch(error){console.log(error)}if(compactIDB.writeData("appendix",_loaded.appendix[`lastReceived_${groupID}`],`lastReceived_${groupID}`),infoChange){let newInfo=Object.assign({},_loaded.groups[groupID]);newInfo.eKey=encrypt(newInfo.eKey),compactIDB.writeData("groups",newInfo,groupID)}console.debug(newInbox),UI.group(newInbox)}});if(!_async)return new Promise(((resolve,reject)=>{fn.then((conn_id=>{groupConnID[groupID]=conn_id,resolve(`Connected to group ${groupID}`)})).catch((error=>reject(error)))}));fn.then((conn_id=>groupConnID[groupID]=conn_id)).catch((error=>console.error(`request-group(${groupID}):`,error)))}processData.group=function(groupID){return(unparsed,newInbox)=>{if(!_loaded.groups[groupID].members.includes(unparsed.senderID))return;floDapps.storePubKey(unparsed.senderID,unparsed.pubKey);let data={time:unparsed.time,sender:unparsed.senderID,groupID:unparsed.receiverID},vc=unparsed.vectorClock,k=_loaded.groups[groupID].eKey;if(expiredKeys[groupID]){for(var ex=Object.keys(expiredKeys[groupID]).sort();ex.length&&vc>ex[0];)ex.shift();ex.length&&(k=expiredKeys[groupID][ex.shift()])}unparsed.message=decrypt(unparsed.message,k);var infoChange=!1;if("GROUP_MSG"===unparsed.type)data.message=encrypt(unparsed.message);else if(data.sender===_loaded.groups[groupID].admin){let groupInfo=_loaded.groups[groupID];switch(data.admin=!0,unparsed.type){case"ADD_MEMBERS":data.newMembers=unparsed.message.split("|"),data.note=unparsed.comment,groupInfo.members=Array.from(new Set(groupInfo.members.concat(data.newMembers)));break;case"UP_DESCRIPTION":data.description=unparsed.message,groupInfo.description=data.description;break;case"RM_MEMBERS":if(data.rmMembers=unparsed.message.split("|"),data.note=unparsed.comment,groupInfo.members=groupInfo.members.filter((m=>!data.rmMembers.includes(m))),data.rmMembers.includes(user.id))return void disableGroup(groupID);break;case"UP_NAME":data.name=unparsed.message,groupInfo.name=data.name}infoChange=!0}return compactIDB.addData("messages",Object.assign({},data),`${groupID}|${vc}`),data.message&&(data.message=decrypt(data.message)),newInbox.messages[vc]=data,floCrypto.isSameAddr(data.sender,user.id)||addMark(data.groupID,"unread"),infoChange}},messenger.init=function(){return new Promise(((resolve,reject)=>{new Promise(((resolve,reject)=>{let user_db=`${floGlobals.application}_${floCrypto.toFloID(user.id)}`;compactIDB.initDB(user_db,{messages:{},mails:{},marked:{},chats:{},groups:{},gkeys:{},blocked:{},pipeline:{},request_sent:{},request_received:{},response_sent:{},response_received:{},flodata:{},appendix:{},userSettings:{},multisigLabels:{}}).then((result=>{console.info(result),compactIDB.setDefaultDB(user_db),resolve("Messenger UserDB Initated Successfully")})).catch((error=>reject(error)))})).then((result=>{console.debug(result),loadDataFromIDB().then((data=>{console.debug(data),_loaded.appendix=data.appendix,_loaded.groups=data.groups,_loaded.pipeline=data.pipeline,_loaded.chats=data.chats,_loaded.marked=data.marked,_loaded.blocked=new Set(Object.keys(data.blocked)),UI.chats(getChatOrder()),UI.mails(data.mails),UI.marked(data.marked),resolve("Loaded local data");let promises=[];promises.push(function(){directConnID&&(floCloudAPI.closeRequest(directConnID),directConnID=void 0);const parseData=processData.direct();let callbackFn=function(dataSet,error){if(error)return console.error(error);let newInbox={messages:{},requests:{},responses:{},mails:{},newgroups:[],keyrevoke:[],pipeline:{}};for(let vc in dataSet)try{parseData(dataSet[vc],newInbox)}catch(error){console.log(error)}finally{_loaded.appendix.lastReceived<vc&&(_loaded.appendix.lastReceived=vc)}compactIDB.writeData("appendix",_loaded.appendix.lastReceived,"lastReceived"),console.debug(newInbox),UI.direct(newInbox)};return new Promise(((resolve,reject)=>{floCloudAPI.requestApplicationData(null,{receiverID:user.id,lowerVectorClock:_loaded.appendix.lastReceived+1,callback:callbackFn}).then((conn_id=>{directConnID=conn_id,resolve("Direct Inbox connected")})).catch((error=>reject(error)))}))}());for(let g in data.groups)!0!==data.groups[g].disabled&&promises.push(requestGroupInbox(g,!1));for(let p in data.pipeline)!0!==data.pipeline[p].disabled&&promises.push(requestPipelineInbox(p,data.pipeline[p].model,!1));loadDataFromBlockchain().then((result=>{Promise.all(promises).then((result=>resolve("Messenger initiated"))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}))};const loadDataFromBlockchain=messenger.loadDataFromBlockchain=function(){return new Promise(((resolve,reject)=>{let user_floID=floCrypto.toFloID(user.id);if(!user_floID)return reject("Not an valid address");let last_key=`${floGlobals.application}|${user_floID}`;compactIDB.readData("lastTx",last_key,floDapps.root).then((lastTx=>{var query_options={pattern:floGlobals.application,tx:!0};"number"==typeof lastTx?query_options.ignoreOld=lastTx:"string"==typeof lastTx&&(query_options.after=lastTx),floBlockchainAPI.readData(user_floID,query_options).then((result=>{for(var i=result.items.length-1;i>=0;i--){let tx=result.items[i],content=JSON.parse(tx.data)[floGlobals.application];if(!(content instanceof Object))continue;let key=(content.type?content.type+"|":"")+tx.txid.substr(0,16);compactIDB.writeData("flodata",{time:tx.time,txid:tx.txid,data:content},key)}compactIDB.writeData("lastTx",result.lastItem,last_key,floDapps.root),resolve(!0)})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))},MultiSig=messenger.multisig={};MultiSig.createAddress=function(pubKeys,minRequired){return new Promise((async(resolve,reject)=>{let co_owners=pubKeys.map((p=>floCrypto.getFloID(p)));if(co_owners.includes(null))return reject("Invalid public key: "+pubKeys[co_owners.indexOf(null)]);let privateKey=await floDapps.user.private,multisig=btcOperator.multiSigAddress(pubKeys,minRequired);if("object"!=typeof multisig)return reject("Unable to create multisig address");let content={type:"btc_multisig",address:multisig.address,redeemScript:multisig.redeemScript};console.debug(content.address,content.redeemScript),floBlockchainAPI.writeDataMultiple([privateKey],JSON.stringify({[floGlobals.application]:content}),co_owners).then((txid=>{console.info(txid);let key="btc_multisig|"+txid.substr(0,16);compactIDB.writeData("flodata",{time:null,txid:txid,data:content},key),resolve(multisig.address)})).catch((error=>reject(error)))}))},MultiSig.listAddress=function(){return new Promise(((resolve,reject)=>{let options={lowerKey:"btc_multisig|",upperKey:"btc_multisig||"};compactIDB.searchData("flodata",options).then((result=>{let multsigs={};for(let i in result){let addr=result[i].data.address,addr_type=btcOperator.validateAddress(addr),decode=("multisig"==addr_type?coinjs.script().decodeRedeemScript:coinjs.script().decodeRedeemScriptBech32)(result[i].data.redeemScript);"multisig"!=addr_type&&"multisigBech32"!=addr_type?console.warn("Invalid multi-sig address:",addr):decode&&decode.address===addr?"multisig__"!==decode.type?console.warn("Redeem-script is not of a multisig:",addr):decode.pubkeys.includes(user.public.toLowerCase())||decode.pubkeys.includes(user.public.toUpperCase())?decode.pubkeys.length<decode.signaturesRequired?console.warn("Invalid multisig (required is greater than users):",addr):multsigs[addr]={redeemScript:decode.redeemscript,pubKeys:decode.pubkeys,minRequired:decode.signaturesRequired,time:result[i].time,txid:result[i].txid}:console.warn("User is not a part of this multisig:",addr):console.warn("Invalid redeem-script:",addr)}resolve(multsigs)})).catch((error=>reject(error)))}))},MultiSig.createTx_BTC=function(address,redeemScript,receivers,amounts,fee=null,options={}){return new Promise((async(resolve,reject)=>{let addr_type=btcOperator.validateAddress(address);if("multisig"!=addr_type&&"multisigBech32"!=addr_type)return reject("Sender address is not a multisig");let decode=("multisig"==addr_type?coinjs.script().decodeRedeemScript:coinjs.script().decodeRedeemScriptBech32)(redeemScript);if(!decode||decode.address!==address||"multisig__"!==decode.type)return reject("Invalid redeem-script");if(!decode.pubkeys.includes(user.public.toLowerCase())&&!decode.pubkeys.includes(user.public.toUpperCase()))return reject("User is not a part of this multisig");if(decode.pubkeys.length<decode.signaturesRequired)return reject("Invalid multisig (required is greater than users)");let co_owners=decode.pubkeys.map((p=>floCrypto.getFloID(p))),privateKey=await floDapps.user.private;btcOperator.createMultiSigTx(address,redeemScript,receivers,amounts,fee,options).then((({tx_hex:tx_hex})=>{tx_hex=btcOperator.signTx(tx_hex,privateKey),createPipeline("btc_multisig",co_owners,32,decode.pubkeys).then((pipeline=>{sendRaw(encrypt(tx_hex,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>resolve(pipeline.id))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))},MultiSig.signTx_BTC=function(pipeID){return new Promise(((resolve,reject)=>"btc_multisig"!==_loaded.pipeline[pipeID].model?reject("Incorrect pipeline model. Only works for BTC-multisig"):_loaded.pipeline[pipeID].disabled?reject("Pipeline is already closed"):void getChat(pipeID).then((async result=>{let pipeline=_loaded.pipeline[pipeID],tx_hex_latest=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x)).pop(),privateKey=await floDapps.user.private,tx_hex_signed=btcOperator.signTx(tx_hex_latest,privateKey);sendRaw(encrypt(tx_hex_signed,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>{if(!btcOperator.checkSigned(tx_hex_signed))return resolve({tx_hex:tx_hex_signed});btcOperator.broadcastTx(tx_hex_signed).then((txid=>{console.debug(txid),sendRaw(encrypt(txid,pipeline.eKey),pipeline.id,"BROADCAST",!1).then((result=>resolve({tx_hex:tx_hex_signed,txid:txid}))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>console.error(error)))))},MultiSig.createTx_FLO=function(address,redeemScript,receivers,amounts,floData="",options={}){return new Promise((async(resolve,reject)=>{if(!floCrypto.validateFloID(address)){let addr_type=btcOperator.validateAddress(address);if("multisig"!=addr_type&&"multisigBech32"!=addr_type)return reject("Sender address is not a multisig");address=floCrypto.toMultisigFloID(address)}let decode=floCrypto.decodeRedeemScript(redeemScript);if(!decode||decode.address!==address)return reject("Invalid redeem-script");if(!decode.pubkeys.includes(user.public.toLowerCase())&&!decode.pubkeys.includes(user.public.toUpperCase()))return reject("User is not a part of this multisig");if(decode.pubkeys.length<decode.required)return reject("Invalid multisig (required is greater than users)");let co_owners=decode.pubkeys.map((p=>floCrypto.getFloID(p))),privateKey=await floDapps.user.private;floBlockchainAPI.createMultisigTx(redeemScript,receivers,amounts,floData).then((tx_hex=>{tx_hex=floBlockchainAPI.signTx(tx_hex,privateKey),createPipeline("flo_multisig",co_owners,32,decode.pubkeys).then((pipeline=>{sendRaw(encrypt(tx_hex,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>resolve(pipeline.id))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))},MultiSig.signTx_FLO=function(pipeID){return new Promise(((resolve,reject)=>"flo_multisig"!==_loaded.pipeline[pipeID].model?reject("Incorrect pipeline model. Only works for FLO-multisig"):_loaded.pipeline[pipeID].disabled?reject("Pipeline is already closed"):void getChat(pipeID).then((async result=>{let pipeline=_loaded.pipeline[pipeID],tx_hex_latest=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x)).pop(),privateKey=await floDapps.user.private,tx_hex_signed=floBlockchainAPI.signTx(tx_hex_latest,privateKey);sendRaw(encrypt(tx_hex_signed,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>{if(!floBlockchainAPI.checkSigned(tx_hex_signed))return resolve({tx_hex:tx_hex_signed});floBlockchainAPI.broadcastTx(tx_hex_signed).then((txid=>{console.debug(txid),sendRaw(encrypt(txid,pipeline.eKey),pipeline.id,"BROADCAST",!1).then((result=>resolve({tx_hex:tx_hex_signed,txid:txid}))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>console.error(error)))))};const createPipeline=messenger.createPipeline=function(model,members,ekeySize=16,pubkeys=null){return new Promise(((resolve,reject)=>{if(null!==pubkeys){if(!Array.isArray(pubkeys))return reject("pubkeys must be an array (if passed)");if(pubkeys.length!==members.length)return reject("pubkey length doesnot match members length")}let imem1=[],imem2=[];if(members.forEach(((m,i)=>{floCrypto.validateAddr(m)?m in floGlobals.pubKeys||floCrypto.isSameAddr(user.id,m)||(null!==pubkeys&&floCrypto.verifyPubKey(pubkeys[i],m)?floGlobals.pubKeys[m]=pubkeys[i]:imem2.push(m)):imem1.push(m)})),imem1.length)return reject(`Invalid Members(floIDs): ${imem1}`);if(imem2.length)return reject(`Invalid Members (pubKey not available): ${imem2}`);let pipeline={id:floCrypto.tmpID,model:model,members:members};ekeySize&&(pipeline.eKey=floCrypto.randString(ekeySize));let pipelineInfo=JSON.stringify(pipeline),promises=members.filter((m=>!floCrypto.isSameAddr(m,user.id))).map((m=>sendRaw(pipelineInfo,m,"CREATE_PIPELINE",!0)));Promise.allSettled(promises).then((results=>{console.debug(results.filter((r=>"rejected"===r.status)).map((r=>r.reason))),_loaded.pipeline[pipeline.id]=Object.assign({},pipeline),pipeline.eKey&&(pipeline.eKey=encrypt(pipeline.eKey)),compactIDB.addData("pipeline",pipeline,pipeline.id).then((result=>{requestPipelineInbox(pipeline.id,pipeline.model),resolve(_loaded.pipeline[pipeline.id])})).catch((error=>reject(error)))}))}))};function requestPipelineInbox(pipeID,model,_async=!0){pipeConnID[pipeID]&&(floCloudAPI.closeRequest(pipeConnID[pipeID]),delete pipeConnID[pipeID]);let parseData=processData.pipeline[model](pipeID),fn=floCloudAPI.requestApplicationData(null,{receiverID:pipeID,lowerVectorClock:_loaded.appendix[`lastReceived_${pipeID}`]+1,callback:function(dataSet,error){if(error)return console.error(error);console.info(dataSet);let newInbox={messages:{}};for(let vc in dataSet)if(pipeID===dataSet[vc].receiverID)try{parseData(dataSet[vc],newInbox),floCrypto.isSameAddr(dataSet[vc].senderID,user.id)||addMark(pipeID,"unread"),(!_loaded.appendix[`lastReceived_${pipeID}`]||_loaded.appendix[`lastReceived_${pipeID}`]<vc)&&(_loaded.appendix[`lastReceived_${pipeID}`]=vc)}catch(error){console.log(error)}compactIDB.writeData("appendix",_loaded.appendix[`lastReceived_${pipeID}`],`lastReceived_${pipeID}`),console.debug(newInbox),UI.pipeline(model,newInbox)}});if(!_async)return new Promise(((resolve,reject)=>{fn.then((conn_id=>{pipeConnID[pipeID]=conn_id,resolve(`Connected to pipeline ${pipeID}`)})).catch((error=>reject(error)))}));fn.then((conn_id=>pipeConnID[pipeID]=conn_id)).catch((error=>console.error(`request-pipeline(${pipeID}):`,error)))}const disablePipeline=messenger.disablePipeline=function(pipeID){return console.debug(JSON.stringify(pipeConnID),pipeConnID[pipeID]),new Promise(((resolve,reject)=>{if(!_loaded.pipeline[pipeID])return reject("Pipeline not found");if(_loaded.pipeline[pipeID].disabled)return resolve("Pipeline already diabled");_loaded.pipeline[pipeID].disabled=!0;let pipelineInfo=Object.assign({},_loaded.pipeline[pipeID]);pipelineInfo.eKey=encrypt(pipelineInfo.eKey),compactIDB.writeData("pipeline",pipelineInfo,pipeID).then((result=>{floCloudAPI.closeRequest(pipeConnID[pipeID]),delete pipeConnID[pipeID],resolve("Pipeline diabled")})).catch((error=>reject(error)))}))};messenger.sendPipelineMessage=function(message,pipeID){return new Promise(((resolve,reject)=>{let k=_loaded.pipeline[pipeID].eKey;k&&(message=encrypt(message,k)),sendRaw(message,pipeID,"MESSAGE",!1).then((result=>resolve(`${pipeID}: ${message}`))).catch((error=>reject(error)))}))},messenger.editFee=function(tx_id,new_fee,private_keys,change_only=!0){return new Promise((async(resolve,reject)=>{var address;Array.isArray(private_keys)||(private_keys=[private_keys]);try{let tx,tx_parsed;if(tx=await btcOperator.tx_fetch_for_editing(tx_id),tx_parsed=await btcOperator.parseTransaction(tx),tx_parsed.fee>=new_fee)return reject("Fees can only be increased");var edit_output_address=new Set;!0===change_only?tx_parsed.inputs.forEach((inp=>edit_output_address.add(inp.address))):!1===change_only?tx_parsed.outputs.forEach((out=>edit_output_address.add(out.address))):"string"==typeof change_only?edit_output_address.add(change_only):Array.isArray(change_only)&&change_only.forEach((id=>edit_output_address.add(id)));let inc_fee=btcOperator.util.BTC_to_Sat(new_fee-tx_parsed.fee);if(inc_fee<MIN_FEE_UPDATE)return reject(`Insufficient additional fee. Minimum increment: ${MIN_FEE_UPDATE}`);for(let i=tx.outs.length-1;i>=0&&inc_fee>0;i--)if(edit_output_address.has(tx_parsed.outputs[i].address)){let current_value=tx.outs[i].value;current_value instanceof BigInteger&&(current_value=current_value.intValue()),current_value>inc_fee?(tx.outs[i].value=current_value-inc_fee,inc_fee=0):(inc_fee-=current_value,tx.outs[i].value=0)}if(inc_fee>0){let max_possible_fee=btcOperator.util.BTC_to_Sat(new_fee)-inc_fee;return reject(`Insufficient output values to increase fee. Maximum fee possible: ${btcOperator.util.Sat_to_BTC(max_possible_fee)}`)}tx.outs=tx.outs.filter((o=>o.value>=DUST_AMT));let wif_keys=[],witness_position=0;for(let i in tx.ins){var addr=tx_parsed.inputs[i].address,value=btcOperator.util.BTC_to_Sat(tx_parsed.inputs[i].value);let addr_decode=coinjs.addressDecode(addr);var privKey=private_keys.find((pk=>verifyKey(addr,pk)));if(!privKey)return reject(`Private key missing for ${addr}`);const rs=_redeemScript(addr,privKey);var script;if(!1===rs?wif_keys.unshift(privKey):wif_keys.push(privKey),rs&&rs.length)if(rs.match(/^00/)&&44==rs.length||40==rs.length&&rs.match(/^[a-f0-9]+$/gi)){"bech32"==addr_decode&&(witness_position+=1);let s=coinjs.script();s.writeBytes(Crypto.util.hexToBytes(rs)),s.writeOp(0),s.writeBytes(coinjs.numToBytes(value.toFixed(0),8)),script=Crypto.util.bytesToHex(s.buffer)}else if("multisigBech32"===addr_decode.type){address=addr;let redeemScript=btcOperator.extractLastHexStrings(tx.witness)[witness_position];witness_position+=1;let s=coinjs.script();s.writeBytes(Crypto.util.hexToBytes(redeemScript)),s.writeOp(0),s.writeBytes(coinjs.numToBytes(value.toFixed(0),8)),script=Crypto.util.bytesToHex(s.buffer)}else script=rs;else{let s=coinjs.script();s.writeOp(118),s.writeOp(169),s.writeBytes(addr_decode.bytes),s.writeOp(136),s.writeOp(172),script=Crypto.util.bytesToHex(s.buffer)}tx.ins[i].script=coinjs.script(script)}tx.witness=!1,console.debug("Unsigned:",tx.serialize()),new Set(wif_keys).forEach((key=>tx.sign(key,1)));let tx_hex=tx.serialize(),addr_type=btcOperator.validateAddress(address);if("multisig"!=addr_type&&"multisigBech32"!=addr_type)return reject("Sender address is not a multisig");let decode=("multisig"==addr_type?coinjs.script().decodeRedeemScript:coinjs.script().decodeRedeemScriptBech32)(redeemScript);if(!decode||decode.address!==address||"multisig__"!==decode.type)return reject("Invalid redeem-script");if(!decode.pubkeys.includes(user.public.toLowerCase())&&!decode.pubkeys.includes(user.public.toUpperCase()))return reject("User is not a part of this multisig");if(decode.pubkeys.length<decode.signaturesRequired)return reject("Invalid multisig (required is greater than users)");let co_owners=decode.pubkeys.map((p=>floCrypto.getFloID(p)));createPipeline("btc_multisig",co_owners,32,decode.pubkeys).then((pipeline=>{sendRaw(encrypt(tx_hex,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>resolve(pipeline.id))).catch((error=>reject(error)))})).catch((error=>reject(error)))}catch(error){reject(error)}}))},processData.pipeline={},processData.pipeline.btc_multisig=function(pipeID){return(unparsed,newInbox)=>{if(!_loaded.pipeline[pipeID].members.includes(floCrypto.toFloID(unparsed.senderID)))return;let data={time:unparsed.time,sender:unparsed.senderID,pipeID:unparsed.receiverID},vc=unparsed.vectorClock,k=_loaded.pipeline[pipeID].eKey;switch(unparsed.message=decrypt(unparsed.message,k),floDapps.storePubKey(unparsed.senderID,unparsed.pubKey),data.type=unparsed.type,unparsed.type){case"TRANSACTION":data.tx_hex=unparsed.message;break;case"BROADCAST":data.txid=unparsed.message,btcOperator.getTx.hex(data.txid).then((tx_hex_final=>{getChat(pipeID).then((result=>{let tx_hex_inital=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x)).shift();btcOperator.checkIfSameTx(tx_hex_inital,tx_hex_final)&&disablePipeline(pipeID)})).catch((error=>console.error(error)))})).catch((error=>console.error(error)));break;case"MESSAGE":data.message=encrypt(unparsed.message)}compactIDB.addData("messages",Object.assign({},data),`${pipeID}|${vc}`),data.message&&(data.message=decrypt(data.message)),newInbox.messages[vc]=data}},processData.pipeline.flo_multisig=function(pipeID){return(unparsed,newInbox)=>{if(!_loaded.pipeline[pipeID].members.includes(floCrypto.toFloID(unparsed.senderID)))return;let data={time:unparsed.time,sender:unparsed.senderID,pipeID:unparsed.receiverID},vc=unparsed.vectorClock,k=_loaded.pipeline[pipeID].eKey;switch(unparsed.message=decrypt(unparsed.message,k),floDapps.storePubKey(unparsed.senderID,unparsed.pubKey),data.type=unparsed.type,unparsed.type){case"TRANSACTION":data.tx_hex=unparsed.message;break;case"BROADCAST":data.txid=unparsed.message,getChat(pipeID).then((result=>{var tx_hex_list=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x));let tx_hex_inital=tx_hex_list[0],tx_hex_final=tx_hex_list.pop();floBlockchainAPI.checkIfSameTx(tx_hex_inital,tx_hex_final)&&floBlockchainAPI.transactionID(tx_hex_final)==data.txid&&disablePipeline(pipeID)})).catch((error=>console.error(error)));break;case"MESSAGE":data.message=encrypt(unparsed.message)}compactIDB.addData("messages",Object.assign({},data),`${pipeID}|${vc}`),data.message&&(data.message=decrypt(data.message)),newInbox.messages[vc]=data}}}();
\ No newline at end of file
+!function(){const messenger=window.messenger={},user={get id(){return floDapps.user.id},get public(){return floDapps.user.public}},expiredKeys={},UI={group:(d,e)=>console.log(d,e),pipeline:(d,e)=>console.log(d,e),direct:(d,e)=>console.log(d,e),chats:c=>console.log(c),mails:m=>console.log(m),marked:r=>console.log(r)};messenger.renderUI={},Object.defineProperties(messenger.renderUI,{chats:{set:ui_fn=>UI.chats=ui_fn},directChat:{set:ui_fn=>UI.direct=ui_fn},groupChat:{set:ui_fn=>UI.group=ui_fn},pipeline:{set:ui_fn=>UI.pipeline=ui_fn},mails:{set:ui_fn=>UI.mails=ui_fn},marked:{set:ui_fn=>UI.marked=ui_fn}});const _loaded={};Object.defineProperties(messenger,{chats:{get:()=>_loaded.chats},groups:{get:()=>_loaded.groups},pipeline:{get:()=>_loaded.pipeline},blocked:{get:()=>_loaded.blocked},marked:{get:()=>_loaded.marked}});var directConnID=[],groupConnID={},pipeConnID={};function sendRaw(message,recipient,type,encrypt=null,comment=void 0){return new Promise(((resolve,reject)=>{if(!floCrypto.validateAddr(recipient))return reject("Invalid Recipient");if([!0,null].includes(encrypt)){let r_pubKey=floDapps.user.get_pubKey(recipient);if(r_pubKey)message=floCrypto.encryptData(message,r_pubKey);else if(!0===encrypt)return reject("recipient's pubKey not found")}let options={receiverID:recipient};comment&&(options.comment=comment),floCloudAPI.sendApplicationData(message,type,options).then((result=>resolve(result))).catch((error=>reject(error)))}))}function encrypt(value,key=_loaded.appendix.AESKey){return Crypto.AES.encrypt(value,key)}function decrypt(value,key=_loaded.appendix.AESKey){return Crypto.AES.decrypt(value,key)}function addMark(key,mark){return new Promise(((resolve,reject)=>{compactIDB.readData("marked",key).then((result=>{if(result){if(result.includes(mark))return resolve("Mark already exist");result.push(mark)}else result=[mark];compactIDB.writeData("marked",result,key).then((result=>resolve(result))).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}messenger.conn={},Object.defineProperties(messenger.conn,{direct:{get:()=>directConnID},group:{get:()=>Object.assign({},groupConnID)}}),messenger.sendRaw=sendRaw,messenger.encrypt=encrypt;function listRequests(obs,options=null){return new Promise(((resolve,reject)=>{compactIDB.readAllData(obs).then((result=>{if(!options||"object"!=typeof options)return resolve(result);let filtered={};for(let k in result){let val=result[k];options.type&&options.type==val.type||(options.floID&&options.floID==val.floID||void 0!==options.completed&&options.completed==!val.completed||(filtered[k]=val))}resolve(filtered)})).catch((error=>reject(error)))}))}messenger.blockUser=function(floID){return new Promise(((resolve,reject)=>{if(_loaded.blocked.has(floID))return resolve("User is already blocked");compactIDB.addData("blocked",!0,floID).then((result=>{_loaded.blocked.add(floID),resolve("Blocked User: "+floID)})).catch((error=>reject(error)))}))},messenger.unblockUser=function(floID){return new Promise(((resolve,reject)=>{if(!_loaded.blocked.has(floID))return resolve("User is not blocked");compactIDB.removeData("blocked",floID).then((result=>{_loaded.blocked.delete(floID),resolve("Unblocked User: "+floID)})).catch((error=>reject(error)))}))},messenger.sendMessage=function(message,receiver){return new Promise(((resolve,reject)=>{sendRaw(message,receiver,"MESSAGE").then((result=>{let vc=result.vectorClock,data={floID:receiver,time:result.time,category:"sent",message:encrypt(message)};_loaded.chats[receiver]=parseInt(vc),compactIDB.writeData("chats",parseInt(vc),receiver),compactIDB.addData("messages",Object.assign({},data),`${receiver}|${vc}`),data.message=message,resolve({[vc]:data})})).catch((error=>reject(error)))}))},messenger.sendMail=function(subject,content,recipients,prev=null){return new Promise(((resolve,reject)=>{Array.isArray(recipients)||(recipients=[recipients]);let mail={subject:subject,content:content,ref:Date.now()+floCrypto.randString(8,!0),prev:prev},promises=recipients.map((r=>sendRaw(JSON.stringify(mail),r,"MAIL")));Promise.allSettled(promises).then((results=>{if(mail.time=Date.now(),mail.from=user.id,mail.to=[],results.forEach((r=>{"fulfilled"===r.status&&mail.to.push(r.value.receiverID)})),0===mail.to.length)return reject(results);mail.content=encrypt(content),compactIDB.addData("mails",Object.assign({},mail),mail.ref),mail.content=content,resolve({[mail.ref]:mail})}))}))},messenger.list_request_sent=(options=null)=>listRequests("request_sent",options),messenger.list_request_received=(options=null)=>listRequests("request_received",options),messenger.list_response_sent=(options=null)=>listRequests("response_sent",options),messenger.list_response_received=(options=null)=>listRequests("response_received",options),messenger.request_pubKey=(receiver,message="")=>function(receiver,type,message,encrypt=null){return new Promise(((resolve,reject)=>{sendRaw(message,receiver,"REQUEST",encrypt,type).then((result=>{let vc=result.vectorClock,data={floID:receiver,time:result.time,message:message,type:type};compactIDB.addData("request_sent",data,vc),resolve({[vc]:data})})).catch((error=>reject(error)))}))}(receiver,"PUBLIC_KEY",message,!1),messenger.respond_pubKey=(req_id,message="")=>function(req_id,message,encrypt=null){return new Promise(((resolve,reject)=>{compactIDB.readData("request_received",req_id).then((request=>{sendRaw(JSON.stringify({value:message,reqID:req_id}),request.floID,"RESPONSE",encrypt,request.type).then((result=>{let vc=result.vectorClock,data={floID:request.floID,time:result.time,message:message,type:request.type,reqID:req_id};compactIDB.addData("response_sent",data,vc),request.completed=vc,compactIDB.writeData("request_received",request,req_id),resolve({[vc]:data})})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}(req_id,message,!1);const processData={};processData.direct=function(){return(unparsed,newInbox)=>{if(floDapps.storePubKey(unparsed.senderID,unparsed.pubKey),_loaded.blocked.has(unparsed.senderID)&&"REVOKE_KEY"!==unparsed.type)throw"blocked-user";unparsed.message instanceof Object&&"secret"in unparsed.message&&(unparsed.message=floDapps.user.decrypt(unparsed.message));let vc=unparsed.vectorClock;switch(console.debug(unparsed),unparsed.type){case"MESSAGE":{let dm={time:unparsed.time,floID:unparsed.senderID,category:"received",message:encrypt(unparsed.message)};console.debug(dm,`${dm.floID}|${vc}`),compactIDB.addData("messages",Object.assign({},dm),`${dm.floID}|${vc}`),_loaded.chats[dm.floID]=parseInt(vc),compactIDB.writeData("chats",parseInt(vc),dm.floID),dm.message=unparsed.message,newInbox.messages[vc]=dm,addMark(dm.floID,"unread");break}case"REQUEST":{let req={floID:unparsed.senderID,time:unparsed.time,message:unparsed.message,type:unparsed.comment};compactIDB.addData("request_received",req,vc),newInbox.requests[vc]=req;break}case"RESPONSE":{let data=JSON.parse(unparsed.message),res={floID:unparsed.senderID,time:unparsed.time,message:data.value,type:unparsed.comment,reqID:data.reqID};compactIDB.addData("response_received",res,vc),compactIDB.readData("request_sent",data.reqID).then((req=>{req.completed=vc,compactIDB.writeData("request_sent",req,data.reqID)})),newInbox.responses[vc]=res;break}case"MAIL":{let data=JSON.parse(unparsed.message),mail={time:unparsed.time,from:unparsed.senderID,to:[unparsed.receiverID],subject:data.subject,content:encrypt(data.content),ref:data.ref,prev:data.prev};compactIDB.addData("mails",Object.assign({},mail),mail.ref),mail.content=data.content,newInbox.mails[mail.ref]=mail,addMark(mail.ref,"unread");break}case"CREATE_GROUP":{let groupInfo=JSON.parse(unparsed.message),h=["groupID","created","admin"].map((x=>groupInfo[x])).join("|");if(groupInfo.admin===unparsed.senderID&&floCrypto.verifySign(h,groupInfo.hash,groupInfo.pubKey)&&floCrypto.getFloID(groupInfo.pubKey)===groupInfo.groupID){let eKey=groupInfo.eKey;groupInfo.eKey=encrypt(eKey),compactIDB.writeData("groups",Object.assign({},groupInfo),groupInfo.groupID),groupInfo.eKey=eKey,_loaded.groups[groupInfo.groupID]=groupInfo,requestGroupInbox(groupInfo.groupID),newInbox.newgroups.push(groupInfo.groupID)}break}case"REVOKE_KEY":{let r=JSON.parse(unparsed.message),groupInfo=_loaded.groups[r.groupID];if(unparsed.senderID===groupInfo.admin){"object"!=typeof expiredKeys[r.groupID]&&(expiredKeys[r.groupID]={}),expiredKeys[r.groupID][vc]=groupInfo.eKey;let eKey=r.newKey;groupInfo.eKey=encrypt(eKey),compactIDB.writeData("groups",Object.assign({},groupInfo),groupInfo.groupID),groupInfo.eKey=eKey,newInbox.keyrevoke.push(groupInfo.groupID)}break}case"CREATE_PIPELINE":{let pipelineInfo=JSON.parse(unparsed.message),eKey=pipelineInfo.eKey;pipelineInfo.eKey=encrypt(eKey),compactIDB.addData("pipeline",Object.assign({},pipelineInfo),pipelineInfo.id),pipelineInfo.eKey=eKey,_loaded.pipeline[pipelineInfo.id]=pipelineInfo,requestPipelineInbox(pipelineInfo.id,pipelineInfo.model),newInbox.pipeline[pipelineInfo.id]=pipelineInfo.model}}}},messenger.getMail=function(mailRef){return new Promise(((resolve,reject)=>{compactIDB.readData("mails",mailRef).then((mail=>{mail.content=decrypt(mail.content),resolve(mail)})).catch((error=>reject(error)))}))};const getChatOrder=messenger.getChatOrder=function(separate=!1){let result;return separate?(result={},result.direct=Object.keys(_loaded.chats).map((a=>[_loaded.chats[a],a])).sort(((a,b)=>b[0]-a[0])).map((a=>a[1])),result.group=Object.keys(_loaded.groups).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a])).sort(((a,b)=>b[0]-a[0])).map((a=>a[1])),result.pipeline=Object.keys(_loaded.pipeline).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a])).sort(((a,b)=>b[0]-a[0])).map((a=>a[1]))):result=Object.keys(_loaded.chats).map((a=>[_loaded.chats[a],a])).concat(Object.keys(_loaded.groups).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a]))).concat(Object.keys(_loaded.pipeline).map((a=>[parseInt(_loaded.appendix[`lastReceived_${a}`]),a]))).sort(((a,b)=>b[0]-a[0])).map((a=>a[1])),result};messenger.storeContact=function(floID,name){return floDapps.storeContact(floID,name)};const loadDataFromIDB=function(defaultList=!0){return new Promise(((resolve,reject)=>{dataList=defaultList?["mails","marked","groups","pipeline","chats","blocked","appendix"]:["messages","mails","marked","chats","groups","gkeys","pipeline","blocked","appendix"];let promises=[];for(var i=0;i<dataList.length;i++)promises[i]=compactIDB.readAllData(dataList[i]);Promise.all(promises).then((results=>{let data={};for(var i=0;i<dataList.length;i++)data[dataList[i]]=results[i];if(data.appendix.lastReceived=data.appendix.lastReceived||"0",data.appendix.AESKey)try{let AESKey=floDapps.user.decrypt(data.appendix.AESKey);if(data.appendix.AESKey=AESKey,dataList.includes("messages"))for(let m in data.messages)data.messages[m].message&&(data.messages[m].message=decrypt(data.messages[m].message,AESKey));if(dataList.includes("mails"))for(let m in data.mails)data.mails[m].content=decrypt(data.mails[m].content,AESKey);if(dataList.includes("groups"))for(let g in data.groups)data.groups[g].eKey=decrypt(data.groups[g].eKey,AESKey);if(dataList.includes("gkeys"))for(let k in data.gkeys)data.gkeys[k]=decrypt(data.gkeys[k],AESKey);if(dataList.includes("pipeline"))for(let p in data.pipeline)data.pipeline[p].eKey=decrypt(data.pipeline[p].eKey,AESKey);resolve(data)}catch(error){console.error(error),reject("Corrupted AES Key")}else{if(Object.keys(data.mails).length)return reject("AES Key not Found");let AESKey=floCrypto.randString(32,!1),encryptedKey=floCrypto.encryptData(AESKey,user.public);compactIDB.addData("appendix",encryptedKey,"AESKey").then((result=>{data.appendix.AESKey=AESKey,resolve(data)})).catch((error=>reject("Unable to Generate AES Key")))}})).catch((error=>reject(error)))}))};messenger.addMark=function(key,mark){return _loaded.marked.hasOwnProperty(key)&&!_loaded.marked[key].includes(mark)&&_loaded.marked[key].push(mark),addMark(key,mark)},messenger.removeMark=function(key,mark){return _loaded.marked.hasOwnProperty(key)&&(_loaded.marked[key]=_loaded.marked[key].filter((v=>v!==mark))),function(key,mark){return new Promise(((resolve,reject)=>{compactIDB.readData("marked",key).then((result=>{if(!result||!result.includes(mark))return resolve("Mark doesnot exist");result.splice(result.indexOf(mark),1),compactIDB.writeData("marked",result,key).then((result=>resolve("Mark removed"))).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}(key,mark)},messenger.addChat=function(chatID){return new Promise(((resolve,reject)=>{compactIDB.addData("chats",0,chatID).then((result=>resolve("Added chat"))).catch((error=>reject(error)))}))},messenger.rmChat=function(chatID){return new Promise(((resolve,reject)=>{compactIDB.removeData("chats",chatID).then((result=>resolve("Chat removed"))).catch((error=>reject(error)))}))},messenger.clearChat=function(chatID){return new Promise(((resolve,reject)=>{let options={lowerKey:`${chatID}|`,upperKey:`${chatID}||`};compactIDB.searchData("messages",options).then((result=>{let promises=[];for(let i in result)promises.push(compactIDB.removeData("messages",i));Promise.all(promises).then((result=>resolve("Chat cleared"))).catch((error=>reject(error)))})).catch((error=>reject(error)))}))};const getChat=messenger.getChat=function(chatID){return new Promise(((resolve,reject)=>{let options={lowerKey:`${chatID}|`,upperKey:`${chatID}||`};compactIDB.searchData("messages",options).then((result=>{for(let i in result)result[i].message&&(result[i].message=decrypt(result[i].message));resolve(result)})).catch((error=>reject(error)))}))};messenger.backupData=function(){return new Promise(((resolve,reject)=>{loadDataFromIDB(!1).then((data=>{delete data.appendix.AESKey,data.contacts=floGlobals.contacts,data.pubKeys=floGlobals.pubKeys,data=btoa(unescape(encodeURIComponent(JSON.stringify(data))));let blobData={floID:user.id,pubKey:user.public,data:floDapps.user.encipher(data)};blobData.sign=floDapps.user.sign(blobData.data),resolve(new Blob([JSON.stringify(blobData)],{type:"application/json"}))})).catch((error=>reject(error)))}))};const parseBackup=messenger.parseBackup=function(blob){return new Promise(((resolve,reject)=>{if(blob instanceof Blob||blob instanceof File){let reader=new FileReader;reader.onload=evt=>{var blobData=JSON.parse(evt.target.result);if(floCrypto.verifySign(blobData.data,blobData.sign,blobData.pubKey))if(user.id!==blobData.floID||user.public!==blobData.pubKey)reject("Invalid Backup file: Incorrect floID");else try{let data=floDapps.user.decipher(blobData.data);try{data=JSON.parse(decodeURIComponent(escape(atob(data)))),resolve(data)}catch(e){reject("Corrupted Backup file: Parse failed")}}catch(e){reject("Corrupted Backup file: Decryption failed")}else reject("Corrupted Backup file: Signature verification failed")},reader.readAsText(blob)}else reject("Backup is not a valid File (or) Blob")}))};messenger.restoreData=function(arg){return new Promise(((resolve,reject)=>{if(arg instanceof Blob||arg instanceof File)var parseData=parseBackup;else parseData=data=>new Promise(((res,rej)=>res(data)));parseData(arg).then((data=>{for(let m in data.messages)data.messages[m].message&&(data.messages[m].message=encrypt(data.messages[m].message));for(let m in data.mails)data.mails[m].content=encrypt(data.mails[m].content);for(let k in data.gkeys)data.gkeys[k]=encrypt(data.gkeys[k]);for(let g in data.groups)data.groups[g].eKey=encrypt(data.groups[g].eKey);for(let p in data.pipeline)data.pipeline[p].eKey=encrypt(data.pipeline[p].eKey);for(let c in data.chats)data.chats[c]<=_loaded.chats[c]&&delete data.chats[c];for(let l in data.appendix)l.startsWith("lastReceived")&&data.appendix[l]<=_loaded.appendix[l]&&delete data.appendix[l];for(let c in data.contacts)c in floGlobals.contacts&&delete data.contacts[c];for(let p in data.pubKeys)p in floGlobals.pubKeys&&delete data.pubKeys[p];let promises=[];for(let obs in data){let writeFn;switch(obs){case"contacts":writeFn=(k,v)=>floDapps.storeContact(k,v);break;case"pubKeys":writeFn=(k,v)=>floDapps.storePubKey(k,v);break;default:writeFn=(k,v)=>compactIDB.writeData(obs,v,k)}for(let k in data[obs])promises.push(writeFn(k,data[obs][k]))}Promise.all(promises).then((results=>resolve("Restore Successful"))).catch((error=>reject("Restore Failed: Unable to write to IDB")))})).catch((error=>reject(error)))}))},messenger.clearUserData=function(){return new Promise(((resolve,reject)=>{let user_floID=floCrypto.toFloID(user.id),promises=[compactIDB.deleteDB(`${floGlobals.application}_${user_floID}`),compactIDB.removeData("lastTx",`${floGlobals.application}|${user_floID}`,floDapps.root),floDapps.clearCredentials()];Promise.all(promises).then((result=>resolve("User Data cleared"))).catch((error=>reject(error)))}))},messenger.createGroup=function(groupname,description=""){return new Promise(((resolve,reject)=>{if(!groupname)return reject("Invalid Group Name");let id=floCrypto.generateNewID(),groupInfo={groupID:id.floID,pubKey:id.pubKey,admin:user.id,name:groupname,description:description,created:Date.now(),members:[user.id]},h=["groupID","created","admin"].map((x=>groupInfo[x])).join("|");groupInfo.hash=floCrypto.signData(h,id.privKey);let eKey=floCrypto.randString(16,!1);groupInfo.eKey=encrypt(eKey);let p1=compactIDB.addData("groups",groupInfo,id.floID),p2=compactIDB.addData("gkeys",encrypt(id.privKey),id.floID);Promise.all([p1,p2]).then((r=>{groupInfo.eKey=eKey,_loaded.groups[id.floID]=groupInfo,requestGroupInbox(id.floID),resolve(groupInfo)})).catch((e=>reject(e)))}))},messenger.changeGroupName=function(groupID,name){return new Promise(((resolve,reject)=>{let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");sendRaw(encrypt(name,groupInfo.eKey),groupID,"UP_NAME",!1).then((result=>resolve("Name updated"))).catch((error=>reject(error)))}))},messenger.changeGroupDescription=function(groupID,description){return new Promise(((resolve,reject)=>{let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");sendRaw(encrypt(description,groupInfo.eKey),groupID,"UP_DESCRIPTION",!1).then((result=>resolve("Description updated"))).catch((error=>reject(error)))}))},messenger.addGroupMembers=function(groupID,newMem,note=void 0){return new Promise(((resolve,reject)=>{Array.isArray(newMem)||"string"!=typeof newMem||(newMem=[newMem]);let imem1=[],imem2=[];if(newMem.forEach((m=>floCrypto.validateAddr(m)?m in floGlobals.pubKeys?null:imem2.push(m):imem1.push(m))),imem1.length)return reject(`Invalid Members(floIDs): ${imem1}`);if(imem2.length)return reject(`Invalid Members (pubKey not available): ${imem2}`);let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");let k=groupInfo.eKey;groupInfo=JSON.stringify(groupInfo);let promises=newMem.map((m=>sendRaw(groupInfo,m,"CREATE_GROUP",!0)));Promise.allSettled(promises).then((results=>{let success=[],failed=[];for(let i in results)"fulfilled"===results[i].status?success.push(newMem[i]):"rejected"===results[i].status&&failed.push(newMem[i]);sendRaw(encrypt(success.join("|"),k),groupID,"ADD_MEMBERS",!1,note).then((r=>resolve(`Members added: ${success}`))).catch((e=>reject(e)))}))}))},messenger.rmGroupMembers=function(groupID,rmMem,note=void 0){return new Promise(((resolve,reject)=>{Array.isArray(rmMem)||"string"!=typeof rmMem||(rmMem=[rmMem]);let groupInfo=_loaded.groups[groupID],imem=rmMem.filter((m=>!groupInfo.members.includes(m)));if(imem.length)return reject(`Invalid members: ${imem}`);if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");let p1=sendRaw(encrypt(rmMem.join("|"),groupInfo.eKey),groupID,"RM_MEMBERS",!1,note);groupInfo.members=groupInfo.members.filter((m=>!rmMem.includes(m)));let p2=revokeKey(groupID);Promise.all([p1,p2]).then((r=>resolve(`Members removed: ${rmMem}`))).catch((e=>reject(e)))}))};const revokeKey=messenger.revokeKey=function(groupID){return new Promise(((resolve,reject)=>{let groupInfo=_loaded.groups[groupID];if(user.id!==groupInfo.admin)return reject("Access denied: Admin only!");let newKey=floCrypto.randString(16,!1);Promise.all(groupInfo.members.map((m=>sendRaw(JSON.stringify({newKey:newKey,groupID:groupID}),m,"REVOKE_KEY",!0)))).then((result=>{resolve("Group key revoked")})).catch((error=>reject(error)))}))};messenger.sendGroupMessage=function(message,groupID){return new Promise(((resolve,reject)=>{let k=_loaded.groups[groupID].eKey;sendRaw(message=encrypt(message,k),groupID,"GROUP_MSG",!1).then((result=>resolve(`${groupID}: ${message}`))).catch((error=>reject(error)))}))};const disableGroup=messenger.disableGroup=function(groupID){return new Promise(((resolve,reject)=>{if(!_loaded.groups[groupID])return reject("Group not found");let groupInfo=Object.assign({},_loaded.groups[groupID]);if(groupInfo.disabled)return resolve("Group already diabled");groupInfo.disabled=!0,groupInfo.eKey=encrypt(groupInfo.eKey),compactIDB.writeData("groups",groupInfo,groupID).then((result=>{floCloudAPI.closeRequest(groupConnID[groupID]),delete groupConnID[groupID],resolve("Group diabled")})).catch((error=>reject(error)))}))};function requestGroupInbox(groupID,_async=!0){groupConnID[groupID]&&(floCloudAPI.closeRequest(groupConnID[groupID]),delete groupConnID[groupID]);const parseData=processData.group(groupID);let fn=floCloudAPI.requestApplicationData(null,{receiverID:groupID,lowerVectorClock:_loaded.appendix[`lastReceived_${groupID}`]+1,callback:function(dataSet,error){if(error)return console.error(error);console.info(dataSet);let newInbox={messages:{}},infoChange=!1;for(let vc in dataSet)if(groupID===dataSet[vc].receiverID)try{infoChange=parseData(dataSet[vc],newInbox)||infoChange,(!_loaded.appendix[`lastReceived_${groupID}`]||_loaded.appendix[`lastReceived_${groupID}`]<vc)&&(_loaded.appendix[`lastReceived_${groupID}`]=vc)}catch(error){console.log(error)}if(compactIDB.writeData("appendix",_loaded.appendix[`lastReceived_${groupID}`],`lastReceived_${groupID}`),infoChange){let newInfo=Object.assign({},_loaded.groups[groupID]);newInfo.eKey=encrypt(newInfo.eKey),compactIDB.writeData("groups",newInfo,groupID)}console.debug(newInbox),UI.group(newInbox)}});if(!_async)return new Promise(((resolve,reject)=>{fn.then((conn_id=>{groupConnID[groupID]=conn_id,resolve(`Connected to group ${groupID}`)})).catch((error=>reject(error)))}));fn.then((conn_id=>groupConnID[groupID]=conn_id)).catch((error=>console.error(`request-group(${groupID}):`,error)))}processData.group=function(groupID){return(unparsed,newInbox)=>{if(!_loaded.groups[groupID].members.includes(unparsed.senderID))return;floDapps.storePubKey(unparsed.senderID,unparsed.pubKey);let data={time:unparsed.time,sender:unparsed.senderID,groupID:unparsed.receiverID},vc=unparsed.vectorClock,k=_loaded.groups[groupID].eKey;if(expiredKeys[groupID]){for(var ex=Object.keys(expiredKeys[groupID]).sort();ex.length&&vc>ex[0];)ex.shift();ex.length&&(k=expiredKeys[groupID][ex.shift()])}unparsed.message=decrypt(unparsed.message,k);var infoChange=!1;if("GROUP_MSG"===unparsed.type)data.message=encrypt(unparsed.message);else if(data.sender===_loaded.groups[groupID].admin){let groupInfo=_loaded.groups[groupID];switch(data.admin=!0,unparsed.type){case"ADD_MEMBERS":data.newMembers=unparsed.message.split("|"),data.note=unparsed.comment,groupInfo.members=Array.from(new Set(groupInfo.members.concat(data.newMembers)));break;case"UP_DESCRIPTION":data.description=unparsed.message,groupInfo.description=data.description;break;case"RM_MEMBERS":if(data.rmMembers=unparsed.message.split("|"),data.note=unparsed.comment,groupInfo.members=groupInfo.members.filter((m=>!data.rmMembers.includes(m))),data.rmMembers.includes(user.id))return void disableGroup(groupID);break;case"UP_NAME":data.name=unparsed.message,groupInfo.name=data.name}infoChange=!0}return compactIDB.addData("messages",Object.assign({},data),`${groupID}|${vc}`),data.message&&(data.message=decrypt(data.message)),newInbox.messages[vc]=data,floCrypto.isSameAddr(data.sender,user.id)||addMark(data.groupID,"unread"),infoChange}},messenger.init=function(){return new Promise(((resolve,reject)=>{new Promise(((resolve,reject)=>{let user_db=`${floGlobals.application}_${floCrypto.toFloID(user.id)}`;compactIDB.initDB(user_db,{messages:{},mails:{},marked:{},chats:{},groups:{},gkeys:{},blocked:{},pipeline:{},request_sent:{},request_received:{},response_sent:{},response_received:{},flodata:{},appendix:{},userSettings:{},multisigLabels:{}}).then((result=>{console.info(result),compactIDB.setDefaultDB(user_db),resolve("Messenger UserDB Initated Successfully")})).catch((error=>reject(error)))})).then((result=>{console.debug(result),loadDataFromIDB().then((data=>{console.debug(data),_loaded.appendix=data.appendix,_loaded.groups=data.groups,_loaded.pipeline=data.pipeline,_loaded.chats=data.chats,_loaded.marked=data.marked,_loaded.blocked=new Set(Object.keys(data.blocked)),UI.chats(getChatOrder()),UI.mails(data.mails),UI.marked(data.marked),resolve("Loaded local data");let promises=[];promises.push(function(){directConnID.length&&(directConnID.forEach((id=>floCloudAPI.closeRequest(id))),directConnID=[]);const parseData=processData.direct();let callbackFn=function(dataSet,error){if(error)return console.error(error);let newInbox={messages:{},requests:{},responses:{},mails:{},newgroups:[],keyrevoke:[],pipeline:{}};for(let vc in dataSet)try{parseData(dataSet[vc],newInbox)}catch(error){console.log(error)}finally{_loaded.appendix.lastReceived<vc&&(_loaded.appendix.lastReceived=vc)}compactIDB.writeData("appendix",_loaded.appendix.lastReceived,"lastReceived"),console.debug(newInbox),UI.direct(newInbox)};return new Promise(((resolve,reject)=>{const promises=[floCloudAPI.requestApplicationData(null,{receiverID:user.id,lowerVectorClock:_loaded.appendix.lastReceived+1,callback:callbackFn}),floCloudAPI.requestApplicationData(null,{receiverID:floEthereum.ethAddressFromCompressedPublicKey(user.public),lowerVectorClock:_loaded.appendix.lastReceived+1,callback:callbackFn})];Promise.all(promises).then((connectionIds=>{directConnID=[...directConnID,...connectionIds],resolve("Direct Inbox connected")})).catch((error=>reject(error)))}))}());for(let g in data.groups)!0!==data.groups[g].disabled&&promises.push(requestGroupInbox(g,!1));for(let p in data.pipeline)!0!==data.pipeline[p].disabled&&promises.push(requestPipelineInbox(p,data.pipeline[p].model,!1));loadDataFromBlockchain().then((result=>{Promise.all(promises).then((result=>resolve("Messenger initiated"))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))}))};const loadDataFromBlockchain=messenger.loadDataFromBlockchain=function(){return new Promise(((resolve,reject)=>{let user_floID=floCrypto.toFloID(user.id);if(!user_floID)return reject("Not an valid address");let last_key=`${floGlobals.application}|${user_floID}`;compactIDB.readData("lastTx",last_key,floDapps.root).then((lastTx=>{var query_options={pattern:floGlobals.application,tx:!0};"number"==typeof lastTx?query_options.ignoreOld=lastTx:"string"==typeof lastTx&&(query_options.after=lastTx),floBlockchainAPI.readData(user_floID,query_options).then((result=>{for(var i=result.items.length-1;i>=0;i--){let tx=result.items[i],content=JSON.parse(tx.data)[floGlobals.application];if(!(content instanceof Object))continue;let key=(content.type?content.type+"|":"")+tx.txid.substr(0,16);compactIDB.writeData("flodata",{time:tx.time,txid:tx.txid,data:content},key)}compactIDB.writeData("lastTx",result.lastItem,last_key,floDapps.root),resolve(!0)})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))},MultiSig=messenger.multisig={};MultiSig.createAddress=function(pubKeys,minRequired){return new Promise((async(resolve,reject)=>{let co_owners=pubKeys.map((p=>floCrypto.getFloID(p)));if(co_owners.includes(null))return reject("Invalid public key: "+pubKeys[co_owners.indexOf(null)]);let privateKey=await floDapps.user.private,multisig=btcOperator.multiSigAddress(pubKeys,minRequired);if("object"!=typeof multisig)return reject("Unable to create multisig address");let content={type:"btc_multisig",address:multisig.address,redeemScript:multisig.redeemScript};console.debug(content.address,content.redeemScript),floBlockchainAPI.writeDataMultiple([privateKey],JSON.stringify({[floGlobals.application]:content}),co_owners).then((txid=>{console.info(txid);let key="btc_multisig|"+txid.substr(0,16);compactIDB.writeData("flodata",{time:null,txid:txid,data:content},key),resolve(multisig.address)})).catch((error=>reject(error)))}))},MultiSig.listAddress=function(){return new Promise(((resolve,reject)=>{let options={lowerKey:"btc_multisig|",upperKey:"btc_multisig||"};compactIDB.searchData("flodata",options).then((result=>{let multsigs={};for(let i in result){let addr=result[i].data.address,addr_type=btcOperator.validateAddress(addr),decode=("multisig"==addr_type?coinjs.script().decodeRedeemScript:coinjs.script().decodeRedeemScriptBech32)(result[i].data.redeemScript);"multisig"!=addr_type&&"multisigBech32"!=addr_type?console.warn("Invalid multi-sig address:",addr):decode&&decode.address===addr?"multisig__"!==decode.type?console.warn("Redeem-script is not of a multisig:",addr):decode.pubkeys.includes(user.public.toLowerCase())||decode.pubkeys.includes(user.public.toUpperCase())?decode.pubkeys.length<decode.signaturesRequired?console.warn("Invalid multisig (required is greater than users):",addr):multsigs[addr]={redeemScript:decode.redeemscript,pubKeys:decode.pubkeys,minRequired:decode.signaturesRequired,time:result[i].time,txid:result[i].txid}:console.warn("User is not a part of this multisig:",addr):console.warn("Invalid redeem-script:",addr)}resolve(multsigs)})).catch((error=>reject(error)))}))},MultiSig.createTx_BTC=function(address,redeemScript,receivers,amounts,fee=null,options={}){return new Promise((async(resolve,reject)=>{let addr_type=btcOperator.validateAddress(address);if("multisig"!=addr_type&&"multisigBech32"!=addr_type)return reject("Sender address is not a multisig");let decode=("multisig"==addr_type?coinjs.script().decodeRedeemScript:coinjs.script().decodeRedeemScriptBech32)(redeemScript);if(!decode||decode.address!==address||"multisig__"!==decode.type)return reject("Invalid redeem-script");if(!decode.pubkeys.includes(user.public.toLowerCase())&&!decode.pubkeys.includes(user.public.toUpperCase()))return reject("User is not a part of this multisig");if(decode.pubkeys.length<decode.signaturesRequired)return reject("Invalid multisig (required is greater than users)");let co_owners=decode.pubkeys.map((p=>floCrypto.getFloID(p))),privateKey=await floDapps.user.private;btcOperator.createMultiSigTx(address,redeemScript,receivers,amounts,fee,options).then((({tx_hex:tx_hex})=>{tx_hex=btcOperator.signTx(tx_hex,privateKey),createPipeline("btc_multisig",co_owners,32,decode.pubkeys).then((pipeline=>{sendRaw(encrypt(tx_hex,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>resolve(pipeline.id))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))},MultiSig.signTx_BTC=function(pipeID){return new Promise(((resolve,reject)=>"btc_multisig"!==_loaded.pipeline[pipeID].model?reject("Incorrect pipeline model. Only works for BTC-multisig"):_loaded.pipeline[pipeID].disabled?reject("Pipeline is already closed"):void getChat(pipeID).then((async result=>{let pipeline=_loaded.pipeline[pipeID],tx_hex_latest=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x)).pop(),privateKey=await floDapps.user.private,tx_hex_signed=btcOperator.signTx(tx_hex_latest,privateKey);sendRaw(encrypt(tx_hex_signed,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>{if(!btcOperator.checkSigned(tx_hex_signed))return resolve({tx_hex:tx_hex_signed});btcOperator.broadcastTx(tx_hex_signed).then((txid=>{console.debug(txid),sendRaw(encrypt(txid,pipeline.eKey),pipeline.id,"BROADCAST",!1).then((result=>resolve({tx_hex:tx_hex_signed,txid:txid}))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>console.error(error)))))},MultiSig.createTx_FLO=function(address,redeemScript,receivers,amounts,floData="",options={}){return new Promise((async(resolve,reject)=>{if(!floCrypto.validateFloID(address)){let addr_type=btcOperator.validateAddress(address);if("multisig"!=addr_type&&"multisigBech32"!=addr_type)return reject("Sender address is not a multisig");address=floCrypto.toMultisigFloID(address)}let decode=floCrypto.decodeRedeemScript(redeemScript);if(!decode||decode.address!==address)return reject("Invalid redeem-script");if(!decode.pubkeys.includes(user.public.toLowerCase())&&!decode.pubkeys.includes(user.public.toUpperCase()))return reject("User is not a part of this multisig");if(decode.pubkeys.length<decode.required)return reject("Invalid multisig (required is greater than users)");let co_owners=decode.pubkeys.map((p=>floCrypto.getFloID(p))),privateKey=await floDapps.user.private;floBlockchainAPI.createMultisigTx(redeemScript,receivers,amounts,floData).then((tx_hex=>{tx_hex=floBlockchainAPI.signTx(tx_hex,privateKey),createPipeline("flo_multisig",co_owners,32,decode.pubkeys).then((pipeline=>{sendRaw(encrypt(tx_hex,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>resolve(pipeline.id))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))}))},MultiSig.signTx_FLO=function(pipeID){return new Promise(((resolve,reject)=>"flo_multisig"!==_loaded.pipeline[pipeID].model?reject("Incorrect pipeline model. Only works for FLO-multisig"):_loaded.pipeline[pipeID].disabled?reject("Pipeline is already closed"):void getChat(pipeID).then((async result=>{let pipeline=_loaded.pipeline[pipeID],tx_hex_latest=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x)).pop(),privateKey=await floDapps.user.private,tx_hex_signed=floBlockchainAPI.signTx(tx_hex_latest,privateKey);sendRaw(encrypt(tx_hex_signed,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>{if(!floBlockchainAPI.checkSigned(tx_hex_signed))return resolve({tx_hex:tx_hex_signed});floBlockchainAPI.broadcastTx(tx_hex_signed).then((txid=>{console.debug(txid),sendRaw(encrypt(txid,pipeline.eKey),pipeline.id,"BROADCAST",!1).then((result=>resolve({tx_hex:tx_hex_signed,txid:txid}))).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>reject(error)))})).catch((error=>console.error(error)))))};const createPipeline=messenger.createPipeline=function(model,members,ekeySize=16,pubkeys=null){return new Promise(((resolve,reject)=>{if(null!==pubkeys){if(!Array.isArray(pubkeys))return reject("pubkeys must be an array (if passed)");if(pubkeys.length!==members.length)return reject("pubkey length doesnot match members length")}let imem1=[],imem2=[];if(members.forEach(((m,i)=>{floCrypto.validateAddr(m)?m in floGlobals.pubKeys||floCrypto.isSameAddr(user.id,m)||(null!==pubkeys&&floCrypto.verifyPubKey(pubkeys[i],m)?floGlobals.pubKeys[m]=pubkeys[i]:imem2.push(m)):imem1.push(m)})),imem1.length)return reject(`Invalid Members(floIDs): ${imem1}`);if(imem2.length)return reject(`Invalid Members (pubKey not available): ${imem2}`);let pipeline={id:floCrypto.tmpID,model:model,members:members};ekeySize&&(pipeline.eKey=floCrypto.randString(ekeySize));let pipelineInfo=JSON.stringify(pipeline),promises=members.filter((m=>!floCrypto.isSameAddr(m,user.id))).map((m=>sendRaw(pipelineInfo,m,"CREATE_PIPELINE",!0)));Promise.allSettled(promises).then((results=>{console.debug(results.filter((r=>"rejected"===r.status)).map((r=>r.reason))),_loaded.pipeline[pipeline.id]=Object.assign({},pipeline),pipeline.eKey&&(pipeline.eKey=encrypt(pipeline.eKey)),compactIDB.addData("pipeline",pipeline,pipeline.id).then((result=>{requestPipelineInbox(pipeline.id,pipeline.model),resolve(_loaded.pipeline[pipeline.id])})).catch((error=>reject(error)))}))}))};function requestPipelineInbox(pipeID,model,_async=!0){pipeConnID[pipeID]&&(floCloudAPI.closeRequest(pipeConnID[pipeID]),delete pipeConnID[pipeID]);let parseData=processData.pipeline[model](pipeID),fn=floCloudAPI.requestApplicationData(null,{receiverID:pipeID,lowerVectorClock:_loaded.appendix[`lastReceived_${pipeID}`]+1,callback:function(dataSet,error){if(error)return console.error(error);console.info(dataSet);let newInbox={messages:{}};for(let vc in dataSet)if(pipeID===dataSet[vc].receiverID)try{parseData(dataSet[vc],newInbox),floCrypto.isSameAddr(dataSet[vc].senderID,user.id)||addMark(pipeID,"unread"),(!_loaded.appendix[`lastReceived_${pipeID}`]||_loaded.appendix[`lastReceived_${pipeID}`]<vc)&&(_loaded.appendix[`lastReceived_${pipeID}`]=vc)}catch(error){console.log(error)}compactIDB.writeData("appendix",_loaded.appendix[`lastReceived_${pipeID}`],`lastReceived_${pipeID}`),console.debug(newInbox),UI.pipeline(model,newInbox)}});if(!_async)return new Promise(((resolve,reject)=>{fn.then((conn_id=>{pipeConnID[pipeID]=conn_id,resolve(`Connected to pipeline ${pipeID}`)})).catch((error=>reject(error)))}));fn.then((conn_id=>pipeConnID[pipeID]=conn_id)).catch((error=>console.error(`request-pipeline(${pipeID}):`,error)))}const disablePipeline=messenger.disablePipeline=function(pipeID){return console.debug(JSON.stringify(pipeConnID),pipeConnID[pipeID]),new Promise(((resolve,reject)=>{if(!_loaded.pipeline[pipeID])return reject("Pipeline not found");if(_loaded.pipeline[pipeID].disabled)return resolve("Pipeline already diabled");_loaded.pipeline[pipeID].disabled=!0;let pipelineInfo=Object.assign({},_loaded.pipeline[pipeID]);pipelineInfo.eKey=encrypt(pipelineInfo.eKey),compactIDB.writeData("pipeline",pipelineInfo,pipeID).then((result=>{floCloudAPI.closeRequest(pipeConnID[pipeID]),delete pipeConnID[pipeID],resolve("Pipeline diabled")})).catch((error=>reject(error)))}))};messenger.sendPipelineMessage=function(message,pipeID){return new Promise(((resolve,reject)=>{let k=_loaded.pipeline[pipeID].eKey;k&&(message=encrypt(message,k)),sendRaw(message,pipeID,"MESSAGE",!1).then((result=>resolve(`${pipeID}: ${message}`))).catch((error=>reject(error)))}))},messenger.editFee=function(tx_id,new_fee,private_keys,change_only=!0){return new Promise((async(resolve,reject)=>{var address;Array.isArray(private_keys)||(private_keys=[private_keys]);try{let tx,tx_parsed;if(tx=await btcOperator.tx_fetch_for_editing(tx_id),tx_parsed=await btcOperator.parseTransaction(tx),tx_parsed.fee>=new_fee)return reject("Fees can only be increased");var edit_output_address=new Set;!0===change_only?tx_parsed.inputs.forEach((inp=>edit_output_address.add(inp.address))):!1===change_only?tx_parsed.outputs.forEach((out=>edit_output_address.add(out.address))):"string"==typeof change_only?edit_output_address.add(change_only):Array.isArray(change_only)&&change_only.forEach((id=>edit_output_address.add(id)));let inc_fee=btcOperator.util.BTC_to_Sat(new_fee-tx_parsed.fee);if(inc_fee<MIN_FEE_UPDATE)return reject(`Insufficient additional fee. Minimum increment: ${MIN_FEE_UPDATE}`);for(let i=tx.outs.length-1;i>=0&&inc_fee>0;i--)if(edit_output_address.has(tx_parsed.outputs[i].address)){let current_value=tx.outs[i].value;current_value instanceof BigInteger&&(current_value=current_value.intValue()),current_value>inc_fee?(tx.outs[i].value=current_value-inc_fee,inc_fee=0):(inc_fee-=current_value,tx.outs[i].value=0)}if(inc_fee>0){let max_possible_fee=btcOperator.util.BTC_to_Sat(new_fee)-inc_fee;return reject(`Insufficient output values to increase fee. Maximum fee possible: ${btcOperator.util.Sat_to_BTC(max_possible_fee)}`)}tx.outs=tx.outs.filter((o=>o.value>=DUST_AMT));let wif_keys=[],witness_position=0;for(let i in tx.ins){var addr=tx_parsed.inputs[i].address,value=btcOperator.util.BTC_to_Sat(tx_parsed.inputs[i].value);let addr_decode=coinjs.addressDecode(addr);var privKey=private_keys.find((pk=>verifyKey(addr,pk)));if(!privKey)return reject(`Private key missing for ${addr}`);const rs=_redeemScript(addr,privKey);var script;if(!1===rs?wif_keys.unshift(privKey):wif_keys.push(privKey),rs&&rs.length)if(rs.match(/^00/)&&44==rs.length||40==rs.length&&rs.match(/^[a-f0-9]+$/gi)){"bech32"==addr_decode&&(witness_position+=1);let s=coinjs.script();s.writeBytes(Crypto.util.hexToBytes(rs)),s.writeOp(0),s.writeBytes(coinjs.numToBytes(value.toFixed(0),8)),script=Crypto.util.bytesToHex(s.buffer)}else if("multisigBech32"===addr_decode.type){address=addr;let redeemScript=btcOperator.extractLastHexStrings(tx.witness)[witness_position];witness_position+=1;let s=coinjs.script();s.writeBytes(Crypto.util.hexToBytes(redeemScript)),s.writeOp(0),s.writeBytes(coinjs.numToBytes(value.toFixed(0),8)),script=Crypto.util.bytesToHex(s.buffer)}else script=rs;else{let s=coinjs.script();s.writeOp(118),s.writeOp(169),s.writeBytes(addr_decode.bytes),s.writeOp(136),s.writeOp(172),script=Crypto.util.bytesToHex(s.buffer)}tx.ins[i].script=coinjs.script(script)}tx.witness=!1,console.debug("Unsigned:",tx.serialize()),new Set(wif_keys).forEach((key=>tx.sign(key,1)));let tx_hex=tx.serialize(),addr_type=btcOperator.validateAddress(address);if("multisig"!=addr_type&&"multisigBech32"!=addr_type)return reject("Sender address is not a multisig");let decode=("multisig"==addr_type?coinjs.script().decodeRedeemScript:coinjs.script().decodeRedeemScriptBech32)(redeemScript);if(!decode||decode.address!==address||"multisig__"!==decode.type)return reject("Invalid redeem-script");if(!decode.pubkeys.includes(user.public.toLowerCase())&&!decode.pubkeys.includes(user.public.toUpperCase()))return reject("User is not a part of this multisig");if(decode.pubkeys.length<decode.signaturesRequired)return reject("Invalid multisig (required is greater than users)");let co_owners=decode.pubkeys.map((p=>floCrypto.getFloID(p)));createPipeline("btc_multisig",co_owners,32,decode.pubkeys).then((pipeline=>{sendRaw(encrypt(tx_hex,pipeline.eKey),pipeline.id,"TRANSACTION",!1).then((result=>resolve(pipeline.id))).catch((error=>reject(error)))})).catch((error=>reject(error)))}catch(error){reject(error)}}))},processData.pipeline={},processData.pipeline.btc_multisig=function(pipeID){return(unparsed,newInbox)=>{if(!_loaded.pipeline[pipeID].members.includes(floCrypto.toFloID(unparsed.senderID)))return;let data={time:unparsed.time,sender:unparsed.senderID,pipeID:unparsed.receiverID},vc=unparsed.vectorClock,k=_loaded.pipeline[pipeID].eKey;switch(unparsed.message=decrypt(unparsed.message,k),floDapps.storePubKey(unparsed.senderID,unparsed.pubKey),data.type=unparsed.type,unparsed.type){case"TRANSACTION":data.tx_hex=unparsed.message;break;case"BROADCAST":data.txid=unparsed.message,btcOperator.getTx.hex(data.txid).then((tx_hex_final=>{getChat(pipeID).then((result=>{let tx_hex_inital=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x)).shift();btcOperator.checkIfSameTx(tx_hex_inital,tx_hex_final)&&disablePipeline(pipeID)})).catch((error=>console.error(error)))})).catch((error=>console.error(error)));break;case"MESSAGE":data.message=encrypt(unparsed.message)}compactIDB.addData("messages",Object.assign({},data),`${pipeID}|${vc}`),data.message&&(data.message=decrypt(data.message)),newInbox.messages[vc]=data}},processData.pipeline.flo_multisig=function(pipeID){return(unparsed,newInbox)=>{if(!_loaded.pipeline[pipeID].members.includes(floCrypto.toFloID(unparsed.senderID)))return;let data={time:unparsed.time,sender:unparsed.senderID,pipeID:unparsed.receiverID},vc=unparsed.vectorClock,k=_loaded.pipeline[pipeID].eKey;switch(unparsed.message=decrypt(unparsed.message,k),floDapps.storePubKey(unparsed.senderID,unparsed.pubKey),data.type=unparsed.type,unparsed.type){case"TRANSACTION":data.tx_hex=unparsed.message;break;case"BROADCAST":data.txid=unparsed.message,getChat(pipeID).then((result=>{var tx_hex_list=Object.keys(result).sort().map((i=>result[i].tx_hex)).filter((x=>x));let tx_hex_inital=tx_hex_list[0],tx_hex_final=tx_hex_list.pop();floBlockchainAPI.checkIfSameTx(tx_hex_inital,tx_hex_final)&&floBlockchainAPI.transactionID(tx_hex_final)==data.txid&&disablePipeline(pipeID)})).catch((error=>console.error(error)));break;case"MESSAGE":data.message=encrypt(unparsed.message)}compactIDB.addData("messages",Object.assign({},data),`${pipeID}|${vc}`),data.message&&(data.message=decrypt(data.message)),newInbox.messages[vc]=data}}}();
\ No newline at end of file