{"_id":"@cicciosgamino/images-switch","_rev":"1-8f727ecd616b4907cb2ab739ba4b7ac1","name":"@cicciosgamino/images-switch","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@cicciosgamino/images-switch","version":"3.0.0","description":"Simple Lit switch, toggle between two background images (SVG)","main":"images-switch.js","type":"module","module":"images-switch.js","scripts":{"serve":"web-dev-server --node-resolve --app-index examples/index.html --watch --open","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/CICCIOSGAMINO/images-switch.git"},"keywords":["Switch","Toggle","HTML","Custom","Element","Web","Component","Images-Switch","LitElement"],"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"license":"GPL-3.0","private":false,"dependencies":{"lit":"*"},"devDependencies":{"@web/dev-server":"^0.1.17"},"bugs":{"url":"https://github.com/CICCIOSGAMINO/images-switch/issues"},"homepage":"https://github.com/CICCIOSGAMINO/images-switch#readme","gitHead":"edf2476891a875869221ed2f1ca190d793c184ee","_id":"@cicciosgamino/images-switch@3.0.0","_nodeVersion":"16.0.0","_npmVersion":"7.11.1","dist":{"integrity":"sha512-5H0TCu879u4+Xu3cQYWy1rbLYK9uuxnYFPtLdRtksl0Sh+8a+WmDq4Yzqbta8pZFzD14Jj0F/OTtXAgRUUlbsA==","shasum":"04379ca5e407ea98498958c74e85a6562413d837","tarball":"https://registry.npmjs.org/@cicciosgamino/images-switch/-/images-switch-3.0.0.tgz","fileCount":14,"unpackedSize":179924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8FaCRA9TVsSAnZWagAA96gQAJeM1JHmgxHgjQuzIpBH\nFqzUL3re55Tm0S8pCcnyBhUCptVANJd5hx7eyCy8vOlQoVrPOB5zMybO9lnC\nsf5Lmq3Y369HfGqYtFL+XrORcOLC/go4rUfaIKvcr202/4n1K2VuNiqLU8uN\n1gBYRZzurRWDHl2hphL2J5zp5XKbZ7Bya5pWr6NETg/4G9khANb4r/VbixTi\nA6Ax1WEQ4a/IdQQRkaxt6ftrher8miIwrNz8AUDDaqpQrso2xetuILe5dbl5\neTps6AVX4klqSGKVNXLlt1dexbk7/wYGlfAojDb3UScsjeO7FEf8Y1fyvS8i\n+SA/pv//sH7m1tK4/fl/LJ8Pr4cCJqj63UioAB/0gTyUhfLjnn0uH8i+XQW/\nBZ/CSLVTwQPwNUvTwZwiFdPVm6fIvZQjlFlOn1Y/8qXJKYwouGJ7hfndj8aV\nEAbPHolFwvVHEE7rOebYxwijGwx2efgQRjaNw460dOcw+DvKl5bA9BvsrTsq\n/mp8bZkiHIobBO6tcc9xbQfW2BVTitHXuVL3KaZXlnORDpErtaYhLpONFBe2\n2tNBAC2eRKl0Xn1JWhgbXfiW2JeZpv1BsEoF8VQmMH2VV5JBEJnp5u7TWx2m\niU5RtBoj4tAX9X/K11lluXKgM+vyxS8+izoTXhZ5fGxymVLdt90j8HWLR4Jm\nn1mZ\r\n=6yBt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpIomvyqdZA1f/AZqTcvDbsFH0fceEC9LM4STqPm8FUQIhAPv8lWVcJunr9MrwHDlVOioP6ovjLthncr48EMfC0v0h"}]},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"directories":{},"maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/images-switch_3.0.0_1622131033723_0.4826374459781577"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-27T15:57:13.679Z","3.0.0":"2021-05-27T15:57:13.923Z","modified":"2022-04-04T22:58:24.233Z"},"maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"description":"Simple Lit switch, toggle between two background images (SVG)","homepage":"https://github.com/CICCIOSGAMINO/images-switch#readme","keywords":["Switch","Toggle","HTML","Custom","Element","Web","Component","Images-Switch","LitElement"],"repository":{"type":"git","url":"git+https://github.com/CICCIOSGAMINO/images-switch.git"},"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"bugs":{"url":"https://github.com/CICCIOSGAMINO/images-switch/issues"},"license":"GPL-3.0","readme":"![GitHub issues](https://img.shields.io/github/issues/CICCIOSGAMINO/images-switch)\n[![npm version](https://badgen.net/npm/v/@cicciosgamino/progress-ring)](https://www.npmjs.com/package/@cicciosgamino/images-switch)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/cicciosgamino/images-switch)\n\n# 💫 \\<images-switch\\>\n\nSimple images-switch Lit component, you can switch between SVG image in background. Higly \n      \n<p align=\"center\">\n  <a href=\"#examples\">examples</a> •\n  <a href=\"#usage\">usage</a> •\n  <a href=\"#api\">api</a> •\n  <a href=\"#accessibility\">accessibility</a> •\n  <a href=\"#todo\">todo</a> •\n</p>\n\n## 🕹️ Examples\n\n![Example Microsoft](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/exampleMicrosoft.gif)\n\n```css\n--switch-width: 150px;\n--switch-height: 60px;\n--circle-margin: 15px;\n\n--switch-border: 4px solid #000;\n--switch-border-checked: 4px solid #00a2ed;\n\n--switch-bk-color: #fff;\n--switch-bk-ck-color: #00a2ed;\n--switch-bk-disabled-color: #ccc;\n\n--circle-bkcolor: #000;\n--circle-ck-bkcolor: whitesmoke;\n\n--text-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n--text-font-size: 2rem;\n--text-font-weight: 300;\n```\n\n```html\n<!-- Images switch -->\n<images-switch truetext=\"On\" falsetext=\"Off\"></images-switch>\n```\n\n![Example Camping](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/exampleCamping.gif)\n\n```css\n--switch-width: 160px;\n--switch-height: 80px;\n\n--circle-margin: 9px;\n\n--circle-bkcolor: whitesmoke;\n--circle-ck-bkcolor: whitesmoke;\n\n--switch-bk-ck-url: url(/images/dark_o.svg);\n--switch-bk-url: url(/images/light_o.svg);\n--switch-bk-disabled-url: url(/images/disabled_o.svg);\n```\n\n```html\n<images-switch></images-switch>\n```\n\n![Example Github](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/exampleGithub.gif)\n\n```css\n--switch-width: 160px;\n--switch-height: 80px;\n--switch-border: 4px solid #000;\n--switch-border-checked: 4px solid #faf614;\n--circle-url: url(/images/moon.svg);\n\n--color-scale-purple-6: #6e40c9;\n--color-scale-purple-9: #271052;\n\n--circle-margin: -7px;\n--bk-ck-color: var(--color-scale-purple-9);\n--circle-bkcolor: #040d21;\n--circle-ck-bkcolor: var(--color-scale-purple-6);\n```\n\n```html\n<images-switch></images-switch>\n```\n\n![Example Check](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/exampleCheck.gif)\n\n```css\n--switch-width: 160px;\n--switch-height: 80px;\n--circle-margin: 9px;\n\n--border: none;\n--switch-bk-color: #ff5683;\n--switch-bk-ck-color: #72e06f;\n--switch-bk-disabled-color: #bbb;\n--circle-bkcolor: whitesmoke;\n--circle-ck-bkcolor: whitesmoke;\n\n--switch-bk-ck-url: url(/images/check.svg);\n--switch-bk-url: url(/images/cross.svg);\n\n--switch-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);\n--circle-shadow: 0 0 0px 2px rgba(100, 100, 100, 0.2);\n--circle-shadow-focus-on: 0 0 5px 6px #FFDE03;\n--circle-shadow-hover-on: 0 0 5px 6px #FFDE03; \n\n--text-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n```\n\n```html\n<images-switch></images-switch>\n```\n\n## 🚀 Usage\n\n1. Install package\n```bash\nnpm install --save @cicciosgamino/images-switch\n```\n\n2. Import\n```html\n<!-- Import Js Module -->\n<script type=\"module\">\n  // Importing this module registers <progress-ring> as an element that you\n  // can use in this page.\n  //\n  // Note this import is a bare module specifier, so it must be converted\n  // to a path using a server such as @web/dev-server.\n  import '@cicciosgamino/images-switch'\n</script>\n```\n\n3. Place in your HTML\n```html\n<images-switch truetext=\"On\" falsetext=\"Off\"></images-switch>\n```\n\n## 🐝 API\n\n### 📒 Properties/Attributes\n\n| Name | Type | Default | Description\n| ------------- | ------------ | ------------ | --------------\n| value     | String  |  `''`  | Input value field\n| checked   | Boolean | false  | Input checked attribute\n| disabled  | Boolean | false  | Input diabled attribute\n| trueText  | String  |  `''`  | Property to set the text of the switch when true\n| falseText | String  |  `''`  | Property to set the text of the switch when false\n\n### Methods\n*None*\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | -------------- | ------------ | --------------\n|   change   | images-switch  |  `{ checked: checked }`  | Fired when the switch changes status\n\n\n### 🧁 CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ----------- | --------------------\n| `--switch-width`          |    `80px`   | Switch width\n| `--switch-height`         |    `40px`   | Switch height \n| `--switch-border`         |    `none`   | Switch border when unchecked \n| `--switch-border-checked` |    `none`   | Switch border when checked\n| `--switch-shadow`         |    `none`   | Switch shadow (out or inside switch border)\n| `--switch-bk-color`       |`transparent`| Switch background-color when unchecked\n| `--switch-bk-ck-color`    |`transparent`| Switch background-color when checked\n| `--switch-bk-disabled-color`|`transparent` | Switch background-color when disabled\n| `--switch-bk-focus-color` |`transparent`| Switch background-color when focus\n| `--switch-bk-hover-color` |`transparent`| Switch background-color when hover\n| `--switch-bk-url`         |   `none`    | Switch background SVG url when unchecked\n| `--switch-bk-ck-url`      |   `none`    | Switch background SVG url when checked\n| `--switch-bk-disabled-url`|   `none`    | Switch background SVG url when disabled\n| `--circle-url`            |    `none`   | Circle SVG url\n| `--circle-ck-url`         |    `none`   | Circle SVG url when checked (TODO)\n| `--circle-disabled-url`   |    `none`   | Circle SVG url when disabled (TODO)\n| `--circle-margin`         |    `3px`    | Circle margin\n| `--circle-bkcolor`        |`transparent`| Circle background-color when unchecked\n| `--circle-ck-bkcolor`     |`transparent`| Circle background-color when checked\n| `--circle-shadow`         |    `none`   | Circle shadow\n| `--circle-shadow-focus-on`|    `none`   | Circle shadow when focus\n| `--circle-shadow-hover-on`|    `none`   | Circle shadow when hover\n| `--text-font-family`      | `sans-serif`| Font-family if text is used\n| `--text-font-size`        |    `2rem`   | Font-size if text is used\n| `--text-font-weight`      |    `300`    | Font-weight if text is used\n| `--text-absolute-top`     |  `-1.5rem`  | Absolute position top\n| `--text-absolute-right`   |   `-7rem`   | Absolute position right\n\n\n\n\n### 🤖 Write HTML and JavaScript\nImport the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as `<button>`:\n\n```html\n<!doctype html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>My Example App</title>\n\n    <!-- Add support for Web Components to older browsers. -->\n    <script src=\"./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>\n\n  </head>\n  <body>\n    <!-- Use Web Components in your HTML like regular built-in elements. -->\n    <images-switch></images-switch>\n\n    <!-- The Material Web Components use standard JavaScript modules. -->\n    <script type=\"module\">\n\n      // Importing this module registers <progress-ring> as an element that you\n      // can use in this page.\n      //\n      // Note this import is a bare module specifier, so it must be converted\n      // to a path using a server such as @web/dev-server.\n      import '@cicciosgamino/images-switch'\n\n      // Standard DOM APIs work with Web Components just like they do for\n      // built-in elements.\n      const s = document.querySelector('images-switch')\n    </script>\n  </body>\n</html>\n```\n\n### 🚀 Serve\nServe your HTML with any server or build process that supports *bare module specifier resolution* (see next section):\n\n```sh\n# use globally instelled\nnpm install -g @web/dev-server\n\n# install the project dev-dependencies and npm run\nnpm install\nnpm run serve\n```\n\n## Bare module specifiers\n\nAll @cicciosgamino Lit components [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) that use *bare module specifiers*. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms\nthem to a *path* (for example from `@cicciosgamino/images-switch` to `./node_modules/@cicciosgamino/images-switch/images-switch.js`).\n\nTwo great choices for tools that do this are:\n\n- During local development, use open-wc's [`@web/dev-server`](https://www.npmjs.com/package/@web/dev-server) with the `--node-resolve` flag.\n- For your production deployment, build your application with [Rollup](https://rollupjs.org/guide/en/) using the [`rollup-plugin-node-resolve`](https://github.com/rollup/rollup-plugin-node-resolve) plugin.\n\n## Contributing\n\nGot **something interesting** you'd like to **share**? Learn about [contributing](https://github.com/CICCIOSGAMINO/init/blob/master/CONTRIBUTING.md).\n\n## 💪 Accessibility\nActually acessibility is handled with the `role=switch` and mirrororing the `checked` and `disabled` attributes from the native checkbox input element to the `<images-switch>` web component.\n\n## 🔧 TODO\n- [ ] More Examples\n- [ ] Basic Unit testing \n- [ ] Documentation\n- [ ] npm publish\n\n## CSS encapsulation\nThe elements HTML structure is initialized in a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so it is impossible to apply CSS to it. If you need to change the element's default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we'll work with you on solving the problem.\n\n## Browser support\n\nBrowsers without native [custom element support][support] require a [polyfill][]. Legacy browsers require various other polyfills. See [`examples/index.html`][example] for details.\n\n- Chrome\n- Firefox\n- Safari\n- Microsoft Edge\n\n[support]: https://caniuse.com/#feat=custom-elementsv1\n[polyfill]: https://github.com/webcomponents/custom-elements\n\n## 🧑‍💻 Author\n\n| [![@cicciosgamino](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/justme%40412x412_round.png)](https://linkedin.com/in/) \t|\n|:------------------------------------------------------------------------------------------:\t|\n|                                    **@cicciosgamino**                                      \t|\n\n\n## Support\nReach out to me at one of the following places:\n\n- [Github](https://github.com/CICCIOSGAMINO)\n- [Twitter](https://twitter.com/cicciosgamino)\n\n## Donate\n\nDonate help and contibutions!\n\n## License\n[GNU General Public License v3.0](https://github.com/CICCIOSGAMINO/init/blob/master/LICENSE)\n\nMade 🧑‍💻 by [@cicciosgamino](https://cicciosgamino.web.app)\n\n","readmeFilename":"README.md"}