Bug fixes

components/dist/chips.js

@@ -202,7 +202,6 @@ customElements.define('sm-chips', class extends HTMLElement {
     }
     connectedCallback() {
         this.setAttribute('role', 'listbox');
-
         const slot = this.shadowRoot.querySelector('slot');
         slot.addEventListener('slotchange', e => {
             firstOptionObserver.disconnect();
@@ -212,11 +211,6 @@ customElements.define('sm-chips', class extends HTMLElement {
             clearTimeout(this.slotChangeTimeout);
             this.slotChangeTimeout = setTimeout(() => {
                 this.assignedElements = slot.assignedElements();
-                this.assignedElements.forEach(elem => {
-                    if (elem.hasAttribute('selected')) {
-                        this._value = elem.value;
-                    }
-                });
                 this.observeSelf.observe(this);
             }, 0);
         });
@@ -339,6 +333,9 @@ customElements.define('sm-chip', class extends HTMLElement {
         this.fireEvent = this.fireEvent.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
     }
+    static get observedAttributes() {
+        return ['selected'];
+    }
     get value() {
         return this._value;
     }
@@ -365,6 +362,16 @@ customElements.define('sm-chip', class extends HTMLElement {
         this.addEventListener('click', this.fireEvent);
         this.addEventListener('keydown', this.handleKeyDown);
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'selected') {
+            if (newValue !== null) {
+                this.fireEvent();
+                this.setAttribute('aria-selected', 'true');
+            } else {
+                this.removeAttribute('aria-selected');
+            }
+        }
+    }
     disconnectedCallback() {
         this.removeEventListener('click', this.fireEvent);
         this.removeEventListener('keydown', this.handleKeyDown);

components/dist/copy.min.js

@@ -1 +1 @@
-const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-box;\n    display: flex;\n    --padding: 0;\n    --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);\n}\n.copy{\n    display: grid;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: rgba(var(--text-color, (17,17,17)), 0.06);\n    border-radius: var(--button-border-radius, 0.3rem);\n    transition: background-color 0.2s;\n    font-family: inherit;\n    color: inherit;\n    font-size: 0.7rem;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.05rem;\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content">\n        <slot></slot>\n    </p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n        COPY\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then(t=>this.fireEvent()).catch(t=>console.error(t))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(t,n,o){if("value"===t){const t=this.copyContent.querySelector("slot");if(!t)return;const n=t.assignedNodes();n&&n.length||(t.textContent=o)}}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
+const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-box;\n    display: flex;\n    --padding: 0;\n    --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);\n}\n.copy{\n    display: grid;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: rgba(var(--text-color, (17,17,17)), 0.06);\n    border-radius: var(--button-border-radius, 0.3rem);\n    transition: background-color 0.2s;\n    font-family: inherit;\n    color: inherit;\n    font-size: 0.7rem;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.05rem;\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content">\n        <slot></slot>\n    </p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n        COPY\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(val){this.setAttribute("value",val)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then((res=>this.fireEvent())).catch((err=>console.error(err)))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(name,oldValue,newValue){if("value"===name){const slot=this.copyContent.querySelector("slot");if(!slot)return;const assignedNodes=slot.assignedNodes();assignedNodes&&assignedNodes.length||(slot.textContent=newValue)}}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});

components/test.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <script src="dist/copy.js"></script>
     <script src="dist/select.js"></script>
     <script src="dist/form.js"></script>
     <script src="dist/popup.js"></script>
@@ -36,21 +37,9 @@
 </head>
 
 <body>
-    <sm-form>
+    <sm-copy value="hi dhf jsbdjf sjdb"></sm-copy>
-        <sm-input placeholder="fafh" value="" animate required>
-            <sm-button slot="right" type="submit">Submit</sm-button>
-        </sm-input>
-        <sm-input placeholder="fafh" value="" animate required>
-            <sm-button slot="right" type="submit">Submit</sm-button>
-        </sm-input>
-        <sm-input placeholder="fafh" value="" animate required>
-            <sm-button slot="right" type="submit">Submit</sm-button>
-        </sm-input>
-        <button type="submit">Submit</button>
-    </sm-form>
 </body>
 <script>
-    document.querySelector('sm-input').isValid
     let currentSubscriber = null;
     /**
      * @param {any} initialValue - initial value for the signal

main_UI.js

@@ -140,8 +140,7 @@ function openPopup(popupId, pinned) {
     }
     zIndex++
     getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
-    getRef(popupId).show({ pinned })
+    return getRef(popupId).show({ pinned })
-    return getRef(popupId);
 }
 
 // hides the popup or modal
@@ -783,14 +782,17 @@ function showChildElement(id, index, options = {}) {
 }
 function buttonLoader(id, show) {
     const button = typeof id === 'string' ? document.getElementById(id) : id;
-    button.disabled = show;
+    if (!button) return
+    if (!button.dataset.hasOwnProperty('wasDisabled'))
+        button.dataset.wasDisabled = button.disabled
     const animOptions = {
         duration: 200,
         fill: 'forwards',
         easing: 'ease'
     }
     if (show) {
-        button.parentNode.append(createElement('sm-spinner'))
+        button.disabled = true
+        button.parentNode.append(document.createElement('sm-spinner'))
         button.animate([
             {
                 clipPath: 'circle(100%)',
@@ -800,7 +802,17 @@ function buttonLoader(id, show) {
             },
         ], animOptions)
     } else {
-        button.getAnimations().forEach(anim => anim.cancel())
+        button.disabled = button.dataset.wasDisabled === 'true';
+        button.animate([
+            {
+                clipPath: 'circle(0)',
+            },
+            {
+                clipPath: 'circle(100%)',
+            },
+        ], animOptions).onfinish = (e) => {
+            button.removeAttribute('data-original-state')
+        }
         const potentialTarget = button.parentNode.querySelector('sm-spinner')
         if (potentialTarget) potentialTarget.remove();
     }