{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0be04c8b8ebe7c0706cb215dc96412bc5611ac7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.39.0-0.tgz","fileCount":14,"integrity":"sha512-bbAa3K/i2ZUIscPxc2dBuHskEJhRz0hXhFNZMJsVBi4vR1jQF/2GObjb0WXiWJkUXYt/dM6BMkeerZvdm3CbLA==","signatures":[{"sig":"MEUCIHOU5FnNdByUBGmhLwf6SjHIABXiKHvkV4btzmR8AqOeAiEAucW8NA/P8qW9HqmqTxHaQ2lClF0Xq7RAYdXamd1uSRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUfCRA9TVsSAnZWagAAmbAP/jEhn96Gw9STn8ZVKtH4\nXz83hdTTcKVHNrZ+dliiljuxES0YMTIVQuC3vOOJBsn9kZ3deKusrteVBqkG\nE2HVToeeYc49rqF3Kfpf9zd2HywEjXOoMkeA5wPNGs+V0BmEV4Kzi5lQrNyn\nDwAntIuqwUZ7xHvbmutFYMLEBOa3xJ4pn7noXUHvhOTS7X8IJ6ZQV84HkMsa\nLhM9pyC/i/AWq4B/EyjNJEVSL5VSMXGI9cZrXblEGSpZYt71DjcZstd7U4JD\nz+S2pUwktu2+3ZFz8KJVu+16doiVdN2EnkZuXGHxQ5vSiD0KRkLzEOJuWSXN\n2Cj+MU1lp0+eZSdVfppxFQRrMuHlBIEZXPmZcisMk43LMxU2MkezI9Q6M1WH\nHZ2dpl9lHodVWayTRl+xfnzxx/5fmVt/t+SVvgNeUe9xkGnO140RrAGIUyby\nudVochmbwMojA40L2xtX+ZXTBozng+hd7DpmN0WZD7ABCkNMs1PWo/p5sd2q\nNmZFJAcJ+z2XA29qo4PwWfGWOULb7TIBG7uvvV+KhgSpFSuJfTBnHkWViVOI\n5dhO/uh6vO7zOl75mXcr3pXtgkEfT+MqmkbkFlqKnw64U57GWe0SknKkeMgC\nD7uY1KmOGRY4Ya8a9ANbOQBc9K8N2jpezvJoj4GtJoJRNHY2G1ugpLTLL5Gi\nPepy\r\n=Qb3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/switch","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](index.js) component `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","license":"Apache-2.0","_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.4.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"}],"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/selection-control":"^0.38.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_0.39.0-0_1534432543058_0.5214540461337476","host":"s3://npm-registry-packages"},"_id":"@material/switch@0.39.0-0","version":"0.39.0-0"}