From 279f6080c01bb4a7ed3f3947fc76c6669745f90f Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Wed, 1 Nov 2023 00:53:21 +0530
Subject: [PATCH] code refactoring

---
 components/dist/switch.js     | 18 +++++-------------
 components/dist/switch.min.js |  2 +-
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/components/dist/switch.js b/components/dist/switch.js
index 63e4314..f1879ee 100644
--- a/components/dist/switch.js
+++ b/components/dist/switch.js
@@ -1,5 +1,3 @@
-//switch
-
 const smSwitch = document.createElement('template')
 smSwitch.innerHTML = `	
 <style>
@@ -16,8 +14,6 @@ smSwitch.innerHTML = `
         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%;
@@ -57,8 +53,7 @@ smSwitch.innerHTML = `
         border-radius: 1rem;
     }
     
-    label:active .thumb::after,
-    label:focus-within .thumb::after{
+    label:focus-visible .thumb::after{
         opacity: 1;
     }
     
@@ -82,8 +77,8 @@ smSwitch.innerHTML = `
         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);
+        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;
+        transition: 0.3s ease;
         background-color: inherit;
     }
     
@@ -115,8 +110,6 @@ customElements.define('sm-switch', class extends HTMLElement {
         this.input = this.shadowRoot.querySelector('input')
         this.isChecked = false
         this.isDisabled = false
-
-        this.dispatch = this.dispatch.bind(this)
     }
 
     static get observedAttributes() {
@@ -154,7 +147,7 @@ customElements.define('sm-switch', class extends HTMLElement {
 
     }
 
-    dispatch() {
+    dispatch = () => {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
@@ -193,8 +186,7 @@ customElements.define('sm-switch', class extends HTMLElement {
                 if (this.hasAttribute('checked')) {
                     this.isChecked = true
                     this.input.checked = true
-                }
-                else {
+                } else {
                     this.isChecked = false
                     this.input.checked = false
                 }
diff --git a/components/dist/switch.min.js b/components/dist/switch.min.js
index 76d6b3e..9c8b2f3 100644
--- a/components/dist/switch.min.js
+++ b/components/dist/switch.min.js
@@ -1 +1 @@
-const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: inline-flex;\n    }\n    :host(:active) .thumb{\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n    }\n    label{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        transition: background 0.3s;\n        background: rgba(var(--text-color,inherit), 0.4);\n        box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:active .thumb::after,\n    label:focus-within .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color,inherit), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        justify-content: center;\n        align-items: center;\n        border-radius: 1rem;\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset;\n        transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n        background-color: inherit;\n    }\n    \n    input:checked ~ .thumb {\n        transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color, teal);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</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)))}});
\ No newline at end of file
+const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: inline-flex;\n    }\n    :host(:active) .thumb{\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n    }\n    label{\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        transition: background 0.3s;\n        background: rgba(var(--text-color,inherit), 0.4);\n        box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:focus-visible .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color,inherit), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        justify-content: center;\n        align-items: center;\n        border-radius: 1rem;\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n        transition: 0.3s ease;\n        background-color: inherit;\n    }\n    \n    input:checked ~ .thumb {\n        transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color, teal);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</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}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(val){val?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(value){value?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(name,oldValue,newValue){oldValue!==newValue&&("disabled"===name?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===name&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
\ No newline at end of file