{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508a270838e6f798b5c9083252e7bb1a365ca61e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.35.0.tgz","fileCount":14,"integrity":"sha512-WEqRsh9myI1R5MU0CUJJ/p6AsH0BpkR2iUzopcMsdFCC526A7sjP761qq9oBJ/m6OgBrIHJlj39rJKGGqtL+/w==","signatures":[{"sig":"MEQCIE9OL4wiF0sIq6Iolmq2HXjVlYcVzY8u9zuCoCSQToBQAiAitGdDx4gZ/ZAYs3bDGoODwQrdSfeXqex1NWHpiXXT+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDhCRA9TVsSAnZWagAAM7kQAKLToSmw4411K91s13eb\nzYMwpg2IRq67jgxn2t0qfyw13krtzjlKE3PwwNa3OJ4JvX3Cn6YaWGBC8rT9\noET+CVDaT5ecBKhhLHfubbYJ9jhgBgjDkZhK8uuLtSP2MiFd5FzY79Acxp8e\nSEtYiYMTnG+jL3T3hlVQ8LlimAQepnQdio533qDOYD9L7y7p/d3ImvpqUIBo\nmYY62KGJSn/hpiyDYpuSLX0dEg5s68d9973Ibh6u7jcJ41FfxRcQF8O27wYm\n6MYOwz3xZMr5Dm278+pAyG+cfMioOpwrc4s+jMFCJ5PH0fpJ5JYoqxMZfq54\nGGqFR4zEVONN8WLvfAzvNyXGoJz4Q7TaBkNwL+ODi4QdHuZD5TsOKaXoBPU8\n5kBLqAcCv4/IyXKchM+Z9X+uO4rjAKyE0aV9UjEZF3Uren/E0lSoKhAEn0dX\n96jaI3y91dOD0A/qlulPRot11UFLVmUqC559RcTXdTsupTxVX57DXA0VR9op\nZ8g1YEa4Xq7ufpIodnoy6QKkTiUAlxLvhR4jQJZuu/f7QdxJ9LZAcgXusNKK\nuNeZDDh7NUJQ6OLBdjQor+xH56kmNnCRYOl5eMLzfpIXhCmOqFg2uN9G2+lp\nkZV+5kt6Xdoqqmh4HmUMvs1iMsJcZgtdz8pC69D6vTbf37HemdWAKl+22UXz\nFuVn\r\n=+3Iy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/radio","readme":"<!--docs:\ntitle: \"Radio Buttons\"\nlayout: detail\nsection: components\niconId: radio_button\npath: /catalog/input-controls/radio-buttons/\n-->\n\n# Radio Buttons\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/radio.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/radios.png\" width=\"60\" alt=\"Radio buttons screenshot\">\n  </a>\n</div>-->\n\nThe MDC Radio Button component provides a radio button adhering to the [Material Design Specification](https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button).\nIt requires no Javascript out of the box, but can be enhanced with Javascript to provide better\ninteraction UX as well as a component-level API for state modification.\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/guidelines/components/selection-controls.html#selection-controls-radio-button\">Material Design guidelines: Selection Controls – Radio buttons</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/radio.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Usage\n\n```html\n<div class=\"mdc-radio\">\n  <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" checked>\n  <div class=\"mdc-radio__background\">\n    <div class=\"mdc-radio__outer-circle\"></div>\n    <div class=\"mdc-radio__inner-circle\"></div>\n  </div>\n</div>\n<label id=\"radio-1-label\" for=\"radio-1\">Radio 1</label>\n\n<div class=\"mdc-radio\">\n  <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-2\" name=\"radios\">\n  <div class=\"mdc-radio__background\">\n    <div class=\"mdc-radio__outer-circle\"></div>\n    <div class=\"mdc-radio__inner-circle\"></div>\n  </div>\n</div>\n<label id=\"radio-2-label\" for=\"radio-2\">Radio 2</label>\n```\n\n> TODO(TK): Talk about `mdc-form-field` here.\n\n#### Disabled Radios\n\n```html\n<div class=\"mdc-radio mdc-radio--disabled\">\n  <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" disabled>\n  <div class=\"mdc-radio__background\">\n    <div class=\"mdc-radio__outer-circle\"></div>\n    <div class=\"mdc-radio__inner-circle\"></div>\n  </div>\n</div>\n<label id=\"radio-1-label\" for=\"radio-1\">Disabled Radio 1</label>\n```\n\nNote that `mdc-radio--disabled` is necessary on the root element in order to avoid having the ripple\nelements intercept pointer events when using JS. When using the CSS-only variation, this is also\nnecessary to prevent hover states from activating.\n\n### Using the JS Component\n\nMDC Radio ships with Component / Foundation classes which provide enhanced interaction UX via\n[mdc-ripple](../mdc-ripple), as well as APIs for programmatically altering the radio's state.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCRadio, MDCRadioFoundation} from '@material/radio';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcRadio = require('mdc-radio');\nconst MDCRadio = mdcRadio.MDCRadio;\nconst MDCRadioFoundation = mdcRadio.MDCRadioFoundation;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-radio'], mdcRadio => {\n  const MDCRadio = mdcRadio.MDCRadio;\n  const MDCRadioFoundation = mdcRadio.MDCRadioFoundation;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCRadio = mdc.radio.MDCRadio;\nconst MDCRadioFoundation = mdc.radio.MDCRadioFoundation;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the radio, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.radio.MDCRadio.attachTo(document.querySelector('.mdc-radio'));\n```\n\n#### Manual Instantiation\n\nRadios can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\n```\n\n#### MDCRadio API\n\nSimilar to regular DOM elements, the `MDCRadio` functionality is exposed through accessor\nmethods.\n\n##### MDCRadio.checked\n\nBoolean. Proxies to the foundation's `isChecked`/`setChecked` methods when retrieved/set\nrespectively.\n\n##### MDCRadio.disabled\n\nBoolean. Proxies to the foundation's `isDisabled/setDisabled` methods when retrieved/set\nrespectively.\n\n##### MDCRadio.value\n\nString. Proxies to the foundation's `getValue/setValue` methods when retrieved/set\nrespectively.\n\n### Using the Foundation Class\n\nSince MDC Radio is primarily driven by its native control, the adapter API is extremely simple.\n\n| Method Signature | Description |\n| --- | --- |\n| `getNativeControl() => HTMLInputElement?` | Returns the native radio control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|\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\n\n#### The full foundation API\n\n##### MDCRadioFoundation.isChecked() => boolean\n\nReturns the value of `adapter.getNativeControl().checked`. Returns `false` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCRadioFoundation.setChecked(checked: boolean) => void\n\nSets the value of `adapter.getNativeControl().checked`. Does nothing if `getNativeControl()` does\nnot return an object.\n\n##### MDCRadioFoundation.isDisabled() => boolean\n\nReturns the value of `adapter.getNativeControl().disabled`. Returns `false` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCRadioFoundation.setDisabled(disabled: boolean) => void\n\nSets the value of `adapter.getNativeControl().disabled`. Also adds/removes the `mdc-radio--disabled`\nclass based whether or not `disabled` is true. Gracefully handles the absence of a return value of\n`getNativeControl()`.\n\n##### MDCRadioFoundation.getValue() => string\n\nReturns the value of `adapter.getNativeControl().value`. Returns `null` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCRadioFoundation.setValue(value: string) => void\n\nSets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does\nnot return an object.\n\n## Theming\n\nMDC Radios use the theme's secondary color by default for checked states.\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ radio buttons. It is not currently possible to customize the color of a _disabled_ radio button.\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio\n`mdc-radio-ink-color($color)` | Sets the ink color\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\nThe ripple effect for the Radio Button component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Radio references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-radio__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","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","radio"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio 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":"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.7.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/selection-control":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_0.35.0_1524523233163_0.20166656196440824","host":"s3://npm-registry-packages"},"_id":"@material/radio@0.35.0","version":"0.35.0"}