├── .github
    └── workflows
    │   └── publish.yml
├── .gitignore
├── README.md
├── babel.config.js
├── dist
    ├── component.min.js
    └── index.mjs
├── docs
    └── index.html
├── jest.config.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
    ├── Component.svelte
    └── index.js
└── test
    ├── rendering.spec.js
    └── setup-jest.js


/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: publish
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v1
13 |       - uses: actions/setup-node@v1
14 |         with:
15 |           node-version: 12
16 |       - run: npm ci
17 | 
18 |   publish-npm:
19 |     needs: build
20 |     runs-on: ubuntu-latest
21 |     steps:
22 |       - uses: actions/checkout@v1
23 |       - uses: actions/setup-node@v1
24 |         with:
25 |           node-version: 12
26 |           registry-url: https://registry.npmjs.org/
27 |       - run: npm ci
28 |       - run: npm publish
29 |         env:
30 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | docs/index.js


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://beyonk.com">
 2 |   <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" />
 3 | </a>
 4 | 
 5 | 
 6 | # Svelte Toggle
 7 | 
 8 | by [@antony](https://github.com/antony)
 9 | 
10 | [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-toggle.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-toggle) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)
11 | 
12 | A toggle component for Svelte.
13 | 
14 | ## Installation
15 | 
16 | `npm i -D @beyonk/svelte-toggle`
17 | 
18 | ## Usage
19 | 
20 | Basic:
21 | 
22 | ```
23 | <Toggle bind:checked on:change={someFunction} />
24 | 
25 | <script>
26 |   import Toggle from '@beyonk/svelte-toggle'
27 | 
28 |   let checked = false
29 | </script>
30 | ```
31 | 
32 | ## Labels
33 | 
34 | Specify both on and off labels
35 | 
36 | ```
37 | <Toggle bind:checked onLabel="Checked" offLabel="Unchecked />
38 | 
39 | <script>
40 |   import Toggle from '@beyonk/svelte-toggle'
41 | 
42 |   let checked = false
43 | </script>
44 | ```
45 | 
46 | ### Change event
47 | 
48 | ```
49 | <Toggle bind:checked on:change={someFunction} />
50 | 
51 | <script>
52 |   import Toggle from '@beyonk/svelte-toggle'
53 | 
54 |   function someFunction () {
55 |     console.log('Toggle changed value')
56 |   }
57 | </script>
58 | ```
59 | 
60 | ### Styling
61 | 
62 | You can pass in some custom styling:
63 | 
64 | 
65 | ```
66 |   const css = {
67 |     fontSize: '1rem',
68 |     align: 'left',
69 |     checkedColor: '#bbe572'
70 |   }
71 | 
72 |   <Toggle bind:checked {css} />
73 | ```
74 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: ['@babel/preset-env'],
 3 |   plugins: [
 4 |     ["@babel/plugin-transform-runtime",
 5 |       {
 6 |         "regenerator": true
 7 |       }
 8 |     ]
 9 |   ],
10 | }
11 | 


--------------------------------------------------------------------------------
/dist/component.min.js:
--------------------------------------------------------------------------------
1 | !function(){"use strict";function e(){}function t(e){return e()}function o(){return Object.create(null)}function n(e){e.forEach(t)}function i(e){return"function"==typeof e}function l(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function c(e,t){e.appendChild(t)}function r(e,t,o){e.insertBefore(t,o||null)}function s(e){e.parentNode.removeChild(e)}function a(e){return document.createElement(e)}function p(e){return document.createTextNode(e)}function d(){return p(" ")}function g(e,t,o,n){return e.addEventListener(t,o,n),()=>e.removeEventListener(t,o,n)}function u(e,t,o){null==o?e.removeAttribute(t):e.getAttribute(t)!==o&&e.setAttribute(t,o)}function f(e,t,o,n){e.style.setProperty(t,o,n?"important":"")}function b(e,t,o){e.classList[o?"add":"remove"](t)}let m;function v(e){m=e}const h=[],w=[],x=[],$=[],y=Promise.resolve();let k=!1;function _(e){x.push(e)}let T=!1;const B=new Set;function C(){if(!T){T=!0;do{for(let e=0;e<h.length;e+=1){const t=h[e];v(t),E(t.$$)}for(v(null),h.length=0;w.length;)w.pop()();for(let e=0;e<x.length;e+=1){const t=x[e];B.has(t)||(B.add(t),t())}x.length=0}while(h.length);for(;$.length;)$.pop()();k=!1,T=!1,B.clear()}}function E(e){if(null!==e.fragment){e.update(),n(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(_)}}const L=new Set;function z(e,t){-1===e.$$.dirty[0]&&(h.push(e),k||(k=!0,y.then(C)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function S(l,c,r,a,p,d,g=[-1]){const u=m;v(l);const f=c.props||{},b=l.$$={fragment:null,ctx:null,props:d,update:e,not_equal:p,bound:o(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(u?u.$$.context:[]),callbacks:o(),dirty:g,skip_bound:!1};let h=!1;if(b.ctx=r?r(l,f,(e,t,...o)=>{const n=o.length?o[0]:t;return b.ctx&&p(b.ctx[e],b.ctx[e]=n)&&(!b.skip_bound&&b.bound[e]&&b.bound[e](n),h&&z(l,e)),t}):[],b.update(),h=!0,n(b.before_update),b.fragment=!!a&&a(b.ctx),c.target){if(c.hydrate){const e=function(e){return Array.from(e.childNodes)}(c.target);b.fragment&&b.fragment.l(e),e.forEach(s)}else b.fragment&&b.fragment.c();c.intro&&((w=l.$$.fragment)&&w.i&&(L.delete(w),w.i(x))),function(e,o,l){const{fragment:c,on_mount:r,on_destroy:s,after_update:a}=e.$$;c&&c.m(o,l),_(()=>{const o=r.map(t).filter(i);s?s.push(...o):n(o),e.$$.on_mount=[]}),a.forEach(_)}(l,c.target,c.anchor),C()}var w,x;v(u)}class A{$destroy(){!function(e,t){const o=e.$$;null!==o.fragment&&(n(o.on_destroy),o.fragment&&o.fragment.d(t),o.on_destroy=o.fragment=null,o.ctx=[])}(this,1),this.$destroy=e}$on(e,t){const o=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return o.push(t),()=>{const e=o.indexOf(t);-1!==e&&o.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}function N(e){let t,o,n=(e[0]?e[1]:e[2])+"";return{c(){t=a("span"),o=p(n),u(t,"class","toggle-title svelte-134wpci")},m(e,n){r(e,t,n),c(t,o)},p(e,t){7&t&&n!==(n=(e[0]?e[1]:e[2])+"")&&function(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}(o,n)},d(e){e&&s(t)}}}function j(t){let o,i,l,p,m,v,h,w,x,$,y,k,_=t[1]&&t[2]&&N(t);return{c(){o=a("div"),i=a("div"),l=a("div"),p=a("label"),m=a("input"),v=d(),h=a("span"),w=a("span"),$=d(),_&&_.c(),u(m,"class","toggle-input svelte-134wpci"),u(m,"type","checkbox"),m.disabled=t[3],u(w,"class","toggle-switch svelte-134wpci"),u(h,"class","toggle-track svelte-134wpci"),u(h,"style",x=t[0]?`background-color: ${t[6]};`:""),u(p,"class","toggle-label svelte-134wpci"),u(l,"class","toggle svelte-134wpci"),u(i,"class","controls"),u(o,"class","toggle svelte-134wpci"),f(o,"font-size",t[4]),f(o,"text-align",t[5]),f(o,"border-top",t[7]),f(o,"border-bottom",t[8]),f(o,"padding-top",t[9]),f(o,"padding-bottom",t[10]),f(o,"margin-top",t[11]),f(o,"margin-bottom",t[12]),b(o,"disabled",t[3])},m(e,n){r(e,o,n),c(o,i),c(i,l),c(l,p),c(p,m),m.checked=t[0],c(p,v),c(p,h),c(h,w),c(p,$),_&&_.m(p,null),y||(k=[g(m,"change",t[14]),g(m,"change",t[13])],y=!0)},p(e,[t]){8&t&&(m.disabled=e[3]),1&t&&(m.checked=e[0]),65&t&&x!==(x=e[0]?`background-color: ${e[6]};`:"")&&u(h,"style",x),e[1]&&e[2]?_?_.p(e,t):((_=N(e)).c(),_.m(p,null)):_&&(_.d(1),_=null),16&t&&f(o,"font-size",e[4]),32&t&&f(o,"text-align",e[5]),128&t&&f(o,"border-top",e[7]),256&t&&f(o,"border-bottom",e[8]),512&t&&f(o,"padding-top",e[9]),1024&t&&f(o,"padding-bottom",e[10]),2048&t&&f(o,"margin-top",e[11]),4096&t&&f(o,"margin-bottom",e[12]),8&t&&b(o,"disabled",e[3])},i:e,o:e,d(e){e&&s(o),_&&_.d(),y=!1,n(k)}}}function O(e,t,o){let{checked:n=!1}=t,{onLabel:i=null}=t,{offLabel:l=null}=t,{disabled:c=!1}=t,{fontSize:r="1rem"}=t,{align:s="left"}=t,{checkedColor:a="#bbe572"}=t,{borderTop:p="1px solid #ddd"}=t,{borderBottom:d="none"}=t,{paddingTop:g="1em"}=t,{paddingBottom:u="none"}=t,{marginTop:f="1.25em"}=t,{marginBottom:b="none"}=t;return e.$$set=e=>{"checked"in e&&o(0,n=e.checked),"onLabel"in e&&o(1,i=e.onLabel),"offLabel"in e&&o(2,l=e.offLabel),"disabled"in e&&o(3,c=e.disabled),"fontSize"in e&&o(4,r=e.fontSize),"align"in e&&o(5,s=e.align),"checkedColor"in e&&o(6,a=e.checkedColor),"borderTop"in e&&o(7,p=e.borderTop),"borderBottom"in e&&o(8,d=e.borderBottom),"paddingTop"in e&&o(9,g=e.paddingTop),"paddingBottom"in e&&o(10,u=e.paddingBottom),"marginTop"in e&&o(11,f=e.marginTop),"marginBottom"in e&&o(12,b=e.marginBottom)},[n,i,l,c,r,s,a,p,d,g,u,f,b,function(t){!function(e,t){const o=e.$$.callbacks[t.type];o&&o.slice().forEach(e=>e(t))}(e,t)},function(){n=this.checked,o(0,n)}]}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".toggle.disabled.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{pointer-events:none}.toggle.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{position:relative}.toggle-input.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.toggle-label.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{cursor:pointer;position:relative}.toggle-label.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci,.toggle-title.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci,.toggle-track.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci,.toggle-switch.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{display:inline-block;vertical-align:middle}.toggle-track.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{position:relative;top:-0.125em;width:2.8125em;height:1.875em;background-color:#eee;border:0.0625em solid rgba(0, 0, 0, 0.15);border-radius:5px;transition:0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition-property:background-color, border-color}.toggle-label.svelte-134wpci .toggle-input.svelte-134wpci:checked~.toggle-track.svelte-134wpci.svelte-134wpci{border-color:rgba(0, 0, 0, 0.05)}.toggle-track.svelte-134wpci+.toggle-title.svelte-134wpci.svelte-134wpci.svelte-134wpci{margin-left:0.375em}.toggle-switch.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{position:absolute;top:0;right:0.9375em;bottom:0;left:0;margin:2px;background-color:white;border-radius:5px;box-shadow:1px 1px 6px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(255, 255, 255, 0.8);transition:0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition-property:left, right;transition-delay:0s, 0.05s}.toggle-label.svelte-134wpci:active .toggle-switch.svelte-134wpci.svelte-134wpci.svelte-134wpci{box-shadow:1px 1px 6px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(255, 255, 255, 0.8), inset 1px 1px 6px rgba(0, 0, 0, 0.1)}.toggle-label.svelte-134wpci .toggle-input.svelte-134wpci:checked~.toggle-track.svelte-134wpci>.toggle-switch.svelte-134wpci{right:0;left:0.9375em;transition:0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition-property:left, right;transition-delay:0.05s, 0s}");const P=document.createElement("div");document.body.appendChild(P),new class extends A{constructor(e){super(),S(this,e,O,j,l,{checked:0,onLabel:1,offLabel:2,disabled:3,fontSize:4,align:5,checkedColor:6,borderTop:7,borderBottom:8,paddingTop:9,paddingBottom:10,marginTop:11,marginBottom:12})}}({target:P,props:{}})}();
2 | 


--------------------------------------------------------------------------------
/dist/index.mjs:
--------------------------------------------------------------------------------
1 | function e(){}function t(e){return e()}function o(){return Object.create(null)}function n(e){e.forEach(t)}function i(e){return"function"==typeof e}function l(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function c(e,t){e.appendChild(t)}function r(e,t,o){e.insertBefore(t,o||null)}function s(e){e.parentNode.removeChild(e)}function a(e){return document.createElement(e)}function p(e){return document.createTextNode(e)}function d(){return p(" ")}function g(e,t,o,n){return e.addEventListener(t,o,n),()=>e.removeEventListener(t,o,n)}function u(e,t,o){null==o?e.removeAttribute(t):e.getAttribute(t)!==o&&e.setAttribute(t,o)}function f(e,t,o,n){e.style.setProperty(t,o,n?"important":"")}function b(e,t,o){e.classList[o?"add":"remove"](t)}let m;function v(e){m=e}const h=[],w=[],x=[],$=[],y=Promise.resolve();let k=!1;function _(e){x.push(e)}let T=!1;const B=new Set;function C(){if(!T){T=!0;do{for(let e=0;e<h.length;e+=1){const t=h[e];v(t),E(t.$$)}for(v(null),h.length=0;w.length;)w.pop()();for(let e=0;e<x.length;e+=1){const t=x[e];B.has(t)||(B.add(t),t())}x.length=0}while(h.length);for(;$.length;)$.pop()();k=!1,T=!1,B.clear()}}function E(e){if(null!==e.fragment){e.update(),n(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(_)}}const L=new Set;function z(e,t){-1===e.$$.dirty[0]&&(h.push(e),k||(k=!0,y.then(C)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function S(l,c,r,a,p,d,g=[-1]){const u=m;v(l);const f=c.props||{},b=l.$$={fragment:null,ctx:null,props:d,update:e,not_equal:p,bound:o(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(u?u.$$.context:[]),callbacks:o(),dirty:g,skip_bound:!1};let h=!1;if(b.ctx=r?r(l,f,(e,t,...o)=>{const n=o.length?o[0]:t;return b.ctx&&p(b.ctx[e],b.ctx[e]=n)&&(!b.skip_bound&&b.bound[e]&&b.bound[e](n),h&&z(l,e)),t}):[],b.update(),h=!0,n(b.before_update),b.fragment=!!a&&a(b.ctx),c.target){if(c.hydrate){const e=function(e){return Array.from(e.childNodes)}(c.target);b.fragment&&b.fragment.l(e),e.forEach(s)}else b.fragment&&b.fragment.c();c.intro&&((w=l.$$.fragment)&&w.i&&(L.delete(w),w.i(x))),function(e,o,l){const{fragment:c,on_mount:r,on_destroy:s,after_update:a}=e.$$;c&&c.m(o,l),_(()=>{const o=r.map(t).filter(i);s?s.push(...o):n(o),e.$$.on_mount=[]}),a.forEach(_)}(l,c.target,c.anchor),C()}var w,x;v(u)}class A{$destroy(){!function(e,t){const o=e.$$;null!==o.fragment&&(n(o.on_destroy),o.fragment&&o.fragment.d(t),o.on_destroy=o.fragment=null,o.ctx=[])}(this,1),this.$destroy=e}$on(e,t){const o=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return o.push(t),()=>{const e=o.indexOf(t);-1!==e&&o.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}function N(e){let t,o,n=(e[0]?e[1]:e[2])+"";return{c(){t=a("span"),o=p(n),u(t,"class","toggle-title svelte-134wpci")},m(e,n){r(e,t,n),c(t,o)},p(e,t){7&t&&n!==(n=(e[0]?e[1]:e[2])+"")&&function(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}(o,n)},d(e){e&&s(t)}}}function j(t){let o,i,l,p,m,v,h,w,x,$,y,k,_=t[1]&&t[2]&&N(t);return{c(){o=a("div"),i=a("div"),l=a("div"),p=a("label"),m=a("input"),v=d(),h=a("span"),w=a("span"),$=d(),_&&_.c(),u(m,"class","toggle-input svelte-134wpci"),u(m,"type","checkbox"),m.disabled=t[3],u(w,"class","toggle-switch svelte-134wpci"),u(h,"class","toggle-track svelte-134wpci"),u(h,"style",x=t[0]?`background-color: ${t[6]};`:""),u(p,"class","toggle-label svelte-134wpci"),u(l,"class","toggle svelte-134wpci"),u(i,"class","controls"),u(o,"class","toggle svelte-134wpci"),f(o,"font-size",t[4]),f(o,"text-align",t[5]),f(o,"border-top",t[7]),f(o,"border-bottom",t[8]),f(o,"padding-top",t[9]),f(o,"padding-bottom",t[10]),f(o,"margin-top",t[11]),f(o,"margin-bottom",t[12]),b(o,"disabled",t[3])},m(e,n){r(e,o,n),c(o,i),c(i,l),c(l,p),c(p,m),m.checked=t[0],c(p,v),c(p,h),c(h,w),c(p,$),_&&_.m(p,null),y||(k=[g(m,"change",t[14]),g(m,"change",t[13])],y=!0)},p(e,[t]){8&t&&(m.disabled=e[3]),1&t&&(m.checked=e[0]),65&t&&x!==(x=e[0]?`background-color: ${e[6]};`:"")&&u(h,"style",x),e[1]&&e[2]?_?_.p(e,t):((_=N(e)).c(),_.m(p,null)):_&&(_.d(1),_=null),16&t&&f(o,"font-size",e[4]),32&t&&f(o,"text-align",e[5]),128&t&&f(o,"border-top",e[7]),256&t&&f(o,"border-bottom",e[8]),512&t&&f(o,"padding-top",e[9]),1024&t&&f(o,"padding-bottom",e[10]),2048&t&&f(o,"margin-top",e[11]),4096&t&&f(o,"margin-bottom",e[12]),8&t&&b(o,"disabled",e[3])},i:e,o:e,d(e){e&&s(o),_&&_.d(),y=!1,n(k)}}}function O(e,t,o){let{checked:n=!1}=t,{onLabel:i=null}=t,{offLabel:l=null}=t,{disabled:c=!1}=t,{fontSize:r="1rem"}=t,{align:s="left"}=t,{checkedColor:a="#bbe572"}=t,{borderTop:p="1px solid #ddd"}=t,{borderBottom:d="none"}=t,{paddingTop:g="1em"}=t,{paddingBottom:u="none"}=t,{marginTop:f="1.25em"}=t,{marginBottom:b="none"}=t;return e.$$set=e=>{"checked"in e&&o(0,n=e.checked),"onLabel"in e&&o(1,i=e.onLabel),"offLabel"in e&&o(2,l=e.offLabel),"disabled"in e&&o(3,c=e.disabled),"fontSize"in e&&o(4,r=e.fontSize),"align"in e&&o(5,s=e.align),"checkedColor"in e&&o(6,a=e.checkedColor),"borderTop"in e&&o(7,p=e.borderTop),"borderBottom"in e&&o(8,d=e.borderBottom),"paddingTop"in e&&o(9,g=e.paddingTop),"paddingBottom"in e&&o(10,u=e.paddingBottom),"marginTop"in e&&o(11,f=e.marginTop),"marginBottom"in e&&o(12,b=e.marginBottom)},[n,i,l,c,r,s,a,p,d,g,u,f,b,function(t){!function(e,t){const o=e.$$.callbacks[t.type];o&&o.slice().forEach(e=>e(t))}(e,t)},function(){n=this.checked,o(0,n)}]}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".toggle.disabled.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{pointer-events:none}.toggle.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{position:relative}.toggle-input.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.toggle-label.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{cursor:pointer;position:relative}.toggle-label.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci,.toggle-title.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci,.toggle-track.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci,.toggle-switch.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{display:inline-block;vertical-align:middle}.toggle-track.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{position:relative;top:-0.125em;width:2.8125em;height:1.875em;background-color:#eee;border:0.0625em solid rgba(0, 0, 0, 0.15);border-radius:5px;transition:0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition-property:background-color, border-color}.toggle-label.svelte-134wpci .toggle-input.svelte-134wpci:checked~.toggle-track.svelte-134wpci.svelte-134wpci{border-color:rgba(0, 0, 0, 0.05)}.toggle-track.svelte-134wpci+.toggle-title.svelte-134wpci.svelte-134wpci.svelte-134wpci{margin-left:0.375em}.toggle-switch.svelte-134wpci.svelte-134wpci.svelte-134wpci.svelte-134wpci{position:absolute;top:0;right:0.9375em;bottom:0;left:0;margin:2px;background-color:white;border-radius:5px;box-shadow:1px 1px 6px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(255, 255, 255, 0.8);transition:0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition-property:left, right;transition-delay:0s, 0.05s}.toggle-label.svelte-134wpci:active .toggle-switch.svelte-134wpci.svelte-134wpci.svelte-134wpci{box-shadow:1px 1px 6px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(255, 255, 255, 0.8), inset 1px 1px 6px rgba(0, 0, 0, 0.1)}.toggle-label.svelte-134wpci .toggle-input.svelte-134wpci:checked~.toggle-track.svelte-134wpci>.toggle-switch.svelte-134wpci{right:0;left:0.9375em;transition:0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition-property:left, right;transition-delay:0.05s, 0s}");const P=document.createElement("div");document.body.appendChild(P),new class extends A{constructor(e){super(),S(this,e,O,j,l,{checked:0,onLabel:1,offLabel:2,disabled:3,fontSize:4,align:5,checkedColor:6,borderTop:7,borderBottom:8,paddingTop:9,paddingBottom:10,marginTop:11,marginBottom:12})}}({target:P,props:{}});
2 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset='utf8'>
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 6 | 
 7 | 	<title>Svelte Component Demo</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <script src='./index.js' defer></script>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	transform: {
 3 | 		'^.+\\.js$': 'babel-jest',
 4 | 		'^.+\\.svelte$': 'jest-transform-svelte'
 5 | 	},
 6 | 	moduleFileExtensions: ['js', 'svelte'],
 7 | 	bail: false,
 8 |   verbose: false,
 9 |   setupFiles: [
10 |     './test/setup-jest.js'
11 |   ],
12 |   setupFilesAfterEnv: [
13 |     '@testing-library/svelte/cleanup-after-each'
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@beyonk/svelte-toggle",
 3 |   "svelte": "src/Component.svelte",
 4 |   "module": "dist/index.mjs",
 5 |   "main": "dist/component.min.js",
 6 |   "version": "1.4.0",
 7 |   "scripts": {
 8 |     "build": "rollup -c",
 9 |     "dev": "WATCH=true rollup -cw",
10 |     "prepublishOnly": "npm run build",
11 |     "lint": "eslint src/**",
12 |     "test": "NODE_ENV=unit jest --no-cache"
13 |   },
14 |   "browserslist": [
15 |     "> 0.25%"
16 |   ],
17 |   "devDependencies": {
18 |     "@babel/plugin-transform-runtime": "^7.5.5",
19 |     "@babel/preset-env": "^7.5.5",
20 |     "@beyonk/eslint-config": "^4.2.0",
21 |     "@hapi/code": "^6.0.0",
22 |     "@rollup/plugin-commonjs": "^17.0.0",
23 |     "@rollup/plugin-node-resolve": "^11.1.0",
24 |     "@testing-library/dom": "^5.6.1",
25 |     "@testing-library/jest-dom": "^4.0.0",
26 |     "@testing-library/svelte": "^1.7.1",
27 |     "autoprefixer": "^9.6.1",
28 |     "eslint": "^6.1.0",
29 |     "eslint-plugin-svelte3": "^2.7.3",
30 |     "esm": "^3.2.25",
31 |     "jest": "^24.8.0",
32 |     "jest-transform-svelte": "^2.0.2",
33 |     "jsdom": "^16.5.0",
34 |     "jsdom-global": "^3.0.2",
35 |     "mocha": "^6.2.0",
36 |     "postcss": "^7.0.36",
37 |     "rollup": "^2.36.2",
38 |     "rollup-plugin-browsersync": "^1.0.0",
39 |     "rollup-plugin-commonjs": "^10.0.2",
40 |     "rollup-plugin-node-resolve": "^5.2.0",
41 |     "rollup-plugin-postcss": "^2.0.3",
42 |     "rollup-plugin-svelte": "^7.0.0",
43 |     "rollup-plugin-terser": "^5.1.1",
44 |     "sass": "^1.22.10",
45 |     "svelte": "^3.49.0",
46 |     "svelte-preprocess": "^4.6.1"
47 |   },
48 |   "keywords": [
49 |     "svelte",
50 |     "toggle",
51 |     "beyonk",
52 |     "checkbox",
53 |     "boolean"
54 |   ],
55 |   "files": [
56 |     "dist",
57 |     "src"
58 |   ],
59 |   "eslintConfig": {
60 |     "extends": "@beyonk/eslint-config/svelte",
61 |     "plugins": [
62 |       "mocha"
63 |     ],
64 |     "globals": {
65 |       "it": true,
66 |       "describe": true,
67 |       "before": true,
68 |       "beforeEach": true,
69 |       "after": true,
70 |       "afterEach": true,
71 |       "context": true
72 |     }
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte'
 2 | import resolve from '@rollup/plugin-node-resolve'
 3 | import browsersync from "rollup-plugin-browsersync"
 4 | import { terser } from 'rollup-plugin-terser'
 5 | import commonjs from '@rollup/plugin-commonjs'
 6 | import pkg from './package.json'
 7 | import sveltePreprocess from 'svelte-preprocess'
 8 | import postcss from 'rollup-plugin-postcss'
 9 | 
10 | const watch = process.env.WATCH
11 | const mainpath = watch ? 'docs/index.js': pkg.main
12 | const dedupe = [ 'svelte' ]
13 | 
14 | const scssOptions = {
15 |   transformers: {
16 |     scss: {
17 |       includePaths: [
18 |         'node_modules',
19 |         'src'
20 |       ]
21 |     },
22 |     postcss: {
23 |       plugins: [
24 |         require('autoprefixer')
25 |       ]
26 |     }
27 |   }
28 | }
29 | 
30 | export default {
31 | 	input: 'src/index.js',
32 | 	output: [
33 | 		{ file: pkg.module, format: 'es' },
34 | 		{ file: mainpath, format: 'iife' }
35 | 	],
36 | 	plugins: [
37 | 		commonjs(),
38 | 		svelte({
39 | 			preprocess: sveltePreprocess(scssOptions)
40 | 		}),
41 | 		resolve({
42 | 			dedupe
43 | 		}),
44 | 		postcss(),
45 | 		watch && browsersync({ server: 'docs' }),
46 | 		!watch && terser()
47 | 	]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/Component.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   export let checked = false
  3 |   export let onLabel = null
  4 |   export let offLabel = null
  5 |   export let disabled = false
  6 | 
  7 |   export let fontSize = '1rem'
  8 |   export let align = 'left'
  9 |   export let checkedColor = '#32B0A2'
 10 |   export let borderTop = 'none'
 11 |   export let borderBottom = 'none'
 12 |   export let padding = '0'
 13 |   export let margin = '0'
 14 | </script>
 15 | 
 16 | <div class="toggle" class:disabled style="font-size: {fontSize}; text-align: {align}; 
 17 |                   border-top: {borderTop}; border-bottom: {borderBottom};
 18 |                   padding: {padding}; margin: {margin}">
 19 |    <div class="controls">
 20 |     <div class="toggle">
 21 |       <label class="toggle-label">
 22 |         <input class="toggle-input" type="checkbox" bind:checked on:change {disabled}>
 23 |         <span class="toggle-track" style={checked ? `background-color: ${checkedColor};` : ''}>
 24 |           <span class="toggle-switch"></span>
 25 |         </span>
 26 |         {#if onLabel && offLabel}
 27 |         <span class="toggle-title">{checked ? onLabel : offLabel}</span>
 28 |         {/if}
 29 |       </label>
 30 |     </div>
 31 |    </div>
 32 | </div>
 33 | 
 34 | <style>
 35 |   .toggle.disabled {
 36 |     pointer-events: none;
 37 |   }
 38 | 
 39 |   .toggle {
 40 |     position: relative;
 41 |   }
 42 | 
 43 |   .toggle-input {
 44 |     border: 0;
 45 |     clip: rect(0 0 0 0);
 46 |     height: auto;
 47 |     margin: 0;
 48 |     overflow: hidden;
 49 |     padding: 0;
 50 |     position: absolute;
 51 |     width: 1px;
 52 |     white-space: nowrap;
 53 |   }
 54 | 
 55 |   .toggle-label {
 56 |     cursor: pointer;
 57 |     position: relative;
 58 |   }
 59 | 
 60 |   .toggle-label, .toggle-title, .toggle-track, .toggle-switch {
 61 |     display: inline-block;
 62 |     vertical-align: middle;
 63 |   }
 64 | 
 65 |   .toggle-track {
 66 |     position: relative;
 67 |     top: -0.125em;
 68 |     width: 2.8125em;
 69 |     height: 1.875em;
 70 |     background-color: #eee;
 71 |     border: 0.0625em solid rgba(0, 0, 0, 0.15);
 72 |     border-radius: 20px;
 73 |     transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 74 |     transition-property: background-color, border-color;
 75 |   }
 76 | 
 77 |   .toggle-label .toggle-input:checked ~ .toggle-track {
 78 |     border-color: rgba(0, 0, 0, 0.05);
 79 |   }
 80 | 
 81 |   .toggle-track + .toggle-title {
 82 |     margin-left: 0.375em;
 83 |   }
 84 | 
 85 |   .toggle-switch {
 86 |     position: absolute;
 87 |     top: 0;
 88 |     right: 0.9375em;
 89 |     bottom: 0;
 90 |     left: 0;
 91 |     margin: 2px;
 92 |     background-color: white;
 93 |     border-radius: 100%;
 94 |     transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 95 |     transition-property: left, right;
 96 |     transition-delay: 0s, 0.05s;
 97 |   }
 98 | 
 99 |   .toggle-label .toggle-input:checked ~ .toggle-track > .toggle-switch {
100 |     right: 0;
101 |     left: 0.9375em;
102 |     transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
103 |     transition-property: left, right;
104 |     transition-delay: 0.05s, 0s;
105 |   }
106 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Component from './Component.svelte'
 2 | 
 3 | const target = document.createElement('div')
 4 | document.body.appendChild(target)
 5 | 
 6 | // eslint-disable-next-line no-new
 7 | new Component({
 8 |   target,
 9 |   props: {}
10 | })
11 | 


--------------------------------------------------------------------------------
/test/rendering.spec.js:
--------------------------------------------------------------------------------
 1 | import Component from '../src/Component.svelte'
 2 | import { render, cleanup } from '@testing-library/svelte'
 3 | import '@testing-library/jest-dom/extend-expect'
 4 | 
 5 | describe('App', () => {
 6 |   beforeEach(() => {
 7 |     cleanup()
 8 |   })
 9 | 
10 |   test('should render greeting', () => {
11 |     const { getByText } = render(Component, { props: {} })
12 | 
13 |     expect(getByText(`Checked`))
14 |   })
15 | })
16 | 


--------------------------------------------------------------------------------
/test/setup-jest.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/beyonk-group/svelte-toggle/ec1615ac32d4fd5ac5b1b3d7d1f68901660e7494/test/setup-jest.js


--------------------------------------------------------------------------------