{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80c4db307d09ecfce8857cb0bdd245083c1986e9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.0.0-alpha.1.tgz","fileCount":31,"integrity":"sha512-L2ge5KA4G5VoY+lNRBbfCaB5YHTjll4Pn+d6PnrraSfgkXFk1ae8VDZwegwoA1PU7GVxWfSH2N4/VQ+wG7KZgw==","signatures":[{"sig":"MEQCIFB7OgPHKsa+L317/UFVqQlXSBc5YALhvsxCABgpvdxxAiAaZslnKDutxPoHKeatV8KFxelGZnMw2LOousZq/xlf2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxACRA9TVsSAnZWagAA8qUP/0lq0Nt74GuF/O0ADEMj\nxm6w1sf/iLs0jSHqb9AtNkmSkNL1/uTEqdhWug08BVN94wo4s49d5Gy8xskH\nalkOsevbg4iYZ9OCMA/pQqe4qRpIn1hqljCt6mJLIrA5FjfAHJT8OeRTWujb\nhb1e5xYX3zar7eF+fJO8uIei4RUQqbh0akbokz16E7qHPx5n/3oFOLZFYq1a\nJV71BR3V1/g4OUtbippRR4VCPltVpgArcSi6Hz/Q4xsEBjJUX2j1SZdjSyX+\nsAdgpRmzxA/7EPBkSyzO2sUq95Lv1FmC0JBGSD6+8xsR4bDlT+gkyG8wyt3b\ndUS9fFD8Ex74Q8AoYATxwpV0c0YapRVH+2aWv3msI67BLDMHSgz9Oz+MHm3f\n8j30uc1qAnVEFYNVVRbL5x4yU+5xKKyLiT0SPn6k5+xM0guJbw/fbFDDvyj4\nZA5Zl+hat3xJEIUQdlFvHawGrOWFDg8TTFSZmoH9GlKmW9rjRNLKbldi27zr\nlfgUYtkMEW5OTF1mb3x8WtDcG4AXSoCChZhv+rS8NDRf2Ro3gDyjfPy57txM\n3FgKj+2RLFkPGi/rIJ7vDPttfd6zqjanUB+X99gav1rqsON0zypEL6BvxkOu\nFcLjouVbPSuZ3lpig3N+DU+v6hTV4YifTnChQQAOdmFvX3KEpRitGWGWmXU4\ndFsO\r\n=YjFf\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":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","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"},"_npmVersion":"lerna/3.14.1/node@v11.9.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":"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":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_3.0.0-alpha.1_1560366143624_0.8037923550509529","host":"s3://npm-registry-packages"},"_id":"@material/switch@3.0.0-alpha.1","version":"3.0.0-alpha.1"}