{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09e1807a6e77914bd896dcccd8ac25e236d83345","tarball":"https://registry.npmjs.org/@material/switch/-/switch-1.0.0-1.tgz","fileCount":30,"integrity":"sha512-HUa0V7Xc0U5h+c885O1p93knW8Pa/dBOWCO/SaTgIEXAxb8GalafSOq5e3RE2etMjVCHbXdNVIO2T+tylu4oig==","signatures":[{"sig":"MEUCIHZZvx3Qt+mbuoo9+TGzQKu1xboLvmGBOGXgdmW3AkmMAiEA4UTLRqVfDPmrfWVwQDnF05yrLkclv/WO8F6QWz9BXEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":685576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXTCRA9TVsSAnZWagAAdjcP/1BHsdg8eUv5hcX35Uiy\no2sT6M9pnUDC4WWMoVDWstkTR+5CzPXHh3CJhjqFBSTFJ3CtU6B5G8RcOn4f\niWheMfGdj3FeS7n3z1yVe5iDYFqX0avagjtsCAs6gb8c9fBxwuYCQNKzKaze\nBsCzFa3Ie6eajEKxlQDgmXmvIksuq6cLFQVV5hJq4igKrZYt3LOIwh9B6NDW\nVnDbWQngALq8UI51ETsmUi/CP1gHCf0JVA6IJW0O04oQxa61WQhBtFx2YWS6\n6QL55B3XH9xWc8JB3sUkvLvlxOl2voyR+5bYI34eIATwpb46m14MJclLbQct\n/9JF9G4fCo7HRCD6lkWyVIpT60V6tl65RYGaFLQRQLAcyylcXyUaLFwpiObi\n5rLgLexBJ+LdQfgbZyaK+wKjsSXhJd11KPyGJ4/f0CJttQQcginR+UzKFrKy\np1sIK3o1gDU8v9hDpOjgBUegzif1yLYtaJVsW2Pfu/zeb+CmtyL6JdQTlbzd\nKOUsfgB23umSiovu83VzCo5JPgjv+SPKQbyjOTBRaFXcPzD99I6rN2NCPx4N\ntWbMWmKTYIeHCik/Cge/EJBmk2ot5sy1WWB5C2z4JD7sHo/hTHtSSb+XxJfY\n664oHpeR6gdMHTNqkPRpkxq+u9zr4WknNgWHM9tdrhIU8c6QfEY7rL0IXHsB\nN05h\r\n=j4sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","name":"@material/switch","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Switches\"\nlayout: detail\nsection: components\niconId: switch\npath: /catalog/input-controls/switches/\n-->\n\n# Switches\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/switch\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/switches.png\" width=\"37\" alt=\"Switches screenshot\">\n  </a>\n</div>-->\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-switches\">Material Design guidelines: Switches</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/switch\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-switch\">\n  <div class=\"mdc-switch__track\"></div>\n  <div class=\"mdc-switch__thumb-underlay\">\n    <div class=\"mdc-switch__thumb\">\n        <input type=\"checkbox\" id=\"basic-switch\" class=\"mdc-switch__native-control\" role=\"switch\">\n    </div>\n  </div>\n</div>\n<label for=\"basic-switch\">off/on</label>\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n<div class=\"mdc-switch mdc-switch--disabled\">\n  <div class=\"mdc-switch__track\"></div>\n  <div class=\"mdc-switch__thumb-underlay\">\n    <div class=\"mdc-switch__thumb\">\n      <input type=\"checkbox\" id=\"another-basic-switch\" class=\"mdc-switch__native-control\" role=\"switch\" disabled>\n    </div>\n  </div>\n</div>\n<label for=\"another-basic-switch\">off/on</label>\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n<div class=\"mdc-switch mdc-switch--checked\">\n  <div class=\"mdc-switch__track\"></div>\n  <div class=\"mdc-switch__thumb-underlay\">\n    <div class=\"mdc-switch__thumb\">\n      <input type=\"checkbox\" id=\"another-basic-switch\" class=\"mdc-switch__native-control\" role=\"switch\" checked>\n    </div>\n  </div>\n</div>\n<label for=\"another-basic-switch\">off/on</label>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","license":"MIT","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","switch"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web switch component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-1","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_1.0.0-1_1551742418393_0.9408455460008667","host":"s3://npm-registry-packages"},"_id":"@material/switch@1.0.0-1","version":"1.0.0-1"}