{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e758456f918ba8c8875e0347680ed1a77a4f0696","tarball":"https://registry.npmjs.org/@material/select/-/select-3.0.0-alpha.0.tgz","fileCount":72,"integrity":"sha512-Y8/betmc+AQ3ZpnmorlTj8IO+VEmfd8Qww67u1lfkiUDwh06gKXFWXihHfVcxo9fTp0hvEAaxQRqlirAPtIkLg==","signatures":[{"sig":"MEYCIQDH1k8GTvcPS+oV16yHd1axOKmQhaI6hhBi6vXRpaqe4QIhAJzaBnTDD8p2pWzKkePfTOaOWh19poIlrhXI4xwUwjTB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2035121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHp8CRA9TVsSAnZWagAAnYsP/Av7mcd45Vl8SWSYFLU/\nLGfOFMuT32MWxUwG0mQZJVY7vbmF8ywB2i1xVa7O8PbBhAPw8W/R0Y/iImCJ\n/08K3aTsZg0CHdEBtLKwlA8Dc6Q2+19YdzFqpDWoli/EHpijzu3L3OP15lCc\nL4qGkUcOS/UTUo8lSnm0RYL+lZnBckcBmCEyIypobhr9GCNhUD9EdYSHLMLG\nT2wgCom62Po5JQmc7MDD/cYg6+kzH0xQpavE9CSs45eLq/XwYFBE2NxhT+Ua\nSYOOugSAhl3gY/pO/v9RCp6ZV7eLfCfrMlz1j/BBbWcXucFnUlMng39dsDbA\nIn1LqLsbxfxecifnOkO/SCaCzZ3YmpZgacFhYHFuR6p/OBRBOXX9Ww0v8kgf\nr6Wfcny82IbBshMQUsasORYlPHTxdJHFGU+77TGc/TfLN6zqxP0RV1reAAeM\n/7RVsQXD3KWaaVwv76TENThDFLOFwWpt5rxt1ckOfOt8nV7oI1wMuWz3y1EB\na18uAuACmYzEucdPBVfVnVxr6uAH1Qg8zvuJ9Px/5VuUIguho2dKXvQ+pFFv\nzmxLpfQUDOn73XH4bNmdGxxZ35NdD3fLMDe340ihQOHE5jUkl4K3H7tzf7/T\nUEKQH4ESwwY4V08TpKrtTceZZy4yibMMJVFu55Hvg9jeqfDiCnDG5F+2I4lR\nS3rn\r\n=ZwNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.select.js","name":"@material/select","types":"dist/mdc.select.d.ts","module":"index.js","readme":"\n\n# Select Menus\n\n\n\nMDC Select provides Material Design single-option select menus. It supports using the browser's native `` element. For information on using\nMDC Select with a MDC Menu, see the [Variants](#variants) section below.\n\n### HTML Structure\n\n```html\n
\n \n \n \n
\n
\n```\n\n### Styles\n\nFor the native select, you can simply include the `mdc-select` Sass file.\n\n```scss\n@import \"@material/select/mdc-select\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSelect} from '@material/select';\n\nconst select = new MDCSelect(document.querySelector('.mdc-select'));\n\nselect.listen('MDCSelect: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### Enhanced Select\n\nThe enhanced select uses an [`MDCMenu`](../mdc-menu) component instance to contain the list of options, but uses the\n`data-value` attribute instead of `value` to represent the options' values.\n\n> Note: The `data-value` attribute _must_ be present on each option.\n\nThe enhanced select requires that you set the `width` of the root element (containing the\n`mdc-select` class) as well as setting the width of the `mdc-select__menu` element to match. This is best done\nthrough the use of another class (e.g. `demo-width-class` in the example HTML and CSS below).\n\nIf you are using the enhanced select within an HTML form, you can include a hidden `` element under the root\n`mdc-select` element, and it will be synchronized when the value is updated via user interaction or programmatically.\n\n```html\n
\n \n \n
\n
\n \n
\n Pick a Food Group\n
\n
\n```\n\nWhen using the enhanced select, you will also need to load the Menu and List components' styles.\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/mdc-menu-surface\";\n@import \"@material/menu/mdc-menu\";\n@import \"@material/select/mdc-select\";\n\n.demo-width-class {\n width: 400px;\n}\n```\n\n#### Usability Notes\n\nThe enhanced select provides a look and feel more consistent with the rest of Material Design, but there are some\ntrade-offs to consider when choosing it over the native `\n \n
Vegetables
\n
\n \n
\n Pick a Food Group\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. All other elements for each type of select remain the\nsame.\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\nThe enhanced select works in a similar way, but uses the `mdc-list-item--selected` class to set the selected item. The\nenhanced select also needs the text from the selected element copied to the `mdc-select__selected-text` element.\n\n```html\n
\n \n \n
Vegetables
\n
\n \n
\n Pick a Food Group\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\nFor the enhanced select, add the `mdc-select--disabled` class to the `mdc-select` element, and add the `disabled`\nattribute to the hidden `` element if present.\n\n```html\n
\n \n \n
\n
\n ...\n
\n Pick a Food Group\n
\n
\n```\n\n#### Disabled options\n\nFor the native `select`, simply add the `disabled` attribute to individual options to disable them.\n\n```html\n
\n \n \n
\n
\n```\n\nFor the enhanced select, you should add the `mdc-list-item--disabled` class to list items that are disabled. Unlike the\nnative select, disabled list items are removed from the list items index, and are ignored entirely. You cannot\nprogrammatically select a disabled list item in the enhanced select.\n\n```html\n
\n \n \n
Vegetables
\n
\n \n
\n Pick a Food Group\n
\n
\n```\n\n### Select with Helper Text\n\nThe helper text provides supplemental information and/or validation messages to users. It appears when the select\nelement is focused and disappears on blur by default, or it can be persistent.\nSee [here](helper-text/) for more information on using helper text.\n\n### Select with Leading Icons\n\nLeading icons can be added within the default or outlined variant of MDC Select as visual indicators as\nwell as interaction targets. See [here](icon/) for more information on using icons.\n\n## Style Customization\n\n#### CSS Classes\n\n| Class | Description |\n| --- | --- |\n| `mdc-select` | Mandatory. |\n| `mdc-select__menu` | Mandatory when using the enhanced select. This class should be placed on the `mdc-menu` element within the `mdc-select` element. |\n| `mdc-select__dropdown-icon` | Mandatory. Should be placed on an `i` element within the `mdc-select` element. Used for the dropdown arrow svg and animation.\n| `mdc-select__icon` | Optional. Should be placed on an `i` or `svg` element within the `mdc-select` element. Used for the leading icon.\n| `mdc-select--activated` | Optional. Styles the activated state of select. This class will be added automatically when menu is opened.\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| `mdc-select__selected-text` | Mandatory for the enhanced select. This class should be placed on a `div` within the `mdc-select` element. |\n| `mdc-select--with-leading-icon` | Styles the select as a select with a leading icon. |\n\n> Note: To further customize the [MDCMenu](./../mdc-menu) or the [MDCList](./../mdc-list) component contained within the select, please refer to their respective documentation.\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-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed select variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.\n`mdc-select-outline-color($color)` | Customizes the color of the notched outline.\n`mdc-select-outline-shape-radius($radius, $rtl-reflexive)` | Sets the border radius of of the outlined select variant. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-select-focused-outline-color($color)` | Customizes the color of the outline of the select when focused.\n`mdc-select-hover-outline-color($color)` | Customizes the color of the outline when the select is hovered.\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\nProperty | Type | Description\n--- | --- | ---\n`value` | `string` | The `value`/`data-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. Setting this sets the disabled state on the component.\n`valid` | `boolean` | Whether or not the component is in a valid state. Setting this updates styles on the component, but does not affect the native validity state.\n`required` | `boolean` | Whether or not the component is required. Setting this updates the `required` or `aria-required` attribute on the component and enables validation.\n`leadingIconAriaLabel` | `string` (write-only) | Proxies to the foundation's `setLeadingIconAriaLabel` method.\n`leadingIconContent` | `string` (write-only) | Proxies to the foundation's `setLeadingIconContent` method.\n`helperTextContent` | `string` (write-only)| Proxies to the foundation's `setHelperTextContent` method when set.\n`ripple` | `MDCRipple` | Ripple instance attached to outlined select variant, or `null` for all other variants.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCSelect:change` | `{value: string, index: number}` | Used to indicate when an element has been selected. This event also includes the value of the item and the index.\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 `option` on the `select` element and the `data-value` of the selected list item on the enhanced select. |\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) => void` | Switches the notched outline element to its \"notched state.\" |\n| `closeOutline() => void` | Switches the notched outline element to its closed state. |\n| `openMenu() => void` | Causes the menu element in the enhanced select to open. |\n| `closeMenu() => void` | Causes the menu element in the enhanced select to close. |\n| `setValue(value: string) => void` | Sets the value of the select or text content of the selected-text element. |\n| `isMenuOpen() => boolean` | Returns true if the menu is currently opened in the enhanced select. |\n| `setSelectedIndex(index: number) => void` | Selects the option or list item at the specified index. |\n| `setDisabled(isDisabled: boolean) => void` | Enables or disables the native or enhanced select. |\n| `setRippleCenter(normalizedX: number) => void` | Sets the line ripple center to the provided normalizedX value. |\n| `notifyChange(value: string) => void` | Emits the `MDCSelect:change` event when an element is selected. |\n| `checkValidity() => boolean` | Returns whether the component is currently valid, using the native select's `checkValidity` or equivalent logic for the enhanced select. |\n| `setValid(isValid: boolean) => void` | Adds or removes invalid styles. |\n\n### `MDCSelectFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline. |\n| `setDisabled(isDisabled: 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| `handleClick(normalizedX: number) => void` | Sets the line ripple center to the normalizedX for the line ripple. |\n| `handleMenuOpened() => void` | Handles menu or menu surface opened event.\n| `handleMenuClosed() => void` | Handles menu or menu surface closed event.\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| `handleKeydown(event: KeyboardEvent) => void` | Handles opening the menu (enhanced select) when the `mdc-select__selected-text` element is focused and the user presses the `Enter` or `Space` key. |\n| `setSelectedIndex(index: number) => void` | Handles setting the `mdc-select__selected-text` element and closing the menu (enhanced select only). Also causes the label to float and outline to notch if needed. |\n| `setValue(value: string) => void` | Handles setting the value through the adapter and causes the label to float and outline to notch if needed. |\n| `getValue() => string` | Handles getting the value through the adapter. |\n| `setValid(isValid: boolean) => void` | Sets the valid state through the adapter. |\n| `isValid() => boolean` | Gets the valid state through the adapter's `checkValidity` API. |\n| `layout() => void` | Handles determining if the notched outline should be notched. |\n| `setLeadingIconAriaLabel(label: string) => void` | Sets the aria label of the leading icon. |\n| `setLeadingIconContent(content: string) => void` | Sets the text content of the leading icon. |\n| `setHelperTextContent(content: string) => void` | Sets the content of the helper text. |\n\n`MDCSelectFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCSelectFoundation`.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@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":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","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"}],"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/menu":"^3.0.0-alpha.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.0","@material/line-ripple":"^3.0.0-alpha.0","@material/menu-surface":"^3.0.0-alpha.0","@material/floating-label":"^3.0.0-alpha.0","@material/notched-outline":"^3.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/select_3.0.0-alpha.0_1560312443926_0.5661456763979307","host":"s3://npm-registry-packages"},"_id":"@material/select@3.0.0-alpha.0","version":"3.0.0-alpha.0"}