{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24e36ebc8648e5eeb8411ef2f15ff7a2be1356bf","tarball":"https://registry.npmjs.org/@material/select/-/select-0.35.0.tgz","fileCount":13,"integrity":"sha512-lg1GMYQbmpGFEEVqXmQIPe6DHbZsisf2HfL7QKjdJr1rQ4YFbALdhrb1ZNJePi1VLcBLyjoEROWRo2A4NySBTA==","signatures":[{"sig":"MEUCIQCUgAhbrjtM1a0VgbwydI1aU3sGlEtDx9im8m+IqNdF5wIgOpoYJts3GZ4kHEWbOhmhcvCBn2v/cx4hliLrdklQyt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDnCRA9TVsSAnZWagAAbKkP/2xdwRa2MqdyZl572J5e\n1vRuHjMZ0JtAejm1FTwGD1MN9CEG+4nZKUyequ14y4lu8141VYCOt/8dvcDo\nJ669ZAjntbHLJ9gnzCk+urrWde2kKbkI0vs/8RB+ml4P2p1T5ScssM8AXmL8\nktFAveSx7aDTjgAovyb6O3F0Jbkm8cNq6yo/mQkIupWTwVJqSWYvf2PfVJgx\nvck6bt+0GIDL5Dly7lIjPvKmdfdHoaxwibSMYga16TfQg3oYB6jKRDHZq84d\n05ebIVruz1336ot9UiCGSmdK0YBDczVSuQ9b0WnutiSJsjo7W/EnDjgyMFn5\naH1diop+mvgl64+KQttEPLGOk54u1y2gvmugkeMKlsbMbkWaLiQVyhTRzpzj\nwsSFvjKzjFT0fL612UMAtTaaDvkivmSEk34HP1iECzzZROqiNfougXW3XGs1\nSJhvfxTTXBvhmImUoSAQrq/sfncjUw2NGhTPsDTcjDzkUQXBusaOkPkyMv/E\nAE81wwmoyJwwdmfSRN1ZeUE9Chs4MtIiFn8m9q6zMsxL2cBXrLIDMni9X65p\nsj2MBWJttdvMo+E0ZK27dEb/b6+w0hOeS85FYWp9nnTvVTctBtQdWRRNB/FQ\npN/i7gNBbcvDKKNxJ4icD+CSeqXpQ1hW5NpUh2+MMlzjQu0txRqt1L8iiO1I\n0G9E\r\n=vFD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/select","readme":"\n\n# Select Menus\n\n\n\nMDC Select provides Material Design single-option select menus. It functions as a wrapper around the\nbrowser's native `\n \n \n \n \n \n \n
\n\n```\n\nThen with JS\n\n```js\nconst select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));\nselect.listen('change', () => {\n alert(`Selected option at index ${select.selectedIndex} with value \"${select.value}\"`);\n});\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n#### Select with pre-selected option\n\nWhen dealing with the select component that has pre-selected values, you'll want to ensure that you\nrender `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class and the selected\noption with the `selected` attribute. This will ensure that the label moves out\nof the way of the select's value and prevents a Flash Of Unstyled Content (**FOUC**).\n\n```html\n
\n \n \n
\n
\n```\n\n#### Select with floating label as the placeholder\n\nBy default, `` element.\n\n```html\n
\n \n \n
\n
\n```\n\n#### Disabled options\n\nSince MDC Select uses native `\n \n \n \n \n \n
\n\n```\n\n#### CSS Classes\n\n| Class | Description |\n| ------------------------ | ----------------------------------------------- |\n| `mdc-select` | Mandatory. |\n| `mdc-select--box` | Styles the select as a box select. |\n\n### Sass Mixins\n\nTo customize the colors of any part of the select, use the following mixins. We recommend you use\nthese mixins within CSS selectors like `.foo-select` to apply styling.\n\nMixin | Description\n--- | ---\n`mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select.\n`mdc-select-container-fill-color($color)` | Customizes the background color of the select.\n`mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state.\n`mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.\n`mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.\n`mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.\n`mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when select is hovered.\n\n> NOTE: To further customize label color please see the [floating label readme](./../mdc-floating-label/README.md).\n\n### MDC Select Component API\n\nThe MDC Select component API is modeled after a subset of the `HTMLSelectElement` functionality, and\nis outlined below.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `string` | The `value` of the currently selected option. |\n| `selectedIndex` | `number` | The index of the currently selected option. Set to -1 if no option is currently selected. Changing this property will update the select element. |\n| `disabled` | `boolean` | Whether or not the component is disabled. Settings this sets the disabled state on the component. |\n\n#### Events\n\nThe MDC Select JS component emits a `change` event when the selected option changes as\nthe result of a user action.\n\n### `MDCSelectAdapter`\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| `floatLabel(value: boolean) => void` | Floats or defloats label. |\n| `activateBottomLine() => void` | Activates the bottom line component. |\n| `deactivateBottomLine() => void` | Deactivates the bottom line component. |\n| `setDisabled(disabled: boolean) => void` | Sets the `disabled` property of the `` element. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` on the `` element. |\n| `setSelectedIndex(index: number) => void` | Sets the selected index of the `` element. |\n| `setValue(value: string) => void` | Sets the value of the `