{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b2105c33f0dc687bcd4864985b3e7334cf66e8c","tarball":"https://registry.npmjs.org/@material/checkbox/-/checkbox-1.0.0-1.tgz","fileCount":31,"integrity":"sha512-I/yhgTWfrNRj2ZjyRtDOGnjrH8ZneP8WArVFLLph06TbWZZbtD1uJyVAk/+Vxv8/wiDlCs1e8/PfQmtv+6AHPA==","signatures":[{"sig":"MEUCIQDq8s32CGQxv9ML9Q68k4SKEUNcUxc2GLCE83YG4fKvugIgDfDhQAUMEFcRUnyXyP6S0m5ks6Vj8fkf3PicFO/BqB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXGCRA9TVsSAnZWagAAHP8P/A1LXvmGva0Qp0vywayP\niKRl1WYvnPRvW/z6lRw9YtkJL70pz69akV7IjIVgPJWfMg0EsF9K07FA4djj\n4hQsgIeH2c4lQ0jck0GNBgxR8v2ECb5YhqQNtcMzdM01Iraa/ztRtbNdNYF+\nIBPIlmARb61kCZJVoblmxHHn2hA8+R5h9JQJS47bFL6JLBRiytQy+Pfzm+D6\n0mW7GXGNxum0JRvOK+cQWbe81uXKPOe2lry5b2PVaUnVXfruE8Ccw+yOpH9E\ndVXz2b0AiOwst9B/o1T24NT1Vpyu/UmD0/77qRUnJstggA/KnjkOUKLuEn7Y\nJEBhWRd+drWwlwj9C8n/MsRPf3HRRdEYxPf7IFmu6Ne87z5b4bVaWICK2grb\n2yfnSWpzXBwbkdNQzkq+QIaEPTYz2uBCsLyzXMnb34YkaroBTi594K6R6qyr\n7JuKMMWPTAL0FixEkQ0k+W6P5IW/khnBX1XfdjpjZjmLASDk3rjY2ZP+K9Nd\nJAgY53RAC/YeHtSXmBKqX6wHsUWwFDkOs/Rp9PWHi81JcOxsnac/wvAmEfl9\n+Iez6LbAnn2/gRfACXQfw4/TzYp8OrX520kyYha2EsTD0Aq1oCpAjFRegddM\nKWBGKvo2lytHDhhXOIiNmDq8WRwTl/pNo4zxcu4/MQqmPJ5YR/vl2UGuu/q1\nJhsB\r\n=WJas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","name":"@material/checkbox","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"<!--docs:\ntitle: \"Checkboxes\"\nlayout: detail\nsection: components\nexcerpt: \"Checkboxes allow the user to select multiple options from a set.\"\niconId: selection_control\npath: /catalog/input-controls/checkboxes/\n-->\n\n# Checkboxes\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/checkbox\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/checkboxes.png\"\n    width=\"99\" alt=\"Checkbox screenshot\">\n  </a>\n</div>-->\n\nCheckboxes allow the user to select one or more items from a set.\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-checkboxes\">Material Design guidelines: Selection Controls – Checkbox</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/checkbox\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\"\n           class=\"mdc-checkbox__native-control\"\n           id=\"checkbox-1\"/>\n    <div class=\"mdc-checkbox__background\">\n      <svg class=\"mdc-checkbox__checkmark\"\n           viewBox=\"0 0 24 24\">\n        <path class=\"mdc-checkbox__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n      <div class=\"mdc-checkbox__mixedmark\"></div>\n    </div>\n  </div>\n  <label for=\"checkbox-1\">Checkbox 1</label>\n</div>\n```\n\n> **Note**: If you are using IE, you need to include a closing `</path>` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `<input>` element is sufficient.\n\n```html\n<div class=\"mdc-checkbox mdc-checkbox--disabled\">\n  <input type=\"checkbox\"\n         id=\"basic-disabled-checkbox\"\n         class=\"mdc-checkbox__native-control\"\n         disabled />\n  <div class=\"mdc-checkbox__background\">\n    <svg class=\"mdc-checkbox__checkmark\"\n         viewBox=\"0 0 24 24\">\n      <path class=\"mdc-checkbox__checkmark-path\"\n            fill=\"none\"\n            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n    </svg>\n    <div class=\"mdc-checkbox__mixedmark\"></div>\n  </div>\n</div>\n<label for=\"basic-disabled-checkbox\" id=\"basic-disabled-checkbox-label\">This is my disabled checkbox</label>\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the checkbox's checked state\n`indeterminate` | Boolean | Setter/getter for the checkbox's indeterminate state\n`disabled` | Boolean | Setter/getter for the checkbox's disabled state\n`value` | String | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox 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### `MDCCheckboxAdapter`\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| `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|\n| `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |\n| `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |\n| `isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state. |\n| `isChecked() => boolean` | Returns true if the component is checked. |\n| `hasNativeControl() => boolean` | Returns true if the input is present in the component. |\n| `setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled. |\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\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","checkbox"],"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 checkbox 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/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_1.0.0-1_1551742405501_0.8221444571587841","host":"s3://npm-registry-packages"},"_id":"@material/checkbox@1.0.0-1","version":"1.0.0-1"}