{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22867b68bb50dac31ec29f306b92a16f4111e466","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2f052d824.0.tgz","fileCount":36,"integrity":"sha512-YNiIr+4I/HSaMNcKR3Li6V28H27VRM0DOEUBYdcZ7yRJph5eDBWbwm1Q6tWuQowsb8q0i9Xv/3Qj6NhYJRNKvQ==","signatures":[{"sig":"MEUCIQD2fTNzi77nGU8ZRudeMwQS8WmJGVydTpFhpvm3mCjjgwIgNrQAleuLvgLncqDK1OhXtklUEIAU0au5QmsDxVCRe88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoZCRA9TVsSAnZWagAAqosP/3wWxermcZbDJddzD0s4\np5ZsoFykyYL9MAUmrl7Wua0gHbuMygq0AZE+cK1XhWqR8o+dyjYePhQ15obL\nVerrSwwrFQVkHNxfAo067xKEmjRS3FijT8of6Xk/C+rd2ZmvDEqCH6L2k2XS\n48jJw1xSgNzX4af2QW1fPTeMHpb8qwG8oVg5Z8s7QNTZ8UCDlo5de3vc2JhZ\nufVDkgHdaKGgeC0YSJ/EaCDd9EDqJe2Hoq9ABfF1jtXSFpz4VJRltHLPRfpA\nRnRn+Uu10PL0V4ORuCdoPI6SWf2WLMdfaOFnvZCNnbiEgIxyhtTwIrz0Hliz\nfJhW6z6RPw2efo1stIq9uNYxe+C0EnqbJg39s9eL4/P8kN10wZ0bksGiM0OZ\n0RyABkhFRr7xBsx5L7iomdV9380wHk9lt2UaZ/TxnX9w2VVHulZi9LmkgvQj\nnmusjx+b95I0V8EjvQBxR4M4vScyx28G2asyIEkvBVEW5qg95MynYCJqd2us\nY5MODodzFwthBDXQwuCauscvxfMwzaACkfRAhLqd+1LFdEUjx2l6M7IUQ4NJ\nEQPkNrn1eQLdZzqGX1IM1c1oSslNtB4L7gEUWKYlODh07gzFI3tx9fMYn0js\ng9bGqI9ioZ4HDFIBIGJ+lSiGtZMzlz1MlPOAW+7KmZTAGvR5prexQFmyRD9X\nIpU4\r\n=ZBJ4\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":"\n\n# Switches\n\n\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\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@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
\n
\n
\n
\n \n
\n
\n\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
\n
\n
\n
\n \n
\n
\n\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`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\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| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\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":"e3bfb78e98db35607ba75f333490d9693f14e844","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.20.2/node@v10.20.1+x64 (linux)","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/density":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2f052d824.0_1588972056489_0.5499579906780538","host":"s3://npm-registry-packages"},"_id":"@material/switch@7.0.0-canary.2f052d824.0","version":"7.0.0-canary.2f052d824.0"}