{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"411d2a44484aabc3b82dcfd17bef227801247659","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.1.tgz","fileCount":31,"integrity":"sha512-dfflZiAOBVj9whwIKssNhUHYFv42HsrDsVUAR17Io/BhGqoTx0LPnaDCSoXgq6KWPE4U7yjwzNMIHlPhhZRiYg==","signatures":[{"sig":"MEUCIQDSwWB0Xe2IkerC0a66Qfm7D28HtKkgpH9kiwa0W0Xz1AIgO4VADiWwn10oxkBLJnGfCVMtqGA9Cb1+NmaS2laMgqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQtCRA9TVsSAnZWagAA7acP/1gVZcQimGlkgKp+OUmw\nVGkoGBZisC6+HQTDEbPD6jk+AhgAsS952Ce4olMcPIHNZr+rXhcywsVIFa+F\n/wnC9o6SZaXCOx1dMt5uCJHEKSEKSEK0lGyELNiWsDw44KlWd4zMDSzVCKbL\nV0u/jeuOv9JkCXG5bBcE81AG1jNwJs0gmgjE24rXICtxRli0cZg89Ux2Ike1\n/Gf+9VCgjdLWyjUCf8KrFwX/stw2elDyJ7BU99aeoAn62M2eXx7mxyp9ATAf\nfTqjd4dJOuOlTJRWw2MWixIVwK1jVHHh9V5+UdTO2RzritHHrbHPA4Zaz5wp\nV6aEp49WZ6tqqs/r4/5wx61NRLRPhLMoKDbuxUoviXPTskamdO/UcuLiAfGm\n18lwwUe6dtrr+M6IJpMFBYQXQkIkRXjsXL1OINzRcFpIjJZvz3wnQFjvmF0f\nq/lXdqfNcjdE4w0nbMArpQAEh6JcYoY/AvGgU8Yx0Zu/k0RrT5u/38kLefeg\nQ5wNP56XhDm3rA5L+IpLlq4928/+8+CbRMEbhQFnifa6Yy31Mo0iZNKWQS4C\nYsSXvGE1hy49lJ/KwQiPTKtsxDavChlMkI3sFd4PMdGdyaKys8TMbu8Y2i+y\nDvd9zCFTGtxex/YlzVabMZ7lLGDt7DijXS9jUa96Zx8BAY5u/JadPRp0FsQF\nQtu0\r\n=HVC1\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","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@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","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.1_1568060460389_0.5797905752881172","host":"s3://npm-registry-packages"},"_id":"@material/switch@4.0.0-canary.1","version":"4.0.0-canary.1"}