{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"496b3cf5354357eed5ce5d64983ca735571e6bad","tarball":"https://registry.npmjs.org/@material/select/-/select-0.39.0-0.tgz","fileCount":14,"integrity":"sha512-z/+PJOw2Xc4oddT1xiL5SIDkltkeNd6OIzCzi9Nbj59ryRJ6HWQJkp1Ny7/UJHxkfGTUF4cBElVASS5ByAdh8g==","signatures":[{"sig":"MEUCIH6o2cK/Xt6UGu8107Rc/4rkyxwYlElukr/HcMpMNZSWAiEA59unLLD5Xsz2K8ZEr66NdEjMLfZlw7k3M5Y3npwOSKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVdCRA9TVsSAnZWagAAGuUP/i2cUQ+T5Reh0XFJCwwv\n4+6fpKLHhmDpDe1wI1J0+EWcokjlrgxjecQTilwaWVEO3HGl8GSs6GSu2HuC\nTmwoOzeWyX02jsvXIshdsdA0mRQLgrIOrQCdkD7dSki4g94DDXhNWB+0OX+E\n+wR4lEVgbKUYJufzJ6YD5PxZLY0Plm3SrQSooWt5AKCcXQQD5bH4NwvzRVHs\nUrMhCfZvIltlhC8suILolLEGCC1PbW58g4DI4F9jfWqTpiT3CwGtkgEpruQU\n2EDK6gE5oRrfj9CRjErH2T0OyoVdaqj1FVHsdbPDfFmbHWS/67V2tiaSeUSH\ngudSIa0KCXO25FBCg+FvjGVwo7nd/2MtdGoani5PSQe1W5+RZI7IOvn4+gKJ\naJrIhdrFKOZaPUHjUGBj13m6sbFl/wIHtysVIYHlNru72uHmfKXosaiO8Ifv\nG6h4fIa/ziUc/Ya7Z4xRC9ZEAuqx3n2hHgv4/50HXzAZA8TrNKkAirsZ0CNO\nloMq2ObRS5dVtCYhsmNeRIHZLpdSWhTIXH/TJnSDuPQK8yWpYnShphfUaXe7\nuFk5w2FVM6OuniJpn5WdHymSkOIdm7umQ00f0yZor420vAFgvAuhkn6+da+L\nUlV3n9urYQxqa5hR9lUxe8yEJdUo0F258fY9IWbWCyei715Q9Gx6Ay8m0RVi\nNm0n\r\n=f1aT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/select","readme":"\n\n## Important - Default Style Deprecation Notice\n\nThe existing default select style will be changed in an upcoming release. The Material spec indicates that\nthe default style will be the filled variant (currently referred to as the box variant). This will become the\ndefault style. Continuing to add the `mdc-select--box` class to the select will result in no change.\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\n### Styles\n\n```scss\n@import \"@material/select/mdc-select\";\n```\n\n### JavaScript Instantiation\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## Variants\n\n### Select Box\n\nThe Select Box variant uses the same markup as the standard variant, with the addition of the `mdc-select--box`\nmodifier class on the root element.\n\n```html\n
\n \n \n
\n
\n```\n\n### Outlined Select\n\nThe Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the\n`mdc-select--outlined` modifier class on the root element.\n\n```html\n
\n \n \n
\n \n \n \n
\n
\n
\n```\n\n### Additional Information\n\n#### Select with pre-selected option\n\nWhen dealing with a select component that has a pre-selected value, include the `mdc-floating-label--float-above`\nmodifier class on the `mdc-floating-label` element, and add the `selected` attribute to the selected option.\nThis will ensure that the label moves out of the way of the select's value and prevents a Flash Of Unstyled Content\n(**FOUC**).\n\n```html\n
\n \n \n
\n
\n```\n\n#### Using the 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## Style Customization\n\n#### CSS Classes\n\n| Class | Description |\n| --- | --- |\n| `mdc-select` | Mandatory. |\n| `mdc-select--box` | Optional. Styles the select as a box select. |\n| `mdc-select--disabled` | Optional. Styles the select as disabled. This class should be applied to the root element when the `disabled` attribute is applied to the `` element. |\n\n### Sass Mixins\n\nMixins should be included in the context of a custom class applied to the component's root element, e.g. `.my-select`.\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`mdc-select-outline-corner-radius($color)` | Customizes the color of the notched outline when select is focused.\n\n> NOTE: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md).\n\n## `MDCSelect` API\n\nThe `MDCSelect` component API is modeled after a subset of the `HTMLSelectElement` functionality.\n\n| Property | 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 the result of a user action.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Select 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### `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| `hasClass(className: string) => boolean` | Returns true if the root element has the className in its classList. |\n| `activateBottomLine() => void` | Activates the bottom line component. |\n| `deactivateBottomLine() => void` | Deactivates the bottom line component. |\n| `getValue() => string` | Returns the value selected on the `select` element. |\n| `isRtl() => boolean` | Returns true if a parent of the root element is in RTL. |\n| `hasLabel() => boolean` | Returns true if the `select` has a label associated with it. |\n| `floatLabel(value: boolean) => void` | Floats or defloats label. |\n| `getLabelWidth() => number` | Returns the offsetWidth of the label element. |\n| `hasOutline() => boolean` | Returns true if the `select` has the notched outline element. |\n| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its \"notched state.\" |\n| `closeOutline() => void` | Switches the notched outline element to its closed state. |\n\n### `MDCSelectFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline. |\n| `updateDisabledStyle(disabled: boolean) => void` | Updates appearance based on disabled state. This must be called whenever the `disabled` state changes. |\n| `handleFocus() => void` | Handles a focus event on the `select` element. |\n| `handleBlur() => void` | Handles a blur event on the `select` element. |\n| `handleChange() => void` | Handles a change to the `select` element's value. This must be called both for `change` events and programmatic changes requested via the component API. |\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","select","multi select"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components web select (text field drop-down) 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/typography":"^0.39.0-0","@material/line-ripple":"^0.38.0","@material/floating-label":"^0.39.0-0","@material/notched-outline":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/select_0.39.0-0_1534432604930_0.09515439756399835","host":"s3://npm-registry-packages"},"_id":"@material/select@0.39.0-0","version":"0.39.0-0"}